feat: [#188057802] updated footer and header to align with NJ gov

newjersey · Oct 11, 2024 · 453db3f · 453db3f
1 parent 43c5505
commit 453db3f
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 55 deletions.
diff --git a/web/src/components/PageFooter.tsx b/web/src/components/PageFooter.tsx
@@ -16,68 +16,95 @@ export const PageFooter = (): ReactElement => {
         } margin-x-auto padding-y-4 grid-container-widescreen desktop:padding-x-7`}
       >
         <section aria-label="New Jersey Office of Innovation information and services">
-          <div className={`${isLargeScreen ? "" : "flex flex-column flex-align-center"}`}>
-            <a
-              href={Config.footer.linkOne}
-              className="margin-right-1 text-white"
-              target="_blank"
-              rel="noreferrer"
-            >
-              {Config.footer.linkOneText}
-            </a>
-
-            <a
-              href={Config.footer.linkTwo}
-              className="margin-left-1 text-white"
-              target="_blank"
-              rel="noreferrer"
-            >
-              {Config.footer.linkTwoText}
-            </a>
-          </div>
+          <ul
+            className={`${
+              isLargeScreen ? "flex" : "flex flex-column flex-align-center"
+            } footer-social-media-structure`}
+          >
+            <li>
+              <div>
+                <a
+                  href={Config.footer.linkOne}
+                  className="margin-right-1 text-white"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {Config.footer.linkOneText}
+                </a>
+              </div>
+            </li>
+            <li>
+              <div>
+                <a
+                  href={Config.footer.linkTwo}
+                  className="margin-left-1 text-white"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {Config.footer.linkTwoText}
+                </a>
+              </div>
+            </li>
+          </ul>
           <hr className="margin-y-2" />
-          <div className={`${isLargeScreen ? "" : "flex flex-column flex-align-center"}`}>
-            <span className="padding-right-1 text-center">
-              <a
-                href={Config.footer.officeLink}
-                className="text-white"
-                target="_blank"
-                rel="noreferrer noopener"
-                aria-label={Config.footer.madeWithLoveByTheOfficeOfInnovationAriaLabel}
-              >
-                {Config.footer.madeWithText}
-                &nbsp;<Icon className="text-accent-hot">favorite</Icon>&nbsp;
-                {Config.footer.byTheOfficeOfInnovationText}
-              </a>
-            </span>
+          <ul
+            className={`${
+              isLargeScreen ? "flex" : "flex flex-column flex-align-center"
+            } footer-social-media-structure`}
+          >
+            <li className="padding-right-1 text-center">
+              <div>
+                <a
+                  href={Config.footer.officeLink}
+                  className="text-white"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  aria-label={Config.footer.madeWithLoveByTheOfficeOfInnovationAriaLabel}
+                >
+                  {Config.footer.madeWithText}
+                  &nbsp;<Icon className="text-accent-hot">favorite</Icon>&nbsp;
+                  {Config.footer.byTheOfficeOfInnovationText}
+                </a>
+              </div>
+            </li>
 
-            <div className="padding-left-0 desktop:padding-left-1 tablet:display-inline">
-              {Config.footer.creditText}
-              <a href={Config.footer.creditLink} target="_blank" className="text-white" rel="noreferrer">
-                {Config.footer.creditLinkText}
-              </a>
-            </div>
-          </div>
+            <li className="padding-left-0 desktop:padding-left-1 tablet:display-inline">
+              <div>
+                {Config.footer.creditText}
+                <a href={Config.footer.creditLink} target="_blank" className="text-white" rel="noreferrer">
+                  {Config.footer.creditLinkText}
+                </a>
+              </div>
+            </li>
+          </ul>
           {!isLargeScreen && <hr className="margin-y-2" />}
         </section>
 
         <section aria-label="Social media">
           <div className="display-flex flex-column fac">
             <div>{Config.footer.officeExternalText}</div>
-            <div>
-              <a
-                href={Config.footer.gitHubLink}
-                target="_blank"
-                rel="noreferrer"
-                aria-label="GitHub"
-                className="margin-right-105"
-              >
-                <Icon className="footer-social-media-icon margin-top-1">github</Icon>
-              </a>
-              <a href={Config.footer.facebookLink} target="_blank" rel="noreferrer" aria-label="Facebook">
-                <Icon className="footer-social-media-icon margin-top-1">facebook</Icon>
-              </a>
-            </div>
+            <ul className={`footer-social-media-structure flex`}>
+              <li>
+                <div>
+                  <a
+                    href={Config.footer.gitHubLink}
+                    target="_blank"
+                    rel="noreferrer"
+                    aria-label="GitHub"
+                    className="margin-right-105"
+                  >
+                    <Icon className="footer-social-media-icon margin-top-1">github</Icon>
+                  </a>
+                </div>
+              </li>
+              <li>
+                <div>
+                  <a href={Config.footer.facebookLink} target="_blank" rel="noreferrer" aria-label="Facebook">
+                    <Icon className="footer-social-media-icon margin-top-1">facebook</Icon>
+                  </a>
+                </div>
+              </li>
+            </ul>
           </div>
         </section>
       </div>

diff --git a/web/src/components/njwds/Banner.tsx b/web/src/components/njwds/Banner.tsx
@@ -7,7 +7,12 @@ export const Banner = (): ReactElement => {
         <div className="grid-container-widescreen desktop:padding-x-7">
           <div className="nj-banner__inner margin-y-1 row-desktop-column-mobile fas flex-align-center-desktop-start-mobile space-between">
             <div className="flex fac margin-y-05">
-              <img className="nj-banner__header-seal" src="/vendor/img/nj_state_seal.png" alt="NJ flag" />
+              <img
+                className="nj-banner__header-seal"
+                src="/vendor/img/nj_state_seal.png"
+                alt="NJ flag"
+                role="presentation"
+              />
               <a href="https://nj.gov">Official Site of the State of New Jersey</a>
             </div>
             <div className="flex row-desktop-column-mobile">

diff --git a/web/src/styles/sections/footer.scss b/web/src/styles/sections/footer.scss
@@ -7,3 +7,14 @@
 .footer-social-media-icon:hover {
   color: $white;
 }
+
+ul.footer-social-media-structure {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    display: inline;
+    margin: 0;
+  }
+}