fix footer layout and links (#447)

* fix footer layout and links
* Fix up trusswork's `<Footer>` + `<Logo>` + `<Address>` to match design

client/src/components/J40Footer.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import {Footer, Logo, FooterNav, Address} from '@trussworks/react-uswds';
+import {
+  Address,
+  Footer,
+  FooterNav,
+  Logo,
+  GridContainer, Grid,
+} from '@trussworks/react-uswds';
+import {} from '@trussworks/react-uswds';
 import {useIntl} from 'gatsby-plugin-intl';
 import {defineMessages} from 'react-intl';
 
@@ -51,20 +58,66 @@ const J40Footer = () => {
     },
   });
 
+  // see https://designsystem.digital.gov/components/footer/
   return (
     <>
       <Footer
         size="big"
         className={'j40-footer'}
-        primary={<></>}
+        primary={
-        secondary={<FooterNav
+          <GridContainer><Grid>
+            <FooterNav
               aria-label={intl.formatMessage(messages.arialabelfooter)}
               size="big" // fyi you leave this off and it silently fails...
               links={[
+                ['Contacts',
+                  <Address
+                    key={'footeraddress'}
+                    className={'j40-footer-address'}
+                    size={'big'}
+                    items={[
+                      '730 Jackson Pl NW',
+                      'Washington, D.C. 20506',
+                      '(202) 395-5750',
+                    ]}
+                  />,
+                ],
                 [
-              <>
+                  intl.formatMessage(messages.moreinfoheader),
+                  <a
+                    key={'whitehouselink2'}
+                    href={'https://www.whitehouse.gov/'}
+                    target={'_blank'}
+                    rel={'noreferrer'}>Whitehouse.gov</a>,
+                  <a
+                    key="foialink"
+                    target={'_blank'}
+                    rel={'noreferrer'}
+                    href={'https://www.whitehouse.gov/ceq/foia'}>
+                    {intl.formatMessage(messages.foia)}
+                  </a>,
+                  <a
+                    key={'privacylink'}
+                    target={'_blank'}
+                    rel={'noreferrer'}
+                    href={'https://www.whitehouse.gov/privacy/'}>
+                    {intl.formatMessage(messages.privacy)}
+                  </a>,
+                ],
+                [
+                  intl.formatMessage(messages.questionsheader),
+                  <a
+                    key={'contactlink'}
+                    href={'https://www.usa.gov/'}>
+                    {intl.formatMessage(messages.contactlink)}
+                  </a>,
+                ],
+              ]}
+            />
+          </Grid></GridContainer>}
+        secondary={
           <Logo
-                  size="slim"
+            size="medium"
             key={'logoimg'}
             className={'j40-footer-logo'}
             image={
@@ -76,40 +129,6 @@ const J40Footer = () => {
             heading={<p
               className={'j40-footer-logo-heading'}>
               {intl.formatMessage(messages.logotitle)}</p>}
-                />
-              </>,
-              <>
-                <Address
-                  key={'footeraddress'}
-                  items={[
-                    '730 Jackson Pl NW',
-                    'Washington, D.C. 20506',
-                    '(202) 395-5750',
-                  ]}
-                />
-              </>,
-            ],
-            [
-              intl.formatMessage(messages.moreinfoheader),
-              <a
-                href={'https://www.whitehouse.gov/'}
-                target={'_blank'}
-                rel={'noreferrer'}
-                key={'whitehouselink2'}>Whitehouse.gov</a>,
-              <a href="#" key={'https://www.whitehouse.gov/ceq/foia'}>
-                {intl.formatMessage(messages.foia)}
-              </a>,
-              <a href="#" key={'https://www.whitehouse.gov/privacy/'}>
-                {intl.formatMessage(messages.privacy)}
-              </a>,
-            ],
-            [
-              intl.formatMessage(messages.questionsheader),
-              <a href="#" key={'privacylink'}>
-                {intl.formatMessage(messages.contactlink)}
-              </a>,
-            ],
-          ]}
           />}
       />
     </>

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

@@ -7,12 +7,14 @@ exports[`J40Footer renders correctly 1`] = `
   >
     <div
       class="usa-footer__primary-section"
-    />
-    <div
-      class="usa-footer__secondary-section"
     >
       <div
         class="grid-container"
+        data-testid="gridContainer"
+      >
+        <div
+          class=""
+          data-testid="grid"
         >
           <nav
             aria-label="Footer navigation"
@@ -30,29 +32,7 @@ exports[`J40Footer renders correctly 1`] = `
                   <h4
                     class="usa-footer__primary-link"
                   >
-                  <div
+                    Contacts
-                    class="usa-footer__logo grid-row grid-gap-2 j40-footer-logo"
-                    data-testid="footerLogo"
-                  >
-                    <div
-                      class="grid-col-auto"
-                    >
-                      <img
-                        alt="Whitehouse logo"
-                        class="usa-footer__logo-img"
-                        src="test-file-stub"
-                      />
-                    </div>
-                    <div
-                      class="grid-col-auto"
-                    >
-                      <p
-                        class="j40-footer-logo-heading"
-                      >
-                        Council on Environmental Quality
-                      </p>
-                    </div>
-                  </div>
                   </h4>
                   <ul
                     class="usa-list usa-list--unstyled"
@@ -61,23 +41,23 @@ exports[`J40Footer renders correctly 1`] = `
                       class="usa-footer__secondary-link"
                     >
                       <address
-                      class="usa-footer__address"
+                        class="usa-footer__address j40-footer-address"
                       >
                         <div
                           class="usa-footer__contact-info grid-row grid-gap"
                         >
                           <div
-                          class=""
+                            class="grid-col-auto"
                           >
                             730 Jackson Pl NW
                           </div>
                           <div
-                          class=""
+                            class="grid-col-auto"
                           >
                             Washington, D.C. 20506
                           </div>
                           <div
-                          class=""
+                            class="grid-col-auto"
                           >
                             (202) 395-5750
                           </div>
@@ -116,7 +96,9 @@ exports[`J40Footer renders correctly 1`] = `
                       class="usa-footer__secondary-link"
                     >
                       <a
-                      href="#"
+                        href="https://www.whitehouse.gov/ceq/foia"
+                        rel="noreferrer"
+                        target="_blank"
                       >
                         Freedom of Information Act (FOIA)
                       </a>
@@ -125,7 +107,9 @@ exports[`J40Footer renders correctly 1`] = `
                       class="usa-footer__secondary-link"
                     >
                       <a
-                      href="#"
+                        href="https://www.whitehouse.gov/privacy/"
+                        rel="noreferrer"
+                        target="_blank"
                       >
                         Privacy Policy
                       </a>
@@ -151,7 +135,7 @@ exports[`J40Footer renders correctly 1`] = `
                       class="usa-footer__secondary-link"
                     >
                       <a
-                      href="#"
+                        href="https://www.usa.gov/"
                       >
                         Find a contact at USA.gov
                       </a>
@@ -163,6 +147,38 @@ exports[`J40Footer renders correctly 1`] = `
           </nav>
         </div>
       </div>
+    </div>
+    <div
+      class="usa-footer__secondary-section"
+    >
+      <div
+        class="grid-container"
+      >
+        <div
+          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
+          data-testid="footerLogo"
+        >
+          <div
+            class="mobile-lg:grid-col-auto"
+          >
+            <img
+              alt="Whitehouse logo"
+              class="usa-footer__logo-img"
+              src="test-file-stub"
+            />
+          </div>
+          <div
+            class="mobile-lg:grid-col-auto"
+          >
+            <p
+              class="j40-footer-logo-heading"
+            >
+              Council on Environmental Quality
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   </footer>
 </DocumentFragment>
 `;

client/src/styles/global.scss

@@ -164,15 +164,17 @@ $primary-color: #112f4e;
 }
 
 .j40-footer {
-  .usa-footer__contact-info {
+  .j40-footer-logo {
-    justify-content: center;
+    font-weight: bold;
-    line-height: 1.5;
-    text-align: center;
   }
 
-  .j40-footer-logo {
+  .j40-footer-address {
+    .usa-footer__contact-info {
+      font-weight: normal;
+      text-align: left;
       display: inline-block;
-    text-align: center;
+      line-height: 1.5;
+    }
   }
 }