mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-07 10:04:19 -07:00
About page sprint4 (#544)
* Card sections of the About page
* Create index.test.tsx
* Add test that verifies no console errors and no undefined variables.
* Added unit test with snapshot
* use global.console.error
* Fix unit test for console.error()
* Remove areasOfFocusList since it's no longer used
* CSS adjustments from PR
* Add back in AlertWrapper
* github.com link opens in new tab
* adds comment to globalize console.error check
* Refactor AboutCard
* Fixing the top grid so it resizes correctly on mobile. (e.g. using `<Grid desktop={{col: 9}}>` will expand to full width when going to mobile.
* So AboutCard can now do 'large' cards (ones at the top) and 'small' cards (ones at the bottom that are 2x per row).
* change `desktop` -> `tablet`
* `<Grid col={1}>{' '}</Grid>`
Co-authored-by: Vim <86254807+vim-usds@users.noreply.github.com>
This commit is contained in:
TomNUSDS
GitHub
parent
f7bfc979ba
commit
a2eabda319
11 changed files with 448 additions and 266 deletions
30
client/src/pages/index.test.tsx
Normal file
30
client/src/pages/index.test.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import * as React from 'react';
|
||||
import {render} from '@testing-library/react';
|
||||
import Index from './index';
|
||||
import {LocalizedComponent} from '../test/testHelpers';
|
||||
|
||||
// TODO: Move this to a location that will detect on all tests
|
||||
// See ticket: #550
|
||||
jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
afterAll(() => {
|
||||
// Restore mock after all tests are done, so it won't affect other test suites
|
||||
jest.resetAllMocks();
|
||||
});
|
||||
|
||||
describe('rendering of the component', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<Index location={window.location}/>
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
it(`should not contain 'undefined" anywhere`, () => {
|
||||
expect(asFragment()).not.toContain('undefined');
|
||||
});
|
||||
|
||||
it('No console errors', () => {
|
||||
expect(global.console.error).toBeCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -1,12 +1,29 @@
|
|||
import * as React from 'react';
|
||||
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';
|
||||
import AboutCard from '../components/AboutCard/AboutCard';
|
||||
|
||||
// @ts-ignore
|
||||
import aboutUSMapImg from '../images/about-usmap.svg';
|
||||
// @ts-ignore
|
||||
import aboutJ40Img from '../images/about-j40.svg';
|
||||
import accountBalanceIcon // @ts-ignore
|
||||
from '/node_modules/uswds/dist/img/usa-icons/account_balance.svg';
|
||||
|
||||
import groupsIcon from // @ts-ignore
|
||||
'/node_modules/uswds/dist/img/usa-icons/groups.svg';
|
||||
|
||||
import commentIcon from // @ts-ignore
|
||||
'/node_modules/uswds/dist/img/usa-icons/comment.svg';
|
||||
|
||||
import githubIcon from // @ts-ignore
|
||||
'/node_modules/uswds/dist/img/usa-icons/github.svg';
|
||||
import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer';
|
||||
|
||||
|
||||
interface IndexPageProps {
|
||||
location: Location;
|
||||
|
|
@ -16,11 +33,6 @@ interface IndexPageProps {
|
|||
const IndexPage = ({location}: IndexPageProps) => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
aboutHeader: {
|
||||
id: 'index.aboutContent.header',
|
||||
defaultMessage: 'About Justice40',
|
||||
description: 'h1 header on About page',
|
||||
},
|
||||
presidentalLinkUri: {
|
||||
id: 'index.presidentalLinkUri',
|
||||
defaultMessage: 'https://www.whitehouse.gov/briefing-room/' +
|
||||
|
|
@ -53,151 +65,157 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
|
||||
return (
|
||||
<Layout location={location}>
|
||||
<AlertWrapper/>
|
||||
<J40MainGridContainer className={'j40-about-page'}>
|
||||
|
||||
<J40MainGridContainer fullWidth={true}>
|
||||
<AlertWrapper />
|
||||
</J40MainGridContainer>
|
||||
<AboutCardsContainer>
|
||||
<AboutCard
|
||||
size={'large'}
|
||||
imgSrc={aboutUSMapImg}
|
||||
header={'About the screening tool'}>
|
||||
|
||||
<J40MainGridContainer>
|
||||
<Grid row>
|
||||
<Grid col>
|
||||
<section className={'usa-prose'}>
|
||||
<h1>{intl.formatMessage(messages.aboutHeader)}</h1>
|
||||
|
||||
<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.
|
||||
<FormattedMessage
|
||||
id={'index.aboutContent.p1'}
|
||||
description={'paragraph 1 of main content on index page'}
|
||||
defaultMessage={`
|
||||
On January 27, 2021, President Biden directed the Council on
|
||||
Environmental Quality (CEQ) to create a climate and economic
|
||||
justice screening tool. The purpose of the tool is to provide
|
||||
socioeconomic, environmental, and climate information and data to
|
||||
help inform decisions that may affect disadvantaged communities.
|
||||
The tool is designed to assist Federal agencies in identifying
|
||||
disadvantaged communities for the purposes of the Justice40
|
||||
Initiative.
|
||||
`}/>
|
||||
</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.
|
||||
</AboutCard>
|
||||
</AboutCardsContainer>
|
||||
|
||||
<AboutCardsContainer>
|
||||
<AboutCard
|
||||
size={'large'}
|
||||
imgSrc={aboutJ40Img}
|
||||
header={'About the Justice40 Initiative'}>
|
||||
|
||||
<FormattedMessage
|
||||
id="index.aboutContent.p2"
|
||||
description={'paragraph 2 of main content on index page'}
|
||||
defaultMessage={`
|
||||
The goal of the Justice40 Initiative is for 40 percent of
|
||||
benefits of Federal programs in seven key areas to flow to
|
||||
disadvantaged communities. These seven key areas are: climate
|
||||
change, clean energy and energy efficiency, clean transit,
|
||||
affordable and sustainable housing, training and workforce
|
||||
development, remediation of legacy pollution, and clean water
|
||||
infrastructure.
|
||||
`}/>
|
||||
</p>
|
||||
|
||||
<p><FormattedMessage
|
||||
id={'index.aboutContent.p3'}
|
||||
description={'paragraph 3 of main content on index page'}
|
||||
defaultMessage={`
|
||||
<p><FormattedMessage
|
||||
id={'index.aboutContent.p3'}
|
||||
description={'paragraph 3 of main content on index page'}
|
||||
defaultMessage={`
|
||||
Read more about the Justice40 Initiative in President Biden’s
|
||||
{presidentLink}
|
||||
`}
|
||||
values={{
|
||||
presidentLink:
|
||||
<a
|
||||
href={intl.formatMessage(messages.presidentalLinkUri)}
|
||||
target="_blank"
|
||||
rel="noreferrer">{intl.formatMessage(messages.presidentalLinkLabel)}
|
||||
</a>,
|
||||
}}/>
|
||||
</p>
|
||||
values={{
|
||||
presidentLink:
|
||||
<a
|
||||
href={intl.formatMessage(messages.presidentalLinkUri)}
|
||||
target="_blank"
|
||||
rel="noreferrer">{intl.formatMessage(messages.presidentalLinkLabel)}
|
||||
</a>,
|
||||
}}/>
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
id={'index.section2.header'}
|
||||
description={'section 2 header'}
|
||||
defaultMessage={'Areas of Focus'}/>
|
||||
</h2>
|
||||
</AboutCard>
|
||||
</AboutCardsContainer>
|
||||
|
||||
<AreasOfFocusList/>
|
||||
{/* <Grid tablet={{col: true}} gap={'lg'}>*/}
|
||||
{/* <Grid row className={'j40-aboutcard-sm-card'}>*/}
|
||||
{/* <Grid col={3} className={'j40-about-image-col'}>*/}
|
||||
{/* <img*/}
|
||||
{/* className={'j40-about-large-circle-graphics'}*/}
|
||||
{/* alt="usa map graphics with pins"*/}
|
||||
{/* src={aboutUSMapImg}/>*/}
|
||||
{/* </Grid>*/}
|
||||
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
id={'index.section3.header'}
|
||||
description={'section 3 header'}
|
||||
defaultMessage={'A Transparent, Community-First Approach'}/>
|
||||
</h2>
|
||||
{/* <Grid col={9} className={'j40-section-sm-body'}>*/}
|
||||
{/* <h2>About the screening tool</h2>*/}
|
||||
{/* */}
|
||||
{/* </Grid>*/}
|
||||
{/* </Grid>*/}
|
||||
|
||||
<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>
|
||||
{/* <Grid row gap="lg" className={'flex-align-center j40-section-sm-body'}>*/}
|
||||
{/* <Grid col={3} className={'j40-about-image-col'}>*/}
|
||||
{/* <img*/}
|
||||
{/* className={'j40-about-large-circle-graphics'}*/}
|
||||
{/* alt="graphics showing 40%"*/}
|
||||
{/* src={aboutJ40Img}/>*/}
|
||||
{/* </Grid>*/}
|
||||
|
||||
<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
|
||||
who’s interested can be involved in the tool-building
|
||||
process.`}
|
||||
values={{
|
||||
inlineHeader:
|
||||
<i>{intl.formatMessage(messages.transparentLabel)}</i>,
|
||||
}}/>
|
||||
</p>
|
||||
{/* <Grid col={9}>*/}
|
||||
{/* <h2>About the Justice40 Initiative</h2>*/}
|
||||
{/* */}
|
||||
{/* </Grid>*/}
|
||||
{/* </Grid>*/}
|
||||
{/* </Grid>*/}
|
||||
</J40MainGridContainer>
|
||||
|
||||
<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>
|
||||
<J40MainGridContainer
|
||||
fullWidth={true}
|
||||
blueBackground={true}>
|
||||
<J40MainGridContainer
|
||||
className={'j40-about-page'}>
|
||||
<AboutCardsContainer>
|
||||
<AboutCard
|
||||
size={'small'}
|
||||
imgSrc={accountBalanceIcon}
|
||||
header={'Federal program managers'}
|
||||
actionText={'Go to data & methodology'}
|
||||
actionUrl={'./methodology'}>
|
||||
Download the screening tool’s draft list of prioritized
|
||||
communities and information on how to use it for your program in
|
||||
the future on the data and methodology page.
|
||||
</AboutCard>
|
||||
|
||||
<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>
|
||||
<AboutCard
|
||||
size={'small'}
|
||||
imgSrc={groupsIcon}
|
||||
header={'Community members'}
|
||||
actionText={'Explore the tool'}
|
||||
actionUrl={'./cejst'}>
|
||||
Find your community or communities that you may be familiar with
|
||||
and check their prioritization information on the map.
|
||||
</AboutCard>
|
||||
</AboutCardsContainer>
|
||||
</J40MainGridContainer>
|
||||
</J40MainGridContainer>
|
||||
|
||||
<J40MainGridContainer
|
||||
className={'j40-about-page'}>
|
||||
<AboutCardsContainer>
|
||||
<AboutCard
|
||||
size={'small'}
|
||||
imgSrc={commentIcon}
|
||||
header={'Send Feedback'}
|
||||
actionText={'Email: screeningtool.feedback@usds.gov'}
|
||||
actionUrl={'mailto:screeningtool.feedback@usds.gov'}>
|
||||
Have ideas about how to acknowledge the on-the-ground experiences
|
||||
of your community?
|
||||
</AboutCard>
|
||||
|
||||
<AboutCard
|
||||
size={'small'}
|
||||
imgSrc={githubIcon}
|
||||
header={'Join the open source community'}
|
||||
actionText={'Check it out on GitHub'}
|
||||
actionUrl={'https://github.com/usds/justice40-tool'}
|
||||
actionOpenInNewTab={true}>
|
||||
The screening tool’s code is open source, which means it is
|
||||
available for the public to view and contribute to. Anyone can
|
||||
view and contribute on GitHub.
|
||||
</AboutCard>
|
||||
</AboutCardsContainer>
|
||||
</J40MainGridContainer>
|
||||
</Layout>);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue