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

@@ -17,6 +17,9 @@ import {
 } 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'));
@@ -29,11 +32,14 @@ import NavWrapper from '$components/common/nav-wrapper';
 import Logo from '$components/common/page-header-legacy/logo';
 import {
   mainNavItems,
-  subNavItems
+  subNavItems,
+  footerSettings
 } 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';
 
@@ -64,7 +70,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 +112,17 @@ function LayoutRoot(props: { children?: ReactNode }) {
           />
         )}
       </PageBody>
-      <PageFooter isHidden={hideFooter} />
+      {isUSWDSEnabled ? (
+        <PageFooter
+          settings={footerSettings}
+          mainNavItems={mainNavItems}
+          subNavItems={subNavItems}
+          hideFooter={hideFooter}
+          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/footer.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { navItems, footerSettings } 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;
+
+describe('PageFooter', () => {
+  beforeEach(() => {
+    render(
+      <PageFooter
+        settings={mockFooterSettings}
+        mainNavItems={mockMainNavItems}
+        subNavItems={mockSubNavItems}
+        hideFooter={hideFooter}
+        logoSvg={<NasaLogoColor />}
+      />
+    );
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  test('renders the PageFooter', () => {
+    const footerElement = document.querySelector('footer');
+
+    expect(footerElement).toBeInTheDocument();
+    expect(footerElement).not.toHaveClass('display-none');
+  });
+  test('renders correct buttons and links', () => {
+    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 functionality', () => {
+  test('Return to top does not show', () => {
+    const updatedMockSettings = { ...mockFooterSettings, returnToTop: false };
+
+    render(
+      <PageFooter
+        settings={updatedMockSettings}
+        mainNavItems={mockMainNavItems}
+        subNavItems={mockSubNavItems}
+        hideFooter={hideFooter}
+        logoSvg={<NasaLogoColor />}
+      />
+    );
+    expect(() => screen.getByText('Return to top')).toThrow();
+  });
+  test('Hide footer should function correctly', () => {
+    const updatedMockSettings = { ...mockFooterSettings, returnToTop: false };
+
+    render(
+      <PageFooter
+        settings={updatedMockSettings}
+        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,141 @@
+import React, { useMemo } from 'react';
+import { Icon } from '@trussworks/react-uswds';
+import { DropdownNavLink, FooterSettings, NavLinkItem } from 'veda';
+import { ActionNavItem, NavItemType } from '../page-header/types';
+import { NavItemCTA } from '../page-header/nav/nav-item-cta';
+import {
+  USWDSFooter,
+  USWDSFooterNav,
+  USWDSAddress
+} from '$components/common/uswds';
+import './styles.scss';
+
+interface PageFooterProps {
+  //use of NavItem is causing issues with TS and throwing erros in the .
+  mainNavItems: (NavLinkItem | DropdownNavLink | ActionNavItem)[];
+  subNavItems: (NavLinkItem | DropdownNavLink | ActionNavItem)[];
+  settings: FooterSettings;
+  hideFooter?: boolean;
+  logoSvg?: SVGElement | JSX.Element;
+}
+//TODO: clean up PageFooterProps, Unexpected any. Specify a different interface.
+
+export default function PageFooter({
+  settings,
+  mainNavItems,
+  subNavItems,
+  hideFooter,
+  logoSvg
+}: PageFooterProps) {
+  const returnToTopButton = () => {
+    return (
+      <div
+        id='return-to-top-container'
+        className='margin-left-auto margin-right-auto'
+      >
+        <a className='usa-link text-primary' href='#'>
+          Return to top
+        </a>
+      </div>
+    );
+  };
+
+  const { returnToTop, secondarySection } = settings;
+  /* eslint-disable */
+
+  const createNavElement = (navItems, linkClasses) => {
+    //removing 'dropdown' items from array
+    let 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 (
+            <a className={linkClasses} href={item.to} key={item.id}>
+              {item.title}
+            </a>
+          );
+
+        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>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,46 @@
+@use '$styles/veda-ui-theme-vars.scss' as themeVars;
+
+.footer-text {
+  color: themeVars.$veda-uswds-color-base-white;
+  align-self: center;
+  display: flex;
+  font-size: themeVars.$veda-uswds-fontsize-sm;
+  font-weight: themeVars.$veda-uswds-fontweight-regular;
+  gap: themeVars.$veda-uswds-spacing-105;
+}
+
+#return-to-top-container {
+  padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5;
+  max-width: themeVars.$veda-uswds-spacing-desktop;
+}
+#footer_primary_container {
+  padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5;
+  background-color: themeVars.$veda-uswds-color-base-lightest;
+}
+.usa-footer__secondary-section {
+  background-color: themeVars.$veda-uswds-color-base-darkest;
+}
+
+.usa-footer__primary-section {
+  background-color: themeVars.$veda-uswds-color-base-lightest;
+  text-underline-offset: themeVars.$veda-uswds-spacing-5;
+}
+
+#mail_icon {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.usa-footer__address > .grid-row {
+  justify-content: flex-end;
+}
+
+address {
+  font-style: normal;
+  font-weight: themeVars.$veda-uswds-fontweight-regular;
+  font-size: themeVars.$veda-uswds-fontsize-sm;
+  text-underline-offset: themeVars.$veda-uswds-spacing-5;
+}
+.usa-footer__contact-info {
+  line-height: unset;
+}