feat: Implement page footer with USWDS components

.env

@@ -14,5 +14,5 @@ GOOGLE_FORM = 'https://docs.google.com/forms/d/e/1FAIpQLSfGcd3FDsM3kQIOVKjzdPn4f
 
 SHOW_CONFIGURABLE_COLOR_MAP = 'TRUE'
 
-# Enables the refactor page header component that uses the USWDS design system
-ENABLE_USWDS_PAGE_HEADER = 'TRUE'
+ENABLE_USWDS_PAGE_HEADER = 'TRUE'
+ENABLE_USWDS_PAGE_FOOTER = 'TRUE'

app/scripts/components/common/layout-root/index.tsx

@@ -11,8 +11,11 @@ import styled from 'styled-components';
 import { Outlet } from 'react-router';
 import { reveal } from '@devseed-ui/animation';
 import { getBannerFromVedaConfig, getCookieConsentFromVedaConfig } from 'veda';
+
 import MetaTags from '../meta-tags';
 import PageFooter from '../page-footer';
+import PageFooterLegacy from '../page-footer-legacy';
+
 const Banner = React.lazy(() => import('../banner'));
 const CookieConsent = React.lazy(() => import('../cookie-consent'));
 
@@ -26,9 +29,11 @@ import {
   mainNavItems,
   subNavItems
 } from '$components/common/page-header/default-config';
+import { checkEnvFlag } from '$utils/utils';
 
 const appTitle = process.env.APP_TITLE;
 const appDescription = process.env.APP_DESCRIPTION;
+const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_FOOTER);
 
 export const PAGE_BODY_ID = 'pagebody';
 
@@ -58,7 +63,8 @@ function LayoutRoot(props: { children?: ReactNode }) {
   useEffect(() => {
     // When there is no cookie consent form set up
     !cookieConsentContent && setGoogleTagManager();
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Empty dependency array ensures this effect runs only once, and not during SSR
 
   const { title, thumbnail, description, hideFooter } =
     useContext(LayoutRootContext);
@@ -98,7 +104,11 @@ function LayoutRoot(props: { children?: ReactNode }) {
           />
         )}
       </PageBody>
-      <PageFooter isHidden={hideFooter} />
+      {isUSWDSEnabled ? (
+        <PageFooter />
+      ) : (
+        <PageFooterLegacy hideFooter={hideFooter} />
+      )}
     </Page>
   );
 }

app/scripts/components/common/page-footer.js → app/scripts/components/common/page-footer-legacy.js

@@ -109,7 +109,7 @@ const InfoList = styled.dl`
   }
 `;
 
