[CCUBE-1617][MAHI]Update styling and typings and use divider for foot…

…er and update illustrationscheme to use v3 resource scheme
LifeSG · Nov 13, 2024 · 4f37189 · 4f37189
1 parent b3bd0ba
commit 4f37189
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 74 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,16 +163,15 @@ 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;
     }
 
     svg {
         color: ${Colour.icon};
-        vertical-align: sub;
+        vertical-align: top;
     }
 
     &:hover {

diff --git 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 = <T,>({
     children,
@@ -129,15 +130,21 @@ export const Footer = <T,>({
 
         if (component) {
             return (
-                <TopSection type="grid" stretch={isStretch}>
-                    {component}
-                </TopSection>
+                <>
+                    <TopSection type="grid" stretch={isStretch}>
+                        {component}
+                    </TopSection>
+                    <Divider
+                        style={{
+                            width: "100%",
+                        }}
+                    />
+                </>
             );
         }
 
         return null;
     };
-
     return (
         <BaseFooter {...otherProps}>
             {renderTopSection()}

diff --git a/src/navbar/navbar-items.styles.tsx b/src/navbar/navbar-items.styles.tsx
@@ -68,7 +68,7 @@ export const LinkItem = styled.li<ItemStyleProps>`
     }
 `;
 
-export const Link = styled(Typography.LinkSM)<StyleProps>`
+export const Link = styled(Typography.LinkMD)<StyleProps>`
     display: flex;
     position: relative;
     align-items: center;
@@ -78,19 +78,19 @@ export const Link = styled(Typography.LinkSM)<StyleProps>`
     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,22 +105,25 @@ export const LinkLabel = styled.div`
     white-space: pre-wrap;
 `;
 
-export const LinkIndicator = styled.div`
+export const LinkIndicator = styled.div<StyleProps>`
     position: absolute;
     bottom: 0;
     height: 0.25rem;
     left: 0.5rem;
     right: 0.5rem;
     background-color: ${Colour["border-selected"]};
 
+    :hover {
+        ${(props) => props.$selected && Colour["border-selected-hover"]};
+    }
+
     ${MediaQuery.MaxWidth.lg} {
         left: 0;
         right: unset;
         top: 0;
         bottom: 0;
         height: 100%;
         width: 0.25rem;
-        background-color: ${Colour["border-selected"]};
     }
 `;
 
@@ -136,11 +139,14 @@ export const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`
     margin: auto 0.25rem auto 0;
 `;
 
-export const ChevronIcon = styled(ChevronUpIcon)`
+export const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`
     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
@@ -136,6 +136,7 @@ export const NavbarItems = <T,>({
                                 {selected && (
                                     <LinkIndicator
                                         data-testid={`${testId}-indicator`}
+                                        $selected={selected}
                                     />
                                 )}
                                 {mobile && item.subMenu && (
@@ -149,7 +150,7 @@ export const NavbarItems = <T,>({
                                                 expanded ? "Collapse" : "Expand"
                                             }
                                         >
-                                            <ChevronIcon />
+                                            <ChevronIcon $selected={selected} />
                                         </ExpandCollapseButton>
                                     </LinkIconContainer>
                                 )}

diff --git 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
@@ -19,13 +19,12 @@ describe("ErrorDisplay", () => {
 
     it("should render the component", () => {
         render(
-            <ThemeProvider theme={LifeSGTheme as any}>
+            <ThemeProvider theme={LifeSGTheme}>
                 <ErrorDisplay type="404" />
             </ThemeProvider>
         );
 
         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(
-            <ThemeProvider theme={LifeSGTheme as any}>
+            <ThemeProvider theme={LifeSGTheme}>
                 <ErrorDisplay type="404" actionButton={actionButton} />
             </ThemeProvider>
         );
@@ -50,7 +49,7 @@ describe("ErrorDisplay", () => {
 
     it("should be able to render custom title if specified", () => {
         render(
-            <ThemeProvider theme={LifeSGTheme as any}>
+            <ThemeProvider theme={LifeSGTheme}>
                 <ErrorDisplay type="404" title={CUSTOM_TITLE} />
             </ThemeProvider>
         );
@@ -62,7 +61,7 @@ describe("ErrorDisplay", () => {
 
     it("should not render any text content if the imageOnly prop is specified", () => {
         render(
-            <ThemeProvider theme={LifeSGTheme as any}>
+            <ThemeProvider theme={LifeSGTheme}>
                 <ErrorDisplay
                     type="404"
                     title={CUSTOM_TITLE}
@@ -91,7 +90,7 @@ describe("ErrorDisplay", () => {
 
         it("should be able to render JSX.Element", () => {
             render(
-                <ThemeProvider theme={LifeSGTheme as any}>
+                <ThemeProvider theme={LifeSGTheme}>
                     <ErrorDisplay
                         type="404"
                         description={<div>{CUSTOM_DESCRIPTION}</div>}
@@ -131,7 +130,7 @@ describe("ErrorDisplay", () => {
             "should render %s error correctly",
             (type: ErrorDisplayType) => {
                 render(
-                    <ThemeProvider theme={LifeSGTheme as any}>
+                    <ThemeProvider theme={LifeSGTheme}>
                         <ErrorDisplay type={type} />
                     </ThemeProvider>
                 );
@@ -157,7 +156,7 @@ describe("ErrorDisplay", () => {
             "should render bookingsg %s error correctly",
             (type: ErrorDisplayType) => {
                 render(
-                    <ThemeProvider theme={BookingSGTheme as any}>
+                    <ThemeProvider theme={BookingSGTheme}>
                         <ErrorDisplay type={type} />
                     </ThemeProvider>
                 );
@@ -184,8 +183,8 @@ describe("ErrorDisplay", () => {
 
         test("should use the specified illustration based on the illustrationScheme prop", () => {
             render(
-                <ThemeProvider theme={BookingSGTheme as any}>
-                    <ErrorDisplay type={"400"} illustrationScheme="base" />
+                <ThemeProvider theme={BookingSGTheme}>
+                    <ErrorDisplay type={"400"} illustrationScheme="lifesg" />
                 </ThemeProvider>
             );
 
@@ -215,7 +214,7 @@ describe("ErrorDisplay", () => {
             const additionalProps = { dateString: "01/01/2023" };
 
             render(
-                <ThemeProvider theme={LifeSGTheme as any}>
+                <ThemeProvider theme={LifeSGTheme}>
                     <ErrorDisplay
                         type={type}
                         additionalProps={additionalProps}

diff --git a/tests/layout/layout-coldiv.spec.tsx b/tests/layout/layout-coldiv.spec.tsx
@@ -2,23 +2,11 @@ import { render } from "@testing-library/react";
 import "jest-styled-components";
 import { ThemeProvider } from "styled-components";
 import { ColDiv } from "../../src/layout/col-div";
-import { ThemeSpec } from "../../src/theme/types";
-
-const mockTheme: ThemeSpec = {
-    colourScheme: "lifesg",
-    fontScheme: "lifesg",
-    motionScheme: "lifesg",
-    borderScheme: "lifesg",
-    spacingScheme: "lifesg",
-    radiusScheme: "lifesg",
-    breakpointScheme: "lifesg",
-    resourceScheme: "lifesg",
-};
-
+import { MOCK_THEME } from "./mock-theme-data";
 describe("ColDiv Component", () => {
     it("should render with default settings (spanning 1 column)", () => {
         const { container } = render(
-            <ThemeProvider theme={mockTheme}>
+            <ThemeProvider theme={MOCK_THEME}>
                 <ColDiv>Default ColDiv</ColDiv>
             </ThemeProvider>
         );
@@ -31,7 +19,7 @@ describe("ColDiv Component", () => {
 
     it("should correctly apply xxs column span", () => {
         const { container } = render(
-            <ThemeProvider theme={mockTheme}>
+            <ThemeProvider theme={MOCK_THEME}>
                 <ColDiv xxsCols={2}>XXS ColDiv</ColDiv>
             </ThemeProvider>
         );
@@ -47,7 +35,7 @@ describe("ColDiv Component", () => {
 
     it("should correctly apply xs column span", () => {
         const { container } = render(
-            <ThemeProvider theme={mockTheme}>
+            <ThemeProvider theme={MOCK_THEME}>
                 <ColDiv xsCols={3}>XS ColDiv</ColDiv>
             </ThemeProvider>
         );
@@ -63,7 +51,7 @@ describe("ColDiv Component", () => {
 
     it("should correctly apply sm column span", () => {
         const { container } = render(
-            <ThemeProvider theme={mockTheme}>
+            <ThemeProvider theme={MOCK_THEME}>
                 <ColDiv smCols={4}>SM ColDiv</ColDiv>
             </ThemeProvider>
         );
@@ -79,7 +67,7 @@ describe("ColDiv Component", () => {
 
     it("should correctly apply start and span for xxs", () => {
         const { container } = render(
-            <ThemeProvider theme={mockTheme}>
+            <ThemeProvider theme={MOCK_THEME}>
                 <ColDiv xxsCols={[1, 3]}>XXS Start and Span ColDiv</ColDiv>
             </ThemeProvider>
         );
@@ -95,7 +83,7 @@ describe("ColDiv Component", () => {
 
     it("should correctly apply start and span for lg", () => {
         const { container } = render(
-            <ThemeProvider theme={mockTheme}>
+            <ThemeProvider theme={MOCK_THEME}>
                 <ColDiv lgCols={[2, 6]}>LG Start and Span ColDiv</ColDiv>
             </ThemeProvider>
         );
-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
     `;
@@ Expand Down @@