mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-07 07:34:19 -07:00
Website copy layout styling updates for Tuesday launch (#685)
* Add basic accordion in AreaDetail * Refactor AreaDetail to use a Grid layout - adds useWindowSize to detect window resizes for mobile view - Map and AreaDetail to use Grid - removes some component styling from J40 - updates snapshot - MapWrapper to use Grid * Add custom Accordion styling - make J40 map a 9:3 Grid layout split - override native Accordion heading styles - make the Accordion multi-selectable - add some dummy data for indicators * Update AreaDetail to match design - remove styles in AreaDetail - increase height of MapInfoPanel - add Accordian items (indicators) - updates snapshot * Add a Beta Tag to the logo * Change the line height on indicators descriptions * Update package-lock after the rebase * Remove threshold from MapLegend - move feature selected border color to utils - remove all tooltip logic - remove all styles associated with tooltips - add legend label and descript to constants - refactor tests to be snapshots * Add borders between additional indicators * Modify copy and update styles - add the ordinal superscript back - update the copy - update the snapshots * Add additional indicators keys * Connect indicator keys to the UI - update the areaDetail snapshot * Render additional indicators accordion open onLoad - update snapshot * Update copy on About page * Update copy on indicator descriptions - update snapshots * Update the "How you can help section" - update the snapshot * Add a comma to "ZIP file will contain..." * Add the Datasets section to the methodology page - update snapshot * Update Methodology process list to trussworks - remove custom process list - remove custom CSS from global file - change copy * Modify layout of Methodology to using Grid - modify Dataset section to use Grid - remove outdated component CSS - update the snapshot * Update copy based on product feedback - update snapshots * Remove Accordions - updates snapshots - white CBG groups will show "Not community of focus"
This commit is contained in:
Vim
GitHub
parent
487f6a8e04
commit
522872037a
33 changed files with 2029 additions and 1208 deletions
|
|
@ -31,15 +31,6 @@ const CEJSTPage = ({location}: IMapPageProps) => {
|
|||
defaultMessage: 'Explore the tool',
|
||||
description: 'explore the tool heading text',
|
||||
},
|
||||
exploreToolPageText: {
|
||||
id: 'exploreTool.page.text',
|
||||
defaultMessage: 'Zoom into the map to see which communities the tool has currently'+
|
||||
'identified as prioritized (the top 25% of communities) or on the'+
|
||||
'threshold. Learn more about the formula and datasets that were'+
|
||||
'used to prioritize these communities on the',
|
||||
description: 'explore the tool page text',
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
return (<Layout location={location} title={intl.formatMessage(messages.exploreToolTitleText)}>
|
||||
|
|
@ -53,7 +44,10 @@ const CEJSTPage = ({location}: IMapPageProps) => {
|
|||
<Grid col={12} tablet={{col: 6}}>
|
||||
<section>
|
||||
<p>
|
||||
{intl.formatMessage(messages.exploreToolPageText)}
|
||||
Zoom into the map to see communities of focus that can help Federal agencies
|
||||
identify disadvantaged communities and to provide socioeconomic,
|
||||
environmental, and climate information and data. Learn more about the methodology
|
||||
and datasets that were used to determine these communities of focus on the
|
||||
{` `}
|
||||
<Link to={'/methodology'}>Data & methodology</Link>
|
||||
{` `}
|
||||
|
|
@ -65,15 +59,13 @@ const CEJSTPage = ({location}: IMapPageProps) => {
|
|||
<MapLegend />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</J40MainGridContainer>
|
||||
|
||||
<Grid row>
|
||||
<Grid col>
|
||||
<section>
|
||||
<MapWrapper location={location}/>
|
||||
</section>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<J40MainGridContainer>
|
||||
<MapWrapper location={location}/>
|
||||
</J40MainGridContainer>
|
||||
|
||||
<J40MainGridContainer>
|
||||
<Grid row>
|
||||
<Grid col>
|
||||
<section>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
},
|
||||
presidentalLinkLabel: {
|
||||
id: 'index.presidentalLinkLabel',
|
||||
defaultMessage: 'Executive Order on Tackling the Climate Crisis at Home and Abroad.',
|
||||
defaultMessage: 'Executive Order 14008 on Tackling the Climate Crisis at Home and Abroad',
|
||||
description: 'Link url to presidential actions executive order. Part of paragraph 3',
|
||||
},
|
||||
transparentLabel: {
|
||||
|
|
@ -87,20 +87,32 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
imgSrc={aboutUSMapImg}
|
||||
header={intl.formatMessage(messages.aboutScreenToolHeading)}>
|
||||
|
||||
<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>
|
||||
<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 help
|
||||
Federal agencies identify disadvantaged communities and provide
|
||||
socioeconomic, environmental, and climate information and data
|
||||
to inform decisions that may affect these communities. The tool
|
||||
identifies disadvantaged communities as communities of focus
|
||||
through publicly available, nationally consistent, high-quality
|
||||
data.
|
||||
`}/>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id={'index.aboutContent.p1b'}
|
||||
description={'paragraph 1b of main content on index page'}
|
||||
defaultMessage={`
|
||||
The current version of the tool is in a public beta form and
|
||||
will be updated based on feedback from the public.
|
||||
`}/>
|
||||
</p>
|
||||
</AboutCard>
|
||||
</AboutCardsContainer>
|
||||
|
||||
|
|
@ -110,18 +122,22 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
imgSrc={aboutJ40Img}
|
||||
header={intl.formatMessage(messages.aboutJustice40Heading)}>
|
||||
|
||||
<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>
|
||||
<FormattedMessage
|
||||
id="index.aboutContent.p2"
|
||||
description={'paragraph 2 of main content on index page'}
|
||||
defaultMessage={`
|
||||
The tool will provide important information for the Justice40
|
||||
Initiative. The goal of the Justice40 Initiative is to provide
|
||||
40-percent of the overall benefits of certain federal
|
||||
programs in seven key areas 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, the remediation
|
||||
and reduction of legacy pollution, and the development of
|
||||
critical clean water infrastructure.
|
||||
`}/>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<FormattedMessage
|
||||
|
|
@ -157,9 +173,9 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
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.
|
||||
Download the screening tool’s draft list of communities of focus.
|
||||
Explore data that may be useful to your program, and provide
|
||||
feedback on the tool.
|
||||
</AboutCard>
|
||||
|
||||
<AboutCard
|
||||
|
|
@ -168,8 +184,8 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
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.
|
||||
Explore data about communities of focus in your area, and help
|
||||
provide feedback on the tool.
|
||||
</AboutCard>
|
||||
</AboutCardsContainer>
|
||||
</J40MainGridContainer>
|
||||
|
|
@ -184,8 +200,8 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
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?
|
||||
Have ideas about how this tool can be improved to better
|
||||
reflect the on-the-ground experiences of your community?
|
||||
</AboutCard>
|
||||
|
||||
<AboutCard
|
||||
|
|
@ -196,8 +212,8 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
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.
|
||||
available for the public to view and contribute to. Anyone
|
||||
can view and contribute on GitHub.
|
||||
</AboutCard>
|
||||
</AboutCardsContainer>
|
||||
</J40MainGridContainer>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ import {useIntl} from 'gatsby-plugin-intl';
|
|||
import {defineMessages} from 'react-intl';
|
||||
|
||||
import AlertWrapper from '../components/AlertWrapper';
|
||||
// import DatasetContainer from '../components/DatasetContainer';
|
||||
import DatasetContainer from '../components/DatasetContainer';
|
||||
import DownloadPacket from '../components/DownloadPacket';
|
||||
import J40MainGridContainer from '../components/J40MainGridContainer';
|
||||
import Layout from '../components/layout';
|
||||
// import ScoreStepsList from '../components/scoreStepsList';
|
||||
import ScoreStepsList from '../components/scoreStepsList';
|
||||
|
||||
interface MethodPageProps {
|
||||
location: Location;
|
||||
|
|
@ -30,8 +30,8 @@ const IndexPage = ({location}: MethodPageProps) => {
|
|||
},
|
||||
methodologyPagep1: {
|
||||
id: 'methodology.page.paragraph.first',
|
||||
defaultMessage: 'The methodology for determining disadvantaged communities for the purposes of '+
|
||||
' the Justice40 Initiative is currently in progress.',
|
||||
defaultMessage: 'The methodology for identifying communities of focus is currently ' +
|
||||
'in a draft, pre-decisional form that may change over time as more datasets become available.',
|
||||
description: 'methodology page paragraph 1',
|
||||
},
|
||||
});
|
||||
|
|
@ -45,7 +45,7 @@ const IndexPage = ({location}: MethodPageProps) => {
|
|||
|
||||
<J40MainGridContainer>
|
||||
<h1>{intl.formatMessage(messages.methodologyPageHeader)}</h1>
|
||||
<Grid row gap>
|
||||
<Grid row gap className={'j40-mb-5'}>
|
||||
<Grid col={12} tablet={{col: 6}}>
|
||||
<section>
|
||||
<p>
|
||||
|
|
@ -59,13 +59,10 @@ const IndexPage = ({location}: MethodPageProps) => {
|
|||
</Grid>
|
||||
</J40MainGridContainer>
|
||||
|
||||
{/* // Temporarily removed while the app is demo'd to stakeholders
|
||||
<J40MainGridContainer fullWidth={true}>
|
||||
<Grid row>
|
||||
<Grid col>
|
||||
<DatasetContainer/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<J40MainGridContainer fullWidth={true} blueBackground={true}>
|
||||
<J40MainGridContainer>
|
||||
<DatasetContainer/>
|
||||
</J40MainGridContainer>
|
||||
</J40MainGridContainer>
|
||||
|
||||
<J40MainGridContainer>
|
||||
|
|
@ -74,7 +71,7 @@ const IndexPage = ({location}: MethodPageProps) => {
|
|||
<ScoreStepsList/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</J40MainGridContainer> */}
|
||||
</J40MainGridContainer>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue