Fix I18n and testing (#387)

Get snapshots working with Gatsby Intl plugin.
This commit is contained in:
TomNUSDS 2021-07-20 10:46:13 -07:00 committed by GitHub
commit 609506d98d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 188 additions and 179 deletions

View file

@ -1,9 +1,56 @@
import React from 'react';
import {Footer, Logo, FooterNav, Address} from '@trussworks/react-uswds';
import {useIntl} from 'gatsby-plugin-intl';
import {defineMessages} from 'react-intl';
// @ts-ignore
import whitehouseIcon from '../images/eop-seal.svg';
const J40Footer = () => {
const intl = useIntl();
const messages = defineMessages({
arialabelfooter: {
id: 'footer.arialabel',
defaultMessage: 'Footer navigation',
description: 'aria-label text for whole footer',
},
logotitle: {
id: 'footer.logo.title',
defaultMessage: 'Council on Environmental Quality',
description: 'Footer under logo',
},
moreinfoheader: {
id: 'footer.moreinfoheader',
defaultMessage: 'More Information',
description: 'Footer column header',
},
foia: {
id: 'footer.foialink',
defaultMessage: 'Freedom of Information Act (FOIA)',
description: 'Footer FOIA link text',
},
privacy: {
id: 'footer.privacylink',
defaultMessage: 'Privacy Policy',
description: 'Footer privacy policy link text',
},
whitehouselogoalt: {
id: 'footer.whitehouselogoalt',
defaultMessage: 'Whitehouse logo',
description: 'Footer Whitehouse logo alt text',
},
questionsheader: {
id: 'footer.questionsheader',
defaultMessage: 'Have a question about government services?',
description: 'Footer column header',
},
contactlink: {
id: 'footer.findcontactlink',
defaultMessage: 'Find a contact at USA.gov',
description: 'Footer find contact link text',
},
});
return (
<>
<Footer
@ -11,49 +58,9 @@ const J40Footer = () => {
className={'j40-footer'}
primary={<></>}
secondary={<FooterNav
aria-label="Footer navigation"
aria-label={intl.formatMessage(messages.arialabelfooter)}
size="big" // fyi you leave this off and it silently fails...
links={[
[
'Agency Partners',
<a
href={'https://www.epa.gov/'}
target={'_blank'}
rel={'noreferrer'}
key={'epalink'}>Environmental Protection Agency</a>,
<a
href={'https://www.whitehouse.gov/omb'}
target={'_blank'}
rel={'noreferrer'}
key={'whitehouselink'}>Office of Management
and Budget</a>,
<a
href={'https://www.energy.gov/'}
target={'_blank'}
rel={'noreferrer'}
key={'energylink'}>Department of Energy</a>,
<a
href={'https://www.hud.gov/'}
target={'_blank'}
rel={'noreferrer'}
key={'hudlink'}>Department of Housing and Urban
Development</a>,
],
[
'More Information',
<a
href={'https://www.whitehouse.gov/'}
target={'_blank'}
rel={'noreferrer'}
key={'whitehouselink2'}>Whitehouse.gov</a>,
<a href="#" key={'accessibilitylink'}>Accessibility Statement</a>,
<a href="#" key={'privacylink'}>Privacy, Policies, and Legal
Information</a>,
],
[
'Have a question about government services?',
<a href="#" key={'privacylink'}>Find a contact at USA.gov</a>,
],
[
<>
<Logo
@ -64,11 +71,11 @@ const J40Footer = () => {
<img
className={'usa-footer__logo-img'}
src={whitehouseIcon}
alt={'Whitehouse logo'}/>
alt={intl.formatMessage(messages.whitehouselogoalt)}/>
}
heading={<p
className={'j40-footer-logo-heading'}>
Council on Environmental Quality</p>}
{intl.formatMessage(messages.logotitle)}</p>}
/>
</>,
<>
@ -82,6 +89,26 @@ const J40Footer = () => {
/>
</>,
],
[
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

@ -21,139 +21,6 @@ exports[`J40Footer renders correctly 1`] = `
<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"
>
Agency Partners
</h4>
<ul
class="usa-list usa-list--unstyled"
>
<li
class="usa-footer__secondary-link"
>
<a
href="https://www.epa.gov/"
rel="noreferrer"
target="_blank"
>
Environmental Protection Agency
</a>
</li>
<li
class="usa-footer__secondary-link"
>
<a
href="https://www.whitehouse.gov/omb"
rel="noreferrer"
target="_blank"
>
Office of Management and Budget
</a>
</li>
<li
class="usa-footer__secondary-link"
>
<a
href="https://www.energy.gov/"
rel="noreferrer"
target="_blank"
>
Department of Energy
</a>
</li>
<li
class="usa-footer__secondary-link"
>
<a
href="https://www.hud.gov/"
rel="noreferrer"
target="_blank"
>
Department of Housing and Urban Development
</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"
>
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="#"
>
Accessibility Statement
</a>
</li>
<li
class="usa-footer__secondary-link"
>
<a
href="#"
>
Privacy, Policies, and Legal Information
</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
class="mobile-lg:grid-col-6 desktop:grid-col-3"
>
@ -220,6 +87,78 @@ exports[`J40Footer renders correctly 1`] = `
</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>
</nav>
</div>