mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-22 17:44:20 -08:00
Fix I18n and testing (#387)
Get snapshots working with Gatsby Intl plugin.
This commit is contained in:
TomNUSDS
GitHub
parent
e5908cf7d7
commit
609506d98d
4 changed files with 188 additions and 179 deletions
|
|
@ -1,9 +1,56 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {Footer, Logo, FooterNav, Address} from '@trussworks/react-uswds';
|
import {Footer, Logo, FooterNav, Address} from '@trussworks/react-uswds';
|
||||||
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
|
import {defineMessages} from 'react-intl';
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import whitehouseIcon from '../images/eop-seal.svg';
|
import whitehouseIcon from '../images/eop-seal.svg';
|
||||||
|
|
||||||
const J40Footer = () => {
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Footer
|
<Footer
|
||||||
|
|
@ -11,49 +58,9 @@ const J40Footer = () => {
|
||||||
className={'j40-footer'}
|
className={'j40-footer'}
|
||||||
primary={<></>}
|
primary={<></>}
|
||||||
secondary={<FooterNav
|
secondary={<FooterNav
|
||||||
aria-label="Footer navigation"
|
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={[
|
||||||
[
|
|
||||||
'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
|
<Logo
|
||||||
|
|
@ -64,11 +71,11 @@ const J40Footer = () => {
|
||||||
<img
|
<img
|
||||||
className={'usa-footer__logo-img'}
|
className={'usa-footer__logo-img'}
|
||||||
src={whitehouseIcon}
|
src={whitehouseIcon}
|
||||||
alt={'Whitehouse logo'}/>
|
alt={intl.formatMessage(messages.whitehouselogoalt)}/>
|
||||||
}
|
}
|
||||||
heading={<p
|
heading={<p
|
||||||
className={'j40-footer-logo-heading'}>
|
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>,
|
||||||
|
],
|
||||||
]}
|
]}
|
||||||
/>}
|
/>}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -21,139 +21,6 @@ exports[`J40Footer renders correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="grid-row grid-gap-4"
|
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
|
<div
|
||||||
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
class="mobile-lg:grid-col-6 desktop:grid-col-3"
|
||||||
>
|
>
|
||||||
|
|
@ -220,6 +87,78 @@ exports[`J40Footer renders correctly 1`] = `
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</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>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,38 @@
|
||||||
"defaultMessage": "Clean water infrastructure",
|
"defaultMessage": "Clean water infrastructure",
|
||||||
"description": "item in areasOfInterest list"
|
"description": "item in areasOfInterest list"
|
||||||
},
|
},
|
||||||
|
"footer.arialabel": {
|
||||||
|
"defaultMessage": "Footer navigation",
|
||||||
|
"description": "aria-label text for whole footer"
|
||||||
|
},
|
||||||
|
"footer.findcontactlink": {
|
||||||
|
"defaultMessage": "Find a contact at USA.gov",
|
||||||
|
"description": "Footer find contact link text"
|
||||||
|
},
|
||||||
|
"footer.foialink": {
|
||||||
|
"defaultMessage": "Freedom of Information Act (FOIA)",
|
||||||
|
"description": "Footer FOIA link text"
|
||||||
|
},
|
||||||
|
"footer.logo.title": {
|
||||||
|
"defaultMessage": "Council on Environmental Quality",
|
||||||
|
"description": "Footer under logo"
|
||||||
|
},
|
||||||
|
"footer.moreinfoheader": {
|
||||||
|
"defaultMessage": "More Information",
|
||||||
|
"description": "Footer column header"
|
||||||
|
},
|
||||||
|
"footer.privacylink": {
|
||||||
|
"defaultMessage": "Privacy Policy",
|
||||||
|
"description": "Footer privacy policy link text"
|
||||||
|
},
|
||||||
|
"footer.questionsheader": {
|
||||||
|
"defaultMessage": "Have a question about government services?",
|
||||||
|
"description": "Footer column header"
|
||||||
|
},
|
||||||
|
"footer.whitehouselogoalt": {
|
||||||
|
"defaultMessage": "Whitehouse logo",
|
||||||
|
"description": "Footer Whitehouse logo alt text"
|
||||||
|
},
|
||||||
"header.about": {
|
"header.about": {
|
||||||
"defaultMessage": "About",
|
"defaultMessage": "About",
|
||||||
"description": "Navigate to the about page"
|
"description": "Navigate to the about page"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,15 @@
|
||||||
import React, {ReactNode} from 'react';
|
import React, {ReactNode} from 'react';
|
||||||
import {IntlContextProvider} from 'gatsby-plugin-intl';
|
import {IntlProvider, IntlContextProvider} from 'gatsby-plugin-intl';
|
||||||
|
import messages from '../intl/en.json'; // this is updated by `formatjs extract`
|
||||||
|
|
||||||
|
const intlConfig = {
|
||||||
|
language: 'en',
|
||||||
|
languages: ['en', 'es'],
|
||||||
|
messages,
|
||||||
|
originalPath: '/',
|
||||||
|
redirect: true,
|
||||||
|
routed: true,
|
||||||
|
};
|
||||||
interface ILocalizedComponentProps {
|
interface ILocalizedComponentProps {
|
||||||
children: ReactNode
|
children: ReactNode
|
||||||
}
|
}
|
||||||
|
|
@ -8,8 +17,10 @@ interface ILocalizedComponentProps {
|
||||||
export const LocalizedComponent = ({children}: ILocalizedComponentProps) => {
|
export const LocalizedComponent = ({children}: ILocalizedComponentProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<IntlContextProvider value={{language: 'en', routed: true}}>
|
<IntlContextProvider value={intlConfig} >
|
||||||
|
<IntlProvider locale={'en'}>
|
||||||
{children}
|
{children}
|
||||||
|
</IntlProvider>
|
||||||
</IntlContextProvider>,
|
</IntlContextProvider>,
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue