feat: Implement page footer with USWDS components

.env

@@ -15,4 +15,6 @@ 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'
+# Enables the refactor page footer component that uses the USWDS design system
+ENABLE_USWDS_PAGE_FOOTER = 'TRUE'

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

@@ -10,13 +10,18 @@ import { useDeepCompareEffect } from 'use-deep-compare';
 import styled from 'styled-components';
 import { Outlet } from 'react-router';
 import { reveal } from '@devseed-ui/animation';
+import { NavLink } from 'react-router-dom';
+
 import {
   getBannerFromVedaConfig,
   getCookieConsentFromVedaConfig,
   getSiteAlertFromVedaConfig
 } from 'veda';
 import MetaTags from '../meta-tags';
 import PageFooter from '../page-footer';
+import PageFooterLegacy from '../page-footer-legacy';
+import NasaLogoColor from '../nasa-logo-color';
+
 const Banner = React.lazy(() => import('../banner'));
 const SiteAlert = React.lazy(() => import('../site-alert'));
 const CookieConsent = React.lazy(() => import('../cookie-consent'));
@@ -31,9 +36,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 isUswdsFooterEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_FOOTER);
 
 export const PAGE_BODY_ID = 'pagebody';
 
@@ -64,7 +71,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);
@@ -105,7 +113,17 @@ function LayoutRoot(props: { children?: ReactNode }) {
           />
         )}
       </PageBody>
-      <PageFooter isHidden={hideFooter} />
+      {isUswdsFooterEnabled ? (
+        <PageFooter
+          mainNavItems={mainNavItems}
+          subNavItems={subNavItems}
+          hideFooter={hideFooter}
+          linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
+          logoSvg={<NasaLogoColor />}
+        />
+      ) : (
+        <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/default-config.ts

@@ -0,0 +1,16 @@
+import { getFooterSettingsFromVedaConfig } from 'veda';
+const defaultFooterSettings = {
+  secondarySection: {
+    division: 'NASA EarthData 2024',
+    version: 'BETA VERSION',
+    title: 'NASA Official',
+    name: 'Manil Maskey',
+    to: 'test@example.com',
+    type: 'email'
+  },
+  returnToTop: false
+};
+const footerSettings =
+  getFooterSettingsFromVedaConfig() ?? defaultFooterSettings;
+
+export { footerSettings };

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

@@ -0,0 +1,97 @@
+import React, { ComponentType } from 'react';
+import { render, screen } from '@testing-library/react';
+import { navItems } from '../../../../../mock/veda.config.js';
+import NasaLogoColor from '../nasa-logo-color';
+import { NavItem } from '../page-header/types.js';
+
+import PageFooter from './index';
+
+const mockMainNavItems: NavItem[] = navItems.mainNavItems;
+const mockSubNavItems: NavItem[] = navItems.subNavItems;
+// const mockFooterSettings = footerSettings;
+const hideFooter = false;
+const mockLinkProperties = {
+  pathAttributeKeyName: 'to',
+  LinkElement: 'a' as unknown as ComponentType
+};
+jest.mock('./default-config', () => ({
+  footerSettings: {
+    secondarySection: {
+      division: 'NASA EarthData 2024',
+      version: 'BETA VERSION',
+      title: 'NASA Official',
+      name: 'test',
+      to: 'test@example.com',
+      type: 'email'
+    },
+    returnToTop: true
+  }
+}));
+
+describe('PageFooter', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  test('renders the PageFooter', () => {
+    render(
+      <PageFooter
+        mainNavItems={mockMainNavItems}
+        subNavItems={mockSubNavItems}
+        hideFooter={hideFooter}
+        logoSvg={<NasaLogoColor />}
+        linkProperties={mockLinkProperties}
+      />
+    );
+    const footerElement = document.querySelector('footer');
+
+    expect(footerElement).toBeInTheDocument();
+    expect(footerElement).not.toHaveClass('display-none');
+  });
+
+  test('renders correct buttons and links', () => {
+    render(
+      <PageFooter
+        mainNavItems={mockMainNavItems}
+        subNavItems={mockSubNavItems}
+        hideFooter={hideFooter}
+        logoSvg={<NasaLogoColor />}
+        linkProperties={mockLinkProperties}
+      />
+    );
+    expect(screen.getByText('Data Catalog')).toBeInTheDocument();
+    expect(screen.getByText('Exploration')).toBeInTheDocument();
+    expect(screen.getByText('Stories')).toBeInTheDocument();
+
+    expect(screen.getByText('About')).toBeInTheDocument();
+    expect(screen.getByText('Return to top')).toBeInTheDocument();
+  });
+});
+
+describe('PageFooter dynamic settings', () => {
+  test('Hide footer should function correctly', () => {
+    jest.mock('./default-config', () => ({
+      footerSettings: {
+        secondarySection: {
+          division: 'NASA EarthData 2024',
+          version: 'BETA VERSION',
+          title: 'NASA Official',
+          name: 'test',
+          to: 'test@example.com',
+          type: 'email'
+        },
+        returnToTop: true
+      }
+    }));
+    render(
+      <PageFooter
+        linkProperties={mockLinkProperties}
+        mainNavItems={mockMainNavItems}
+        subNavItems={mockSubNavItems}
+        hideFooter={true}
+        logoSvg={<NasaLogoColor />}
+      />
+    );
+    const footerElement = document.querySelector('footer');
+    expect(footerElement).toHaveClass('display-none');
+  });
+});

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

@@ -0,0 +1,155 @@
+import React, { useMemo } from 'react';
+import { Icon } from '@trussworks/react-uswds';
+import { DropdownNavLink, NavLinkItem } from '../types';
+import { ActionNavItem, NavItemType } from '../page-header/types';
+import { NavItemCTA } from '../page-header/nav/nav-item-cta';
+import ReturnToTopButton from './return-to-top-button';
+import { footerSettings } from './default-config';
+
+import { LinkProperties } from '$types/veda';
+import {
+  USWDSFooter,
+  USWDSFooterNav,
+  USWDSAddress
+} from '$components/common/uswds';
+
+interface PageFooterProps {
+  //use of NavItem is causing issues with TS and throwing erros in the .
+  mainNavItems: (NavLinkItem | DropdownNavLink | ActionNavItem)[];
+  subNavItems: (NavLinkItem | DropdownNavLink | ActionNavItem)[];
+  hideFooter?: boolean;
+  logoSvg?: SVGElement | JSX.Element;
+  linkProperties: LinkProperties;
+}
+
+//TODO: clean up PageFooterProps, Unexpected any. Specify a different interface.
+
+export default function PageFooter({
+  mainNavItems,
+  subNavItems,
+  hideFooter,
+  logoSvg,
+  linkProperties
+}: PageFooterProps) {
+  const { returnToTop, secondarySection } = footerSettings;
+  const FooterNavItemInternalLink = (item) => {
+    const { item: linkContents, linkClasses, linkProperties } = item;
+    if (linkProperties.LinkElement) {
+      const path = {
+        [linkProperties.pathAttributeKeyName]: linkContents.to
+      };
+      const LinkElement = linkProperties.LinkElement;
+      return (
+        <LinkElement
+          key={linkContents.id}
+          {...path}
+          className={linkClasses}
+          id={linkContents.id}
+        >
+          <span>{linkContents.title}</span>
+        </LinkElement>
+      );
+    }
+    // If the link provided is invalid, do not render the element
+    return null;
+  };
+
+  const createNavElement = (navItems, linkClasses) => {
+    //removing 'dropdown' items from array
+    const cleanedNavItems = navItems.filter((a) => {
+      if (a.type !== 'dropdown') {
+        return a;
+      }
+    });
+
+    return cleanedNavItems.map((item) => {
+      switch (item.type) {
+        case NavItemType.ACTION:
+          return <NavItemCTA item={item} customClasses={linkClasses} />;
+
+        case NavItemType.EXTERNAL_LINK:
+          return (
+            <a className={linkClasses} href={item.to} key={item.id}>
+              {item.title}
+            </a>
+          );
+        case NavItemType.INTERNAL_LINK:
+          return (
+            <FooterNavItemInternalLink
+              item={item}
+              linkClasses={linkClasses}
+              linkProperties={linkProperties}
+            />
+          );
+
+        default:
+          return <></>;
+      }
+    });
+  };
+
+  const primaryItems = useMemo(
+    () => createNavElement(mainNavItems, 'usa-footer__primary-link'),
+    [mainNavItems]
+  );
+  const secondaryItems = useMemo(
+    () =>
+      createNavElement(subNavItems, 'usa-link text-base-dark text-underline'),
+    [mainNavItems]
+  );
+
+  return (
+    <USWDSFooter
+      size='slim'
+      returnToTop={returnToTop && <ReturnToTopButton />}
+      className={hideFooter && 'display-none'}
+      primary={
+        <div
+          id='footer_primary_container'
+          className=' grid-row  usa-footer__primary-container'
+        >
+          <div className='mobile-lg:grid-col-8'>
+            <USWDSFooterNav
+              aria-label='Footer navigation'
+              size='slim'
+              links={primaryItems}
+            />
+          </div>
+          <div className='tablet:grid-col-4'>
+            <USWDSAddress
+              size='slim'
+              className='flex-justify-end'
+              items={secondaryItems}
+            />
+          </div>
+        </div>
+      }
+      secondary={
+        <div id='footer_secondary_container' className='grid-row'>
+          <div id='logo-container'>
+            <a id='logo-container-link' href='#'>
+              {logoSvg as JSX.Element}
+              <span className='footer-text'>
+                {secondarySection.division} • {secondarySection.version}
+              </span>
+            </a>
+          </div>
+          <div className='grid-col-4 footer-text grid-gap-6 flex-justify-end'>
+            <span>{secondarySection.title}: </span>
+            <a
+              key={secondarySection.type}
+              href={`mailto:${secondarySection.to}`}
+              className='text-primary-light'
+            >
+              <Icon.Mail
+                className='margin-right-1 width-205 height-auto position-relative'
+                id='mail_icon'
+              />
+              {secondarySection.name}
+            </a>
+          </div>
+        </div>
+      }
+    />
+  );
+}