Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 1135 wiring up veda config #1320

Merged
merged 5 commits into from
Dec 16, 2024
Merged

fix: 1135 wiring up veda config #1320

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f224268
wiring up menu items
snmln Dec 11, 2024
2d175f1
adding comment in createDynamicNavMenuList
snmln Dec 12, 2024
6bf3149
wirign up dynamic link creation
snmln Dec 12, 2024
bb5dcad
Merge branch '1135-Refactor-Layout-Components-Footer' into 1135-wirin…
snmln Dec 12, 2024
886912e
cleaning up veda.config and styling
snmln Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions app/scripts/components/common/layout-root/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
) : (
Expand Down
73 changes: 54 additions & 19 deletions app/scripts/components/common/page-footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -20,7 +23,7 @@ export default function PageFooter({
primarySection,
hidefooter
}: PageFooterProps) {
// console.log(settings, primarySection, hidefooter);
console.log(settings, primarySection, hidefooter);
const returnToTopButton = () => {
return (
<div
Expand All @@ -36,7 +39,53 @@ export default function PageFooter({

const { returnToTop, secondarySection } = settings;
/* eslint-disable */
const { footerPrimaryContactItems, footerPrimaryNavItems } = primarySection;
const {
footerPrimaryContactItems,
footerPrimaryNavItems,
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} />;

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 <></>;
}
});
};
Copy link
Contributor Author

@snmln snmln Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know we have similar functionality from the header work here: https://github.com/NASA-IMPACT/veda-ui/blob/main/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx

The issue is that the header styling is implicit to this function. We should reuse this functionality but expand it to accept different stylings. I need to look into this a little more to wrap my head around it better. But based on my current understanding that seems like a decent amount of work to accomplish.

My opinion (with my current understanding) is that we note it and create a dedicated clean up ticket to integrate that styling functionality since this will bleed into the header work that was just created.

@AliceR With your familiarity with the functionality what are your thoughts?

Copy link
Collaborator

@sandrahoang686 sandrahoang686 Dec 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could move the nav directory with createDynamicNavMenuList et al outside of header to be accessible to header&footer and still use the nav-item-link and CTA components like createDynamicNavMenuList already does but make it take in the className now as a param and pass it down as a prop to the nav link components. I dont think footer will need to worry about dropdowns. For CTA, you could make the style a prop as well but default it.

That doesn't have to be done here though, feel free to leave an @TODO note in the code noting the need to consolidate and create a ticket for it 👍🏼

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sweet I have gone ahead and created a new issue: #1323 for this.


const primaryItems = useMemo(
() => createNavElement(mainNavItems, 'usa-footer__primary-link'),
[mainNavItems]
);
const secondaryItems = useMemo(
() => createNavElement(subNavItems, 'usa-link text-base-dark'),
[mainNavItems]
);
return (
<>
<USWDSFooter
Expand All @@ -52,28 +101,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>
Expand Down
Loading