publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-22 08:11:40 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix footer layout and links (#447)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

131
client/src/components/J40Footer.tsx
View file

@ -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>}
/>}
/>
</>
);