publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-07-28 20:01:16 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor layout (#486)

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

30
client/src/components/J40MainGridContainer.tsx Normal file
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;

18
client/src/components/layout.tsx
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'}> {children}
<Grid row> </main>
<main id={'main-content'}
className={'usa-layout-docs j40-main-content desktop:grid-col-12'}>
{children}
</main>
</Grid>
</GridContainer>
{isMethodologyPage ? <DatasetContainer />: null}
<J40Footer/> <J40Footer/>
</URLFlagProvider> </URLFlagProvider>
); );

66
client/src/pages/404.tsx
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>
<p style={paragraphStyles}> </Grid></Grid>
Sorry{' '} <Grid row><Grid col>
<span role="img" aria-label="Pensive emoji"> <p style={paragraphStyles}>
😔 Sorry{' '}
</span>{' '} <span role="img" aria-label="Pensive emoji">
we couldn’t find what you were looking for. 😔
<br /> </span>{' '}
{process.env.NODE_ENV === 'development' ? ( we couldn’t find what you were looking for.
<> <br/>
<br /> {process.env.NODE_ENV === 'development' ? (
Try creating a page in <code style={codeStyles}>src/pages/</code>. <>
<br /> <br/>
</> Try creating a page
) : null} in <code style={codeStyles}>src/pages/</code>.
<br /> <br/>
<Link to="/">Go home</Link>. </>
</p> ) : null}
</main> <br/>
<Link to="/">Go home</Link>.
</p>
</Grid></Grid>
</J40MainGridContainer>
</Layout>
); );
}; };

105
client/src/pages/cejst.tsx
View file

@ -3,64 +3,75 @@ 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>
<section> <Grid row><Grid col>
<h2>Just Progress communities</h2> <section>
<div className={styles.disclaimer}> <h2>Just Progress communities</h2>
<div className={styles.textBox}> <div className={styles.disclaimer}>
<p> <div className={styles.textBox}>
Just Progress helps identify and prioritize communities across the <p>
United States and U.S. territories Just Progress helps identify and prioritize communities across
that have been historically overburdened and underserved. These the United States and U.S. territories
communities will receive 40% of that have been historically overburdened and underserved.
the benefits from investments in key areas outlined by the These communities will receive 40% of
&nbsp; the benefits from investments in key areas outlined by the
<a &nbsp;
href={'https://www.whitehouse.gov/briefing-room/' + <a
'presidential-actions/2021/01/27/' + href={'https://www.whitehouse.gov/briefing-room/' +
'executive-order-on-tackling-the-climate-' + 'presidential-actions/2021/01/27/' +
'crisis-at-home-and-abroad/'} 'executive-order-on-tackling-the-climate-' +
target={'_blank'} 'crisis-at-home-and-abroad/'}
rel={'noreferrer'}> target={'_blank'}
Executive Order on Tackling the Climate Crisis at Home and rel={'noreferrer'}>
Abroad Executive Order on Tackling the Climate Crisis at Home and
</a>. Abroad
</p> </a>.
<p> </p>
Download the Just Progress packet or explore the map below to see <p>
the list of prioritized communites. To Download the Just Progress packet or explore the map below to
learn more about how these communities were prioritized check out see the list of prioritized communities. To learn more about
the how
&nbsp; these communities were prioritized check out the
<a &nbsp;
href={'./methodology'}> <a
Methodology href={'./methodology'}>
</a> Methodology
&nbsp; </a>
page. &nbsp;
</p> page.
</p>
</div>
<DownloadPacket/>
</div> </div>
<DownloadPacket/> </section>
</div> </Grid></Grid>
</section>
<section> <Grid row><Grid col>
<MapWrapper location={location} /> <section>
<HowYouCanHelp/> <MapWrapper location={location}/>
</section> </section>
</Layout> </Grid></Grid>
);
<Grid row><Grid col>
<section>
<HowYouCanHelp/>
</section>
</Grid></Grid>
</J40MainGridContainer>
</Layout>);
}; };
export default CEJSTPage; export default CEJSTPage;

64
client/src/pages/contact.tsx
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,39 +13,45 @@ const ContactPage = ({location}: ContactPageProps) => {
const techemail = 'screeningtool.support@usds.gov'; const techemail = 'screeningtool.support@usds.gov';
return (<Layout location={location}> return (<Layout location={location}>
<section className={'usa-prose'}> <J40MainGridContainer>
<h2><FormattedMessage <Grid row><Grid col>
id={'contact.pageheader'} <section className={'usa-prose'}>
description={'H2 header for contact page'} <h2><FormattedMessage
defaultMessage={'Contact'}/></h2> id={'contact.pageheader'}
<h3><FormattedMessage description={'H2 header for contact page'}
id={'contact.sectionheader'} defaultMessage={'Contact'}/></h2>
description={'Heading for page to allow users to contact project maintainers'} <h3><FormattedMessage
defaultMessage={'Email us'}/></h3> id={'contact.sectionheader'}
description={'Heading for page to allow users to contact project maintainers'}
defaultMessage={'Email us'}/></h3>
<p> <p>
<FormattedMessage <FormattedMessage
id={'contact.general'} id={'contact.general'}
description={'Contact page body text'} description={'Contact page body text'}
defaultMessage={` defaultMessage={`
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>
<FormattedMessage <p>
id={'contact.general'} <FormattedMessage
description={'Contact page body text'} id={'contact.general'}
defaultMessage={` description={'Contact page body text'}
defaultMessage={`
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> }}/>
</section> </p>
</section>
</Grid></Grid>
</J40MainGridContainer>
</Layout> </Layout>
); );
}; };

145
client/src/pages/index.tsx
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;
@ -20,9 +22,9 @@ const IndexPage = ({location}: IndexPageProps) => {
presidentalLinkUri: { presidentalLinkUri: {
id: 'index.presidentalLinkUri', id: 'index.presidentalLinkUri',
defaultMessage: 'https://www.whitehouse.gov/briefing-room/' + defaultMessage: 'https://www.whitehouse.gov/briefing-room/' +
'presidential-actions/2021/01/27/' + 'presidential-actions/2021/01/27/' +
'executive-order-on-tackling-the-climate-' + 'executive-order-on-tackling-the-climate-' +
'crisis-at-home-and-abroad/', 'crisis-at-home-and-abroad/',
description: 'Link url to presidential actions executive order. Part of paragraph 3', description: 'Link url to presidential actions executive order. Part of paragraph 3',
}, },
presidentalLinkLabel: { presidentalLinkLabel: {
@ -48,13 +50,15 @@ const IndexPage = ({location}: IndexPageProps) => {
}); });
return (<Layout location={location}> return (<Layout location={location}>
<section className={'usa-prose'}> <J40MainGridContainer>
<h1>{intl.formatMessage(messages.aboutHeader)}</h1> <Grid row><Grid col>
<section className={'usa-prose'}>
<h1>{intl.formatMessage(messages.aboutHeader)}</h1>
<p><FormattedMessage <p><FormattedMessage
id={'index.aboutContent.p1'} id={'index.aboutContent.p1'}
description={'paragraph 1 of main content on index page'} description={'paragraph 1 of main content on index page'}
defaultMessage={` defaultMessage={`
In an effort to address historical environmental injustices, In an effort to address historical environmental injustices,
President Biden created the Justice40 Initiative on January President Biden created the Justice40 Initiative on January
27, 2021. The Justice40 Initiative directs 40% of the 27, 2021. The Justice40 Initiative directs 40% of the
@ -62,10 +66,10 @@ const IndexPage = ({location}: IndexPageProps) => {
overburdened and underserved communities. overburdened and underserved communities.
`}/></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
climate and economic justice screening tool. This screening climate and economic justice screening tool. This screening
tool will be a map that visualizes data to compare the tool will be a map that visualizes data to compare the
@ -79,62 +83,66 @@ const IndexPage = ({location}: IndexPageProps) => {
the lived experiences of community members. the lived experiences of community members.
`}/></p> `}/></p>
<p><FormattedMessage <p><FormattedMessage
id={'index.aboutContent.p3'} id={'index.aboutContent.p3'}
description={'paragraph 3 of main content on index page'} description={'paragraph 3 of main content on index page'}
defaultMessage={` defaultMessage={`
Read more about the Justice40 Initiative in President Biden’s Read more about the Justice40 Initiative in President Biden’s
{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"
</p> rel="noreferrer">{intl.formatMessage(messages.presidentalLinkLabel)}
</a>,
}}/>
</p>
<h2><FormattedMessage <h2><FormattedMessage
id={'index.section2.header'} id={'index.section2.header'}
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'}
description={'section 3 header'} description={'section 3 header'}
defaultMessage={'A Transparent, Community-First Approach'}/></h2> defaultMessage={'A Transparent, Community-First Approach'}/></h2>
<p><FormattedMessage <p><FormattedMessage
id={'index.section3.intro'} id={'index.section3.intro'}
description={'section 3 content paragraph 1 intro'} description={'section 3 content paragraph 1 intro'}
defaultMessage={` defaultMessage={`
Successful initiatives are guided by direct input from the Successful initiatives are guided by direct input from the
communities they are serving. CEQ commits to transparency, communities they are serving. CEQ commits to transparency,
inclusivity, and iteration in building this screening tool.`}/> inclusivity, and iteration in building this screening tool.`}/>
</p> </p>
<p> <p>
<FormattedMessage <FormattedMessage
id={'index.section3.transparent'} id={'index.section3.transparent'}
description={'section 3 content transparent'} description={'section 3 content transparent'}
defaultMessage={` defaultMessage={`
{inlineHeader} The code and data behind the screening {inlineHeader} The code and data behind the screening
tool are open source, meaning it is available for the public tool are open source, meaning it is available for the public
to review and contribute to. This tool is being developed to review and contribute to. This tool is being developed
publicly so that communities, academic experts, and anyone publicly so that communities, academic experts, and anyone
who’s interested can be involved in the tool-building who’s 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>
<p> <p>
<FormattedMessage <FormattedMessage
id={'index.section3.inclusive'} id={'index.section3.inclusive'}
description={'section 3 content inclusive'} description={'section 3 content inclusive'}
defaultMessage={` defaultMessage={`
{inlineHeader} Many areas which lack investments also {inlineHeader} Many areas which lack investments also
lack environmental data and would be overlooked using lack environmental data and would be overlooked using
available environmental data. CEQ is actively reaching out available environmental data. CEQ is actively reaching out
@ -142,16 +150,17 @@ const IndexPage = ({location}: IndexPageProps) => {
decision-making, such as groups in rural and tribal areas, decision-making, such as groups in rural and tribal areas,
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>
<p> <p>
<FormattedMessage <FormattedMessage
id={'index.section3.iterative'} id={'index.section3.iterative'}
description={'section 3 content iterative'} description={'section 3 content iterative'}
defaultMessage={` defaultMessage={`
{inlineHeader} The initial community prioritization list {inlineHeader} The initial community prioritization list
provided by the screening tool is the beginning of a provided by the screening tool is the beginning of a
collaborative process in score refinement, rather than a collaborative process in score refinement, rather than a
@ -164,13 +173,15 @@ const IndexPage = ({location}: IndexPageProps) => {
being built and the processes for stakeholder and public being built and the processes for stakeholder and public
engagement. engagement.
`} `}
values={{ values={{
inlineHeader: <i>{intl.formatMessage(messages.iterativeLabel)}</i>, inlineHeader:
}}/> <i>{intl.formatMessage(messages.iterativeLabel)}</i>,
</p> }}/>
</section> </p>
</Layout> </section>
); </Grid></Grid>
</J40MainGridContainer>
</Layout>);
}; };
export default IndexPage; export default IndexPage;

73
client/src/pages/methodology.tsx
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,36 +10,46 @@ interface MethodPageProps {
// markup // markup
const IndexPage = ({location}: MethodPageProps) => { const IndexPage = ({location}: MethodPageProps) => {
return ( return (<Layout location={location}>
<Layout location={location}> <J40MainGridContainer>
<section> <Grid row><Grid col>
<h1>Methodology</h1> <section>
<p> <h1>Methodology</h1>
The Just Progress tool combines demographic, environmental, and <p>
socio-economic data to generate a cumulative index score, referred to The Just Progress tool combines demographic, environmental, and
as the Just Progress Index. The tool currently utilizes national, socio-economic data to generate a cumulative index score, referred
publically-available data from the United States Census Bureau’s to as the Just Progress Index. The tool currently utilizes
American Community Survey (ACS) and the EPA’s EJScreen tool. national,
</p> publically-available data from the United States Census Bureau’s
<p> American Community Survey (ACS) and the EPA’s EJScreen tool.
The various inputs into the Just Progress Index are averaged into 2 </p>
categories: Pollution Burden and Demographics. <p>
</p> The various inputs into the Just Progress Index are averaged into
<p> 2 categories: Pollution Burden and Demographics.
Pollution Burden: health risks arising from proximity and potential </p>
exposures to pollution and other adverse environmental conditions <p>
</p> Pollution Burden: health risks arising from proximity and
<p> potential exposures to pollution and other adverse environmental
Demographics: sensitive populations and socioeconomic factors that conditions
make a community more vulnerable </p>
</p> <p>
<p> Demographics: sensitive populations and socioeconomic factors that
<b>Pollution Burden average x Demographics average = Just Progress make a community more vulnerable
Index</b> </p>
</p> <p>
</section> <b>Pollution Burden average x Demographics average = Just Progress
</Layout> Index</b>
); </p>
</section>
</Grid></Grid>
</J40MainGridContainer>
<J40MainGridContainer fullWidth={true}>
<Grid row><Grid col>
<DatasetContainer/>
</Grid></Grid>
</J40MainGridContainer>
</Layout>);
}; };
export default IndexPage; export default IndexPage;