Fix footer alignment (#564)

* Fix footer alignment
* Can't really tweak alignment using trusswork's library.
* Reimplement parts of layout to control grid better.
* Removed trusswork's weird mobile expanding footer menu.
* Update snapshot
* Add some extra bottom padding for mobile view
* Replace fork of trussworks react/uswds with ^2.0.0
Since we're not using trusswork's `<Footer>` component anymore, we should be able to stop using our branch that fixes issues it has with Gatsby.

client/package-lock.json

@@ -2640,8 +2640,9 @@
       "dev": true
     },
     "@trussworks/react-uswds": {
-      "version": "git+https://git@github.com/nathillardusds/react-uswds.git#42b1907d172373cbcd5730d75c335b0c98cbeccf",
+      "version": "2.0.0",
-      "from": "@trussworks/react-uswds@git+https://git@github.com/nathillardusds/react-uswds#nathillardusds/ssr"
+      "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.0.0.tgz",
+      "integrity": "sha512-kWLAvAbl/wvFYyM4Y9Uo8AZTOpap/aTu7ckCzz/Lq9Na8jlx5prP3zAyviK9LGHsuCEQ7bUX57/FJMtJukEuKA=="
     },
     "@trysound/sax": {
       "version": "0.1.1",

client/package.json

@@ -71,7 +71,7 @@
     "ts-jest": "^27.0.0"
   },
   "dependencies": {
-    "@trussworks/react-uswds": "git+https://git@github.com/nathillardusds/react-uswds#nathillardusds/ssr",
+    "@trussworks/react-uswds": "^2.0.0",
     "@turf/bbox": "^6.5.0",
     "chroma-js": "^2.1.2",
     "d3-ease": "^3.0.1",

client/src/components/J40Footer.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import {
   Address,
-  Footer,
-  FooterNav,
   Logo,
-  GridContainer, Grid,
 } from '@trussworks/react-uswds';
-import {} from '@trussworks/react-uswds';
+import {NavList} from '@trussworks/react-uswds';
 import {useIntl} from 'gatsby-plugin-intl';
 import {defineMessages} from 'react-intl';
 
 // @ts-ignore
 import whitehouseIcon from '../images/eop-seal.svg';
+import J40MainGridContainer from './J40MainGridContainer';
 
 const J40Footer = () => {
   const intl = useIntl();
@@ -58,18 +56,7 @@ const J40Footer = () => {
     },
   });
 
-  // see https://designsystem.digital.gov/components/footer/
+  const NAVLINKS = [
-  return (
-    <>
-      <Footer
-        size="big"
-        className={'j40-footer'}
-        primary={
-          <GridContainer><Grid>
-            <FooterNav
-              aria-label={intl.formatMessage(messages.arialabelfooter)}
-              size="big" // fyi you leave this off and it silently fails...
-              links={[
     ['Contact',
       <Address
         key={'footeraddress'}
@@ -112,10 +99,30 @@ const J40Footer = () => {
         {intl.formatMessage(messages.contactlink)}
       </a>,
     ],
-              ]}
+  ];
-            />
+
-          </Grid></GridContainer>}
+  // see https://designsystem.digital.gov/components/footer/
-        secondary={
+  return (
+    // we cannot use trussworks Footer because it doesn't layout correct
+    // and there's no easy way to override. It comes down to the
+    // `className="mobile-lg:grid-col-6 desktop:grid-col-3">` needs to be
+    // `className="mobile-lg:grid-col-12 desktop:grid-col-4">` ugh.
+    <footer className={'j40-footer'}>
+      <div className="usa-footer__primary-section">
+        <J40MainGridContainer>
+          <div className={'grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4'}>
+            {NAVLINKS.map((links, i) => (
+              <div key={`linkSection-${i}`}
+                className="mobile-lg:grid-col-12 desktop:grid-col-4">
+                <NavSection links={links} />
+              </div>
+            ))}
+          </div>
+        </J40MainGridContainer>
+      </div>
+
+      <div className="usa-footer__secondary-section">
+        <J40MainGridContainer>
           <Logo
             size="medium"
             key={'logoimg'}
@@ -129,9 +136,24 @@ const J40Footer = () => {
             heading={<p
               className={'j40-footer-logo-heading'}>
               {intl.formatMessage(messages.logotitle)}</p>}
-          />}
           />
-    </>
+        </J40MainGridContainer>
+      </div>
+    </footer>
+  );
+};
+
+const NavSection = ({
+  links,
+}: {
+  links: React.ReactNode[]
+}): React.ReactElement => {
+  const [primaryLinkOrHeading, ...secondaryLinks] = links;
+  return (
+    <section className={'usa-footer__primary-content'}>
+      <h4 className="padding-top-1 padding-bottom-0">{primaryLinkOrHeading}</h4>
+      <NavList className={'padding-bottom-4'} type="footerSecondary" items={secondaryLinks} />
+    </section>
   );
 };
 

client/src/components/J40MainGridContainer.tsx

@@ -14,7 +14,7 @@ const J40MainGridContainer = ({
   children,
   fullWidth = false,
   blueBackground = false,
-  className = 'j40-grid-container '}: ILayoutProps) => {
+  className = ''}: ILayoutProps) => {
   // is it a blue background strip?
   className += (blueBackground ? 'j40-main-grid-blue-bk ' : '');
 

client/src/components/__snapshots__/J40Footer.spec.tsx.snap

@@ -3,39 +3,31 @@
 exports[`J40Footer renders correctly 1`] = `
 <DocumentFragment>
   <footer
-    class="usa-footer usa-footer--big j40-footer"
+    class="j40-footer"
   >
     <div
       class="usa-footer__primary-section"
     >
       <div
-        class="grid-container"
+        class="grid-container-desktop-lg j40-grid-container "
         data-testid="gridContainer"
       >
         <div
-          class=""
+          class="grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4"
-          data-testid="grid"
-        >
-          <nav
-            aria-label="Footer navigation"
-            class="usa-footer__nav"
         >
           <div
-              class="grid-row grid-gap-4"
+            class="mobile-lg:grid-col-12 desktop:grid-col-4"
-            >
-              <div
-                class="mobile-lg:grid-col-6 desktop:grid-col-3"
           >
             <section
-                  class="usa-footer__primary-content usa-footer__primary-content--collapsible"
+              class="usa-footer__primary-content"
             >
               <h4
-                    class="usa-footer__primary-link"
+                class="padding-top-1 padding-bottom-0"
               >
                 Contact
               </h4>
               <ul
-                    class="usa-list usa-list--unstyled"
+                class="usa-list usa-list--unstyled padding-bottom-4"
               >
                 <li
                   class="usa-footer__secondary-link"
@@ -68,18 +60,18 @@ exports[`J40Footer renders correctly 1`] = `
             </section>
           </div>
           <div
-                class="mobile-lg:grid-col-6 desktop:grid-col-3"
+            class="mobile-lg:grid-col-12 desktop:grid-col-4"
           >
             <section
-                  class="usa-footer__primary-content usa-footer__primary-content--collapsible"
+              class="usa-footer__primary-content"
             >
               <h4
-                    class="usa-footer__primary-link"
+                class="padding-top-1 padding-bottom-0"
               >
                 More information
               </h4>
               <ul
-                    class="usa-list usa-list--unstyled"
+                class="usa-list usa-list--unstyled padding-bottom-4"
               >
                 <li
                   class="usa-footer__secondary-link"
@@ -118,18 +110,18 @@ exports[`J40Footer renders correctly 1`] = `
             </section>
           </div>
           <div
-                class="mobile-lg:grid-col-6 desktop:grid-col-3"
+            class="mobile-lg:grid-col-12 desktop:grid-col-4"
           >
             <section
-                  class="usa-footer__primary-content usa-footer__primary-content--collapsible"
+              class="usa-footer__primary-content"
             >
               <h4
-                    class="usa-footer__primary-link"
+                class="padding-top-1 padding-bottom-0"
               >
                 Have a question about government services?
               </h4>
               <ul
-                    class="usa-list usa-list--unstyled"
+                class="usa-list usa-list--unstyled padding-bottom-4"
               >
                 <li
                   class="usa-footer__secondary-link"
@@ -144,15 +136,14 @@ exports[`J40Footer renders correctly 1`] = `
             </section>
           </div>
         </div>
-          </nav>
-        </div>
       </div>
     </div>
     <div
       class="usa-footer__secondary-section"
     >
       <div
-        class="grid-container"
+        class="grid-container-desktop-lg j40-grid-container "
+        data-testid="gridContainer"
       >
         <div
           class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"