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

More tweaks from today's meeting (#87)

Browse source 
Just playing with layout.
- Inverted header
- updated snapshot
- adjusted column widths
- Update J40Footer.spec.tsx.snap
This commit is contained in:
TomNUSDS 2021-06-02 18:34:21 -07:00 • committed by GitHub
commit f9ac170c6a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 175 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,47 +16,73 @@ const J40Footer = () => {
links={[
[
'Agency Partners',
<a href="https://www.epa.gov/" target="_blank" rel="noreferrer"
<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
<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"
<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"
<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"
<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>,
],
// eslint-disable-next-line react/jsx-key
[<br/>,
<Logo
size="medium"
key={'logoimg'}
image={
<img className={'usa-footer__logo-img'} src={whitehouseIcon}
alt="Whitehouse logo"/>
}
/>,
[
'Have a question about government services?',
<a href="#" key={'privacylink'}>Find a contact at USA.gov</a>,
],
[
<>Council on Environmental Quality<br/></>,
<Address className={'footerAddressReadability'}
key={'footeraddress'}
items={[
'730 Jackson Pl NW',
'Washington, D.C. 20506',
'(202) 395-5750',
]}
/>,
<>
<Logo
size="slim"
key={'logoimg'}
className={'j40-footer-logo'}
image={
<img
className={'usa-footer__logo-img'}
src={whitehouseIcon}
alt={'Whitehouse logo'}/>
}
heading={<p
className={'usa-footer__logo-heading ' +
' j40-footer-logo-heading'}>
Council on Environmental Quality</p>}
/>
</>,
<>
<Address
className={'j40-address-readability'}
key={'footeraddress'}
items={[
'730 Jackson Pl NW',
'Washington, D.C. 20506',
'(202) 395-5750',
]}
/>
</>,
],
]}
/>}

26
client/src/components/J40Header.tsx
View file

@ -1,30 +1,34 @@
import React from 'react';
import {GovBanner, Header, Title, PrimaryNav} from '@trussworks/react-uswds';
import {useIntl, Link} from 'gatsby-plugin-intl';
import {useIntl} from 'gatsby-plugin-intl';
import {Helmet} from 'react-helmet';
const headerLinks = [
<Link to="/" key="/">Home</Link>,
<></>,
];
const J40Header = () => {
const intl = useIntl();
const title = intl.formatMessage({id: '71L0pp',
const title = intl.formatMessage({
id: '71L0pp',
defaultMessage: 'Justice40',
description: 'Title of the project'});
description: 'Title of the project',
});
return (
<>
<Helmet>
<meta charSet="utf-8" />
<meta charSet="utf-8"/>
<title>{title}</title>
</Helmet>
<GovBanner />
<Header>
<Title className={'usa-hero__heading j40-title'}>
{title}
</Title>
<PrimaryNav items={headerLinks}/>
<GovBanner/>
<Header className={'j40-header'} basic={true} role={'banner'}>
<div className="usa-nav-container">
<div className="usa-navbar">
<Title className={'j40-title'}>{title}</Title>
</div>
<PrimaryNav items={headerLinks}/>
</div>
</Header>
</>
);

46
client/src/components/__snapshots__/J40Footer.spec.tsx.snap
View file

@ -137,7 +137,7 @@ exports[`J40Footer renders correctly 1`] = `
<h4
class="usa-footer__primary-link"
>
<br />
Have a question about government services?
</h4>
<ul
class="usa-list usa-list--unstyled"
@ -145,20 +145,11 @@ exports[`J40Footer renders correctly 1`] = `
<li
class="usa-footer__secondary-link"
>
<div
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
data-testid="footerLogo"
<a
href="#"
>
<div
class="mobile-lg:grid-col-auto"
>
<img
alt="Whitehouse logo"
class="usa-footer__logo-img"
src="test-file-stub"
/>
</div>
</div>
Find a contact at USA.gov
</a>
</li>
</ul>
</section>
@ -172,8 +163,29 @@ exports[`J40Footer renders correctly 1`] = `
<h4
class="usa-footer__primary-link"
>
Council on Environmental Quality
<br />
<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="usa-footer__logo-heading j40-footer-logo-heading"
>
Council on Environmental Quality
</p>
</div>
</div>
</h4>
<ul
class="usa-list usa-list--unstyled"
@ -182,7 +194,7 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-link"
>
<address
class="usa-footer__address footerAddressReadability"
class="usa-footer__address j40-address-readability"
>
<div
class="usa-footer__contact-info grid-row grid-gap"