diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index 3c0749817..98856584b 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/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 }) { } diff --git a/app/scripts/components/common/page-footer/index.tsx b/app/scripts/components/common/page-footer/index.tsx index 42752a600..197ada53a 100644 --- a/app/scripts/components/common/page-footer/index.tsx +++ b/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 (
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 ; + + case NavItemType.EXTERNAL_LINK: + return ( + + {item.title} + + ); + case NavItemType.INTERNAL_LINK: + return ( + + {item.title} + + ); + + 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 ( <> - PrimaryLink - - )} + links={primaryItems} />
- News and Events - , - - About - , - - Contact Us - - ]} + items={secondaryItems} />
diff --git a/app/scripts/components/common/page-header/default-config.ts b/app/scripts/components/common/page-header/default-config.ts index 4f18083ab..051e2c013 100644 --- a/app/scripts/components/common/page-header/default-config.ts +++ b/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 }; diff --git a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx index 764853687..0acc8b6b0 100644 --- a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx +++ b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx @@ -12,6 +12,7 @@ export const createDynamicNavMenuList = ( isOpen?: boolean[], setIsOpen?: SetState ): 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: diff --git a/app/scripts/components/common/page-header/nav/nav-item-cta.tsx b/app/scripts/components/common/page-header/nav/nav-item-cta.tsx index 04efa7798..0703f8855 100644 --- a/app/scripts/components/common/page-header/nav/nav-item-cta.tsx +++ b/app/scripts/components/common/page-header/nav/nav-item-cta.tsx @@ -5,10 +5,12 @@ import { ActionNavItem } from '../types'; interface NavItemCTAProps { item: ActionNavItem; + customClasses?: string; } export const NavItemCTA: React.FC = ({ - item + item, + customClasses }): JSX.Element => { const { isRevealed, show, hide } = useFeedbackModal(); return ( @@ -16,12 +18,16 @@ export const NavItemCTA: React.FC = ({ {item.actionId === 'open-google-form' && ( <> diff --git a/mock/veda.config.js b/mock/veda.config.js index 3b9782c5f..80ecfda6c 100644 --- a/mock/veda.config.js +++ b/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)', diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts index d048107e5..b81385a26 100644 --- a/parcel-resolver-veda/index.d.ts +++ b/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; diff --git a/parcel-resolver-veda/index.js b/parcel-resolver-veda/index.js index d2d3e5d10..704e283e0 100644 --- a/parcel-resolver-veda/index.js +++ b/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)};