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

refactor: 1135 slim footer #1308

Merged
merged 11 commits into from
Dec 10, 2024
Merged

refactor: 1135 slim footer #1308

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e856157
usa foot implementation
snmln Dec 5, 2024
65dacea
adding uswds style infrastructure
snmln Dec 9, 2024
1aafd0c
Merge branch '1135-Refactor-Layout-Components-Footer' into 1135-slim-…
snmln Dec 9, 2024
18f0173
implementing styling and creating interface
snmln Dec 9, 2024
60398ed
wiring up config
snmln Dec 9, 2024
a5b4502
correcting styles
snmln Dec 10, 2024
c47e331
Merge branch '1135-Refactor-Layout-Components-Footer' into 1135-slim-…
snmln Dec 10, 2024
e629882
correct ts and lint errors
snmln Dec 10, 2024
a7a91ec
correctin merge conflict issues.
snmln Dec 10, 2024
d0a4cd4
updating styles
snmln Dec 10, 2024
59dd97e
dialing in css
snmln Dec 10, 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
14 changes: 12 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 @@ -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';

Expand Down Expand Up @@ -105,7 +108,14 @@ function LayoutRoot(props: { children?: ReactNode }) {
)}
</PageBody>
{isUSWDSEnabled ? (
<PageFooter hideFooter={hideFooter} />
<PageFooter
settings={footerSettings}
primarySection={{
footerPrimaryContactItems,
footerPrimaryNavItems
}}
hideFooter={hideFooter}
/>
) : (
<PageFooterLegacy hideFooter={hideFooter} />
)}
Expand Down
30 changes: 17 additions & 13 deletions app/scripts/components/common/page-footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,24 @@ import { Icon } from '@trussworks/react-uswds';
import NasaLogoColor from '../../nasa-logo-color.js';
import {
USWDSFooter,
USWDSLink,
USWDSFooterNav,
USWDSLogo,
USWDSAddress
} from '$components/common/uswds';
import './styles.scss';

interface PageFooterProps {
mainNavItems: NavItem[];
subNavItems: NavItem[];
logoSvg?: SVGElement | JSX.Element;
linkProperties: LinkProperties;
title: string;
version?: string;
primarySection: any;
settings: any;
hidefooter?: boolean;
}

