GCDS- POC header

app/(gcforms)/[locale]/(form administration)/form-builder/Start.tsx

@@ -10,6 +10,8 @@ import { clearTemplateStore } from "@lib/store/utils";
 import { safeJSONParse } from "@lib/utils";
 import { FormProperties } from "@lib/types";
 
+import { GcdsHeader } from "@cdssnc/gcds-components-react-ssr";
+
 export const Start = () => {
   const {
     t,
@@ -80,6 +82,7 @@ export const Start = () => {
   return (
     <>
       <h1 className="visually-hidden">{t("start")}</h1>
+      <GcdsHeader lang="en" langHref="#" skipToHref="#"></GcdsHeader>
       <div role="alert">
         {errors && (
           <div className="m-auto mb-8 flex w-5/12 bg-red-100 p-6">

app/(gcforms)/[locale]/(static pages)/layout.tsx

@@ -1,16 +1,12 @@
-import { Fip } from "@clientComponents/globals";
-import LanguageToggle from "@clientComponents/globals/Header/LanguageToggle";
 import { Footer } from "@serverComponents/globals/Footer";
 import { SkipLink } from "@serverComponents/globals/SkipLink";
+import { Header } from "./sla/header";
+
 export default async function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex h-full flex-col bg-white">
       <SkipLink />
-      <header>
-        <Fip className="mb-20 mt-0 border-b-4 border-blue-dark py-9">
-          <LanguageToggle />
-        </Fip>
-      </header>
+      <Header />
       <div id="page-container">
         <main id="content">{children}</main>
       </div>

app/(gcforms)/[locale]/(static pages)/sla/header.tsx

@@ -0,0 +1,6 @@
+"use client";
+
+import { GcdsHeader } from "@cdssnc/gcds-components-react-ssr";
+export const Header = () => {
+  return <GcdsHeader />;
+};

app/layout.tsx

@@ -37,6 +37,9 @@ const NoIndexMetaTag =
     </>
   );
 
+import "@cdssnc/gcds-components-react-ssr/server";
+import "@cdssnc/gcds-components-react-ssr/gcds.css";
+
 export default async function Layout({ children }: { children: React.ReactNode }) {
   const locale = cookies().get("i18next")?.value ?? languages[0];
   const nonce = headers().get("x-nonce") ?? "";

i18n/client.ts

@@ -3,19 +3,19 @@ import { useEffect } from "react";
 import i18next from "i18next";
 import { initReactI18next, useTranslation as reactUseTranslation } from "react-i18next";
 import resourcesToBackend from "i18next-resources-to-backend";
-import LanguageDetector from "i18next-browser-languagedetector";
+// import LanguageDetector from "i18next-browser-languagedetector";
 import { getOptions, languages } from "./settings";
 
 import { useParams } from "next/navigation";
 
 const runsOnServerSide = typeof window === "undefined";
 const pathname = runsOnServerSide ? "" : window.location.pathname;
 
-const languageDetector = new LanguageDetector();
+// const languageDetector = new LanguageDetector();
 
 i18next
   .use(initReactI18next)
-  .use(languageDetector)
+  // .use(languageDetector)
   .use(
     resourcesToBackend(
       (language: string, namespace: string) =>

next.config.mjs

@@ -49,6 +49,9 @@ const nextConfig = {
       type: "asset/source",
     });
 
+    // Fixes dependency issues with `canvas` and `perf_hooks` of linkedom
+    config.resolve.fallback = { canvas: false, perf_hooks: false };
+
     return config;
   },
 

package.json

@@ -56,6 +56,7 @@
     "@aws-sdk/client-sqs": "3.515.0",
     "@aws-sdk/lib-dynamodb": "3.515.0",
     "@casl/ability": "6.5.0",
+    "@cdssnc/gcds-components-react-ssr": "^0.26.1-canary.0",
     "@headlessui/react": "^1.7.18",
     "@lexical/react": "^0.12.6",
     "@neshca/cache-handler": "^1.2.1",