Merge branch '1135-Refactor-Layout-Components-Footer' into 1135-wiring-up-veda-config

Author: snmln

.env

@@ -14,5 +14,7 @@ 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'
+# 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

@@ -15,6 +15,7 @@ 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'));
@@ -117,6 +118,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
             subNavItems
           }}
           hideFooter={hideFooter}
+          logoSvg={<NasaLogoColor />}
         />
       ) : (
         <PageFooterLegacy hideFooter={hideFooter} />

app/scripts/components/common/nasa-logo-color.js

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { Icon } from '@trussworks/react-uswds';
 //TO DO: need to move NasaLogoColor outside of component and pass down as props
-import NasaLogoColor from '../../nasa-logo-color.js';
 import { NavItemType } from '../page-header/types.js';
 import { NavItemCTA } from '../page-header/nav/nav-item-cta.js';
 import {
@@ -15,13 +14,16 @@ import './styles.scss';
 interface PageFooterProps {
   primarySection: any;
   settings: any;
-  hidefooter?: boolean;
+  hideFooter?: boolean;
+  logoSvg?: SVGElement | JSX.Element;
 }
-//TODO: clean up PageFooterProps
+//TODO: clean up PageFooterProps, Unexpected any. Specify a different interface.
+
 export default function PageFooter({
   settings,
   primarySection,
-  hidefooter
+  hideFooter,
+  logoSvg
 }: PageFooterProps) {
   const returnToTopButton = () => {
     return (
@@ -91,7 +93,7 @@ export default function PageFooter({
       <USWDSFooter
         size='slim'
         returnToTop={returnToTop && returnToTopButton()}
-        className={hidefooter && 'display-none'}
+        className={hideFooter && 'display-none'}
         primary={
           <div
             id='footer_primary_container'
@@ -117,7 +119,7 @@ export default function PageFooter({
           <div id='footer_secondary_container' className='grid-row'>
             <div id='logo-container'>
               <a id='logo-container-link' href='#'>
-                {NasaLogoColor()}
+                <>{logoSvg}</>
                 <span className='footer-text'>
                   NASA EarthData 2024 • v0.17.0
                   {/* {version} */}

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

@@ -1,31 +1,5 @@
 @use '$styles/veda-ui-theme-vars.scss' as themeVars;
 
-#logo-container {
-  display: flex;
-  font-family: themeVars.$veda-uswds-basefont-sans;
-  gap: themeVars.$veda-uswds-spacing-105;
-
-  #logo-container-link {
-    display: flex;
-    align-items: center;
-    gap: themeVars.$veda-uswds-spacing-105;
-    font-weight: themeVars.$veda-uswds-fontweight-bold;
-    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
-     */
-  }
-
-  svg {
-    height: 2.75rem;
-    width: auto;
-  }
-}
 .footer-text {
   color: white;
   align-self: center;
@@ -50,7 +24,6 @@
 .usa-footer__primary-section {
   background-color: themeVars.$veda-uswds-color-base-lightest;
   text-underline-offset: themeVars.$veda-uswds-spacing-5;
-
 }
 
 #mail_icon {

app/scripts/components/common/page-footer/styles.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;