fix footer layout and links (#447)

* fix footer layout and links
* Fix up trusswork's `<Footer>` + `<Logo>` + `<Address>` to match design
This commit is contained in:
TomNUSDS 2021-08-05 21:34:43 -07:00 committed by GitHub
commit ef044fa36b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 244 additions and 207 deletions

View file

@ -1,5 +1,12 @@
import React from 'react'; import React from 'react';
import {Footer, Logo, FooterNav, Address} from '@trussworks/react-uswds'; import {
Address,
Footer,
FooterNav,
Logo,
GridContainer, Grid,
} from '@trussworks/react-uswds';
import {} 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';
@ -51,20 +58,66 @@ const J40Footer = () => {
}, },
}); });
// see https://designsystem.digital.gov/components/footer/
return ( return (
<> <>
<Footer <Footer
size="big" size="big"
className={'j40-footer'} className={'j40-footer'}
primary={<></>} primary={
secondary={<FooterNav <GridContainer><Grid>
<FooterNav
aria-label={intl.formatMessage(messages.arialabelfooter)} aria-label={intl.formatMessage(messages.arialabelfooter)}
size="big" // fyi you leave this off and it silently fails... size="big" // fyi you leave this off and it silently fails...
links={[ links={[
['Contacts',
<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>,
],
]}
/>
</Grid></GridContainer>}
secondary={
<Logo <Logo
size="slim" size="medium"
key={'logoimg'} key={'logoimg'}
className={'j40-footer-logo'} className={'j40-footer-logo'}
image={ image={
@ -76,40 +129,6 @@ 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>}
/>
</>,
<>
<Address
key={'footeraddress'}
items={[
'730 Jackson Pl NW',
'Washington, D.C. 20506',
'(202) 395-5750',
]}
/>
</>,
],
[
intl.formatMessage(messages.moreinfoheader),
<a
href={'https://www.whitehouse.gov/'}
target={'_blank'}
rel={'noreferrer'}
key={'whitehouselink2'}>Whitehouse.gov</a>,
<a href="#" key={'https://www.whitehouse.gov/ceq/foia'}>
{intl.formatMessage(messages.foia)}
</a>,
<a href="#" key={'https://www.whitehouse.gov/privacy/'}>
{intl.formatMessage(messages.privacy)}
</a>,
],
[
intl.formatMessage(messages.questionsheader),
<a href="#" key={'privacylink'}>
{intl.formatMessage(messages.contactlink)}
</a>,
],
]}
/>} />}
/> />
</> </>

View file

@ -7,12 +7,14 @@ exports[`J40Footer renders correctly 1`] = `
> >
<div <div
class="usa-footer__primary-section" class="usa-footer__primary-section"
/>
<div
class="usa-footer__secondary-section"
> >
<div <div
class="grid-container" class="grid-container"
data-testid="gridContainer"
>
<div
class=""
data-testid="grid"
> >
<nav <nav
aria-label="Footer navigation" aria-label="Footer navigation"
@ -30,29 +32,7 @@ exports[`J40Footer renders correctly 1`] = `
<h4 <h4
class="usa-footer__primary-link" class="usa-footer__primary-link"
> >
<div Contacts
class="usa-footer__logo grid-row grid-gap-2 j40-footer-logo"
data-testid="footerLogo"
>
<div
class="grid-col-auto"
>
<img
alt="Whitehouse logo"
class="usa-footer__logo-img"
src="test-file-stub"
/>
</div>
<div
class="grid-col-auto"
>
<p
class="j40-footer-logo-heading"
>
Council on Environmental Quality
</p>
</div>
</div>
</h4> </h4>
<ul <ul
class="usa-list usa-list--unstyled" class="usa-list usa-list--unstyled"
@ -61,23 +41,23 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<address <address
class="usa-footer__address" class="usa-footer__address j40-footer-address"
> >
<div <div
class="usa-footer__contact-info grid-row grid-gap" class="usa-footer__contact-info grid-row grid-gap"
> >
<div <div
class="" class="grid-col-auto"
> >
730 Jackson Pl NW 730 Jackson Pl NW
</div> </div>
<div <div
class="" class="grid-col-auto"
> >
Washington, D.C. 20506 Washington, D.C. 20506
</div> </div>
<div <div
class="" class="grid-col-auto"
> >
(202) 395-5750 (202) 395-5750
</div> </div>
@ -116,7 +96,9 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
href="#" href="https://www.whitehouse.gov/ceq/foia"
rel="noreferrer"
target="_blank"
> >
Freedom of Information Act (FOIA) Freedom of Information Act (FOIA)
</a> </a>
@ -125,7 +107,9 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
href="#" href="https://www.whitehouse.gov/privacy/"
rel="noreferrer"
target="_blank"
> >
Privacy Policy Privacy Policy
</a> </a>
@ -151,7 +135,7 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
href="#" href="https://www.usa.gov/"
> >
Find a contact at USA.gov Find a contact at USA.gov
</a> </a>
@ -163,6 +147,38 @@ exports[`J40Footer renders correctly 1`] = `
</nav> </nav>
</div> </div>
</div> </div>
</div>
<div
class="usa-footer__secondary-section"
>
<div
class="grid-container"
>
<div
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
data-testid="footerLogo"
>
<div
class="mobile-lg:grid-col-auto"
>
<img
alt="Whitehouse logo"
class="usa-footer__logo-img"
src="test-file-stub"
/>
</div>
<div
class="mobile-lg:grid-col-auto"
>
<p
class="j40-footer-logo-heading"
>
Council on Environmental Quality
</p>
</div>
</div>
</div>
</div>
</footer> </footer>
</DocumentFragment> </DocumentFragment>
`; `;

View file

@ -164,15 +164,17 @@ $primary-color: #112f4e;
} }
.j40-footer { .j40-footer {
.usa-footer__contact-info { .j40-footer-logo {
justify-content: center; font-weight: bold;
line-height: 1.5;
text-align: center;
} }
.j40-footer-logo { .j40-footer-address {
.usa-footer__contact-info {
font-weight: normal;
text-align: left;
display: inline-block; display: inline-block;
text-align: center; line-height: 1.5;
}
} }
} }