mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-23 01:54:18 -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 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,66 +58,78 @@ 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>
|
||||||
aria-label={intl.formatMessage(messages.arialabelfooter)}
|
<FooterNav
|
||||||
size="big" // fyi you leave this off and it silently fails...
|
aria-label={intl.formatMessage(messages.arialabelfooter)}
|
||||||
links={[
|
size="big" // fyi you leave this off and it silently fails...
|
||||||
[
|
links={[
|
||||||
<>
|
['Contacts',
|
||||||
<Logo
|
<Address
|
||||||
size="slim"
|
key={'footeraddress'}
|
||||||
key={'logoimg'}
|
className={'j40-footer-address'}
|
||||||
className={'j40-footer-logo'}
|
size={'big'}
|
||||||
image={
|
items={[
|
||||||
<img
|
'730 Jackson Pl NW',
|
||||||
className={'usa-footer__logo-img'}
|
'Washington, D.C. 20506',
|
||||||
src={whitehouseIcon}
|
'(202) 395-5750',
|
||||||
alt={intl.formatMessage(messages.whitehouselogoalt)}/>
|
]}
|
||||||
}
|
/>,
|
||||||
heading={<p
|
],
|
||||||
className={'j40-footer-logo-heading'}>
|
[
|
||||||
{intl.formatMessage(messages.logotitle)}</p>}
|
intl.formatMessage(messages.moreinfoheader),
|
||||||
/>
|
<a
|
||||||
</>,
|
key={'whitehouselink2'}
|
||||||
<>
|
href={'https://www.whitehouse.gov/'}
|
||||||
<Address
|
target={'_blank'}
|
||||||
key={'footeraddress'}
|
rel={'noreferrer'}>Whitehouse.gov</a>,
|
||||||
items={[
|
<a
|
||||||
'730 Jackson Pl NW',
|
key="foialink"
|
||||||
'Washington, D.C. 20506',
|
target={'_blank'}
|
||||||
'(202) 395-5750',
|
rel={'noreferrer'}
|
||||||
]}
|
href={'https://www.whitehouse.gov/ceq/foia'}>
|
||||||
/>
|
{intl.formatMessage(messages.foia)}
|
||||||
</>,
|
</a>,
|
||||||
],
|
<a
|
||||||
[
|
key={'privacylink'}
|
||||||
intl.formatMessage(messages.moreinfoheader),
|
target={'_blank'}
|
||||||
<a
|
rel={'noreferrer'}
|
||||||
href={'https://www.whitehouse.gov/'}
|
href={'https://www.whitehouse.gov/privacy/'}>
|
||||||
target={'_blank'}
|
{intl.formatMessage(messages.privacy)}
|
||||||
rel={'noreferrer'}
|
</a>,
|
||||||
key={'whitehouselink2'}>Whitehouse.gov</a>,
|
],
|
||||||
<a href="#" key={'https://www.whitehouse.gov/ceq/foia'}>
|
[
|
||||||
{intl.formatMessage(messages.foia)}
|
intl.formatMessage(messages.questionsheader),
|
||||||
</a>,
|
<a
|
||||||
<a href="#" key={'https://www.whitehouse.gov/privacy/'}>
|
key={'contactlink'}
|
||||||
{intl.formatMessage(messages.privacy)}
|
href={'https://www.usa.gov/'}>
|
||||||
</a>,
|
{intl.formatMessage(messages.contactlink)}
|
||||||
],
|
</a>,
|
||||||
[
|
],
|
||||||
intl.formatMessage(messages.questionsheader),
|
]}
|
||||||
<a href="#" key={'privacylink'}>
|
/>
|
||||||
{intl.formatMessage(messages.contactlink)}
|
</Grid></GridContainer>}
|
||||||
</a>,
|
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
|
<div
|
||||||
class="usa-footer__primary-section"
|
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
|
<div
|
||||||
class="usa-footer__secondary-section"
|
class="usa-footer__secondary-section"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="grid-container"
|
class="grid-container"
|
||||||
>
|
>
|
||||||
<nav
|
<div
|
||||||
aria-label="Footer navigation"
|
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
|
||||||
class="usa-footer__nav"
|
data-testid="footerLogo"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="grid-row grid-gap-4"
|
class="mobile-lg:grid-col-auto"
|
||||||
>
|
>
|
||||||
<div
|
<img
|
||||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
alt="Whitehouse logo"
|
||||||
>
|
class="usa-footer__logo-img"
|
||||||
<section
|
src="test-file-stub"
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<div
|
||||||
|
class="mobile-lg:grid-col-auto"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
class="j40-footer-logo-heading"
|
||||||
|
>
|
||||||
|
Council on Environmental Quality
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
display: inline-block;
|
.usa-footer__contact-info {
|
||||||
text-align: center;
|
font-weight: normal;
|
||||||
|
text-align: left;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue