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

@@ -11,8 +11,12 @@ 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';
+import NasaLogoColor from '../nasa-logo-color';
+
 const Banner = React.lazy(() => import('../banner'));
 const CookieConsent = React.lazy(() => import('../cookie-consent'));
 
@@ -24,11 +28,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';
 
@@ -58,7 +65,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 +106,19 @@ function LayoutRoot(props: { children?: ReactNode }) {
           />
         )}
       </PageBody>
-      <PageFooter isHidden={hideFooter} />
+      {isUSWDSEnabled ? (
+        <PageFooter
+          settings={footerSettings}
+          primarySection={{
+            mainNavItems,
+            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/index.tsx

@@ -0,0 +1,141 @@
+import React, { useMemo } from 'react';
+import { Icon } from '@trussworks/react-uswds';
+import { 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 {
+  primarySection: any;
+  settings: any;
+  hideFooter?: boolean;
+  logoSvg?: SVGElement | JSX.Element;
+}
+//TODO: clean up PageFooterProps, Unexpected any. Specify a different interface.
+
+export default function PageFooter({
+  settings,
+  primarySection,
+  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 { mainNavItems, subNavItems } = primarySection;
+
+  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 bg-base-lightest 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'>
+                  NASA EarthData 2024 • v0.17.0
+                  {/* {version} */}
+                </span>
+              </a>
+            </div>
+            <div className='grid-col-4 footer-text grid-gap-6 flex-justify-end'>
+              <span>NASA Official: </span>
+              <a
+                key={secondarySection.type}
+                href={`mailto:${secondarySection.to}`}
+              >
+                <Icon.Mail
+                  className='margin-right-1 width-205 height-auto position-relative'
+                  id='mail_icon'
+                />
+                {secondarySection.title}
+              </a>
+            </div>
+          </div>
+        }
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,43 @@
+@use '$styles/veda-ui-theme-vars.scss' as themeVars;
+
+.footer-text {
+  color: 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: 64rem;
+}
+#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;
+}

app/scripts/components/common/page-header/default-config.ts

@@ -1,10 +1,14 @@
-import { getString, getNavItemsFromVedaConfig } from 'veda';
+import {
+  getString,
+  getNavItemsFromVedaConfig,
+  getFooterSettingsFromVedaConfig
+} from 'veda';
 import {
   InternalNavLink,
   ExternalNavLink,
+  ActionNavItem,
   DropdownNavLink,
-  NavItemType,
-  ActionNavItem
+  NavItemType
 } from '$components/common/page-header/types';
 
 import {
@@ -22,6 +26,7 @@ let defaultMainNavItems: (
 )[] = [
   {
     id: 'data-catalog',
+
     title: 'Data Catalog',
     to: DATASETS_PATH,
     type: NavItemType.INTERNAL_LINK
@@ -64,6 +69,15 @@ let defaultSubNavItems: (
   }
 ];
 
+const defaultFooterSettings = {
+  secondarySection: {
+    title: 'email test',
+    to: '/data-catalog',
+    type: 'Email'
+  },
+  returnToTop: true
+};
+
 if (process.env.GOOGLE_FORM !== undefined) {
   defaultSubNavItems = [
     ...defaultSubNavItems,
@@ -80,5 +94,7 @@ const mainNavItems =
   getNavItemsFromVedaConfig()?.mainNavItems ?? defaultMainNavItems;
 const subNavItems =
   getNavItemsFromVedaConfig()?.subNavItems ?? defaultSubNavItems;
+const footerSettings =
+  getFooterSettingsFromVedaConfig() ?? defaultFooterSettings;
 
-export { mainNavItems, subNavItems };
+export { mainNavItems, subNavItems, footerSettings };

app/scripts/components/common/page-header/logo-container/logo-container.scss

@@ -4,6 +4,7 @@
   display: flex;
   font-family: themeVars.$veda-uswds-basefont-sans;
   gap: themeVars.$veda-uswds-spacing-105;
+  max-height: 2.5rem;
 
   #logo-container-link {
     display: flex;
@@ -13,25 +14,12 @@
     font-size: themeVars.$veda-uswds-fontsize-lg;
   }
 
-  #nasa-logo-pos {
-    opacity: 1;
-    transform: translate(0, -100%);
-    /* TODO: Fix the svg to not require any styles!
-     * - set opacity to 1 in svg and fix translation
-     */
-  }
-
   @media (width <= themeVars.$veda-uswds-spacing-desktop) {
-    #nasa-logo-pos {
+    svg {
       display: none;
     }
   }
 
-  svg {
-    height: 2.5rem;
-    width: auto;
-  }
-
   #logo-container-beta-tag {
     color: white;
     align-self: center;

app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx

@@ -12,6 +12,7 @@ export const createDynamicNavMenuList = (
   isOpen?: boolean[],
   setIsOpen?: SetState<boolean[]>
 ): JSX.Element[] => {
+  // @TODO:Need to elevate this functionality to outside of the header. Allow this function to take classname as an argument so we can dynamcally create different types of links across multiple compoenents and apply various visual styling.
   return navItems.map((item, index) => {
     switch (item.type) {
       case NavItemType.DROPDOWN: