Refactor layout (#486)

* Refactor to move `<DatasetContainer>` out of layout
* `<DatasetContainer>` is now in the methodology page. Starting the review there will help understand the motive for this change.
* Fixed 404 page which seems way out of date.
* Use row/col grid syntax
This commit is contained in:
TomNUSDS 2021-08-09 08:04:24 -07:00 committed by GitHub
commit 73a205dc48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 285 additions and 216 deletions

View file

@ -0,0 +1,30 @@
// Trussworks GridContainer won't allow it to span 100% of the page, so
// this works around it and tries to hide the complexity in component
import React, {ReactNode} from 'react';
import {GridContainer} from '@trussworks/react-uswds';
interface ILayoutProps {
children: ReactNode,
fullWidth?: boolean,
className?: string
}
const J40MainGridContainer = ({
children,
fullWidth = false,
className = 'j40-grid-container'}: ILayoutProps) => {
return fullWidth ? (
<div
className={'j40-grid-container ' + className}>
{children}
</div>
) : (
<GridContainer
containerSize={'desktop-lg'}
className={'j40-grid-container ' + className}>
{children}
</GridContainer>
);
};
export default J40MainGridContainer;

View file

@ -1,10 +1,7 @@
import React, {ReactNode} from 'react'; import React, {ReactNode} from 'react';
import {GridContainer, Grid} from '@trussworks/react-uswds';
import J40Header from './J40Header'; import J40Header from './J40Header';
import J40Footer from './J40Footer'; import J40Footer from './J40Footer';
import {URLFlagProvider} from '../contexts/FlagContext'; import {URLFlagProvider} from '../contexts/FlagContext';
import DatasetContainer from '../components/DatasetContainer';
// this has to be wrong
interface ILayoutProps { interface ILayoutProps {
children: ReactNode, children: ReactNode,
@ -12,22 +9,13 @@ interface ILayoutProps {
} }
const Layout = ({children, location}: ILayoutProps) => { const Layout = ({children, location}: ILayoutProps) => {
const isMethodologyPage = location.pathname.match(/methodology\/?/);
// @ts-ignore // @ts-ignore
return ( return (
<URLFlagProvider location={location}> <URLFlagProvider location={location}>
<J40Header location={location}/> <J40Header location={location}/>
<GridContainer containerSize={'desktop-lg'} <main id={'main-content'}>
className={'j40-grid-container'}>
<Grid row>
<main id={'main-content'}
className={'usa-layout-docs j40-main-content desktop:grid-col-12'}>
{children} {children}
</main> </main>
</Grid>
</GridContainer>
{isMethodologyPage ? <DatasetContainer />: null}
<J40Footer/> <J40Footer/>
</URLFlagProvider> </URLFlagProvider>
); );

View file

@ -1,14 +1,12 @@
import * as React from 'react'; import * as React from 'react';
import Layout from '../components/layout';
import J40MainGridContainer from '../components/J40MainGridContainer';
import {Link} from 'gatsby-plugin-intl'; import {Link} from 'gatsby-plugin-intl';
import {Grid} from '@trussworks/react-uswds';
// styles // styles
const pageStyles = {
color: '#232129',
padding: '96px',
fontFamily: '-apple-system, Roboto, sans-serif, serif',
};
const headingStyles = { const headingStyles = {
marginTop: 0, marginTop: 32,
marginBottom: 64, marginBottom: 64,
maxWidth: 320, maxWidth: 320,
}; };
@ -16,6 +14,7 @@ const headingStyles = {
const paragraphStyles = { const paragraphStyles = {
marginBottom: 48, marginBottom: 48,
}; };
const codeStyles = { const codeStyles = {
color: '#8A6534', color: '#8A6534',
padding: 4, padding: 4,
@ -24,30 +23,39 @@ const codeStyles = {
borderRadius: 4, borderRadius: 4,
}; };
interface I404PageProps {
location: Location;
}
// markup // markup
const NotFoundPage = () => { const NotFoundPage =({location}: I404PageProps) => {
return ( return (<Layout location={location}>
<main style={pageStyles}> <J40MainGridContainer>
<title>Not found</title> <Grid row><Grid col>
<h1 style={headingStyles}>Page not found</h1> <h1 style={headingStyles}>Page not found</h1>
</Grid></Grid>
<Grid row><Grid col>
<p style={paragraphStyles}> <p style={paragraphStyles}>
Sorry{' '} Sorry{' '}
<span role="img" aria-label="Pensive emoji"> <span role="img" aria-label="Pensive emoji">
😔 😔
</span>{' '} </span>{' '}
we couldnt find what you were looking for. we couldnt find what you were looking for.
<br /> <br/>
{process.env.NODE_ENV === 'development' ? ( {process.env.NODE_ENV === 'development' ? (
<> <>
<br /> <br/>
Try creating a page in <code style={codeStyles}>src/pages/</code>. Try creating a page
<br /> in <code style={codeStyles}>src/pages/</code>.
<br/>
</> </>
) : null} ) : null}
<br /> <br/>
<Link to="/">Go home</Link>. <Link to="/">Go home</Link>.
</p> </p>
</main> </Grid></Grid>
</J40MainGridContainer>
</Layout>
); );
}; };

View file

@ -3,27 +3,30 @@ import Layout from '../components/layout';
import MapWrapper from '../components/mapWrapper'; import MapWrapper from '../components/mapWrapper';
import HowYouCanHelp from '../components/HowYouCanHelp'; import HowYouCanHelp from '../components/HowYouCanHelp';
import DownloadPacket from '../components/downloadPacket'; import DownloadPacket from '../components/downloadPacket';
import J40MainGridContainer from '../components/J40MainGridContainer';
import * as styles from './cejst.module.scss'; import * as styles from './cejst.module.scss';
import {Grid} from '@trussworks/react-uswds';
interface IMapPageProps { interface IMapPageProps {
location: Location; location: Location;
} }
const CEJSTPage = ({location}: IMapPageProps) => { const CEJSTPage = ({location}: IMapPageProps) => {
// We temporarily removed MapControls, which would enable you to `setFeatures` also, for now // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now
// We will bring back later when we have interactive controls. // We will bring back later when we have interactive controls.
return ( return (<Layout location={location}>
<Layout location={location}> <J40MainGridContainer>
<Grid row><Grid col>
<section> <section>
<h2>Just Progress communities</h2> <h2>Just Progress communities</h2>
<div className={styles.disclaimer}> <div className={styles.disclaimer}>
<div className={styles.textBox}> <div className={styles.textBox}>
<p> <p>
Just Progress helps identify and prioritize communities across the Just Progress helps identify and prioritize communities across
United States and U.S. territories the United States and U.S. territories
that have been historically overburdened and underserved. These that have been historically overburdened and underserved.
communities will receive 40% of These communities will receive 40% of
the benefits from investments in key areas outlined by the the benefits from investments in key areas outlined by the
&nbsp; &nbsp;
<a <a
@ -38,10 +41,10 @@ const CEJSTPage = ({location}: IMapPageProps) => {
</a>. </a>.
</p> </p>
<p> <p>
Download the Just Progress packet or explore the map below to see Download the Just Progress packet or explore the map below to
the list of prioritized communites. To see the list of prioritized communities. To learn more about
learn more about how these communities were prioritized check out how
the these communities were prioritized check out the
&nbsp; &nbsp;
<a <a
href={'./methodology'}> href={'./methodology'}>
@ -54,13 +57,21 @@ const CEJSTPage = ({location}: IMapPageProps) => {
<DownloadPacket/> <DownloadPacket/>
</div> </div>
</section> </section>
</Grid></Grid>
<Grid row><Grid col>
<section>
<MapWrapper location={location}/>
</section>
</Grid></Grid>
<Grid row><Grid col>
<section> <section>
<MapWrapper location={location} />
<HowYouCanHelp/> <HowYouCanHelp/>
</section> </section>
</Layout> </Grid></Grid>
); </J40MainGridContainer>
</Layout>);
}; };
export default CEJSTPage; export default CEJSTPage;

View file

@ -1,6 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import Layout from '../components/layout'; import Layout from '../components/layout';
import J40MainGridContainer from '../components/J40MainGridContainer';
import {FormattedMessage} from 'gatsby-plugin-intl'; import {FormattedMessage} from 'gatsby-plugin-intl';
import {Grid} from '@trussworks/react-uswds';
interface ContactPageProps { interface ContactPageProps {
location: Location; location: Location;
@ -11,6 +13,8 @@ const ContactPage = ({location}: ContactPageProps) => {
const techemail = 'screeningtool.support@usds.gov'; const techemail = 'screeningtool.support@usds.gov';
return (<Layout location={location}> return (<Layout location={location}>
<J40MainGridContainer>
<Grid row><Grid col>
<section className={'usa-prose'}> <section className={'usa-prose'}>
<h2><FormattedMessage <h2><FormattedMessage
id={'contact.pageheader'} id={'contact.pageheader'}
@ -29,7 +33,8 @@ const ContactPage = ({location}: ContactPageProps) => {
For general feedback, email {general_email_address} For general feedback, email {general_email_address}
`} `}
values={{ values={{
general_email_address: <a href={`mailto:${generalemail}`}>{generalemail}</a>, general_email_address:
<a href={`mailto:${generalemail}`}>{generalemail}</a>,
}}/> }}/>
</p> </p>
<p> <p>
@ -40,10 +45,13 @@ const ContactPage = ({location}: ContactPageProps) => {
For technical support, email {tech_email_address} For technical support, email {tech_email_address}
`} `}
values={{ values={{
tech_email_address: <a href={`mailto:${techemail}`}>{techemail}</a>, tech_email_address:
<a href={`mailto:${techemail}`}>{techemail}</a>,
}}/> }}/>
</p> </p>
</section> </section>
</Grid></Grid>
</J40MainGridContainer>
</Layout> </Layout>
); );
}; };

View file

@ -1,8 +1,10 @@
import * as React from 'react'; import * as React from 'react';
import Layout from '../components/layout'; import Layout from '../components/layout';
import AreasOfFocusList from '../components/areasOfFocusList'; import AreasOfFocusList from '../components/areasOfFocusList';
import J40MainGridContainer from '../components/J40MainGridContainer';
import {FormattedMessage, useIntl} from 'gatsby-plugin-intl'; import {FormattedMessage, useIntl} from 'gatsby-plugin-intl';
import {defineMessages} from 'react-intl'; import {defineMessages} from 'react-intl';
import {Grid} from '@trussworks/react-uswds';
interface IndexPageProps { interface IndexPageProps {
location: Location; location: Location;
@ -48,6 +50,8 @@ const IndexPage = ({location}: IndexPageProps) => {
}); });
return (<Layout location={location}> return (<Layout location={location}>
<J40MainGridContainer>
<Grid row><Grid col>
<section className={'usa-prose'}> <section className={'usa-prose'}>
<h1>{intl.formatMessage(messages.aboutHeader)}</h1> <h1>{intl.formatMessage(messages.aboutHeader)}</h1>
@ -63,7 +67,7 @@ const IndexPage = ({location}: IndexPageProps) => {
`}/></p> `}/></p>
<p><FormattedMessage <p><FormattedMessage
id='index.aboutContent.p2' id="index.aboutContent.p2"
description={'paragraph 2 of main content on index page'} description={'paragraph 2 of main content on index page'}
defaultMessage={` defaultMessage={`
Federal agencies will prioritize benefits using a new Federal agencies will prioritize benefits using a new
@ -86,11 +90,14 @@ const IndexPage = ({location}: IndexPageProps) => {
Read more about the Justice40 Initiative in President Bidens Read more about the Justice40 Initiative in President Bidens
{presidentLink} {presidentLink}
`} `}
values={{presidentLink: values={{
<a href={intl.formatMessage(messages.presidentalLinkUri)} presidentLink:
target='_blank' <a
rel='noreferrer'>{intl.formatMessage(messages.presidentalLinkLabel)} href={intl.formatMessage(messages.presidentalLinkUri)}
</a>}}/> target="_blank"
rel="noreferrer">{intl.formatMessage(messages.presidentalLinkLabel)}
</a>,
}}/>
</p> </p>
<h2><FormattedMessage <h2><FormattedMessage
@ -98,7 +105,7 @@ const IndexPage = ({location}: IndexPageProps) => {
description={'section 2 header'} description={'section 2 header'}
defaultMessage={'Areas of Focus'}/></h2> defaultMessage={'Areas of Focus'}/></h2>
<AreasOfFocusList /> <AreasOfFocusList/>
<h2><FormattedMessage <h2><FormattedMessage
id={'index.section3.header'} id={'index.section3.header'}
@ -126,7 +133,8 @@ const IndexPage = ({location}: IndexPageProps) => {
whos interested can be involved in the tool-building whos interested can be involved in the tool-building
process.`} process.`}
values={{ values={{
inlineHeader: <i>{intl.formatMessage(messages.transparentLabel)}</i>, inlineHeader:
<i>{intl.formatMessage(messages.transparentLabel)}</i>,
}}/> }}/>
</p> </p>
@ -143,7 +151,8 @@ const IndexPage = ({location}: IndexPageProps) => {
to understand their needs and ask for their input. to understand their needs and ask for their input.
`} `}
values={{ values={{
inlineHeader: <i>{intl.formatMessage(messages.inclusiveLabel)}</i>, inlineHeader:
<i>{intl.formatMessage(messages.inclusiveLabel)}</i>,
}}/> }}/>
</p> </p>
@ -165,12 +174,14 @@ const IndexPage = ({location}: IndexPageProps) => {
engagement. engagement.
`} `}
values={{ values={{
inlineHeader: <i>{intl.formatMessage(messages.iterativeLabel)}</i>, inlineHeader:
<i>{intl.formatMessage(messages.iterativeLabel)}</i>,
}}/> }}/>
</p> </p>
</section> </section>
</Layout> </Grid></Grid>
); </J40MainGridContainer>
</Layout>);
}; };
export default IndexPage; export default IndexPage;

View file

@ -1,5 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import Layout from '../components/layout'; import Layout from '../components/layout';
import DatasetContainer from '../components/DatasetContainer';
import J40MainGridContainer from '../components/J40MainGridContainer';
import {Grid} from '@trussworks/react-uswds';
interface MethodPageProps { interface MethodPageProps {
location: Location; location: Location;
@ -7,24 +10,27 @@ interface MethodPageProps {
// markup // markup
const IndexPage = ({location}: MethodPageProps) => { const IndexPage = ({location}: MethodPageProps) => {
return ( return (<Layout location={location}>
<Layout location={location}> <J40MainGridContainer>
<Grid row><Grid col>
<section> <section>
<h1>Methodology</h1> <h1>Methodology</h1>
<p> <p>
The Just Progress tool combines demographic, environmental, and The Just Progress tool combines demographic, environmental, and
socio-economic data to generate a cumulative index score, referred to socio-economic data to generate a cumulative index score, referred
as the Just Progress Index. The tool currently utilizes national, to as the Just Progress Index. The tool currently utilizes
national,
publically-available data from the United States Census Bureaus publically-available data from the United States Census Bureaus
American Community Survey (ACS) and the EPAs EJScreen tool. American Community Survey (ACS) and the EPAs EJScreen tool.
</p> </p>
<p> <p>
The various inputs into the Just Progress Index are averaged into 2 The various inputs into the Just Progress Index are averaged into
categories: Pollution Burden and Demographics. 2 categories: Pollution Burden and Demographics.
</p> </p>
<p> <p>
Pollution Burden: health risks arising from proximity and potential Pollution Burden: health risks arising from proximity and
exposures to pollution and other adverse environmental conditions potential exposures to pollution and other adverse environmental
conditions
</p> </p>
<p> <p>
Demographics: sensitive populations and socioeconomic factors that Demographics: sensitive populations and socioeconomic factors that
@ -35,8 +41,15 @@ const IndexPage = ({location}: MethodPageProps) => {
Index</b> Index</b>
</p> </p>
</section> </section>
</Layout> </Grid></Grid>
); </J40MainGridContainer>
<J40MainGridContainer fullWidth={true}>
<Grid row><Grid col>
<DatasetContainer/>
</Grid></Grid>
</J40MainGridContainer>
</Layout>);
}; };
export default IndexPage; export default IndexPage;