-function PageFooter(props) {
+function PageFooterLegacy(props) {
   const nowDate = new Date();
 
   return (
@@ -174,8 +174,8 @@ function PageFooter(props) {
   );
 }
 
-export default PageFooter;
+export default PageFooterLegacy;
 
-PageFooter.propTypes = {
+PageFooterLegacy.propTypes = {
   isHidden: T.bool
 };

app/scripts/components/common/page-footer/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import NasaLogoColor from '../../nasa-logo-color';
+
+import {
+  USWDSFooter,
+  USWDSLink,
+  USWDSFooterNav,
+  USWDSLogo
+} from '$components/common/uswds';
+export default function PageFooter() {
+  return (
+    <>
+      <USWDSFooter
+        size='slim'
+        // returnToTop={returnToTop}
+        primary={
+          <div className='usa-footer__primary-container grid-row bg-base-lightest'>
+            <div className='mobile-lg:grid-col-8'>
+              <USWDSFooterNav
+                size='slim'
+                links={Array(4).fill(
+                  <USWDSLink
+                    variant='nav'
+                    href='#'
+                    className='usa-footer__primary-link'
+                  >
+                    Primary Link
+                  </USWDSLink>
+                )}
+              />
+            </div>
+          </div>
+        }
+        secondary={
+          <USWDSLogo
+            size='slim'
+            //Nasa logo not showing.
+            image={<NasaLogoColor />}
+            heading={<p className='usa-footer__logo-heading'>Name of Agency</p>}
+          />
+        }
+      />
+    </>
+  );
+}

app/scripts/components/common/page-footer/styles.scss

@@ -0,0 +1,7 @@
+@use '$styles/veda-ui-theme-vars.scss' as themeVars;
+.usa-footer__secondary-section {
+  color: themeVars.$veda-uswds-color-base-dark;
+}
+.usa-footer__primary-section {
+  color: themeVars.$veda-uswds-color-base-lightest;
+}

app/scripts/components/common/uswds/footer/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  Footer,
+  FooterNav,
+  SocialLink,
+  Logo,
+  Address,
+  FooterExtendedNavList
+} from '@trussworks/react-uswds';
+
+export function USWDSFooter(props) {
+  return <Footer {...props} />;
+}
+export function USWDSFooterNav(props) {
+  return <FooterNav {...props} />;
+}
+export function USWDSSocialLink(props) {
+  return <SocialLink {...props} />;
+}
+export function USWDSLogo(props) {
+  return <Logo {...props} />;
+}
+export function USWDSAddress(props) {
+  return <Address {...props} />;
+}
+export function USWDSFooterExtendedNavList(props) {
+  return <FooterExtendedNavList {...props} />;
+}

app/scripts/components/common/uswds/index.tsx

@@ -1,8 +1,16 @@
 export { USWDSAlert } from './alert';
 export { USWDSButtonGroup, USWDSButton } from './button';
-export { USWDSLink } from './link';
 export { USWDSBanner, USWDSBannerContent } from './banner';
+export {
+  USWDSFooter,
+  USWDSSocialLink,
+  USWDSLogo,
+  USWDSAddress,
+  USWDSFooterNav,
+  USWDSFooterExtendedNavList
+} from './footer';
 export { USWDSHeader, USWDSHeaderTitle } from './header';
-export { USWDSNavMenuButton } from './header/nav-menu-button';
 export { USWDSExtendedNav } from './header/extended-nav';
+export { USWDSNavMenuButton } from './header/nav-menu-button';
 export { USWDSTextInput, USWDSTextInputMask } from './input';
+export { USWDSLink } from './link';

app/scripts/components/home/index.tsx

@@ -24,8 +24,9 @@ import {
   ComponentOverride,
   ContentOverride
 } from '$components/common/page-overrides';
+import { checkEnvFlag } from '$utils/utils';
 
-
+const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_FOOTER);
 const homeContent = getOverride('homeContent');
 
 const Connections = styled(Hug)`
@@ -115,10 +116,10 @@ const getCoverProps = () => {
 
     return author
       ? {
-        ...coverProps,
-        attributionAuthor: author.name,
-        attributionUrl: author.url
-      }
+          ...coverProps,
+          attributionAuthor: author.name,
+          attributionUrl: author.url
+        }
       : coverProps;
   } else {
     return {
@@ -173,36 +174,37 @@ function RootHome() {
       </ComponentOverride>
 
       <ContentOverride with='homeContent'>
-
         <Audience />
 
         <FeaturedStories />
 
         <ValueProposition />
 
-        <Connections>
-          <ConnectionsBlock>
-            <ConnectionsBlockTitle>About</ConnectionsBlockTitle>
-            <ConnectionsList>
-              <li>
-                <Link to='/about'>
-                  <CollecticonChevronRightSmall /> Learn more
-                </Link>
-              </li>
-              <li>
-                <a
-                  href='#'
-                  onClick={(e) => {
-                    e.preventDefault();
-                    showFeedbackModal();
-                  }}
-                >
-                  <CollecticonChevronRightSmall /> Give feedback
-                </a>
-              </li>
-            </ConnectionsList>
-          </ConnectionsBlock>
-        </Connections>
+        {!isUSWDSEnabled && (
+          <Connections>
+            <ConnectionsBlock>
+              <ConnectionsBlockTitle>About</ConnectionsBlockTitle>
+              <ConnectionsList>
+                <li>
+                  <Link to='/about'>
+                    <CollecticonChevronRightSmall /> Learn more
+                  </Link>
+                </li>
+                <li>
+                  <a
+                    href='#'
+                    onClick={(e) => {
+                      e.preventDefault();
+                      showFeedbackModal();
+                    }}
+                  >
+                    <CollecticonChevronRightSmall /> Give feedback
+                  </a>
+                </li>
+              </ConnectionsList>
+            </ConnectionsBlock>
+          </Connections>
+        )}
       </ContentOverride>
     </PageMainContent>
   );