refactor: 1135 slim footer

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

@@ -27,7 +27,10 @@ import NavWrapper from '$components/common/nav-wrapper';
 import Logo from '$components/common/page-header/logo';
 import {
   mainNavItems,
-  subNavItems
+  subNavItems,
+  footerSettings,
+  footerPrimaryContactItems,
+  footerPrimaryNavItems
 } from '$components/common/page-header/default-config';
 import { checkEnvFlag } from '$utils/utils';
 
@@ -105,7 +108,14 @@ function LayoutRoot(props: { children?: ReactNode }) {
         )}
       </PageBody>
       {isUSWDSEnabled ? (
-        <PageFooter />
+        <PageFooter
+          settings={footerSettings}
+          primarySection={{
+            footerPrimaryContactItems,
+            footerPrimaryNavItems
+          }}
+          hideFooter={hideFooter}
+        />
       ) : (
         <PageFooterLegacy hideFooter={hideFooter} />
       )}

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

@@ -1,43 +1,106 @@
-import React from 'react';
-import NasaLogoColor from '../../nasa-logo-color';
-
+import React, { ComponentType } from 'react';
+import { Icon } from '@trussworks/react-uswds';
+import NasaLogoColor from '../../nasa-logo-color.js';
 import {
   USWDSFooter,
-  USWDSLink,
   USWDSFooterNav,
-  USWDSLogo
+  USWDSAddress
 } from '$components/common/uswds';
-export default function PageFooter() {
+import './styles.scss';
+
+interface PageFooterProps {
+  primarySection: any;
+  settings: any;
+  hidefooter?: boolean;
+}
+
+export default function PageFooter({
+  settings,
+  primarySection,
+  hidefooter
+}: PageFooterProps) {
+  console.log(settings, primarySection, hidefooter);
+  const returnToTopButton = () => {
+    return (
+      <div
+        id='return-to-top-container'
+        className=' margin-left-auto margin-right-auto padding-x-4'
+      >
+        <a className='usa-link text-primary' href='#'>
+          Return to top
+        </a>
+      </div>
+    );
+  };
+
+  const { returnToTop, secondarySection } = settings;
+  const { footerPrimaryContactItems, footerPrimaryNavItems } = primarySection;
   return (
     <>
       <USWDSFooter
         size='slim'
-        // returnToTop={returnToTop}
+        returnToTop={returnToTop && returnToTopButton()}
+        // className={hidefooter && 'display-none'}
         primary={
-          <div className='usa-footer__primary-container grid-row bg-base-lightest'>
+          <div
+            id='footer_primary_container'
+            className=' grid-row bg-base-lightest'
+          >
             <div className='mobile-lg:grid-col-8'>
               <USWDSFooterNav
+                aria-label='Footer navigation'
                 size='slim'
                 links={Array(4).fill(
-                  <USWDSLink
-                    variant='nav'
-                    href='#'
-                    className='usa-footer__primary-link'
-                  >
-                    Primary Link
-                  </USWDSLink>
+                  <a className='usa-footer__primary-link' href='#'>
+                    PrimaryLink
+                  </a>
                 )}
               />
             </div>
+            <div className='tablet:grid-col-4'>
+              <USWDSAddress
+                size='slim'
+                className='flex-justify-end'
+                items={[
+                  <a className='usa-link text-base-dark' key='#' href='#'>
+                    News and Events
+                  </a>,
+                  <a className='usa-link text-base-dark' key='#' href='#'>
+                    About
+                  </a>,
+                  <a className='usa-link text-base-dark' key='#' href='#'>
+                    Contact Us
+                  </a>
+                ]}
+              />
+            </div>
           </div>
         }
         secondary={
-          <USWDSLogo
-            size='slim'
-            //Nasa logo not showing.
-            image={<NasaLogoColor />}
-            heading={<p className='usa-footer__logo-heading'>Name of Agency</p>}
-          />
+          <div id='footer_secondary_container' className='grid-row'>
+            <div id='logo-container'>
+              <a id='logo-container-link' href='#'>
+                {NasaLogoColor()}
+                <span className='footer-text'>
+                  NASA EarthData 2024 • v0.17.0
+                  {/* {version} */}
+                </span>
+              </a>
+            </div>
+            <div className='grid-col-4 footer-text grid-gap-6'>
+              <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

@@ -1,7 +1,65 @@
 @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
+     */
+  }
+
+  // @media (width <= themeVars.$veda-uswds-spacing-desktop) {
+  //   #nasa-logo-pos {
+  //     display: none;
+  //   }
+  // }
+
+  svg {
+    height: 2.75rem;
+    width: auto;
+  }
+}
+.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;
+}
+#footer_primary_container {
+  padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5;
+  background-color: themeVars.$veda-uswds-color-base-lightest;
+}
+#footer_secondary_container {
+  padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5;
+}
+
 .usa-footer__secondary-section {
-  color: themeVars.$veda-uswds-color-base-dark;
+  background-color: themeVars.$veda-uswds-color-base-darkest;
 }
 .usa-footer__primary-section {
-  color: themeVars.$veda-uswds-color-base-lightest;
-}
+  background-color: themeVars.$veda-uswds-color-base-lightest;
+}
+
+#mail_icon{
+  top:50%;
+  transform: translateY(-50%);
+}