fix: 1135 wiring up veda config (#1320)

Author: AliceR

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

@@ -29,9 +29,7 @@ import Logo from '$components/common/page-header-legacy/logo';
 import {
   mainNavItems,
   subNavItems,
-  footerSettings,
-  footerPrimaryContactItems,
-  footerPrimaryNavItems
+  footerSettings
 } from '$components/common/page-header/default-config';
 import { checkEnvFlag } from '$utils/utils';
 
@@ -112,8 +110,8 @@ function LayoutRoot(props: { children?: ReactNode }) {
         <PageFooter
           settings={footerSettings}
           primarySection={{
-            footerPrimaryContactItems,
-            footerPrimaryNavItems
+            mainNavItems,
+            subNavItems
           }}
           hideFooter={hideFooter}
           logoSvg={<NasaLogoColor />}

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

@@ -1,11 +1,14 @@
-import React from 'react';
+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 { 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 {
@@ -26,7 +29,7 @@ export default function PageFooter({
     return (
       <div
         id='return-to-top-container'
-        className=' margin-left-auto margin-right-auto padding-x-4'
+        className=' margin-left-auto margin-right-auto'
       >
         <a className='usa-link text-primary' href='#'>
           Return to top
@@ -37,7 +40,49 @@ export default function PageFooter({
 
   const { returnToTop, secondarySection } = settings;
   /* eslint-disable */
-  const { footerPrimaryContactItems, footerPrimaryNavItems } = primarySection;
+  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
@@ -53,28 +98,14 @@ export default function PageFooter({
               <USWDSFooterNav
                 aria-label='Footer navigation'
                 size='slim'
-                links={Array(4).fill(
-                  <a className='usa-footer__primary-link' href='#'>
-                    PrimaryLink
-                  </a>
-                )}
+                links={primaryItems}
               />
             </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>
-                ]}
+                items={secondaryItems}
               />
             </div>
           </div>

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

@@ -1,7 +1,7 @@
 import {
   getString,
   getNavItemsFromVedaConfig,
-  getFooterItemsFromVedaConfig
+  getFooterSettingsFromVedaConfig
 } from 'veda';
 import {
   InternalNavLink,
@@ -78,42 +78,6 @@ const defaultFooterSettings = {
   returnToTop: true
 };
 
-const defaultFooterPrimaryContactItems = [
-  {
-    title: 'News and Events',
-    to: '/data-catalog',
-    type: 'internalLink'
-  },
-  {
-    title: 'About',
-    to: '/data-catalog',
-    type: 'internalLink'
-  },
-  {
-    title: 'Contact Us',
-    to: '/data-catalog',
-    type: 'internalLink'
-  }
-];
-
-const defaultFooterPrimaryNavItems = [
-  {
-    title: 'Stories',
-    to: '/data-catalog',
-    type: 'internalLink'
-  },
-  {
-    title: 'Topics',
-    to: '/data-catalog',
-    type: 'internalLink'
-  },
-  {
-    title: 'Data Toolkit',
-    to: '/data-catalog',
-    type: 'internalLink'
-  }
-];
-
 if (process.env.GOOGLE_FORM !== undefined) {
   defaultSubNavItems = [
     ...defaultSubNavItems,
@@ -131,18 +95,6 @@ const mainNavItems =
 const subNavItems =
   getNavItemsFromVedaConfig()?.subNavItems ?? defaultSubNavItems;
 const footerSettings =
-  getFooterItemsFromVedaConfig()?.footerSettings ?? defaultFooterSettings;
-const footerPrimaryContactItems =
-  getFooterItemsFromVedaConfig()?.footerPrimaryContactItems ??
-  defaultFooterPrimaryContactItems;
-const footerPrimaryNavItems =
-  getFooterItemsFromVedaConfig()?.footerPrimaryNavItems ??
-  defaultFooterPrimaryNavItems;
+  getFooterSettingsFromVedaConfig() ?? defaultFooterSettings;
 
-export {
-  mainNavItems,
-  subNavItems,
-  footerSettings,
-  footerPrimaryContactItems,
-  footerPrimaryNavItems
-};
+export { mainNavItems, subNavItems, footerSettings };

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:

app/scripts/components/common/page-header/nav/nav-item-cta.tsx

@@ -5,23 +5,29 @@ import { ActionNavItem } from '../types';
 
 interface NavItemCTAProps {
   item: ActionNavItem;
+  customClasses?: string;
 }
 
 export const NavItemCTA: React.FC<NavItemCTAProps> = ({
-  item
+  item,
+  customClasses
 }): JSX.Element => {
   const { isRevealed, show, hide } = useFeedbackModal();
   return (
     <React.Fragment key={item.id}>
       {item.actionId === 'open-google-form' && (
         <>
           <button
-            className='usa-nav__link'
+            className={
+              customClasses && customClasses != ''
+                ? customClasses
+                : 'usa-nav__link'
+            }
             type='button'
             tabIndex={0}
             id={item.id}
             onClick={show}
-            style={{background: 'none', border: 'none', cursor: 'pointer'}}
+            style={{ background: 'none', border: 'none', cursor: 'pointer' }}
           >
             {item.title}
           </button>

mock/veda.config.js

@@ -50,43 +50,10 @@ let mainNavItems = [
     type: 'internalLink'
   }
 ];
-let footerPrimaryNavItems = [
-  {
-    title: 'Data Catalog',
-    to: '/data-catalog',
-    type: 'internalLink'
-  },
-  {
-    title: 'Data Catalog 2',
-    to: '/data-catalog',
-    type: 'internalLink'
-  },
-  {
-    title: 'Data Catalog3',
-    to: '/data-catalog',
-    type: 'internalLink'
-  }
-];
-let footerPrimaryContactItems = [
-  {
-    title: 'News and Events',
-    to: '/data-catalog',
-    type: 'internalLink'
-  },
-  {
-    title: 'About',
-    to: '/data-catalog',
-    type: 'internalLink'
-  },
-  {
-    title: 'Contact Us',
-    to: '/data-catalog',
-    type: 'internalLink'
-  }
-];
 
 let footerSettings = {
   secondarySection: {
+    id: 'stories',
     title: 'email test',
     to: '/data-catalog',
     type: 'Email'
@@ -155,11 +122,8 @@ module.exports = {
     mainNavItems,
     subNavItems
   },
-  footerItems: {
-    footerSettings,
-    footerPrimaryContactItems,
-    footerPrimaryNavItems
-  },
+
+  footerSettings,
   cookieConsentForm: {
     title: 'Cookie Consent',
     copy: 'We use cookies to enhance your browsing experience and to help us understand how our website is used. These cookies allow us to collect data on site usage and improve our services based on your interactions. To learn more about it, see our [Privacy Policy](https://www.nasa.gov/privacy/#cookies)',

parcel-resolver-veda/index.d.ts

@@ -293,6 +293,16 @@ declare module 'veda' {
   }
   type NavLinkItem = ExternalNavLink | InternalNavLink;
 
+  interface FooterSettings {
+    secondarySection: {
+      id: string;
+      title: string;
+      href: string;
+      type: 'Email';
+    };
+    returnToTop: boolean;
+  }
+
   export interface DropdownNavLink {
     id: string;
     title: string;
@@ -354,13 +364,9 @@ declare module 'veda' {
       }
     | undefined;
 
-  export const getFooterItemsFromVedaConfig: () =>
+  export const getFooterSettingsFromVedaConfig: () =>
     | {
-        footerSettings: (NavLinkItem | DropdownNavLink)[] | undefined;
-        footerPrimaryContactItems:
-          | (NavLinkItem | DropdownNavLink)[]
-          | undefined;
-        footerPrimaryNavItems: (NavLinkItem | DropdownNavLink)[] | undefined;
+        footerSettings: FooterSettings;
       }
     | undefined;
 

parcel-resolver-veda/index.js

@@ -229,8 +229,7 @@ module.exports = new Resolver({
           banner: ${getBannerContent(result)},
           navItems: ${JSON.stringify(result.navItems)},
           cookieConsentForm: ${getCookieConsentForm(result)},
-          footerItems: ${JSON.stringify(result.footerItems)}
-
+          footerSettings: ${JSON.stringify(result.footerSettings)}
         };
 
         export const theme = ${JSON.stringify(result.theme) || null};
@@ -251,7 +250,7 @@ module.exports = new Resolver({
         export const getBannerFromVedaConfig = () => config.banner;
         export const getNavItemsFromVedaConfig = () => config.navItems;
         export const getCookieConsentFromVedaConfig = () => config.cookieConsentForm;
-        export const getFooterItemsFromVedaConfig = () => config.footerItems
+        export const getFooterSettingsFromVedaConfig = () => config.footerSettings;
 
         export const datasets = ${generateMdxDataObject(datasetsImportData)};
         export const stories = ${generateMdxDataObject(storiesImportData)};