start with layout

.gitignore

@@ -6,7 +6,7 @@
 .pnp.js
 
 # testing
-/coverage
+/coverage/*
 /cypress/screenshots
 /cypress/videos
 /cypress/reports

components/Footer.js

@@ -0,0 +1,128 @@
+import PropTypes from 'prop-types'
+// import DateModified from '../atoms/DateModified'
+
+/**
+ * footer element for all pages
+ */
+
+export default function Footer(props) {
+  return (
+    <footer>
+      <h2 className="sr-only">siteFooter</h2>
+      <div className="layout-container mt-5">Report a problem</div>
+      {/* <div className="layout-container mb-2">
+        <DateModified date={process.env.NEXT_PUBLIC_BUILD_DATE} />
+      </div> */}
+      <div className="w-full">
+        <div className="w-full h-auto bg-footer-parliament-image bg-no-repeat bg-right-bottom bg-deep-blue-solid">
+          <div
+            className="py-7 layout-container"
+            role="navigation"
+            aria-labelledby="footerNav1"
+          >
+            <h3 className="sr-only" id="footerNav1">
+              {props.footerNav1}
+            </h3>
+            <ul className="flex flex-col text-sm sm:grid sm:grid-cols-2 xl:grid xl:grid-cols-3 sm:gap-1">
+              {' '}
+              {props.footerBoxLinks.map((value, index) => {
+                return (
+                  <li
+                    key={index}
+                    className="text-white w-64 md:w-56 lg:w-80 my-2.5 hover:underline"
+                  >
+                    <a className="font-body" href={value.footerBoxlink}>
+                      {value.footerBoxLinkText}
+                    </a>
+                  </li>
+                )
+              })}
+            </ul>
+          </div>
+        </div>
+        <div className="w-full h-full pb-4">
+          <div className="h-auto pt-5 layout-container flex flex-col xl:flex xl:flex-row md:justify-between">
+            <div
+              className="mt-3.5 xl:mt-5"
+              role="navigation"
+              aria-labelledby="footerNav2"
+            >
+              <h3 className="sr-only" id="footerNav2">
+                {props.footerNav2}
+              </h3>
+              <ul className="flex flex-col md:grid md:grid-cols-2 xl:flex lg:flex-row">
+                {props.links.map((value, index) => {
+                  return (
+                    <li
+                      key={index}
+                      className={
+                        index === 0
+                          ? 'lg:mb-4 mb-5 mr-2.5 list-inside list-disc xl:list-none text-sm'
+                          : 'lg:mb-4 mb-5 mr-2.5 list-inside list-disc text-sm'
+                      }
+                    >
+                      <a
+                        className="text-xs font-body text-deep-blue-dark hover:text-deep-blue-light"
+                        data-cy="social-media-link"
+                        href={value.link}
+                      >
+                        {value.linkText}
+                      </a>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+            <div>
+              <img
+                className="mb-2.5 mt-8 xl:mt-0 h-6 md:h-10 w-auto float-right"
+                src={props.footerLogoImage}
+                alt={props.footerLogoAltText}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+Footer.propTypes = {
+  /**
+   * Screenreader section indicator
+   */
+  footerNav1: PropTypes.string,
+
+  /**
+   * Screenreader section indicator
+   */
+  footerNav2: PropTypes.string,
+  /**
+   * array of objects containing the link text and link
+   */
+  footerBoxLinks: PropTypes.arrayOf(
+    PropTypes.shape({
+      footerBoxlink: PropTypes.string.isRequired,
+      footerBoxLinkText: PropTypes.string.isRequired,
+    })
+  ),
+  /**
+   * array of objects containing the link text and link
+   */
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      link: PropTypes.string.isRequired,
+      linkText: PropTypes.string.isRequired,
+    })
+  ),
+
+  /**
+   * alt text for footer canada-ca logo
+   */
+  footerLogoAltText: PropTypes.string.isRequired,
+
+  /**
+   * image path for footer logo
+   */
+  footerLogoImage: PropTypes.string.isRequired,
+}

components/Header.js

@@ -0,0 +1,164 @@
+import React from 'react'
+import propTypes from 'prop-types'
+import Link from 'next/link'
+// import Menu from '../molecules/Menu'
+import { useRouter } from 'next/router'
+
+export default function Header(props) {
+  const router = useRouter()
+  const currentRouteQueryParams = router.query
+  const { t } = props
+
+  const [langToggleLink, setLangToggleLink] = React.useState()
+  React.useEffect(() => {
+    let updatedLangToggleLink
+    if (props.toggleLangLink && router?.route && router.locale) {
+      updatedLangToggleLink = {
+        pathname: props.toggleLangLink,
+      }
+    }
+    setLangToggleLink(updatedLangToggleLink)
+  }, [router?.route, router?.locale, router?.query])
+
+  return (
+    <>
+      <nav
+        role="navigation"
+        aria-label={t.skipToMainContent}
+        className="skip-main"
+      >
+        <a
+          id="skipToMainContent"
+          className="bg-custom-blue-dark text-white px-2 focus:outline-black-solid hover:bg-gray-dark"
+          href="#wb-cont"
+          draggable="false"
+        >
+          {t.skipToMainContent}
+        </a>
+      </nav>
+
+      <header>
+        <div className="layout-container flex-col flex md:flex md:flex-row justify-between">
+          <div className="flex flex-row justify-between items-center lg:mt-7">
+            <a href={t.gocLink}>
+              <img
+                className="h-5 w-auto xs:h-6 sm:h-8 md:h-8 lg:h-7 xl:h-8 "
+                src={
+                  props.language === 'en'
+                    ? '/sig-blk-en.svg'
+                    : '/sig-blk-fr.svg'
+                }
+                alt={
+                  props.language === 'en'
+                    ? 'Government of Canada'
+                    : 'Gouvernement du Canada'
+                }
+              />
+            </a>
+
+            {/* Language selector for small screens */}
+            <Link
+              key={props.language}
+              href={langToggleLink || '/'}
+              locale={props.language === 'en' ? 'fr' : 'en'}
+            >
+              <a
+                className="block md:hidden md:text-sm ml-6 pb-2 sm:ml-16 underline font-body font-bold text-canada-footer-font  text-base hover:text-canada-footer-hover-font-blue"
+                // onClick={() => setLanguage(language)}
+                lang={props.language === 'en' ? 'fr' : 'en'}
+              >
+                {props.language === 'en' ? 'FR' : 'EN'}
+              </a>
+            </Link>
+          </div>
+
+          <div className="flex-col flex">
+            {/* Language selector for mid to larger screens */}
+            <Link
+              key={props.language}
+              href={langToggleLink || '/'}
+              locale={props.language === 'en' ? 'fr' : 'en'}
+            >
+              <a
+                className="md:block hidden pb-0 lg:pb-4 self-end underline font-body text-canada-footer-font hover:text-canada-footer-hover-font-blue "
+                data-cy="toggle-language-link"
+                // onClick={() => setLanguage(language)}
+                lang={props.language === 'en' ? 'fr' : 'en'}
+              >
+                {props.language === 'en' ? 'Français' : 'English'}
+              </a>
+            </Link>
+
+            {/* Placeholder for SearchBar in case is back in ver 4??? */}
+            {/* <SearchBar /> */}
+          </div>
+        </div>
+
+        {/* Border */}
+        <div className="mb-2 border-t pb-2 mt-4"></div>
+
+        {/* <Menu
+          loginText={t.login}
+          items={[
+            {
+              link: '/search',
+              text: t.serviceAndBenefits,
+            },
+            {
+              link: '/',
+              text: t.tools,
+            },
+            {
+              link: '/',
+              text: t.contactUs,
+            },
+          ]}
+        /> */}
+
+        {/* Place Holder for the breadcrumbs 
+
+        <div className="layout-container my-2">
+          <Breadcrumb items={breadcrumbItems} />
+        </div>
+        */}
+      </header>
+    </>
+  )
+}
+
+Header.propTypes = {
+  // Title of the page
+  title: propTypes.string,
+
+  /**
+   * current locale in the address
+   */
+  locale: propTypes.string,
+
+  /**
+   * Translated text
+   */
+  t: propTypes.object,
+
+  /**
+   * Link to change locals
+   */
+  toggleLangLink: propTypes.string,
+
+  /**
+   * Array of Items for the breadcrumb
+   */
+  // breadcrumbItems: propTypes.arrayOf(
+  //   propTypes.shape({
+  //     /**
+  //      * Text for the breadcrumb
+  //      */
+  //     text: propTypes.string,
+
+  //     /**
+  //      * Link for the breadcrumb
+  //      */
+  //     link: propTypes.string,
+  //   })
+  // ),
+}