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 9 commits
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-legacy/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 />
<PageFooter
settings={footerSettings}
primarySection={{
footerPrimaryContactItems,
footerPrimaryNavItems
}} // @ts-expect-error: NEED TO DELETE
hideFooter={hideFooter}
/>
) : (
<PageFooterLegacy hideFooter={hideFooter} />
)}
Expand Down
104 changes: 84 additions & 20 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,43 +1,107 @@
import React from 'react';
import NasaLogoColor from '../../nasa-logo-color';

import { Icon } from '@trussworks/react-uswds';
import NasaLogoColor from '../../nasa-logo-color.js';
import {
USWDSFooter,
USWDSLink,
USWDSFooterNav,
USWDSLogo
USWDSAddress
} from '$components/common/uswds';
export default function PageFooter() {
import './styles.scss';

interface PageFooterProps {
primarySection: any;
settings: any;
hidefooter?: boolean;
}

export default function PageFooter({
settings,
primarySection,
hidefooter
}: PageFooterProps) {
// console.log(settings, primarySection, hidefooter);
const returnToTopButton = () => {
return (
<div
id='return-to-top-container'
className=' margin-left-auto margin-right-auto padding-x-4'
>
<a className='usa-link text-primary' href='#'>
Return to top
</a>
</div>
);
};

const { returnToTop, secondarySection } = settings;
/* eslint-disable */
snmln marked this conversation as resolved.
Show resolved Hide resolved
const { footerPrimaryContactItems, footerPrimaryNavItems } = primarySection;
return (
<>
<USWDSFooter
size='slim'
// returnToTop={returnToTop}
returnToTop={returnToTop && returnToTopButton()}
className={hidefooter && 'display-none'}
primary={
<div className='usa-footer__primary-container grid-row bg-base-lightest'>
<div
id='footer_primary_container'
className=' grid-row bg-base-lightest'
>
<div className='mobile-lg:grid-col-8'>
<USWDSFooterNav
aria-label='Footer navigation'
size='slim'
links={Array(4).fill(
<USWDSLink
variant='nav'
href='#'
className='usa-footer__primary-link'
>
Primary Link
</USWDSLink>
<a className='usa-footer__primary-link' href='#'>
PrimaryLink
</a>
)}
/>
</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>
]}
/>
</div>
</div>
}
secondary={
<USWDSLogo
size='slim'
//Nasa logo not showing.
image={<NasaLogoColor />}
heading={<p className='usa-footer__logo-heading'>Name of Agency</p>}
/>
<div id='footer_secondary_container' className='grid-row'>
<div id='logo-container'>
<a id='logo-container-link' href='#'>
{NasaLogoColor()}
<span className='footer-text'>
NASA EarthData 2024 • v0.17.0
{/* {version} */}
</span>
</a>
</div>
<div className='grid-col-4 footer-text grid-gap-6 flex-justify-end'>
<span>NASA Official: </span>
<a
key={secondarySection.type}
href={`mailto:${secondarySection.to}`}
>
<Icon.Mail
className='margin-right-1 width-205 height-auto position-relative'
id='mail_icon'
/>
{secondarySection.title}
</a>
</div>
</div>
}
/>
</>
Expand Down
71 changes: 68 additions & 3 deletions app/scripts/components/common/page-footer/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,72 @@
@use '$styles/veda-ui-theme-vars.scss' as themeVars;

#logo-container {
snmln marked this conversation as resolved.
Show resolved Hide resolved
display: flex;
font-family: themeVars.$veda-uswds-basefont-sans;
gap: themeVars.$veda-uswds-spacing-105;

#logo-container-link {
display: flex;
align-items: center;
gap: themeVars.$veda-uswds-spacing-105;
font-weight: themeVars.$veda-uswds-fontweight-bold;
font-size: themeVars.$veda-uswds-fontsize-lg;
}

#nasa-logo-pos {
opacity: 1;
transform: translate(0, -100%);
/* TODO: Fix the svg to not require any styles!
* - set opacity to 1 in svg and fix translation
*/
}

// @media (width <= themeVars.$veda-uswds-spacing-desktop) {
// #nasa-logo-pos {
// display: none;
// }
// }

svg {
height: 2.75rem;
width: auto;
}
}
.footer-text {
color: white;
align-self: center;
display: flex;
font-size: themeVars.$veda-uswds-fontsize-sm;
font-weight: themeVars.$veda-uswds-fontweight-regular;
gap: themeVars.$veda-uswds-spacing-105;
}

#return-to-top-container {
padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5;
}
#footer_primary_container {
padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5;
background-color: themeVars.$veda-uswds-color-base-lightest;
}

