[BOOKINGSG-9244][RYN] migrate navbar component

e2e/nextjs-app/src/app/components/navbar/common.ts

@@ -0,0 +1,61 @@
+import type {
+    NavbarButtonProps,
+    NavItemProps,
+} from "@lifesg/react-design-system/navbar";
+
+export const navItems: NavItemProps<undefined>[] = [
+    {
+        id: "home",
+        children: "Home",
+        href: "https://www.life.gov.sg",
+    },
+    {
+        id: "guides",
+        children: "Guides",
+        href: "https://www.life.gov.sg",
+    },
+    {
+        id: "lifesg-app",
+        children: "LifeSG app",
+        href: "https://www.life.gov.sg",
+    },
+];
+
+export const downloadActionButtons: NavbarButtonProps[] = [
+    { type: "download" },
+];
+
+export const navItemsWithSubmenu: NavItemProps<undefined>[] = [
+    {
+        id: "home",
+        children: "Home",
+        href: "https://www.life.gov.sg",
+    },
+    {
+        id: "services",
+        children: "Services",
+        href: "https://www.life.gov.sg/?section=services-and-tools",
+        subMenu: [
+            {
+                id: "services-getting-started",
+                children: "Birth registration",
+                href: "https://www.life.gov.sg",
+            },
+            {
+                id: "services-baby-bonus",
+                children: "Baby bonus",
+                href: "https://www.life.gov.sg",
+            },
+            {
+                id: "services-preschool-search",
+                children: "Preschool search",
+                href: "https://www.life.gov.sg",
+            },
+        ],
+    },
+    {
+        id: "lifesg-app",
+        children: "LifeSG app",
+        href: "https://www.life.gov.sg",
+    },
+];

e2e/nextjs-app/src/app/components/navbar/compress.e2e.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { navItems, downloadActionButtons } from "./common";
+
+export default function Story() {
+    return (
+        <Navbar
+            data-testid="navbar-compressed"
+            compress
+            selectedId="guides"
+            items={{ desktop: navItems }}
+            actionButtons={{ desktop: downloadActionButtons }}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/navbar/custom-action-button.e2e.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { navItems } from "./common";
+import { Avatar } from "@lifesg/react-design-system/avatar";
+
+export default function Story() {
+    return (
+        <Navbar
+            data-testid="navbar-with-avatar"
+            selectedId="guides"
+            items={{ desktop: navItems }}
+            actionButtons={{
+                desktop: [
+                    {
+                        type: "component",
+                        args: { render: <Avatar>GovTech</Avatar> },
+                        uncollapsible: true,
+                    },
+                ],
+            }}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/navbar/default.e2e.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { navItems, downloadActionButtons } from "./common";
+
+export default function Story() {
+    return (
+        <Navbar
+            data-testid="navbar-default"
+            selectedId="guides"
+            items={{ desktop: navItems }}
+            actionButtons={{ desktop: downloadActionButtons }}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/navbar/hide-branding.e2e.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { navItems, downloadActionButtons } from "./common";
+
+export default function Story() {
+    return (
+        <Navbar
+            data-testid="navbar-hide-branding"
+            hideNavBranding
+            selectedId="guides"
+            items={{ desktop: navItems }}
+            actionButtons={{ desktop: downloadActionButtons }}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/navbar/hide-link-indicator.e2e.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { navItems, downloadActionButtons } from "./common";
+
+export default function Story() {
+    return (
+        <Navbar
+            data-testid="navbar-hide-link-indicator"
+            hideLinkIndicator
+            selectedId="guides"
+            items={{ desktop: navItems }}
+            actionButtons={{ desktop: downloadActionButtons }}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/navbar/multiple-action-buttons.e2e.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { navItems } from "./common";
+
+export default function Story() {
+    return (
+        <Navbar
+            data-testid="navbar-multiple-action-buttons"
+            selectedId="guides"
+            items={{ desktop: navItems }}
+            actionButtons={{
+                desktop: [
+                    { type: "download" },
+                    {
+                        type: "button",
+                        args: { children: "Sign up", styleType: "secondary" },
+                    },
+                    {
+                        type: "button",
+                        args: { children: "Log in" },
+                    },
+                ],
+            }}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/navbar/no-masthead.e2e.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { navItems, downloadActionButtons } from "./common";
+
+export default function Story() {
+    return (
+        <Navbar
+            data-testid="navbar-no-masthead"
+            masthead={false}
+            selectedId="guides"
+            items={{ desktop: navItems }}
+            actionButtons={{ desktop: downloadActionButtons }}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/navbar/secondary-brand.e2e.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { navItems, downloadActionButtons } from "./common";
+
+export default function Story() {
+    return (
+        <Navbar
+            data-testid="navbar-secondary-brand"
+            selectedId="guides"
+            resources={{
+                secondary: {
+                    brandName: "BookingSG",
+                    logoSrc: "https://www.booking.gov.sg/logo.svg",
+                },
+            }}
+            items={{ desktop: navItems }}
+            actionButtons={{ desktop: downloadActionButtons }}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/navbar/single-action-button.e2e.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+
+export default function Story() {
+    return (
+        <Navbar
+            actionButtons={{
+                desktop: [
+                    {
+                        args: {
+                            children: "Logout",
+                            styleType: "secondary",
+                        },
+                        type: "button",
+                    },
+                ],
+            }}
+            items={{
+                desktop: [],
+                mobile: [],
+            }}
+            selectedId="home"
+        />
+    );
+}

e2e/nextjs-app/src/app/components/navbar/stretch.e2e.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { navItems, downloadActionButtons } from "./common";
+
+export default function Story() {
+    return (
+        <Navbar
+            data-testid="navbar-stretch"
+            layout="stretch"
+            selectedId="guides"
+            items={{ desktop: navItems }}
+            actionButtons={{ desktop: downloadActionButtons }}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/navbar/submenu.e2e.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { downloadActionButtons, navItemsWithSubmenu } from "./common";
+
+export default function Story() {
+    return (
+        <Navbar
+            data-testid="navbar-submenu"
+            items={{ desktop: navItemsWithSubmenu }}
+            actionButtons={{ desktop: downloadActionButtons }}
+            onItemClick={() => {}}
+            selectedId="services"
+        />
+    );
+}

e2e/nextjs-app/src/proxy.ts

@@ -20,9 +20,8 @@ export function proxy(request: NextRequest) {
         isDev ? "'unsafe-eval'" : ""
     } https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js;
         ${styleSrcDirective}
-        img-src 'self' https://assets.life.gov.sg 
-            https://mylegacy.life.gov.sg https://home.booking.gov.sg blob: data:;
-        font-src 'self';
+        img-src 'self' https://*.life.gov.sg https://*.booking.gov.sg blob: data:;
+        font-src 'self' https://assets.life.gov.sg;
         object-src 'none';
         base-uri 'self';
         form-action 'self';