mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-22 17:44:20 -08:00
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
GitHub
parent
9f3b2f056b
commit
ef044fa36b
3 changed files with 244 additions and 207 deletions
|
|
@ -1,5 +1,12 @@
|
|||
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 {defineMessages} from 'react-intl';
|
||||
|
||||
|
|
@ -51,66 +58,78 @@ const J40Footer = () => {
|
|||
},
|
||||
});
|
||||
|
||||
// see https://designsystem.digital.gov/components/footer/
|
||||
return (
|
||||
<>
|
||||
<Footer
|
||||
size="big"
|
||||
className={'j40-footer'}
|
||||
primary={<></>}
|
||||
secondary={<FooterNav
|
||||
aria-label={intl.formatMessage(messages.arialabelfooter)}
|
||||
size="big" // fyi you leave this off and it silently fails...
|
||||
links={[
|
||||
[
|
||||
<>
|
||||
<Logo
|
||||
size="slim"
|
||||
key={'logoimg'}
|
||||
className={'j40-footer-logo'}
|
||||
image={
|
||||
<img
|
||||
className={'usa-footer__logo-img'}
|
||||
src={whitehouseIcon}
|
||||
alt={intl.formatMessage(messages.whitehouselogoalt)}/>
|
||||
}
|
||||
heading={<p
|
||||
className={'j40-footer-logo-heading'}>
|
||||
{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>,
|
||||
],
|
||||
]}
|
||||
/>}
|
||||
primary={
|
||||
<GridContainer><Grid>
|
||||
<FooterNav
|
||||
aria-label={intl.formatMessage(messages.arialabelfooter)}
|
||||
size="big" // fyi you leave this off and it silently fails...
|
||||
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
|
||||
size="medium"
|
||||
key={'logoimg'}
|
||||
className={'j40-footer-logo'}
|
||||
image={
|
||||
<img
|
||||
className={'usa-footer__logo-img'}
|
||||
src={whitehouseIcon}
|
||||
alt={intl.formatMessage(messages.whitehouselogoalt)}/>
|
||||
}
|
||||
heading={<p
|
||||
className={'j40-footer-logo-heading'}>
|
||||
{intl.formatMessage(messages.logotitle)}</p>}
|
||||
/>}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,160 +7,176 @@ exports[`J40Footer renders correctly 1`] = `
|
|||
>
|
||||
<div
|
||||
class="usa-footer__primary-section"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="grid-container"
|
||||
data-testid="gridContainer"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
data-testid="grid"
|
||||
>
|
||||
<nav
|
||||
aria-label="Footer navigation"
|
||||
class="usa-footer__nav"
|
||||
>
|
||||
<div
|
||||
class="grid-row grid-gap-4"
|
||||
>
|
||||
<div
|
||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
||||
>
|
||||
<section
|
||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
||||
>
|
||||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
>
|
||||
Contacts
|
||||
</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
|
||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
||||
>
|
||||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
>
|
||||
More Information
|
||||
</h4>
|
||||
<ul
|
||||
class="usa-list usa-list--unstyled"
|
||||
>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<a
|
||||
href="https://www.whitehouse.gov/"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Whitehouse.gov
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<a
|
||||
href="https://www.whitehouse.gov/ceq/foia"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Freedom of Information Act (FOIA)
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<a
|
||||
href="https://www.whitehouse.gov/privacy/"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
||||
>
|
||||
<section
|
||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
||||
>
|
||||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
>
|
||||
Have a question about government services?
|
||||
</h4>
|
||||
<ul
|
||||
class="usa-list usa-list--unstyled"
|
||||
>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<a
|
||||
href="https://www.usa.gov/"
|
||||
>
|
||||
Find a contact at USA.gov
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="usa-footer__secondary-section"
|
||||
>
|
||||
<div
|
||||
class="grid-container"
|
||||
>
|
||||
<nav
|
||||
aria-label="Footer navigation"
|
||||
class="usa-footer__nav"
|
||||
<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="grid-row grid-gap-4"
|
||||
class="mobile-lg:grid-col-auto"
|
||||
>
|
||||
<div
|
||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
||||
>
|
||||
<section
|
||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
||||
>
|
||||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
>
|
||||
<div
|
||||
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>
|
||||
<ul
|
||||
class="usa-list usa-list--unstyled"
|
||||
>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<address
|
||||
class="usa-footer__address"
|
||||
>
|
||||
<div
|
||||
class="usa-footer__contact-info grid-row grid-gap"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
730 Jackson Pl NW
|
||||
</div>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
Washington, D.C. 20506
|
||||
</div>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
(202) 395-5750
|
||||
</div>
|
||||
</div>
|
||||
</address>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
||||
>
|
||||
<section
|
||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
||||
>
|
||||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
>
|
||||
More Information
|
||||
</h4>
|
||||
<ul
|
||||
class="usa-list usa-list--unstyled"
|
||||
>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<a
|
||||
href="https://www.whitehouse.gov/"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Whitehouse.gov
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
>
|
||||
Freedom of Information Act (FOIA)
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
||||
>
|
||||
<section
|
||||
class="usa-footer__primary-content usa-footer__primary-content--collapsible"
|
||||
>
|
||||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
>
|
||||
Have a question about government services?
|
||||
</h4>
|
||||
<ul
|
||||
class="usa-list usa-list--unstyled"
|
||||
>
|
||||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
>
|
||||
Find a contact at USA.gov
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<img
|
||||
alt="Whitehouse logo"
|
||||
class="usa-footer__logo-img"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
class="mobile-lg:grid-col-auto"
|
||||
>
|
||||
<p
|
||||
class="j40-footer-logo-heading"
|
||||
>
|
||||
Council on Environmental Quality
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -164,15 +164,17 @@ $primary-color: #112f4e;
|
|||
}
|
||||
|
||||
.j40-footer {
|
||||
.usa-footer__contact-info {
|
||||
justify-content: center;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
.j40-footer-logo {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.j40-footer-logo {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
.j40-footer-address {
|
||||
.usa-footer__contact-info {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue