From 3728d96cb829fecc27ff203038d79a9240356aa4 Mon Sep 17 00:00:00 2001 From: shawn320 Date: Thu, 21 Sep 2023 13:18:00 -0400 Subject: [PATCH 1/4] build header, remove DS header --- components/Layout/Breadcrumb.tsx | 41 ++++++++++++++++ components/Layout/Header.tsx | 81 ++++++++++++++++++++++++++++++++ components/Layout/index.tsx | 23 +++++---- i18n/web/en.ts | 6 +++ i18n/web/fr.ts | 6 +++ i18n/web/index.ts | 6 +++ public/sig-blk-en.svg | 8 ++++ public/sig-blk-fr.svg | 8 ++++ styles/globals.css | 8 ++++ 9 files changed, 177 insertions(+), 10 deletions(-) create mode 100644 components/Layout/Breadcrumb.tsx create mode 100644 components/Layout/Header.tsx create mode 100644 public/sig-blk-en.svg create mode 100644 public/sig-blk-fr.svg diff --git a/components/Layout/Breadcrumb.tsx b/components/Layout/Breadcrumb.tsx new file mode 100644 index 000000000..c497da94c --- /dev/null +++ b/components/Layout/Breadcrumb.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import Link from 'next/link' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faChevronRight as solidChevronRight } from '@fortawesome/free-solid-svg-icons' + +export interface BreadcrumbItem { + text: string + link: string +} + +interface BreadcrumbProps { + items?: BreadcrumbItem[] + locale: string +} + +export function Breadcrumb({ locale, items = [] }: BreadcrumbProps) { + return ( + + ) +} diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx new file mode 100644 index 000000000..42afa8154 --- /dev/null +++ b/components/Layout/Header.tsx @@ -0,0 +1,81 @@ +import React from 'react' +import Link from 'next/link' +import Image from 'next/image' +import { Breadcrumb, BreadcrumbItem } from './Breadcrumb' + +interface HeaderProps { + id: string + locale: string + langUrl: string + headerText: { + skipToMainContent: string + globalHeader: string + testSiteNotice: string + officialSiteNavigation: string + languageSelection: string + logoAltText: string + } + breadcrumbItems?: BreadcrumbItem[] +} + +export function Header({ + id, + locale, + langUrl, + headerText, + breadcrumbItems = [], +}: HeaderProps) { + const language = locale === 'en' ? 'fr' : 'en' + const languageText = language === 'en' ? 'English' : 'Français' + const shortLanguageText = language === 'en' ? 'EN' : 'FR' + + return ( + <> + +
+

{headerText.globalHeader}

+

{headerText.testSiteNotice}

+
+
+

+ {headerText.officialSiteNavigation} +

+ + {headerText.logoAltText} + +

{headerText.languageSelection}

+ + + {shortLanguageText} + + {languageText} + + + +
+
+
+ +
+ + ) +} diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx index b649b170e..8ea59ccef 100644 --- a/components/Layout/index.tsx +++ b/components/Layout/index.tsx @@ -1,5 +1,4 @@ import { - Header, Heading, Date, ContextualAlert as Message, @@ -8,6 +7,7 @@ import { useRouter } from 'next/router' import React from 'react' import { WebTranslations } from '../../i18n/web' import { useTranslation } from '../Hooks' +import { Header } from './Header' import { Footer } from './Footer' import { Head } from './Head' import { CTA } from '../ResultsPage/CTA' @@ -118,15 +118,18 @@ export const Layout: React.VFC<{
+ + Symbol of the Government of Canada - Symbole du Gouvernement du Canada + + + + + diff --git a/public/sig-blk-fr.svg b/public/sig-blk-fr.svg new file mode 100644 index 000000000..92be7e2ef --- /dev/null +++ b/public/sig-blk-fr.svg @@ -0,0 +1,8 @@ + + + Symbole du Gouvernement du Canada - Symbol of the Government of Canada + + + + + diff --git a/styles/globals.css b/styles/globals.css index f7ef4d259..150b84a03 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -10,6 +10,14 @@ @apply focus-visible:ring-black; } + .skip-main { + @apply absolute w-px h-px -left-96; + } + + .skip-main:focus-within { + @apply absolute w-screen h-auto top-4 left-0 z-50 flex justify-center; + } + table, p, label, From 250fdfec48a6fc8ff85566043c3e1963a4129081 Mon Sep 17 00:00:00 2001 From: shawn320 Date: Thu, 21 Sep 2023 14:09:55 -0400 Subject: [PATCH 2/4] update unit test --- __tests__/pages/home.test.tsx | 4 ++++ __tests__/pages/questions.test.tsx | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/__tests__/pages/home.test.tsx b/__tests__/pages/home.test.tsx index f251e0f78..956efdccb 100644 --- a/__tests__/pages/home.test.tsx +++ b/__tests__/pages/home.test.tsx @@ -8,6 +8,10 @@ import React from 'react' import { axe, toHaveNoViolations } from 'jest-axe' import Home from '../../pages/index' +jest.mock('next/link', () => { + return ({ children }) => children +}) + describe('index page', () => { let useRouter beforeAll(() => { diff --git a/__tests__/pages/questions.test.tsx b/__tests__/pages/questions.test.tsx index a3f6caae6..52d84bac7 100644 --- a/__tests__/pages/questions.test.tsx +++ b/__tests__/pages/questions.test.tsx @@ -9,6 +9,10 @@ import { axe } from 'jest-axe' import Questions from '../../pages/questions/index' import { mockPartialGetRequest } from './api/factory' +jest.mock('next/link', () => { + return ({ children }) => children +}) + describe('index page', () => { let useRouter From 82fd9bbdd4014da29b6da71d914f5cb058d88f81 Mon Sep 17 00:00:00 2001 From: shawn320 Date: Fri, 22 Sep 2023 09:27:36 -0400 Subject: [PATCH 3/4] thinner line --- components/Layout/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx index 42afa8154..1c7b06e36 100644 --- a/components/Layout/Header.tsx +++ b/components/Layout/Header.tsx @@ -73,7 +73,7 @@ export function Header({
-
+
From 784881ac01fb841d87af0668046000b719b4fcef Mon Sep 17 00:00:00 2001 From: shawn320 Date: Mon, 25 Sep 2023 13:49:32 -0400 Subject: [PATCH 4/4] adjust horizontal line width --- components/Layout/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx index 1c7b06e36..ae6ca4fe9 100644 --- a/components/Layout/Header.tsx +++ b/components/Layout/Header.tsx @@ -73,7 +73,7 @@ export function Header({ -
+