mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-23 10:04:18 -08:00
Fix footer alignment (#564)
* Fix footer alignment * Can't really tweak alignment using trusswork's library. * Reimplement parts of layout to control grid better. * Removed trusswork's weird mobile expanding footer menu. * Update snapshot * Add some extra bottom padding for mobile view * Replace fork of trussworks react/uswds with ^2.0.0 Since we're not using trusswork's `<Footer>` component anymore, we should be able to stop using our branch that fixes issues it has with Gatsby.
This commit is contained in:
TomNUSDS
GitHub
parent
b32fd6ddcb
commit
55b37fe448
5 changed files with 201 additions and 187 deletions
5
client/package-lock.json
generated
5
client/package-lock.json
generated
|
|
@ -2640,8 +2640,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@trussworks/react-uswds": {
|
"@trussworks/react-uswds": {
|
||||||
"version": "git+https://git@github.com/nathillardusds/react-uswds.git#42b1907d172373cbcd5730d75c335b0c98cbeccf",
|
"version": "2.0.0",
|
||||||
"from": "@trussworks/react-uswds@git+https://git@github.com/nathillardusds/react-uswds#nathillardusds/ssr"
|
"resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-kWLAvAbl/wvFYyM4Y9Uo8AZTOpap/aTu7ckCzz/Lq9Na8jlx5prP3zAyviK9LGHsuCEQ7bUX57/FJMtJukEuKA=="
|
||||||
},
|
},
|
||||||
"@trysound/sax": {
|
"@trysound/sax": {
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@
|
||||||
"ts-jest": "^27.0.0"
|
"ts-jest": "^27.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@trussworks/react-uswds": "git+https://git@github.com/nathillardusds/react-uswds#nathillardusds/ssr",
|
"@trussworks/react-uswds": "^2.0.0",
|
||||||
"@turf/bbox": "^6.5.0",
|
"@turf/bbox": "^6.5.0",
|
||||||
"chroma-js": "^2.1.2",
|
"chroma-js": "^2.1.2",
|
||||||
"d3-ease": "^3.0.1",
|
"d3-ease": "^3.0.1",
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,15 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {
|
import {
|
||||||
Address,
|
Address,
|
||||||
Footer,
|
|
||||||
FooterNav,
|
|
||||||
Logo,
|
Logo,
|
||||||
GridContainer, Grid,
|
|
||||||
} from '@trussworks/react-uswds';
|
} from '@trussworks/react-uswds';
|
||||||
import {} from '@trussworks/react-uswds';
|
import {NavList} from '@trussworks/react-uswds';
|
||||||
import {useIntl} from 'gatsby-plugin-intl';
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
import {defineMessages} from 'react-intl';
|
import {defineMessages} from 'react-intl';
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import whitehouseIcon from '../images/eop-seal.svg';
|
import whitehouseIcon from '../images/eop-seal.svg';
|
||||||
|
import J40MainGridContainer from './J40MainGridContainer';
|
||||||
|
|
||||||
const J40Footer = () => {
|
const J40Footer = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
@ -58,64 +56,73 @@ const J40Footer = () => {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const NAVLINKS = [
|
||||||
|
['Contact',
|
||||||
|
<Address
|
||||||
|
key={'footeraddress'}
|
||||||
|
className={'j40-footer-address'}
|
||||||
|
size={'big'}
|
||||||
|
items={[
|
||||||
|
'730 Jackson Pl NW',
|
||||||
|
'Washington, D.C. 20506',
|
||||||
|
'(202) 395-5750',
|
||||||
|
]}
|
||||||
|
/>,
|
||||||
|
],
|
||||||
|
[
|
||||||
|
intl.formatMessage(messages.moreinfoheader),
|
||||||
|
<a
|
||||||
|
key={'whitehouselink2'}
|
||||||
|
href={'https://www.whitehouse.gov/'}
|
||||||
|
target={'_blank'}
|
||||||
|
rel={'noreferrer'}>Whitehouse.gov</a>,
|
||||||
|
<a
|
||||||
|
key="foialink"
|
||||||
|
target={'_blank'}
|
||||||
|
rel={'noreferrer'}
|
||||||
|
href={'https://www.whitehouse.gov/ceq/foia'}>
|
||||||
|
{intl.formatMessage(messages.foia)}
|
||||||
|
</a>,
|
||||||
|
<a
|
||||||
|
key={'privacylink'}
|
||||||
|
target={'_blank'}
|
||||||
|
rel={'noreferrer'}
|
||||||
|
href={'https://www.whitehouse.gov/privacy/'}>
|
||||||
|
{intl.formatMessage(messages.privacy)}
|
||||||
|
</a>,
|
||||||
|
],
|
||||||
|
[
|
||||||
|
intl.formatMessage(messages.questionsheader),
|
||||||
|
<a
|
||||||
|
key={'contactlink'}
|
||||||
|
href={'https://www.usa.gov/'}>
|
||||||
|
{intl.formatMessage(messages.contactlink)}
|
||||||
|
</a>,
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
// see https://designsystem.digital.gov/components/footer/
|
// see https://designsystem.digital.gov/components/footer/
|
||||||
return (
|
return (
|
||||||
<>
|
// we cannot use trussworks Footer because it doesn't layout correct
|
||||||
<Footer
|
// and there's no easy way to override. It comes down to the
|
||||||
size="big"
|
// `className="mobile-lg:grid-col-6 desktop:grid-col-3">` needs to be
|
||||||
className={'j40-footer'}
|
// `className="mobile-lg:grid-col-12 desktop:grid-col-4">` ugh.
|
||||||
primary={
|
<footer className={'j40-footer'}>
|
||||||
<GridContainer><Grid>
|
<div className="usa-footer__primary-section">
|
||||||
<FooterNav
|
<J40MainGridContainer>
|
||||||
aria-label={intl.formatMessage(messages.arialabelfooter)}
|
<div className={'grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4'}>
|
||||||
size="big" // fyi you leave this off and it silently fails...
|
{NAVLINKS.map((links, i) => (
|
||||||
links={[
|
<div key={`linkSection-${i}`}
|
||||||
['Contact',
|
className="mobile-lg:grid-col-12 desktop:grid-col-4">
|
||||||
<Address
|
<NavSection links={links} />
|
||||||
key={'footeraddress'}
|
</div>
|
||||||
className={'j40-footer-address'}
|
))}
|
||||||
size={'big'}
|
</div>
|
||||||
items={[
|
</J40MainGridContainer>
|
||||||
'730 Jackson Pl NW',
|
</div>
|
||||||
'Washington, D.C. 20506',
|
|
||||||
'(202) 395-5750',
|
<div className="usa-footer__secondary-section">
|
||||||
]}
|
<J40MainGridContainer>
|
||||||
/>,
|
|
||||||
],
|
|
||||||
[
|
|
||||||
intl.formatMessage(messages.moreinfoheader),
|
|
||||||
<a
|
|
||||||
key={'whitehouselink2'}
|
|
||||||
href={'https://www.whitehouse.gov/'}
|
|
||||||
target={'_blank'}
|
|
||||||
rel={'noreferrer'}>Whitehouse.gov</a>,
|
|
||||||
<a
|
|
||||||
key="foialink"
|
|
||||||
target={'_blank'}
|
|
||||||
rel={'noreferrer'}
|
|
||||||
href={'https://www.whitehouse.gov/ceq/foia'}>
|
|
||||||
{intl.formatMessage(messages.foia)}
|
|
||||||
</a>,
|
|
||||||
<a
|
|
||||||
key={'privacylink'}
|
|
||||||
target={'_blank'}
|
|
||||||
rel={'noreferrer'}
|
|
||||||
href={'https://www.whitehouse.gov/privacy/'}>
|
|
||||||
{intl.formatMessage(messages.privacy)}
|
|
||||||
</a>,
|
|
||||||
],
|
|
||||||
[
|
|
||||||
intl.formatMessage(messages.questionsheader),
|
|
||||||
<a
|
|
||||||
key={'contactlink'}
|
|
||||||
href={'https://www.usa.gov/'}>
|
|
||||||
{intl.formatMessage(messages.contactlink)}
|
|
||||||
</a>,
|
|
||||||
],
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Grid></GridContainer>}
|
|
||||||
secondary={
|
|
||||||
<Logo
|
<Logo
|
||||||
size="medium"
|
size="medium"
|
||||||
key={'logoimg'}
|
key={'logoimg'}
|
||||||
|
|
@ -129,9 +136,24 @@ const J40Footer = () => {
|
||||||
heading={<p
|
heading={<p
|
||||||
className={'j40-footer-logo-heading'}>
|
className={'j40-footer-logo-heading'}>
|
||||||
{intl.formatMessage(messages.logotitle)}</p>}
|
{intl.formatMessage(messages.logotitle)}</p>}
|
||||||
/>}
|
/>
|
||||||
/>
|
</J40MainGridContainer>
|
||||||
</>
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const NavSection = ({
|
||||||
|
links,
|
||||||
|
}: {
|
||||||
|
links: React.ReactNode[]
|
||||||
|
}): React.ReactElement => {
|
||||||
|
const [primaryLinkOrHeading, ...secondaryLinks] = links;
|
||||||
|
return (
|
||||||
|
<section className={'usa-footer__primary-content'}>
|
||||||
|
<h4 className="padding-top-1 padding-bottom-0">{primaryLinkOrHeading}</h4>
|
||||||
|
<NavList className={'padding-bottom-4'} type="footerSecondary" items={secondaryLinks} />
|
||||||
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ const J40MainGridContainer = ({
|
||||||
children,
|
children,
|
||||||
fullWidth = false,
|
fullWidth = false,
|
||||||
blueBackground = false,
|
blueBackground = false,
|
||||||
className = 'j40-grid-container '}: ILayoutProps) => {
|
className = ''}: ILayoutProps) => {
|
||||||
// is it a blue background strip?
|
// is it a blue background strip?
|
||||||
className += (blueBackground ? 'j40-main-grid-blue-bk ' : '');
|
className += (blueBackground ? 'j40-main-grid-blue-bk ' : '');
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,148 +3,138 @@
|
||||||
exports[`J40Footer renders correctly 1`] = `
|
exports[`J40Footer renders correctly 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<footer
|
<footer
|
||||||
class="usa-footer usa-footer--big j40-footer"
|
class="j40-footer"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="usa-footer__primary-section"
|
class="usa-footer__primary-section"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="grid-container"
|
class="grid-container-desktop-lg j40-grid-container "
|
||||||
data-testid="gridContainer"
|
data-testid="gridContainer"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class=""
|
class="grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4"
|
||||||
data-testid="grid"
|
|
||||||
>
|
>
|
||||||
<nav
|
<div
|
||||||
aria-label="Footer navigation"
|
class="mobile-lg:grid-col-12 desktop:grid-col-4"
|
||||||
class="usa-footer__nav"
|
|
||||||
>
|
>
|
||||||
<div
|
<section
|
||||||
class="grid-row grid-gap-4"
|
class="usa-footer__primary-content"
|
||||||
>
|
>
|
||||||
<div
|
<h4
|
||||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
class="padding-top-1 padding-bottom-0"
|
||||||
>
|
>
|
||||||
<section
|
Contact
|
||||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
</h4>
|
||||||
>
|
<ul
|
||||||
<h4
|
class="usa-list usa-list--unstyled padding-bottom-4"
|
||||||
class="usa-footer__primary-link"
|
|
||||||
>
|
|
||||||
Contact
|
|
||||||
</h4>
|
|
||||||
<ul
|
|
||||||
class="usa-list usa-list--unstyled"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
class="usa-footer__secondary-link"
|
|
||||||
>
|
|
||||||
<address
|
|
||||||
class="usa-footer__address j40-footer-address"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="usa-footer__contact-info grid-row grid-gap"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="grid-col-auto"
|
|
||||||
>
|
|
||||||
730 Jackson Pl NW
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="grid-col-auto"
|
|
||||||
>
|
|
||||||
Washington, D.C. 20506
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="grid-col-auto"
|
|
||||||
>
|
|
||||||
(202) 395-5750
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</address>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
|
||||||
>
|
>
|
||||||
<section
|
<li
|
||||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
class="usa-footer__secondary-link"
|
||||||
>
|
>
|
||||||
<h4
|
<address
|
||||||
class="usa-footer__primary-link"
|
class="usa-footer__address j40-footer-address"
|
||||||
>
|
>
|
||||||
More information
|
<div
|
||||||
</h4>
|
class="usa-footer__contact-info grid-row grid-gap"
|
||||||
<ul
|
|
||||||
class="usa-list usa-list--unstyled"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
class="usa-footer__secondary-link"
|
|
||||||
>
|
>
|
||||||
<a
|
<div
|
||||||
href="https://www.whitehouse.gov/"
|
class="grid-col-auto"
|
||||||
rel="noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
>
|
||||||
Whitehouse.gov
|
730 Jackson Pl NW
|
||||||
</a>
|
</div>
|
||||||
</li>
|
<div
|
||||||
<li
|
class="grid-col-auto"
|
||||||
class="usa-footer__secondary-link"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="https://www.whitehouse.gov/ceq/foia"
|
|
||||||
rel="noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
>
|
||||||
Freedom of Information Act (FOIA)
|
Washington, D.C. 20506
|
||||||
</a>
|
</div>
|
||||||
</li>
|
<div
|
||||||
<li
|
class="grid-col-auto"
|
||||||
class="usa-footer__secondary-link"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="https://www.whitehouse.gov/privacy/"
|
|
||||||
rel="noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
>
|
||||||
Privacy Policy
|
(202) 395-5750
|
||||||
</a>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</address>
|
||||||
</section>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
<div
|
</section>
|
||||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
</div>
|
||||||
|
<div
|
||||||
|
class="mobile-lg:grid-col-12 desktop:grid-col-4"
|
||||||
|
>
|
||||||
|
<section
|
||||||
|
class="usa-footer__primary-content"
|
||||||
|
>
|
||||||
|
<h4
|
||||||
|
class="padding-top-1 padding-bottom-0"
|
||||||
>
|
>
|
||||||
<section
|
More information
|
||||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
</h4>
|
||||||
|
<ul
|
||||||
|
class="usa-list usa-list--unstyled padding-bottom-4"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="usa-footer__secondary-link"
|
||||||
>
|
>
|
||||||
<h4
|
<a
|
||||||
class="usa-footer__primary-link"
|
href="https://www.whitehouse.gov/"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
>
|
>
|
||||||
Have a question about government services?
|
Whitehouse.gov
|
||||||
</h4>
|
</a>
|
||||||
<ul
|
</li>
|
||||||
class="usa-list usa-list--unstyled"
|
<li
|
||||||
|
class="usa-footer__secondary-link"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://www.whitehouse.gov/ceq/foia"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
>
|
>
|
||||||
<li
|
Freedom of Information Act (FOIA)
|
||||||
class="usa-footer__secondary-link"
|
</a>
|
||||||
>
|
</li>
|
||||||
<a
|
<li
|
||||||
href="https://www.usa.gov/"
|
class="usa-footer__secondary-link"
|
||||||
>
|
>
|
||||||
Find a contact at USA.gov
|
<a
|
||||||
</a>
|
href="https://www.whitehouse.gov/privacy/"
|
||||||
</li>
|
rel="noreferrer"
|
||||||
</ul>
|
target="_blank"
|
||||||
</section>
|
>
|
||||||
</div>
|
Privacy Policy
|
||||||
</div>
|
</a>
|
||||||
</nav>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mobile-lg:grid-col-12 desktop:grid-col-4"
|
||||||
|
>
|
||||||
|
<section
|
||||||
|
class="usa-footer__primary-content"
|
||||||
|
>
|
||||||
|
<h4
|
||||||
|
class="padding-top-1 padding-bottom-0"
|
||||||
|
>
|
||||||
|
Have a question about government services?
|
||||||
|
</h4>
|
||||||
|
<ul
|
||||||
|
class="usa-list usa-list--unstyled padding-bottom-4"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="usa-footer__secondary-link"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://www.usa.gov/"
|
||||||
|
>
|
||||||
|
Find a contact at USA.gov
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -152,7 +142,8 @@ exports[`J40Footer renders correctly 1`] = `
|
||||||
class="usa-footer__secondary-section"
|
class="usa-footer__secondary-section"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="grid-container"
|
class="grid-container-desktop-lg j40-grid-container "
|
||||||
|
data-testid="gridContainer"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
|
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue