From f224268e6d6bba3679f92e095f2367dbd70a222f Mon Sep 17 00:00:00 2001 From: snmln Date: Wed, 11 Dec 2024 17:19:04 -0500 Subject: [PATCH 1/4] wiring up menu items --- .../components/common/layout-root/index.tsx | 6 +- .../components/common/page-footer/index.tsx | 73 ++++++++++++++----- 2 files changed, 58 insertions(+), 21 deletions(-) diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index 04c7bbe8c..c5a3d3577 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/app/scripts/components/common/layout-root/index.tsx @@ -112,8 +112,10 @@ function LayoutRoot(props: { children?: ReactNode }) { settings={footerSettings} primarySection={{ footerPrimaryContactItems, - footerPrimaryNavItems - }} // @ts-expect-error: NEED TO DELETE + footerPrimaryNavItems, + mainNavItems, + subNavItems + }} hideFooter={hideFooter} /> ) : ( diff --git a/app/scripts/components/common/page-footer/index.tsx b/app/scripts/components/common/page-footer/index.tsx index e294605f3..c5414710d 100644 --- a/app/scripts/components/common/page-footer/index.tsx +++ b/app/scripts/components/common/page-footer/index.tsx @@ -1,12 +1,15 @@ -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 NasaLogoColor from '../../nasa-logo-color.js'; +import { NavItemType } from '../page-header/types.js'; +import { NavItemCTA } from '../page-header/nav/nav-item-cta.js'; import { USWDSFooter, USWDSFooterNav, USWDSAddress } from '$components/common/uswds'; + import './styles.scss'; interface PageFooterProps { @@ -20,7 +23,7 @@ export default function PageFooter({ primarySection, hidefooter }: PageFooterProps) { - // console.log(settings, primarySection, hidefooter); + console.log(settings, primarySection, hidefooter); const returnToTopButton = () => { return (
{ + //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'), + [mainNavItems] + ); return ( <> - PrimaryLink - - )} + links={primaryItems} />
- News and Events - , - - About - , - - Contact Us - - ]} + items={secondaryItems} />
From 2d175f17c3223fad3e69e14a86b28681c34a1f0a Mon Sep 17 00:00:00 2001 From: snmln Date: Thu, 12 Dec 2024 15:58:39 -0500 Subject: [PATCH 2/4] adding comment in createDynamicNavMenuList --- .../common/page-header/nav/create-dynamic-nav-menu-list.tsx | 1 + 1 file changed, 1 insertion(+) 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: From 6bf3149e37111866bf332d996339108c52656c80 Mon Sep 17 00:00:00 2001 From: snmln Date: Thu, 12 Dec 2024 15:58:50 -0500 Subject: [PATCH 3/4] wirign up dynamic link creation --- app/scripts/components/common/page-footer/index.tsx | 6 +++--- .../common/page-header/nav/nav-item-cta.tsx | 12 +++++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/app/scripts/components/common/page-footer/index.tsx b/app/scripts/components/common/page-footer/index.tsx index c5414710d..98974017a 100644 --- a/app/scripts/components/common/page-footer/index.tsx +++ b/app/scripts/components/common/page-footer/index.tsx @@ -23,7 +23,6 @@ export default function PageFooter({ primarySection, hidefooter }: PageFooterProps) { - console.log(settings, primarySection, hidefooter); const returnToTopButton = () => { return (
{ switch (item.type) { case NavItemType.ACTION: - return ; + return ; case NavItemType.EXTERNAL_LINK: return ( @@ -83,7 +82,8 @@ export default function PageFooter({ [mainNavItems] ); const secondaryItems = useMemo( - () => createNavElement(subNavItems, 'usa-link text-base-dark'), + () => + createNavElement(subNavItems, 'usa-link text-base-dark text-underline'), [mainNavItems] ); return ( 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' && ( <> From 886912e6ae6d372753994057d6fa5b685d4fe585 Mon Sep 17 00:00:00 2001 From: snmln Date: Fri, 13 Dec 2024 14:36:01 -0500 Subject: [PATCH 4/4] cleaning up veda.config and styling --- .../components/common/layout-root/index.tsx | 6 +-- .../components/common/page-footer/index.tsx | 13 ++--- .../common/page-header/default-config.ts | 54 ++----------------- mock/veda.config.js | 42 ++------------- parcel-resolver-veda/index.d.ts | 18 ++++--- parcel-resolver-veda/index.js | 5 +- 6 files changed, 25 insertions(+), 113 deletions(-) diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index 8fa2f884b..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,6 @@ function LayoutRoot(props: { children?: ReactNode }) { Return to top @@ -40,12 +40,7 @@ export default function PageFooter({ const { returnToTop, secondarySection } = settings; /* eslint-disable */ - const { - footerPrimaryContactItems, - footerPrimaryNavItems, - mainNavItems, - subNavItems - } = primarySection; + const { mainNavItems, subNavItems } = primarySection; const createNavElement = (navItems, linkClasses) => { //removing 'dropdown' items from array 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/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)};