From 4f37189abc6709161a1b380f3782f4d97e682861 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Wed, 13 Nov 2024 13:48:05 +0800 Subject: [PATCH] [CCUBE-1617][MAHI]Update styling and typings and use divider for footer and update illustrationscheme to use v3 resource scheme --- src/error-display/error-display.style.tsx | 3 +-- src/error-display/error-display.tsx | 2 +- src/error-display/types.ts | 4 ++-- src/footer/footer-download-app.style.tsx | 2 +- src/footer/footer.style.tsx | 8 +++---- src/footer/footer.tsx | 15 ++++++++---- src/navbar/navbar-items.styles.tsx | 28 +++++++++++++--------- src/navbar/navbar-items.tsx | 3 ++- src/timetable/types.ts | 4 ++-- tests/error-display/error-display.spec.tsx | 21 ++++++++-------- tests/layout/layout-coldiv.spec.tsx | 26 ++++++-------------- tests/layout/mock-theme-data.ts | 12 ++++++++++ tests/typography/mock-theme-data.ts | 12 ++++++++++ tests/typography/typography.spec.tsx | 19 ++++----------- 14 files changed, 85 insertions(+), 74 deletions(-) create mode 100644 tests/layout/mock-theme-data.ts create mode 100644 tests/typography/mock-theme-data.ts diff --git a/src/error-display/error-display.style.tsx b/src/error-display/error-display.style.tsx index 953a7c448..f766d743d 100644 --- a/src/error-display/error-display.style.tsx +++ b/src/error-display/error-display.style.tsx @@ -1,7 +1,7 @@ import styled from "styled-components"; import { applyHtmlContentStyle } from "../shared/html-content/html-content"; import { Button } from "../button"; -import { Colour, Font, MediaQuery } from "../theme"; +import { Colour, MediaQuery } from "../theme"; import { Typography } from "../typography"; export const Container = styled.div` @@ -45,7 +45,6 @@ export const Title = styled(Typography.HeaderMD)` `; export const DescriptionContainer = styled.div` - ${Font["body-baseline-regular"]} // Follow styling of Text.Body color: ${Colour.text}; text-align: center; diff --git a/src/error-display/error-display.tsx b/src/error-display/error-display.tsx index 24bda8c17..ac1b3b501 100644 --- a/src/error-display/error-display.tsx +++ b/src/error-display/error-display.tsx @@ -33,7 +33,7 @@ export const ErrorDisplay = ({ const theme = useTheme(); const defaultAssets = getErrorDisplayData( type, - illustrationScheme || ((theme || LifeSGTheme) as any).resourceScheme + illustrationScheme || (theme || LifeSGTheme).resourceScheme ); const testId = otherProps["data-testid"] || "error-display"; diff --git a/src/error-display/types.ts b/src/error-display/types.ts index 24051a367..039bdbe95 100644 --- a/src/error-display/types.ts +++ b/src/error-display/types.ts @@ -1,5 +1,5 @@ import { ButtonProps } from "../button"; -import { V2_ResourceScheme } from "../v2_theme"; +import { ResourceScheme } from "../theme/types"; export type ErrorDisplayType = | "400" @@ -46,7 +46,7 @@ export interface ErrorDisplayAttributes { /** Specifies if only the image is rendered */ imageOnly?: boolean | undefined; /** Use specific resource scheme instead of theme resource scheme */ - illustrationScheme?: V2_ResourceScheme | undefined; + illustrationScheme?: ResourceScheme | undefined; } export interface ErrorDisplayProps diff --git a/src/footer/footer-download-app.style.tsx b/src/footer/footer-download-app.style.tsx index fc31e873c..47e156c31 100644 --- a/src/footer/footer-download-app.style.tsx +++ b/src/footer/footer-download-app.style.tsx @@ -13,7 +13,7 @@ export const Wrapper = styled.div` } `; -export const Label = styled(Typography.BodyMD).attrs({ as: "p" })` +export const Label = styled(Typography.BodyMD)` margin-bottom: 1rem; `; diff --git a/src/footer/footer.style.tsx b/src/footer/footer.style.tsx index 290915dbf..8f53eb5c4 100644 --- a/src/footer/footer.style.tsx +++ b/src/footer/footer.style.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Colour, Font, MediaQuery } from "../theme"; +import { Colour, MediaQuery } from "../theme"; import { Typography } from "../typography"; import { Layout } from "../layout"; @@ -21,7 +21,6 @@ export const StyledFooterLink = styled(Typography.LinkSM)` export const TopSection = styled(Layout.Content)` padding: 4rem 0; - border-bottom: 1px solid ${Colour.border}; ${MediaQuery.MaxWidth.lg} { padding: 2rem 0; @@ -164,8 +163,7 @@ export const CopyrightSection = styled(BottomSectionContent)` } `; -export const DisclaimerTextLink = styled(Typography.LinkSM)` - ${Font["body-xs-regular"]} +export const DisclaimerTextLink = styled(Typography.LinkXS)` color: ${Colour.text}; &:not(:last-child) { margin-right: 1.5rem; @@ -173,7 +171,7 @@ export const DisclaimerTextLink = styled(Typography.LinkSM)` svg { color: ${Colour.icon}; - vertical-align: sub; + vertical-align: top; } &:hover { diff --git a/src/footer/footer.tsx b/src/footer/footer.tsx index 6084244bb..88a508de0 100644 --- a/src/footer/footer.tsx +++ b/src/footer/footer.tsx @@ -17,6 +17,7 @@ import { } from "./footer.style"; import { FooterLinkProps, FooterProps } from "./types"; import { useTheme } from "styled-components"; +import { Divider } from "../divider"; export const Footer = ({ children, @@ -129,15 +130,21 @@ export const Footer = ({ if (component) { return ( - - {component} - + <> + + {component} + + + ); } return null; }; - return ( {renderTopSection()} diff --git a/src/navbar/navbar-items.styles.tsx b/src/navbar/navbar-items.styles.tsx index 85e69a609..e98bb5e7f 100644 --- a/src/navbar/navbar-items.styles.tsx +++ b/src/navbar/navbar-items.styles.tsx @@ -68,7 +68,7 @@ export const LinkItem = styled.li` } `; -export const Link = styled(Typography.LinkSM)` +export const Link = styled(Typography.LinkMD)` display: flex; position: relative; align-items: center; @@ -78,19 +78,19 @@ export const Link = styled(Typography.LinkSM)` padding: 0 0.5rem; :active, - :hover :focus { - color: ${Colour["text-selected-hover"]}; + :focus, + :hover { + color: ${(props) => + props.$selected + ? Colour["text-selected-hover"] + : Colour["text-hover"]}; } ${MediaQuery.MaxWidth.lg} { - color: ${Colour.text}; width: 100%; padding: 0.5rem 1rem; text-align: left; align-items: flex-start; - :hover { - color: ${Colour["text-selected-hover"]}; - } } `; @@ -105,7 +105,7 @@ export const LinkLabel = styled.div` white-space: pre-wrap; `; -export const LinkIndicator = styled.div` +export const LinkIndicator = styled.div` position: absolute; bottom: 0; height: 0.25rem; @@ -113,6 +113,10 @@ export const LinkIndicator = styled.div` right: 0.5rem; background-color: ${Colour["border-selected"]}; + :hover { + ${(props) => props.$selected && Colour["border-selected-hover"]}; + } + ${MediaQuery.MaxWidth.lg} { left: 0; right: unset; @@ -120,7 +124,6 @@ export const LinkIndicator = styled.div` bottom: 0; height: 100%; width: 0.25rem; - background-color: ${Colour["border-selected"]}; } `; @@ -136,11 +139,14 @@ export const ExpandCollapseButton = styled(ClickableIcon)` margin: auto 0.25rem auto 0; `; -export const ChevronIcon = styled(ChevronUpIcon)` +export const ChevronIcon = styled(ChevronUpIcon)` height: 1.25rem; width: 1.25rem; color: ${Colour.icon}; :hover { - color: ${Colour["icon-selected-hover"]}; + ${(props) => + props.$selected + ? Colour["icon-selected-hover"] + : Colour["icon-hover"]}; } `; diff --git a/src/navbar/navbar-items.tsx b/src/navbar/navbar-items.tsx index 25bb427a2..7e4cfc50d 100644 --- a/src/navbar/navbar-items.tsx +++ b/src/navbar/navbar-items.tsx @@ -136,6 +136,7 @@ export const NavbarItems = ({ {selected && ( )} {mobile && item.subMenu && ( @@ -149,7 +150,7 @@ export const NavbarItems = ({ expanded ? "Collapse" : "Expand" } > - + )} diff --git a/src/timetable/types.ts b/src/timetable/types.ts index 18350710d..732bb976e 100644 --- a/src/timetable/types.ts +++ b/src/timetable/types.ts @@ -1,11 +1,11 @@ import { PopoverV2TriggerType } from "../popover-v2"; -import { V2_ResourceScheme } from "../v2_theme"; +import { ResourceScheme } from "../theme/types"; export type TimeTableCellType = "filled" | "blocked" | "default" | "disabled"; interface EmptyContentProps { description: string; - illustrationScheme: V2_ResourceScheme; + illustrationScheme: ResourceScheme; } export interface TimeTableRowData { diff --git a/tests/error-display/error-display.spec.tsx b/tests/error-display/error-display.spec.tsx index e059e688e..b027e0468 100644 --- a/tests/error-display/error-display.spec.tsx +++ b/tests/error-display/error-display.spec.tsx @@ -19,13 +19,12 @@ describe("ErrorDisplay", () => { it("should render the component", () => { render( - + ); const title = getErrorDisplayData("404", "lifesg").title; - console.log("THIS is title test: ", title); expect(screen.getByRole("heading", { level: 4, name: title })); }); @@ -38,7 +37,7 @@ describe("ErrorDisplay", () => { }; render( - + ); @@ -50,7 +49,7 @@ describe("ErrorDisplay", () => { it("should be able to render custom title if specified", () => { render( - + ); @@ -62,7 +61,7 @@ describe("ErrorDisplay", () => { it("should not render any text content if the imageOnly prop is specified", () => { render( - + { it("should be able to render JSX.Element", () => { render( - + {CUSTOM_DESCRIPTION}} @@ -131,7 +130,7 @@ describe("ErrorDisplay", () => { "should render %s error correctly", (type: ErrorDisplayType) => { render( - + ); @@ -157,7 +156,7 @@ describe("ErrorDisplay", () => { "should render bookingsg %s error correctly", (type: ErrorDisplayType) => { render( - + ); @@ -184,8 +183,8 @@ describe("ErrorDisplay", () => { test("should use the specified illustration based on the illustrationScheme prop", () => { render( - - + + ); @@ -215,7 +214,7 @@ describe("ErrorDisplay", () => { const additionalProps = { dateString: "01/01/2023" }; render( - + { it("should render with default settings (spanning 1 column)", () => { const { container } = render( - + Default ColDiv ); @@ -31,7 +19,7 @@ describe("ColDiv Component", () => { it("should correctly apply xxs column span", () => { const { container } = render( - + XXS ColDiv ); @@ -47,7 +35,7 @@ describe("ColDiv Component", () => { it("should correctly apply xs column span", () => { const { container } = render( - + XS ColDiv ); @@ -63,7 +51,7 @@ describe("ColDiv Component", () => { it("should correctly apply sm column span", () => { const { container } = render( - + SM ColDiv ); @@ -79,7 +67,7 @@ describe("ColDiv Component", () => { it("should correctly apply start and span for xxs", () => { const { container } = render( - + XXS Start and Span ColDiv ); @@ -95,7 +83,7 @@ describe("ColDiv Component", () => { it("should correctly apply start and span for lg", () => { const { container } = render( - + LG Start and Span ColDiv ); diff --git a/tests/layout/mock-theme-data.ts b/tests/layout/mock-theme-data.ts new file mode 100644 index 000000000..c229f6ad2 --- /dev/null +++ b/tests/layout/mock-theme-data.ts @@ -0,0 +1,12 @@ +import { ThemeSpec } from "../../src/theme/types"; + +export const MOCK_THEME: ThemeSpec = { + colourScheme: "lifesg", + fontScheme: "lifesg", + motionScheme: "lifesg", + borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", + breakpointScheme: "lifesg", + resourceScheme: "lifesg", +}; diff --git a/tests/typography/mock-theme-data.ts b/tests/typography/mock-theme-data.ts new file mode 100644 index 000000000..c229f6ad2 --- /dev/null +++ b/tests/typography/mock-theme-data.ts @@ -0,0 +1,12 @@ +import { ThemeSpec } from "../../src/theme/types"; + +export const MOCK_THEME: ThemeSpec = { + colourScheme: "lifesg", + fontScheme: "lifesg", + motionScheme: "lifesg", + borderScheme: "lifesg", + spacingScheme: "lifesg", + radiusScheme: "lifesg", + breakpointScheme: "lifesg", + resourceScheme: "lifesg", +}; diff --git a/tests/typography/typography.spec.tsx b/tests/typography/typography.spec.tsx index 179f53f59..de0dbf03e 100644 --- a/tests/typography/typography.spec.tsx +++ b/tests/typography/typography.spec.tsx @@ -2,25 +2,14 @@ import React from "react"; import { render } from "@testing-library/react"; import "jest-styled-components"; import { Typography } from "../../src/typography/typography"; -import { ThemeSpec } from "../../src/theme/types"; import { ThemeProvider } from "styled-components"; +import { MOCK_THEME } from "./mock-theme-data"; describe("Typography Components", () => { - const mockTheme: ThemeSpec = { - colourScheme: "lifesg", - fontScheme: "lifesg", - motionScheme: "lifesg", - borderScheme: "lifesg", - spacingScheme: "lifesg", - radiusScheme: "lifesg", - breakpointScheme: "lifesg", - resourceScheme: "lifesg", - }; - describe("Body Text", () => { it("renders BodyMD with correct text", () => { const { getByText } = render( - + This is medium body text @@ -34,7 +23,7 @@ describe("Typography Components", () => { describe("Link Components", () => { it("renders external LinkSM with external icon", () => { const { getByText, container } = render( - + External Small Link @@ -51,7 +40,7 @@ describe("Typography Components", () => { describe("Header Components", () => { it("renders HeaderXXL with correct text", () => { const { getByText } = render( - + Hello World