Modifies ExploreTool page to match sprint 4 design (#481)

* initial commit of sprint 4 explore page

* adds styling on HowYouCanHelp module

* troubleshooting li element on deployed URL

removing local bullet styles

* removing unused styles

* recreating HowYouCanHelp

* explicit list el styles

* adds bullets back in

* fixes tooltip style and alert padding

* componentize MapLegend

* fix links

* inital intl and unit tests

* adds trusswork tooltip for comparison

* updates based on various feedback and disucssions:

- removes react-tooltip
- placeholder trussworks tooltip
- removes download packet component
- intl on HowYouCanHelp
- updates MapLegend tests
- add initial cy test on ExploreTool page

* removes bold on alert

* PR feedback:

- removes location from J40Alert
- localizes `COLOR KEY`

* adds intl to constants file

* modifies download zip URL to new S3 location

* removes location depedencies on Alerts

* add localization for HowYouCanHelp
This commit is contained in:
Vim 2021-08-10 09:45:45 -07:00 committed by GitHub
commit 174a0e1330
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 974 additions and 426 deletions

View file

@ -1,10 +1,12 @@
import * as React from 'react';
import Layout from '../components/layout';
import AreasOfFocusList from '../components/areasOfFocusList';
import J40MainGridContainer from '../components/J40MainGridContainer';
import {FormattedMessage, useIntl} from 'gatsby-plugin-intl';
import {defineMessages} from 'react-intl';
import {Grid} from '@trussworks/react-uswds';
import {FormattedMessage, useIntl} from 'gatsby-plugin-intl';
import AreasOfFocusList from '../components/areasOfFocusList';
import AlertWrapper from '../components/AlertWrapper';
import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout';
interface IndexPageProps {
location: Location;
@ -49,139 +51,155 @@ const IndexPage = ({location}: IndexPageProps) => {
},
});
return (<Layout location={location}>
<J40MainGridContainer>
<Grid row><Grid col>
<section className={'usa-prose'}>
<h1>{intl.formatMessage(messages.aboutHeader)}</h1>
return (
<Layout location={location}>
<p><FormattedMessage
id={'index.aboutContent.p1'}
description={'paragraph 1 of main content on index page'}
defaultMessage={`
In an effort to address historical environmental injustices,
President Biden created the Justice40 Initiative on January
27, 2021. The Justice40 Initiative directs 40% of the
benefits from federal investments in seven key areas to
overburdened and underserved communities.
`}/></p>
<J40MainGridContainer fullWidth={true}>
<AlertWrapper />
</J40MainGridContainer>
<p><FormattedMessage
id="index.aboutContent.p2"
description={'paragraph 2 of main content on index page'}
defaultMessage={`
Federal agencies will prioritize benefits using a new
climate and economic justice screening tool. This screening
tool will be a map that visualizes data to compare the
cumulative impacts of environmental, climate, and economic
factors. It is being developed by the Council on
Environmental Quality (CEQ) with guidance from environmental
justice leaders and communities affected by environmental
injustices. The first version of the screening tool will be
released in July 2021. However, the screening tool and data
being used will be continuously updated to better reflect
the lived experiences of community members.
`}/></p>
<J40MainGridContainer>
<Grid row>
<Grid col>
<section className={'usa-prose'}>
<h1>{intl.formatMessage(messages.aboutHeader)}</h1>
<p><FormattedMessage
id={'index.aboutContent.p3'}
description={'paragraph 3 of main content on index page'}
defaultMessage={`
Read more about the Justice40 Initiative in President Bidens
{presidentLink}
`}
values={{
presidentLink:
<p>
<FormattedMessage
id={'index.aboutContent.p1'}
description={'paragraph 1 of main content on index page'}
defaultMessage={`
In an effort to address historical environmental injustices,
President Biden created the Justice40 Initiative on January
27, 2021. The Justice40 Initiative directs 40% of the
benefits from federal investments in seven key areas to
overburdened and underserved communities.
`}/>
</p>
<p>
<FormattedMessage
id="index.aboutContent.p2"
description={'paragraph 2 of main content on index page'}
defaultMessage={`
Federal agencies will prioritize benefits using a new
climate and economic justice screening tool. This screening
tool will be a map that visualizes data to compare the
cumulative impacts of environmental, climate, and economic
factors. It is being developed by the Council on
Environmental Quality (CEQ) with guidance from environmental
justice leaders and communities affected by environmental
injustices. The first version of the screening tool will be
released in July 2021. However, the screening tool and data
being used will be continuously updated to better reflect
the lived experiences of community members.
`}/>
</p>
<p><FormattedMessage
id={'index.aboutContent.p3'}
description={'paragraph 3 of main content on index page'}
defaultMessage={`
Read more about the Justice40 Initiative in President Bidens
{presidentLink}
`}
values={{
presidentLink:
<a
href={intl.formatMessage(messages.presidentalLinkUri)}
target="_blank"
rel="noreferrer">{intl.formatMessage(messages.presidentalLinkLabel)}
</a>,
}}/>
</p>
}}/>
</p>
<h2><FormattedMessage
id={'index.section2.header'}
description={'section 2 header'}
defaultMessage={'Areas of Focus'}/></h2>
<h2>
<FormattedMessage
id={'index.section2.header'}
description={'section 2 header'}
defaultMessage={'Areas of Focus'}/>
</h2>
<AreasOfFocusList/>
<AreasOfFocusList/>
<h2><FormattedMessage
id={'index.section3.header'}
description={'section 3 header'}
defaultMessage={'A Transparent, Community-First Approach'}/></h2>
<h2>
<FormattedMessage
id={'index.section3.header'}
description={'section 3 header'}
defaultMessage={'A Transparent, Community-First Approach'}/>
</h2>
<p><FormattedMessage
id={'index.section3.intro'}
description={'section 3 content paragraph 1 intro'}
defaultMessage={`
Successful initiatives are guided by direct input from the
communities they are serving. CEQ commits to transparency,
inclusivity, and iteration in building this screening tool.`}/>
</p>
<p><FormattedMessage
id={'index.section3.intro'}
description={'section 3 content paragraph 1 intro'}
defaultMessage={`
Successful initiatives are guided by direct input from the
communities they are serving. CEQ commits to transparency,
inclusivity, and iteration in building this screening tool.`}/>
</p>
<p>
<FormattedMessage
id={'index.section3.transparent'}
description={'section 3 content transparent'}
defaultMessage={`
{inlineHeader} The code and data behind the screening
tool are open source, meaning it is available for the public
to review and contribute to. This tool is being developed
publicly so that communities, academic experts, and anyone
whos interested can be involved in the tool-building
process.`}
values={{
inlineHeader:
<p>
<FormattedMessage
id={'index.section3.transparent'}
description={'section 3 content transparent'}
defaultMessage={`
{inlineHeader} The code and data behind the screening
tool are open source, meaning it is available for the public
to review and contribute to. This tool is being developed
publicly so that communities, academic experts, and anyone
whos interested can be involved in the tool-building
process.`}
values={{
inlineHeader:
<i>{intl.formatMessage(messages.transparentLabel)}</i>,
}}/>
</p>
}}/>
</p>
<p>
<FormattedMessage
id={'index.section3.inclusive'}
description={'section 3 content inclusive'}
defaultMessage={`
{inlineHeader} Many areas which lack investments also
lack environmental data and would be overlooked using
available environmental data. CEQ is actively reaching out
to groups that have historically been excluded from
decision-making, such as groups in rural and tribal areas,
to understand their needs and ask for their input.
`}
values={{
inlineHeader:
<p>
<FormattedMessage
id={'index.section3.inclusive'}
description={'section 3 content inclusive'}
defaultMessage={`
{inlineHeader} Many areas which lack investments also
lack environmental data and would be overlooked using
available environmental data. CEQ is actively reaching out
to groups that have historically been excluded from
decision-making, such as groups in rural and tribal areas,
to understand their needs and ask for their input.
`}
values={{
inlineHeader:
<i>{intl.formatMessage(messages.inclusiveLabel)}</i>,
}}/>
</p>
}}/>
</p>
<p>
<FormattedMessage
id={'index.section3.iterative'}
description={'section 3 content iterative'}
defaultMessage={`
{inlineHeader} The initial community prioritization list
provided by the screening tool is the beginning of a
collaborative process in score refinement, rather than a
final answer. CEQ has received recommendations on data sets
from community interviews, the White House Environmental
Justice Advisory Council, and through public comment, but
establishing a score that is truly representative will be a
long-term, ongoing process. As communities submit feedback
and recommendations, CEQ will continue to improve the tools
being built and the processes for stakeholder and public
engagement.
`}
values={{
inlineHeader:
<p>
<FormattedMessage
id={'index.section3.iterative'}
description={'section 3 content iterative'}
defaultMessage={`
{inlineHeader} The initial community prioritization list
provided by the screening tool is the beginning of a
collaborative process in score refinement, rather than a
final answer. CEQ has received recommendations on data sets
from community interviews, the White House Environmental
Justice Advisory Council, and through public comment, but
establishing a score that is truly representative will be a
long-term, ongoing process. As communities submit feedback
and recommendations, CEQ will continue to improve the tools
being built and the processes for stakeholder and public
engagement.
`}
values={{
inlineHeader:
<i>{intl.formatMessage(messages.iterativeLabel)}</i>,
}}/>
</p>
</section>
</Grid></Grid>
</J40MainGridContainer>
</Layout>);
}}/>
</p>
</section>
</Grid>
</Grid>
</J40MainGridContainer>
</Layout>);
};
export default IndexPage;