Add default logo and default disclaimer links for navbar and footer

src/footer/footer-disclaimer-links-data.tsx

@@ -0,0 +1,70 @@
+import { ResourceScheme } from "../theme";
+import { InternalDisclaimerLinks } from "./footer-helper";
+
+const BaseDisclaimerLinks: InternalDisclaimerLinks = {
+    privacy: {
+        href: "https://www.life.gov.sg/privacy-statement",
+        target: "_blank",
+        rel: "noopener",
+    },
+    termsOfUse: {
+        href: "https://www.life.gov.sg/terms-of-use",
+        target: "_blank",
+        rel: "noopener",
+    },
+    reportVulnerability: {
+        href: "https://tech.gov.sg/report_vulnerability",
+        target: "_blank",
+        rel: "noopener",
+        external: true,
+    },
+};
+
+const BookingSgDisclaimerLinks: InternalDisclaimerLinks = {
+    privacy: {
+        href: "https://assets.life.gov.sg/bookingsg/BSG_Privacy_Policy.pdf",
+        target: "_blank",
+        rel: "noopener",
+    },
+    termsOfUse: {
+        href: "https://assets.life.gov.sg/bookingsg/BSG_Terms_of_Use.pdf",
+        target: "_blank",
+        rel: "noopener",
+    },
+    reportVulnerability: {
+        href: "https://tech.gov.sg/report_vulnerability",
+        target: "_blank",
+        rel: "noopener",
+        external: true,
+    },
+};
+
+const MyLegacyDisclaimerLinks: InternalDisclaimerLinks = {
+    privacy: {
+        href: "https://mylegacy.life.gov.sg/privacy-statement",
+        target: "_blank",
+        rel: "noopener",
+    },
+    termsOfUse: {
+        href: "https://mylegacy.life.gov.sg/terms-of-use",
+        target: "_blank",
+        rel: "noopener",
+    },
+    reportVulnerability: {
+        href: "https://tech.gov.sg/report_vulnerability",
+        target: "_blank",
+        rel: "noopener",
+        external: true,
+    },
+};
+
+export const getDefaultDisclaimerLinks = (resourceScheme?: ResourceScheme) => {
+    switch (resourceScheme) {
+        case "bookingsg":
+            return BookingSgDisclaimerLinks;
+        case "mylegacy":
+            return MyLegacyDisclaimerLinks;
+        default:
+            return BaseDisclaimerLinks;
+    }
+};

src/footer/footer-helper.ts

@@ -1,51 +1,77 @@
 import dayjs from "dayjs";
 import { TextLinkProps } from "../text";
+import { ResourceScheme } from "../theme";
+import { getDefaultDisclaimerLinks } from "./footer-disclaimer-links-data";
 import { DisclaimerLinks } from "./types";
 
 /* Internally used.  Not to be exported */