export default function PageFooter({ hidefooter }: PageFooterProps) {
const returnToTop = () => {
export default function PageFooter({
settings,
primarySection,
hidefooter
}: PageFooterProps) {
console.log(settings, primarySection, hidefooter);
const returnToTopButton = () => {
return (
<div
id='return-to-top-container'
Expand All @@ -34,11 +33,13 @@ export default function PageFooter({ hidefooter }: PageFooterProps) {
);
};

const { returnToTop, secondarySection } = settings;
const { footerPrimaryContactItems, footerPrimaryNavItems } = primarySection;
return (
<>
<USWDSFooter
size='slim'
returnToTop={returnToTop()}
returnToTop={returnToTop && returnToTopButton()}
// className={hidefooter && 'display-none'}
primary={
<div
Expand Down Expand Up @@ -88,12 +89,15 @@ export default function PageFooter({ hidefooter }: PageFooterProps) {
</div>
<div className='grid-col-4 footer-text grid-gap-6'>
<span>NASA Official: </span>
<a key='email' href='mailto:[email protected]'>
<a
key={secondarySection.type}
href={`mailto:${secondarySection.to}`}
>
<Icon.Mail
className='margin-right-1 width-205 height-auto position-relative'
id='mail_icon'
/>
[email protected]
{secondarySection.title}
</a>
</div>
</div>
Expand Down
163 changes: 127 additions & 36 deletions app/scripts/components/common/page-header/default-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
import { getString, getNavItemsFromVedaConfig } from 'veda';
import { InternalNavLink, ExternalNavLink, ModalNavLink, DropdownNavLink, NavItemType } from '$components/common/page-header/types';
import {
getString,
getNavItemsFromVedaConfig,
getFooterItemsFromVedaConfig
} from 'veda';
import {
InternalNavLink,
ExternalNavLink,
ModalNavLink,
DropdownNavLink,
NavItemType
} from '$components/common/page-header/types';

import {
STORIES_PATH,
Expand All @@ -8,44 +18,125 @@ import {
ABOUT_PATH
} from '$utils/routes';

let defaultMainNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ModalNavLink)[] = [{
title: 'Data Catalog',
to: DATASETS_PATH,
type: NavItemType.INTERNAL_LINK
}, {
title: 'Exploration',
to: EXPLORATION_PATH,
type: NavItemType.INTERNAL_LINK
}, {
title: getString('stories').other,
to: STORIES_PATH,
type: NavItemType.INTERNAL_LINK
}];

if (!!process.env.HUB_URL && !!process.env.HUB_NAME) defaultMainNavItems = [...defaultMainNavItems, {
title: process.env.HUB_NAME,
href: process.env.HUB_URL,
type: NavItemType.EXTERNAL_LINK
} as ExternalNavLink];

let defaultSubNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ModalNavLink)[] = [{
title: 'About',
to: ABOUT_PATH,
type: NavItemType.INTERNAL_LINK
}];
let defaultMainNavItems: (
| ExternalNavLink
| InternalNavLink
| DropdownNavLink
| ModalNavLink
)[] = [
{
title: 'Data Catalog',
to: DATASETS_PATH,
type: NavItemType.INTERNAL_LINK
},
{
title: 'Exploration',
to: EXPLORATION_PATH,
type: NavItemType.INTERNAL_LINK
},
{
title: getString('stories').other,
to: STORIES_PATH,
type: NavItemType.INTERNAL_LINK
}
];

if (!!process.env.HUB_URL && !!process.env.HUB_NAME)
defaultMainNavItems = [
...defaultMainNavItems,
{
title: process.env.HUB_NAME,
href: process.env.HUB_URL,
type: NavItemType.EXTERNAL_LINK
} as ExternalNavLink
];

let defaultSubNavItems: (
| ExternalNavLink
| InternalNavLink
| DropdownNavLink
| ModalNavLink
)[] = [
{
title: 'About',
to: ABOUT_PATH,
type: NavItemType.INTERNAL_LINK
}
];

if (process.env.GOOGLE_FORM) {
defaultSubNavItems = [...defaultSubNavItems, {
title: 'Contact us',
src: process.env.GOOGLE_FORM,
type: NavItemType.MODAL
}];
defaultSubNavItems = [
...defaultSubNavItems,
{
title: 'Contact us',
src: process.env.GOOGLE_FORM,
type: NavItemType.MODAL
}
];
}

const mainNavItems = getNavItemsFromVedaConfig()?.mainNavItems?? defaultMainNavItems;
const subNavItems = getNavItemsFromVedaConfig()?.subNavItems?? defaultSubNavItems;
const defaultFooterSettings = {
secondarySection: {
title: 'email test',
to: '/data-catalog',
type: 'Email'
},
returnToTop: true
};

const defaultFooterPrimaryContactItems = [
Copy link
Member

Choose a reason for hiding this comment

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

do we want the footer items to be different from the header? In my understanding, it was just a repetition of the main nav items - which would mean we should use the same configuration that we base the header on.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

As I was working through this, this question came up and I think we should discuss further. My thoughts are that we can and should model the footer materials after the header data model. But the instances are going to request for individualized configurability of the footer so they can customize past the header navigation. What are your thoughts?

Copy link
Member

Choose a reason for hiding this comment

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

This sounds like a good case for YAGNI - let's wait for that request to come in first :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I would agree but I am concerned that this configurability potentially falls under this AC from the main ticket:

Composite Feature should be entirely data agnostic => Separate out the data logic from this feature component into the data layer.

{
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'
}
];

const mainNavItems =
getNavItemsFromVedaConfig()?.mainNavItems ?? defaultMainNavItems;
const subNavItems =
getNavItemsFromVedaConfig()?.subNavItems ?? defaultSubNavItems;
const footerSettings =
getFooterItemsFromVedaConfig()?.footerSettings ?? defaultFooterSettings;
const footerPrimaryContactItems =
getFooterItemsFromVedaConfig()?.footerPrimaryContactItems ??
defaultFooterPrimaryContactItems;
const footerPrimaryNavItems =
getFooterItemsFromVedaConfig()?.footerPrimaryNavItems ??
defaultFooterPrimaryNavItems;

export {
mainNavItems,
subNavItems
};
subNavItems,
footerSettings,
footerPrimaryContactItems,
footerPrimaryNavItems
};
48 changes: 48 additions & 0 deletions mock/veda.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,49 @@ 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: {
title: 'email test',
to: '/data-catalog',
type: 'Email'
},
returnToTop: true
};

if (!!config.HUB_URL && !!config.HUB_NAME)
mainNavItems = [
Expand Down Expand Up @@ -91,6 +134,11 @@ module.exports = {
mainNavItems,
subNavItems
},
footerItems: {
footerSettings,
footerPrimaryContactItems,
footerPrimaryNavItems
},
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)',
Expand Down
14 changes: 14 additions & 0 deletions parcel-resolver-veda/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,20 @@ declare module 'veda' {
}
| undefined;

export const getFooterItemsFromVedaConfig: () =>
| {
footerSettings:
| (NavLinkItem | ModalNavLink | DropdownNavLink)[]
| undefined;
footerPrimaryContactItems:
| (NavLinkItem | ModalNavLink | DropdownNavLink)[]
| undefined;
footerPrimaryNavItems:
| (NavLinkItem | ModalNavLink | DropdownNavLink)[]
| undefined;
}
| undefined;

/**
* List of custom user defined pages.
*/
Expand Down
7 changes: 4 additions & 3 deletions parcel-resolver-veda/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ function generateMdxDataObject(data) {
function getCookieConsentForm(result) {
if (!result.cookieConsentForm) return undefined;
else {

const parsedCopy = md.render(result.cookieConsentForm.copy);
const trimmedCopy = parsedCopy.replace(/(\r\n|\n|\r)/gm, '');
return JSON.stringify({
Expand Down Expand Up @@ -229,7 +228,9 @@ module.exports = new Resolver({
booleans: ${JSON.stringify(withDefaultStrings(result.booleans))},
banner: ${getBannerContent(result)},
navItems: ${JSON.stringify(result.navItems)},
cookieConsentForm: ${getCookieConsentForm(result)}
cookieConsentForm: ${getCookieConsentForm(result)},
footerItems: ${JSON.stringify(result.footerItems)}

};

export const theme = ${JSON.stringify(result.theme) || null};
Expand All @@ -250,7 +251,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 datasets = ${generateMdxDataObject(datasetsImportData)};
export const stories = ${generateMdxDataObject(storiesImportData)};
Expand Down