update page title component (#170)

faiza-jahanzeb · web-flow · commit 885625cd0c67 · 2025-01-31T12:55:57.000-05:00
diff --git a/frontend/app/.server/locales/protected-en.json b/frontend/app/.server/locales/protected-en.json
@@ -5,7 +5,7 @@
   },
   "dashboard": {
     "sin": "SIN",
-    "sin-system": "<span>SIN</span> Dashboard System",
+    "sin-system": "SIN Dashboard System",
     "system": "System",
     "assigned-cases": "Affaires Attribuées",
     "get-started": "Get Started"
@@ -34,7 +34,6 @@
   },
   "privacy-statement": {
     "confirm-privacy-notice-checkbox": "I agree to the terms and conditions",
-    "page-title": "Privacy Statement",
-    "title": "<span>Priv</span>acy Statement"
+    "page-title": "Privacy Statement"
   }
 }
diff --git a/frontend/app/.server/locales/protected-fr.json b/frontend/app/.server/locales/protected-fr.json
@@ -5,7 +5,7 @@
   },
   "dashboard": {
     "sin": "SIN",
-    "sin-system": "<span>SIN</span> Interface Système",
+    "sin-system": "SIN Interface Système",
     "system": "Système",
     "assigned-cases": "Affaires Attribuées",
     "get-started": "Commencer Ici"
@@ -34,7 +34,6 @@
   },
   "privacy-statement": {
     "confirm-privacy-notice-checkbox": "J'accepte les termes et conditions.",
-    "page-title": "Déclaration de confidentialité",
-    "title": "<span>Décl</span>aration de confidentialité"
+    "page-title": "Déclaration de confidentialité"
   }
 }
diff --git a/frontend/app/components/page-title.tsx b/frontend/app/components/page-title.tsx
@@ -2,17 +2,27 @@ import type { ComponentProps } from 'react';
 
 import { cn } from '~/utils/tailwind-utils';
 
-export type PageTitleProps = Omit<ComponentProps<'h1'>, 'id' | 'property'>;
+export type PageTitleProps = Omit<ComponentProps<'h1'>, 'id' | 'property'> & {
+  subTitle?: string;
+};
 