-interface InternalDisclaimerLinks {
+export interface InternalDisclaimerLinks {
     privacy?: TextLinkProps | undefined;
     termsOfUse?: TextLinkProps | undefined;
     reportVulnerability?: TextLinkProps | undefined;
 }
 
 export namespace FooterHelper {
     export const getCopyrightInfo = (
-        lastUpdated: Date = new Date()
+        lastUpdated: Date = new Date(),
+        resourceScheme?: ResourceScheme
     ): string => {
-        const copyright = `${new Date().getFullYear()} LifeSG, Government of Singapore.`;
+        const copyrightText = getCopyrightText(resourceScheme);
+        const copyright = `${new Date().getFullYear()} ${copyrightText}`;
         const lastUpdatedDateString = dayjs(lastUpdated).format("D MMMM YYYY");
 
         return `${copyright} Last Updated ${lastUpdatedDateString}`;
     };
 
+    const getCopyrightText = (resourceScheme: ResourceScheme) => {
+        switch (resourceScheme) {
+            case "bookingsg":
+                return "BookingSG, Government of Singapore.";
+            case "mylegacy":
+                return "MyLegacy@LifeSG, Government of Singapore.";
+            case "ccube":
+                return "Citizen Collective Common, Government of Singapore.";
+            default:
+                return "LifeSG, Government of Singapore.";
+        }
+    };
+
+    export const getFooterLogo = (resourceScheme?: ResourceScheme) => {
+        switch (resourceScheme) {
+            case "bookingsg":
+                return "https://home.booking.gov.sg/images/bookingsg/footer.svg";
+            case "mylegacy":
+                return "https://mylegacy.life.gov.sg/images/site-logo.png";
+            case "ccube":
+                return "https://assets.life.gov.sg/ccube/logo-ccube.svg";
+            default:
+                return "https://assets.life.gov.sg/react-design-system/img/logo/lifesg-primary-logo.svg";
+        }
+    };
+
     export const getDisclaimerLinks = (
+        resourceScheme: ResourceScheme | undefined,
         customDisclaimerLinks?: DisclaimerLinks
     ): InternalDisclaimerLinks => {
+        const defaultDisclaimerLinks =
+            getDefaultDisclaimerLinks(resourceScheme);
         return {
             privacy: {
-                href: "https://www.life.gov.sg/privacy-statement",
-                target: "_blank",
-                rel: "noopener",
+                ...defaultDisclaimerLinks.privacy,
                 ...(customDisclaimerLinks && customDisclaimerLinks.privacy
                     ? customDisclaimerLinks.privacy
                     : {}),
                 children: "Privacy Statement",
             },
             termsOfUse: {
-                href: "https://www.life.gov.sg/terms-of-use",
-                target: "_blank",
-                rel: "noopener",
+                ...defaultDisclaimerLinks.termsOfUse,
                 ...(customDisclaimerLinks && customDisclaimerLinks.termsOfUse
                     ? customDisclaimerLinks.termsOfUse
                     : {}),
                 children: "Terms of Use",
             },
             reportVulnerability: {
-                href: "https://tech.gov.sg/report_vulnerability",
-                target: "_blank",
-                rel: "noopener",
-                external: true,
+                ...defaultDisclaimerLinks.reportVulnerability,
                 ...(customDisclaimerLinks &&
                 customDisclaimerLinks.reportVulnerability
                     ? customDisclaimerLinks.reportVulnerability

src/footer/footer.style.tsx

@@ -33,8 +33,9 @@ export const LogoSection = styled.div`
     grid-column: 1 / span 2;
 
     img {
-        height: 4rem;
-        width: auto;
+        max-height: 4rem;
+        max-width: 100%;
+        object-fit: contain;
     }
 
     ${MediaQuery.MaxWidth.tablet} {

src/footer/footer.tsx

@@ -16,9 +16,7 @@ import {
     TopSection,
 } from "./footer.style";
 import { FooterLinkProps, FooterProps } from "./types";
-
-const LIFESG_LOGO_SRC =
-    "https://assets.life.gov.sg/react-design-system/img/logo/lifesg-primary-logo.svg";
+import { useTheme } from "styled-components";
 
 export const Footer = <T,>({
     children,
@@ -36,7 +34,7 @@ export const Footer = <T,>({
     // CONST, STATE, REFS
     // =============================================================================
     const isStretch = layout === "stretch";
-
+    const theme = useTheme();
     // =============================================================================
     // EVENT HANDLERS
     // =============================================================================
@@ -63,7 +61,10 @@ export const Footer = <T,>({
     // RENDER FUNCTIONS
     // =============================================================================
     const renderDisclaimerLinks = () => {
-        const links = FooterHelper.getDisclaimerLinks(disclaimerLinks);
+        const links = FooterHelper.getDisclaimerLinks(
+            theme?.resourceScheme,
+            disclaimerLinks
+        );
 
         return Object.keys(links).map((key) => {
             return <DisclaimerTextLink key={key} {...links[key]} />;
@@ -97,7 +98,12 @@ export const Footer = <T,>({
                 <>
                     <LogoSection data-testid="logo-section">
                         <img
-                            src={logoSrc || LIFESG_LOGO_SRC}
+                            src={
+                                logoSrc ||
+                                FooterHelper.getFooterLogo(
+                                    theme?.resourceScheme
+                                )
+                            }
                             alt="LifeSG"
                             data-testid="logo"
                         />
@@ -145,7 +151,10 @@ export const Footer = <T,>({
                         {copyrightInfo || (
                             <>
                                 &copy;{" "}
-                                {FooterHelper.getCopyrightInfo(lastUpdated)}
+                                {FooterHelper.getCopyrightInfo(
+                                    lastUpdated,
+                                    theme?.resourceScheme
+                                )}
                             </>
                         )}
                     </Text.XSmall>

src/navbar/brand.tsx

@@ -36,7 +36,6 @@ export const Brand = ({
     return (
         <Clickable
             role="link"
-            aria-label={resources.brandName + "-app-home-page"}
             onClick={handleClick}
             tabIndex={0}
             data-id={dataId}
@@ -45,7 +44,7 @@ export const Brand = ({
         >
             <ImageWithFallback
                 src={resources.logoSrc}
-                alt={resources.brandName + "-app-logo"}
+                alt={resources.brandName}
             />
         </Clickable>
     );

src/navbar/navbar-logo-data.ts

@@ -0,0 +1,43 @@
+import { ResourceScheme } from "../theme";
+import { NavbarResourcesProps } from "./types";
+
+const DEFAULT_RESOURCES_LOGO: NavbarResourcesProps = {
+    primary: {
+        brandName: "LifeSG",
+        logoSrc: "https://assets.life.gov.sg/lifesg/logo-lifesg.svg",
+    },
+};
+
+const BOOKINGSG_RESOURCES_LOGO: NavbarResourcesProps = {
+    primary: {
+        brandName: "BookingSG",
+        logoSrc: "https://www.booking.gov.sg/logo.svg",
+    },
+};
+
+const CCUBE_RESOURCES_LOGO: NavbarResourcesProps = {
+    primary: {
+        brandName: "MyLegacy",
+        logoSrc: "https://assets.life.gov.sg/ccube/logo-ccube.svg",
+    },
+};
+
+const MYLEGACY_RESOURCES_LOGO: NavbarResourcesProps = {
+    primary: {
+        brandName: "CCube",
+        logoSrc: "https://mylegacy.life.gov.sg/images/site-logo.png",
+    },
+};
+
+export const getDefaultResourceLogo = (resourceScheme?: ResourceScheme) => {
+    switch (resourceScheme) {
+        case "bookingsg":
+            return BOOKINGSG_RESOURCES_LOGO;
+        case "mylegacy":
+            return MYLEGACY_RESOURCES_LOGO;
+        case "ccube":
+            return CCUBE_RESOURCES_LOGO;
+        default:
+            return DEFAULT_RESOURCES_LOGO;
+    }
+};

src/navbar/navbar.tsx

@@ -5,13 +5,15 @@ import React, {
     useRef,
     useState,
 } from "react";
+import { useTheme } from "styled-components";
 import { ButtonProps } from "../button/types";
 import { Layout } from "../layout";
 import { Masthead } from "../masthead/masthead";
 import { Overlay } from "../overlay/overlay";
 import { MediaWidths } from "../spec/media-spec";
 import { Brand } from "./brand";
 import { Drawer } from "./drawer";
+import { getDefaultResourceLogo } from "./navbar-logo-data";
 import { NavbarActionButtons } from "./navbar-action-buttons";
 import { NavbarItems } from "./navbar-items";
 import {
@@ -30,7 +32,6 @@ import {
     NavbarButtonProps,
     NavbarDrawerHandle,
     NavbarProps,
-    NavbarResourcesProps,
 } from "./types";
 
 const Component = <T,>(
@@ -41,7 +42,7 @@ const Component = <T,>(
         selectedId,
         compress = false,
         fixed = true,
-        resources = DEFAULT_RESOURCES,
+        resources,
         hideNavElements = false,
         hideNavBranding = false,
         drawerDismissalExclusions: blockDrawerDismissalMethods = [],
@@ -62,8 +63,11 @@ const Component = <T,>(
     const [showOverlay, setShowOverlay] = useState<boolean>(false);
     const isStretch = layout === "stretch";
     const elementRef = useRef<HTMLDivElement>();
+    const theme = useTheme();
+    const defaultResource = getDefaultResourceLogo(theme?.resourceScheme);
 
-    const { primary = DEFAULT_RESOURCES.primary, secondary } = resources;
+    const primary = resources?.primary || defaultResource.primary;
+    const secondary = resources?.secondary;
 
     useImperativeHandle(
         ref,
@@ -310,13 +314,3 @@ const Component = <T,>(
 };
 
 export const Navbar = forwardRef(Component);
-
-// =============================================================================
-// CONSTANTS
-// =============================================================================
-const DEFAULT_RESOURCES: NavbarResourcesProps = {
-    primary: {
-        brandName: "LifeSG",
-        logoSrc: "https://assets.life.gov.sg/lifesg/logo-lifesg.svg",
-    },
-};

stories/footer/props-table.tsx

@@ -54,6 +54,7 @@ const DATA: ApiTableSectionProps[] = [
                     </>
                 ),
                 propTypes: ["string"],
+                defaultValue: "<theme service logo>",
             },
             {
                 name: "lastUpdated",

stories/navbar/props-table.tsx

@@ -296,7 +296,7 @@ const DATA: ApiTableSectionProps[] = [
                 name: "primary",
                 description: "The primary branding",
                 propTypes: ["NavbarBrandingProps"],
-                defaultValue: "<LifeSG branding>",
+                defaultValue: "<theme service branding>",
             },
             {
                 name: "secondary",

tests/footer/footer.spec.tsx

@@ -19,7 +19,8 @@ describe("Footer", () => {
     it("should be able to render the component", () => {
         render(<Footer />);
 
-        const defaultDisclaimerLinks = FooterHelper.getDisclaimerLinks();
+        const defaultDisclaimerLinks =
+            FooterHelper.getDisclaimerLinks(undefined);
 
         for (const link in defaultDisclaimerLinks) {
             expect(
@@ -102,7 +103,8 @@ describe("Footer", () => {
 
             render(<Footer disclaimerLinks={disclaimerLinks} />);
 
-            const defaultDisclaimerLinks = FooterHelper.getDisclaimerLinks();
+            const defaultDisclaimerLinks =
+                FooterHelper.getDisclaimerLinks(undefined);
 
             for (const link in defaultDisclaimerLinks) {
                 const anchor = getAnchorElement(