Merge pull request #893 from DTS-STN/update-header

Replace DS Header

__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(() => {

__tests__/pages/questions.test.tsx

@@ -9,6 +9,10 @@ import { axe } from 'jest-axe'
 import Questions from '../../pages/questions/index'
 import { mockPartialGetRequest } from '../utils/factory'
 
+jest.mock('next/link', () => {
+  return ({ children }) => children
+})
+
 describe('index page', () => {
   let useRouter
 

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 (
+    <nav aria-label="breadcrumbs">
+      <ul className="block text-base font-body mt-6">
+        {items.map((item, index) => (
+          <li
+            key={item.link}
+            className="inline-block min-w-0 max-w-full truncate -my-4 px-1"
+          >
+            <FontAwesomeIcon
+              icon={solidChevronRight}
+              className={`${
+                index === 0 ? 'hidden' : ''
+              } h-[8px] w-[8px] py-[2px] pr-[4px]`}
+            />
+            <Link href={item.link} locale={locale}>
+              <a className="font-sans text-[16px] leading-[23px] font-[400] text-[#295376] hover:text-[#0535D2] underline">
+                {item.text}
+              </a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}

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 (
+    <>
+      <nav id={id} className="skip-main">
+        <a
+          id="skipToMainContent"
+          className="bg-white text-custom-blue-dark text-lg underline py-1 px-2 focus:outline-dark-goldenrod hover:bg-gray-dark"
+          href="#pageMainTitle"
+          data-cy-button="skip-Content"
+          draggable="false"
+        >
+          {headerText.skipToMainContent}
+        </a>
+      </nav>
+      <header>
+        <h2 className="sr-only">{headerText.globalHeader}</h2>
+        <h3 className="sr-only">{headerText.testSiteNotice}</h3>
+        <div className="flex-col flex lg:flex lg:flex-row justify-between mb-4">
+          <div
+            className="w-full flex flex-row justify-between items-start"
+            role="navigation"
+            aria-labelledby="officialSiteNav"
+          >
+            <h3 className="sr-only" id="officialSiteNav">
+              {headerText.officialSiteNavigation}
+            </h3>
+            <a href="https://www.canada.ca">
+              <Image
+                src={language === 'en' ? '/sig-blk-fr.svg' : '/sig-blk-en.svg'}
+                alt={headerText.logoAltText}
+                width="375"
+                height="35"
+              />
+            </a>
+            <h3 className="sr-only">{headerText.languageSelection}</h3>
+            <Link href={langUrl} locale={language}>
+              <a className="ml-6 sm:ml-16 -mt-1 underline font-lato text-[16px] leading-[23px] text-[#295376] hover:text-[#0535D2]">
+                <span className="md:hidden font-bold">{shortLanguageText}</span>
+                <span className="hidden md:inline font-[400]">
+                  {languageText}
+                </span>
+              </a>
+            </Link>
+          </div>
+        </div>
+        <hr className="absolute left-0 border-b-2 border-[#38414D] w-screen w-full" />
+        <Breadcrumb items={breadcrumbItems} locale={locale} />
+      </header>
+    </>
+  )
+}

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<{
       <main className="mainContent">
         <div className="xs:container s:container md:container lg:container mx-0 flex flex-col mb-16 mt-8">
           <Header
-            id="mainHeader"
-            lang={router.locale}
-            linkPath={langToggleLink}
-            isAuthenticated={true}
-            menuProps={menuProps}
-            topnavProps={topnavProps}
-            searchProps={searchProps}
-            breadCrumbItems={breadcrumbs}
-            useParentContainer={true}
+            id="header"
+            locale={router.locale}
+            langUrl={langToggleLink}
+            breadcrumbItems={breadcrumbs}
+            headerText={{
+              skipToMainContent: tsln.skipToMainContent,
+              globalHeader: tsln.globalHeader,
+              testSiteNotice: tsln.testSiteNotice,
+              officialSiteNavigation: tsln.officialSiteNavigation,
+              languageSelection: tsln.languageSelection,
+              logoAltText: tsln.logoAltText,
+            }}
           />
           <Heading
             id="applicationTitle"

i18n/web/en.ts

@@ -15,6 +15,12 @@ const en: WebTranslations = {
   _language: Language.EN,
   metaLanguage: ISOLanguage.EN,
 
+  skipToMainContent: 'Skip to main content',
+  globalHeader: 'Global header',
+  testSiteNotice: 'Test site notice',
+  officialSiteNavigation: 'Canada.ca official site',
+  languageSelection: 'Language selection',
+  logoAltText: 'Government of Canada',
   oas: 'Old Age Security pension',
   gis: 'Guaranteed Income Supplement',
   alw: 'Allowance',

i18n/web/fr.ts

@@ -16,6 +16,12 @@ const fr: WebTranslations = {
   _language: Language.FR,
   metaLanguage: ISOLanguage.FR,
 
+  skipToMainContent: 'Passer au contenu principal',
+  globalHeader: 'En-tête général',
+  testSiteNotice: "Avis de site d'essai",
+  officialSiteNavigation: 'Site officiel de Canada.ca',
+  languageSelection: 'Sélection de la langue',
+  logoAltText: 'Gouvernement du Canada',
   oas: 'Pension de la Sécurité de la vieillesse',
   gis: 'Supplément de revenu garanti',
   alw: 'Allocation',

i18n/web/index.ts

@@ -13,6 +13,12 @@ export type WebTranslations = {
   _language: Language
   metaLanguage: ISOLanguage
 
+  skipToMainContent: string
+  globalHeader: string
+  testSiteNotice: string
+  officialSiteNavigation: string
+  languageSelection: string
+  logoAltText: string
   atLeast60: string
   haveNetIncomeLess: string
   headerWhatToKnow: string