-export function PageTitle({ children, className, ...props }: PageTitleProps) {
+export function PageTitle({ children, className, subTitle, ...props }: PageTitleProps) {
   return (
-    <h1
-      id="wb-cont"
-      tabIndex={-1}
-      className={cn('font-lato mt-10 text-3xl font-bold focus-visible:ring-3', className)}
-      {...props}
-    >
-      {children}
-    </h1>
+    <div className="mt-10 mb-8">
+      {subTitle && <h2>{subTitle}</h2>}
+      <h1
+        id="wb-cont"
+        tabIndex={-1}
+        className={cn(
+          'font-lato text-3xl font-bold focus-visible:ring-3',
+          'after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700',
+
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </h1>
+    </div>
   );
 }
diff --git a/frontend/app/routes/protected/index.tsx b/frontend/app/routes/protected/index.tsx
@@ -8,6 +8,7 @@ import type { Route } from './+types/index';
 
 import { requireAuth } from '~/.server/utils/auth-utils';
 import { ButtonLink } from '~/components/button-link';
+import { PageTitle } from '~/components/page-title';
 import { getFixedT } from '~/i18n-config.server';
 import { handle as parentHandle } from '~/routes/protected/layout';
 
@@ -30,12 +31,7 @@ export default function Index() {
 
   return (
     <div className="mb-8">
-      <h1 className="mt-8 text-2xl font-bold text-slate-700">
-        <Trans
-          i18nKey="protected:dashboard.sin-system"
-          components={{ span: <span className="underline decoration-red-800 underline-offset-8" /> }}
-        />
-      </h1>
+      <PageTitle>{t('protected:dashboard.sin-system')}</PageTitle>
       <h2 className="mt-10 mb-2 text-lg font-bold text-slate-700">{t('protected:dashboard.assigned-cases')}</h2>
       <ButtonLink className="w-72" file="routes/protected/request.tsx">
         {t('gcweb:app.form')}
diff --git a/frontend/app/routes/protected/person-case/privacy-statement.tsx b/frontend/app/routes/protected/person-case/privacy-statement.tsx
@@ -1,7 +1,7 @@
 import { data, useFetcher } from 'react-router';
 import type { RouteHandle } from 'react-router';
 
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import * as v from 'valibot';
 
 import type { Route, Info } from './+types/privacy-statement';
@@ -13,6 +13,7 @@ import { Button } from '~/components/button';
 import { ButtonLink } from '~/components/button-link';
 import { ErrorSummary } from '~/components/error-summary';
 import { InputCheckbox } from '~/components/input-checkbox';
+import { PageTitle } from '~/components/page-title';
 import { Progress } from '~/components/progress';
 import { getFixedT } from '~/i18n-config.server';
 import { handle as parentHandle } from '~/routes/protected/layout';
@@ -69,14 +70,8 @@ export default function PrivacyStatement({ loaderData, actionData, params }: Rou
 
   return (
     <>
-      <Progress className="mt-8 mb-8" label="" value={20} />
-      <span className="text-md">{t('protected:in-person.title')}</span>
-      <h1 className="mb-8 text-2xl font-bold text-slate-700">
-        <Trans
-          i18nKey="protected:privacy-statement.title"
-          components={{ span: <span className="underline decoration-red-800 underline-offset-8" /> }}
-        />
-      </h1>
+      <Progress className="mt-8" label="" value={20} />
+      <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:privacy-statement.page-title')}</PageTitle>
 
       <fetcher.Form method="post" noValidate>
         <div className="space-y-6">
diff --git a/frontend/e2e/not-found.spec.ts-snapshots/Navigating-to-en-foo-renders-the-unilingual-404-page-2.txt b/frontend/e2e/not-found.spec.ts-snapshots/Navigating-to-en-foo-renders-the-unilingual-404-page-2.txt
@@ -1 +1 @@
-<h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>We couldn't find that web page</span><small class="block text-2xl font-normal text-neutral-500">(Error 404)</small></h1><p class="mb-8 text-lg text-gray-500">We're sorry you ended up here. Sometimes a page gets moved or deleted, but hopefully we can help you find what you're looking for.</p>
+<div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>We couldn't find that web page</span><small class="block text-2xl font-normal text-neutral-500">(Error 404)</small></h1></div><p class="mb-8 text-lg text-gray-500">We're sorry you ended up here. Sometimes a page gets moved or deleted, but hopefully we can help you find what you're looking for.</p>
diff --git a/frontend/e2e/not-found.spec.ts-snapshots/Navigating-to-foo-renders-the-bilingual-404-page-2.txt b/frontend/e2e/not-found.spec.ts-snapshots/Navigating-to-foo-renders-the-bilingual-404-page-2.txt
@@ -1 +1 @@
-<div class="grid grid-cols-1 gap-6 py-2.5 sm:grid-cols-2 sm:py-3.5"><div id="english" lang="en"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>We couldn't find that web page</span><small class="block text-2xl font-normal text-neutral-500">(Error 404)</small></h1><p class="mb-8 text-lg text-gray-500">We're sorry you ended up here. Sometimes a page gets moved or deleted, but hopefully we can help you find what you're looking for.</p></div><div id="french" lang="fr"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>Nous ne pouvons trouver cette page</span><small class="block text-2xl font-normal text-neutral-500">(Erreur 404)</small></h1><p class="mb-8 text-lg text-gray-500">Nous sommes désolés que vous ayez abouti ici. Il arrive parfois qu'une page ait été déplacée ou supprimée. Heureusement, nous pouvons vous aider à trouver ce que vous cherchez.</p></div></div>
+<div class="grid grid-cols-1 gap-6 py-2.5 sm:grid-cols-2 sm:py-3.5"><div id="english" lang="en"><div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>We couldn't find that web page</span><small class="block text-2xl font-normal text-neutral-500">(Error 404)</small></h1></div><p class="mb-8 text-lg text-gray-500">We're sorry you ended up here. Sometimes a page gets moved or deleted, but hopefully we can help you find what you're looking for.</p></div><div id="french" lang="fr"><div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>Nous ne pouvons trouver cette page</span><small class="block text-2xl font-normal text-neutral-500">(Erreur 404)</small></h1></div><p class="mb-8 text-lg text-gray-500">Nous sommes désolés que vous ayez abouti ici. Il arrive parfois qu'une page ait été déplacée ou supprimée. Heureusement, nous pouvons vous aider à trouver ce que vous cherchez.</p></div></div>
diff --git a/frontend/tests/components/__snapshots__/bilingual-error-boundary.test.tsx.snap b/frontend/tests/components/__snapshots__/bilingual-error-boundary.test.tsx.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BilingualErrorBoundary > should render the bilingual error boundary > expected html 1`] = `"<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" href="build/stub-path-to-module.js"></head><body><header class="border-b-[3px] border-slate-700 print:hidden"><div id="wb-bnr"><div class="container flex items-center justify-between gap-6 py-2.5 sm:py-3.5"><a href="https://canada.ca/"><img class="h-8 w-auto" alt="gcweb:header.govt-of-canada.text / gcweb:header.govt-of-canada.text" width="300" height="28" decoding="async" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg"></a></div></div></header><main class="container"><div class="grid grid-cols-1 gap-6 py-2.5 sm:grid-cols-2 sm:py-3.5"><div id="english" lang="en"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></div><div id="french" lang="fr"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></div></div></main><footer id="wb-info" tabindex="-1" class="mt-8 bg-stone-50 print:hidden"><div class="container flex items-center justify-end gap-6 py-2.5 sm:py-3.5"><div><h2 class="sr-only"><span lang="en">gcweb:footer.about-site</span> / <span lang="fr">gcweb:footer.about-site</span></h2><div><img alt="gcweb:footer.gc-symbol / gcweb:footer.gc-symbol" width="300" height="71" class="h-10 w-auto" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg"></div></div></div></footer><link rel="modulepreload"><script> </script><script type="module" async=""> </script><script src="/api/client-env?v=undefined"></script></body></html>"`;
+exports[`BilingualErrorBoundary > should render the bilingual error boundary > expected html 1`] = `"<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" href="build/stub-path-to-module.js"></head><body><header class="border-b-[3px] border-slate-700 print:hidden"><div id="wb-bnr"><div class="container flex items-center justify-between gap-6 py-2.5 sm:py-3.5"><a href="https://canada.ca/"><img class="h-8 w-auto" alt="gcweb:header.govt-of-canada.text / gcweb:header.govt-of-canada.text" width="300" height="28" decoding="async" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg"></a></div></div></header><main class="container"><div class="grid grid-cols-1 gap-6 py-2.5 sm:grid-cols-2 sm:py-3.5"><div id="english" lang="en"><div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1></div><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></div><div id="french" lang="fr"><div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1></div><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></div></div></main><footer id="wb-info" tabindex="-1" class="mt-8 bg-stone-50 print:hidden"><div class="container flex items-center justify-end gap-6 py-2.5 sm:py-3.5"><div><h2 class="sr-only"><span lang="en">gcweb:footer.about-site</span> / <span lang="fr">gcweb:footer.about-site</span></h2><div><img alt="gcweb:footer.gc-symbol / gcweb:footer.gc-symbol" width="300" height="71" class="h-10 w-auto" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg"></div></div></div></footer><link rel="modulepreload"><script> </script><script type="module" async=""> </script><script src="/api/client-env?v=undefined"></script></body></html>"`;
diff --git a/frontend/tests/components/__snapshots__/page-title.test.tsx.snap b/frontend/tests/components/__snapshots__/page-title.test.tsx.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PageTitle > should render a h1 tag with default styles > expected html 1`] = `"<h1 id="wb-cont" tabindex="-1" class="font-lato mt-10 text-3xl font-bold focus-visible:ring-3">Test Title</h1>"`;
+exports[`PageTitle > should render a h1 tag with default styles > expected html 1`] = `"<div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700">Test Title</h1></div>"`;
diff --git a/frontend/tests/components/__snapshots__/unilingual-error-boundary.test.tsx.snap b/frontend/tests/components/__snapshots__/unilingual-error-boundary.test.tsx.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UnilingualErrorBoundary > should render the unilingual error boundary > expected html 1`] = `"<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" href="build/stub-path-to-module.js"></head><body><header class="border-b-[3px] border-slate-700 print:hidden"><div id="wb-bnr"><div class="container flex items-center justify-between gap-6 py-2.5 sm:py-3.5"><a href="https://canada.ca/"><img class="h-8 w-auto" alt="gcweb:header.govt-of-canada.text" width="300" height="28" decoding="async" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg"></a></div></div></header><main class="container"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></main><footer id="wb-info" tabindex="-1" class="mt-8 bg-stone-50 print:hidden"><div class="container flex items-center justify-end gap-6 py-2.5 sm:py-3.5"><div><h2 class="sr-only">gcweb:footer.about-site</h2><div><img alt="gcweb:footer.gc-symbol" width="300" height="71" class="h-10 w-auto" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg"></div></div></div></footer><link rel="modulepreload"><script> </script><script type="module" async=""> </script><script src="/api/client-env?v=undefined"></script></body></html>"`;
+exports[`UnilingualErrorBoundary > should render the unilingual error boundary > expected html 1`] = `"<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" href="build/stub-path-to-module.js"></head><body><header class="border-b-[3px] border-slate-700 print:hidden"><div id="wb-bnr"><div class="container flex items-center justify-between gap-6 py-2.5 sm:py-3.5"><a href="https://canada.ca/"><img class="h-8 w-auto" alt="gcweb:header.govt-of-canada.text" width="300" height="28" decoding="async" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg"></a></div></div></header><main class="container"><div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1></div><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></main><footer id="wb-info" tabindex="-1" class="mt-8 bg-stone-50 print:hidden"><div class="container flex items-center justify-end gap-6 py-2.5 sm:py-3.5"><div><h2 class="sr-only">gcweb:footer.about-site</h2><div><img alt="gcweb:footer.gc-symbol" width="300" height="71" class="h-10 w-auto" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg"></div></div></div></footer><link rel="modulepreload"><script> </script><script type="module" async=""> </script><script src="/api/client-env?v=undefined"></script></body></html>"`;

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>We couldn't find that web page</span><small class="block text-2xl font-normal text-neutral-500">(Error 404)</small></h1><p class="mb-8 text-lg text-gray-500">We're sorry you ended up here. Sometimes a page gets moved or deleted, but hopefully we can help you find what you're looking for.</p>`
	`1`	`+<div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>We couldn't find that web page</span><small class="block text-2xl font-normal text-neutral-500">(Error 404)</small></h1></div><p class="mb-8 text-lg text-gray-500">We're sorry you ended up here. Sometimes a page gets moved or deleted, but hopefully we can help you find what you're looking for.</p>`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-<div class="grid grid-cols-1 gap-6 py-2.5 sm:grid-cols-2 sm:py-3.5"><div id="english" lang="en"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>We couldn't find that web page</span><small class="block text-2xl font-normal text-neutral-500">(Error 404)</small></h1><p class="mb-8 text-lg text-gray-500">We're sorry you ended up here. Sometimes a page gets moved or deleted, but hopefully we can help you find what you're looking for.</p></div><div id="french" lang="fr"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>Nous ne pouvons trouver cette page</span><small class="block text-2xl font-normal text-neutral-500">(Erreur 404)</small></h1><p class="mb-8 text-lg text-gray-500">Nous sommes désolés que vous ayez abouti ici. Il arrive parfois qu'une page ait été déplacée ou supprimée. Heureusement, nous pouvons vous aider à trouver ce que vous cherchez.</p></div></div>
	`1`	+<div class="grid grid-cols-1 gap-6 py-2.5 sm:grid-cols-2 sm:py-3.5"><div id="english" lang="en"><div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>We couldn't find that web page</span><small class="block text-2xl font-normal text-neutral-500">(Error 404)</small></h1></div><p class="mb-8 text-lg text-gray-500">We're sorry you ended up here. Sometimes a page gets moved or deleted, but hopefully we can help you find what you're looking for.</p></div><div id="french" lang="fr"><div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>Nous ne pouvons trouver cette page</span><small class="block text-2xl font-normal text-neutral-500">(Erreur 404)</small></h1></div><p class="mb-8 text-lg text-gray-500">Nous sommes désolés que vous ayez abouti ici. Il arrive parfois qu'une page ait été déplacée ou supprimée. Heureusement, nous pouvons vous aider à trouver ce que vous cherchez.</p></div></div>
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html`
`2`	`2`
`3`		-exports[`BilingualErrorBoundary > should render the bilingual error boundary > expected html 1`] = `"<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" href="build/stub-path-to-module.js"></head><body><header class="border-b-[3px] border-slate-700 print:hidden"><div id="wb-bnr"><div class="container flex items-center justify-between gap-6 py-2.5 sm:py-3.5"><a href="https://canada.ca/"><img class="h-8 w-auto" alt="gcweb:header.govt-of-canada.text / gcweb:header.govt-of-canada.text" width="300" height="28" decoding="async" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg"></a></div></div></header><main class="container"><div class="grid grid-cols-1 gap-6 py-2.5 sm:grid-cols-2 sm:py-3.5"><div id="english" lang="en"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></div><div id="french" lang="fr"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></div></div></main><footer id="wb-info" tabindex="-1" class="mt-8 bg-stone-50 print:hidden"><div class="container flex items-center justify-end gap-6 py-2.5 sm:py-3.5"><div><h2 class="sr-only"><span lang="en">gcweb:footer.about-site</span> / <span lang="fr">gcweb:footer.about-site</span></h2><div><img alt="gcweb:footer.gc-symbol / gcweb:footer.gc-symbol" width="300" height="71" class="h-10 w-auto" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg"></div></div></div></footer><link rel="modulepreload"><script> </script><script type="module" async=""> </script><script src="/api/client-env?v=undefined"></script></body></html>"`;
	`3`	+exports[`BilingualErrorBoundary > should render the bilingual error boundary > expected html 1`] = `"<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" href="build/stub-path-to-module.js"></head><body><header class="border-b-[3px] border-slate-700 print:hidden"><div id="wb-bnr"><div class="container flex items-center justify-between gap-6 py-2.5 sm:py-3.5"><a href="https://canada.ca/"><img class="h-8 w-auto" alt="gcweb:header.govt-of-canada.text / gcweb:header.govt-of-canada.text" width="300" height="28" decoding="async" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg"></a></div></div></header><main class="container"><div class="grid grid-cols-1 gap-6 py-2.5 sm:grid-cols-2 sm:py-3.5"><div id="english" lang="en"><div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1></div><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></div><div id="french" lang="fr"><div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1></div><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></div></div></main><footer id="wb-info" tabindex="-1" class="mt-8 bg-stone-50 print:hidden"><div class="container flex items-center justify-end gap-6 py-2.5 sm:py-3.5"><div><h2 class="sr-only"><span lang="en">gcweb:footer.about-site</span> / <span lang="fr">gcweb:footer.about-site</span></h2><div><img alt="gcweb:footer.gc-symbol / gcweb:footer.gc-symbol" width="300" height="71" class="h-10 w-auto" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg"></div></div></div></footer><link rel="modulepreload"><script> </script><script type="module" async=""> </script><script src="/api/client-env?v=undefined"></script></body></html>"`;
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html`
`2`	`2`
`3`		-exports[`PageTitle > should render a h1 tag with default styles > expected html 1`] = `"<h1 id="wb-cont" tabindex="-1" class="font-lato mt-10 text-3xl font-bold focus-visible:ring-3">Test Title</h1>"`;
	`3`	+exports[`PageTitle > should render a h1 tag with default styles > expected html 1`] = `"<div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700">Test Title</h1></div>"`;
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html`
`2`	`2`
`3`		-exports[`UnilingualErrorBoundary > should render the unilingual error boundary > expected html 1`] = `"<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" href="build/stub-path-to-module.js"></head><body><header class="border-b-[3px] border-slate-700 print:hidden"><div id="wb-bnr"><div class="container flex items-center justify-between gap-6 py-2.5 sm:py-3.5"><a href="https://canada.ca/"><img class="h-8 w-auto" alt="gcweb:header.govt-of-canada.text" width="300" height="28" decoding="async" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg"></a></div></div></header><main class="container"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></main><footer id="wb-info" tabindex="-1" class="mt-8 bg-stone-50 print:hidden"><div class="container flex items-center justify-end gap-6 py-2.5 sm:py-3.5"><div><h2 class="sr-only">gcweb:footer.about-site</h2><div><img alt="gcweb:footer.gc-symbol" width="300" height="71" class="h-10 w-auto" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg"></div></div></div></footer><link rel="modulepreload"><script> </script><script type="module" async=""> </script><script src="/api/client-env?v=undefined"></script></body></html>"`;
	`3`	+exports[`UnilingualErrorBoundary > should render the unilingual error boundary > expected html 1`] = `"<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" href="build/stub-path-to-module.js"></head><body><header class="border-b-[3px] border-slate-700 print:hidden"><div id="wb-bnr"><div class="container flex items-center justify-between gap-6 py-2.5 sm:py-3.5"><a href="https://canada.ca/"><img class="h-8 w-auto" alt="gcweb:header.govt-of-canada.text" width="300" height="28" decoding="async" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg"></a></div></div></header><main class="container"><div class="mt-10 mb-8"><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700 my-8"><span>gcweb:server-error.page-title</span><small class="block text-2xl font-normal text-neutral-500">{"key":"gcweb:server-error.page-subtitle","options":{"statusCode":500}}</small></h1></div><p class="mb-8 text-lg text-gray-500">gcweb:server-error.page-message</p></main><footer id="wb-info" tabindex="-1" class="mt-8 bg-stone-50 print:hidden"><div class="container flex items-center justify-end gap-6 py-2.5 sm:py-3.5"><div><h2 class="sr-only">gcweb:footer.about-site</h2><div><img alt="gcweb:footer.gc-symbol" width="300" height="71" class="h-10 w-auto" src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg"></div></div></div></footer><link rel="modulepreload"><script> </script><script type="module" async=""> </script><script src="/api/client-env?v=undefined"></script></body></html>"`;