.usa-footer__secondary-section {
color: themeVars.$veda-uswds-color-base-dark;
background-color: themeVars.$veda-uswds-color-base-darkest;
padding: themeVars.$veda-uswds-padding-4 themeVars.$veda-uswds-padding-5;
& > .grid-container {
max-width: 100%;
padding: 0;
//NEED to determine how to remove 64rem max-width on grid-container
Copy link
Member

Choose a reason for hiding this comment

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

why do we need to remove the max-width? This is the desktop breakpoint afaik

Copy link
Contributor Author

@snmln snmln Dec 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Correct, the existing footer function when at desktop view expands to the full width of the entire window. With this USWDS max-width in place it only allows for it to stretch to 64rem and leaves pretty large gutters on either side: Example: https://trussworks.github.io/react-uswds/iframe.html?args=&id=components-footer--slim-footer&viewMode=story

This might be more of a @faustoperez question. At desktop do we want the large gutter to the left and right of the footer content at desktop or do we want the content to stretch to full width of the screen?

Copy link
Member

Choose a reason for hiding this comment

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

IMO we should follow the header and leave the gutter. If I understand it correctly we wil have a page layout later that will align all the components on a page.

}
}
.usa-footer__primary-section {
color: themeVars.$veda-uswds-color-base-lightest;
}
background-color: themeVars.$veda-uswds-color-base-lightest;
}

#mail_icon {
top: 50%;
transform: translateY(-50%);
}

.usa-footer__address > .grid-row {
justify-content: flex-end;
}
72 changes: 68 additions & 4 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,10 +1,14 @@
import { getString, getNavItemsFromVedaConfig } from 'veda';
import {
getString,
getNavItemsFromVedaConfig,
getFooterItemsFromVedaConfig
} from 'veda';
import {
InternalNavLink,
ExternalNavLink,
ActionNavItem,
DropdownNavLink,
NavItemType,
ActionNavItem
NavItemType
} from '$components/common/page-header/types';

import {
Expand All @@ -22,6 +26,7 @@ let defaultMainNavItems: (
)[] = [
{
id: 'data-catalog',

title: 'Data Catalog',
to: DATASETS_PATH,
type: NavItemType.INTERNAL_LINK
Expand Down Expand Up @@ -64,6 +69,51 @@ let 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'
}
];

if (process.env.GOOGLE_FORM !== undefined) {
defaultSubNavItems = [
...defaultSubNavItems,
Expand All @@ -80,5 +130,19 @@ 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 };
export {
mainNavItems,
subNavItems,
footerSettings,
footerPrimaryContactItems,
footerPrimaryNavItems
};
6 changes: 4 additions & 2 deletions app/scripts/styles/_uswds-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@
),
$theme-type-scale-md: 8,
$theme-utility-breakpoints: (
'mobile-lg': false,
'desktop': false

'mobile-lg': true,
'desktop': true
),
$theme-font-type-serif: baseFontFamily,
$theme-font-type-sans: baseFontFamily
);
snmln marked this conversation as resolved.
Show resolved Hide resolved

15 changes: 14 additions & 1 deletion app/scripts/styles/_veda-ui-theme-vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@
// TYPOGRAPHY
$veda-uswds-basefont-sans: utils.family('sans');

// FONT-SIZE
// // FONT-SIZE
$veda-uswds-fontsize-3xs: utils.size('body', '3xs');
$veda-uswds-fontsize-lg: utils.size('body', 'lg');
$veda-uswds-fontsize-sm: utils.size('body', 'sm');


// FONT-WEIGHT
$veda-uswds-fontweight-light: utils.font-weight('light');
Expand All @@ -23,11 +25,22 @@ $veda-uswds-fontweight-semibold: utils.font-weight('semibold');
$veda-uswds-color-primary-darker: utils.color('primary-darker');
$veda-uswds-color-secondary: utils.color('secondary');
$veda-uswds-color-base-dark: utils.color('base-dark');

$veda-uswds-color-primary-light: utils.color('primary-light');
$veda-uswds-color-base-darkest: utils.color('base-darkest');
$veda-uswds-color-base-light: utils.color('base-light');
$veda-uswds-color-base-lightest: utils.color('base-lightest');

$veda-uswds-color-base-ink: utils.color('ink');

// SPACING
$veda-uswds-spacing-5: spacing.units(0.5);

$veda-uswds-spacing-1: spacing.units(1);
$veda-uswds-spacing-105: spacing.units(1.5);
$veda-uswds-spacing-desktop: spacing.units('desktop');

//PADDING
$veda-uswds-padding-4: spacing.units(4);
$veda-uswds-padding-5: spacing.units(5);

Loading
Loading