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 6 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/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
}}
hideFooter={hideFooter}
/>
) : (
<PageFooterLegacy hideFooter={hideFooter} />
)}
Expand Down
105 changes: 84 additions & 21 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,106 @@
import React from 'react';
import NasaLogoColor from '../../nasa-logo-color';

import React, { ComponentType } from 'react';
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;
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;
}
Loading