Develop

config-plugins/typography-plugin.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const plugin = require("tailwindcss/plugin");
 const typography = plugin(function ({ addUtilities, theme }) {
   const newUtilities = {

src/components/Footer/Footer.js

@@ -39,6 +39,7 @@ for (const key in landscapeLinksEn.text) {
 
 export function Footer(props) {
   const {
+    className,
     error,
     lang,
     id,
@@ -94,7 +95,11 @@ export function Footer(props) {
   const container = containerClass || "ds-container";
 
   return (
-    <footer id={id} className="ds-w-full" data-testid="ds-footer">
+    <footer
+      id={id}
+      className={`${className} ds-w-full`}
+      data-testid="ds-footer"
+    >
       <>
         {withContextualBand && (
           <ContextualBand

src/components/MainBand/MainBand.css

@@ -0,0 +1,9 @@
+.footerLine::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 36px;
+  height: 4px;
+  background-color: #ffffff;
+}

src/components/MainBand/MainBand.js

@@ -8,29 +8,26 @@ import {
   footerTitle as footerTitleFr,
   aboutGovernment as aboutGovernmentFr,
 } from "../../translations/fr.json";
+import "./MainBand.css";
 
 export function MainBand(props) {
   return (
-    <>
-      <h3 className="ds-pt-[22px] ds-text-multi-neutrals-white ds-font-body ds-font-bold">
+    <footer className="ds-py-[22px]">
+      <h2 className="ds-sr-only" id="accessibleSectionHeader1">
+        {props.lang === "en" ? aboutGovernmentEn : aboutGovernmentFr}
+      </h2>
+      <h3 className="ds-text-[19px] ds-leading-[21px] ds-mb-2 ds-font-body ds-font-bold ds-text-multi-neutrals-white">
         {props.lang === "en" ? footerTitleEn : footerTitleFr}
       </h3>
-      <nav
-        className="ds-pb-6"
-        role="navigation"
-        aria-labelledby="accessibleSectionHeader1"
-      >
-        <h2 className="ds-sr-only" id="accessibleSectionHeader1">
-          {props.lang === "en" ? aboutGovernmentEn : aboutGovernmentFr}
-        </h2>
-        <ul className="sm:ds-grid sm:ds-grid-cols-3 ds-flex ds-flex-col ds-gap-1 ds-text-xs">
+      <nav role="navigation" aria-labelledby="accessibleSectionHeader1">
+        <ul className="sm:ds-grid sm:ds-grid-cols-3 ds-flex ds-flex-col ds-gap-1 ds-text-xs ds-ml-0">
           {props.landscapeLinks.map((value, index) => {
             return (
               <li
                 key={value + index}
                 className={`${
-                  index === 0 ? "footerLine ds-pb-[22px] ds-relative" : ""
-                } ds-text-white ds-w-64 sm:ds-w-56 lg:ds-w-80 ds-my-2.5`}
+                  index === 0 ? "footerLine ds-pb-[26px] ds-relative" : ""
+                } ds-list-none ds-text-white ds-w-64 sm:ds-w-56 lg:ds-w-80 ds-my-2.5 ds-ml-0`}
               >
                 <Link
                   id={"LandscapeLink" + index}
@@ -45,6 +42,6 @@ export function MainBand(props) {
           })}
         </ul>
       </nav>
-    </>
+    </footer>
   );
 }

src/components/SubFooterBand/SubFooterBand.js

@@ -40,15 +40,15 @@ export function SubFooterBand(props) {
               <h2 className="ds-sr-only" id="accessibleSectionHeader2">
                 {props.lang === "en" ? aboutSiteEn : aboutSiteFr}
               </h2>
-              <ul className="ds-flex ds-flex-col md:ds-flex-row ds-whitespace-nowrap ds-pt-4">
+              <ul className="ds-flex ds-flex-col md:ds-flex-row ds-whitespace-nowrap ds-pt-4 ds-ml-0">
                 {props.brandLinks
                   ? props.brandLinks.map(({ href, text, onClick }, index) => {
                       return (
                         <li
                           key={index}
                           className={`${
                             index === 0 ? "" : "md:ds-list-disc"
-                          } ds-pr-4 ds-mb-[17px] ds-list-inside ds-list-none ds-text-xxs`}
+                          } ds-pr-4 ds-mb-[17px] ds-list-inside ds-list-none ds-text-xxs ds-ml-0 ds-font-body`}
                         >
                           <Link
                             onClick={onClick ? onClick : undefined}
@@ -67,7 +67,7 @@ export function SubFooterBand(props) {
                           key={index}
                           className={`${
                             index === 0 ? "" : "md:ds-list-disc"
-                          } ds-pr-4 ds-mb-[17px] ds-list-inside ds-list-none ds-text-xxs`}
+                          } ds-pr-4 ds-mb-[17px] ds-list-inside ds-list-none ds-text-xxs ds-ml-0 ds-font-body`}
                         >
                           <Link
                             onClick={props.onClick ? props.onClick : undefined}

src/styles/globals.css

@@ -2,16 +2,6 @@
   background-image: url("../assets/bg-banner-v2.png");
 }
 
-.footerLine::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 36px;
-  height: 4px;
-  background-color: #ffffff;
-}
-
 /* Uses mobile background on smaller screens*/
 @media (max-width: 449px) {
   .bannerBg {

tailwind.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const plugin = require("tailwindcss/plugin");
 
 module.exports = {