Update copy on Explore the Map page (#1915)

* Add Explore the Data box

* Update explore page description

- Remove paragraph under map

* Update territories copy

- Remove How you can help

* Update Whitehouse footer icon

* Correct heading order to pass a11y

* Remove beta pill in Beta Banner
- update snapshots

* Update explore page description
- remove color key

* revert image back to eagle seal

* Update release date variable name

* Add Impute, Adj and tribal signals to side panel

* Remove test category

- move send feedback button outside of categorization div
- left justify send feedback button
- update snapshots

* Update links in the territories paragraph on explore page

* Update tribal lands copy on explore page

* Align geolocate icon on desktop and mobile

* Add inverted style to YES

- update snapshots
This commit is contained in:
Vim 2022-09-23 20:05:36 -07:00 committed by GitHub
parent dfdb885ebe
commit 8f4b1b6df1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 619 additions and 517 deletions

View file

@ -7,7 +7,6 @@ import {Accordion, Button} from '@trussworks/react-uswds';
// Components:
import Category from '../Category';
import TractDemographics from '../TractDemographics';
import DisadvantageDot from '../DisadvantageDot';
import Indicator from '../Indicator';
import TractInfo from '../TractInfo';
@ -98,6 +97,27 @@ export const indicatorFilter = (label:MessageDescriptor) => {
};
/**
* Function to calculate the tribal area percentage value to display when a tract is selected
*
* @param {number} tribalPercentRaw
* @return {string}
*/
export const getTribalPercentValue = (tribalPercentRaw: number) => {
if (tribalPercentRaw === undefined) {
return ` 0 %`;
}
if (tribalPercentRaw === 0) {
// test tract = #9.03/42.9242/-98.8015
return ` less than 1%`;
}
if (tribalPercentRaw && tribalPercentRaw > 0) {
return ` ${tribalPercentRaw*100} %`;
}
};
/**
* This is the main component. It will render the entire side panel and show the details
* of the area/feature that is selected.
@ -560,26 +580,6 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
threshold: 10,
};
// Temp adding to workforce category
const adjacency: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ADJ),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ADJ),
type: 'percentile',
value: properties.hasOwnProperty(constants.ADJACENCY_PERCENTILE) ?
properties[constants.ADJACENCY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.ADJACENCY_EXCEEDS_THRESH] ?
properties[constants.ADJACENCY_EXCEEDS_THRESH] : null,
};
const imputeFlag: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.IMP_FLG),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.IMP_FLG),
type: 'boolean',
value: properties.hasOwnProperty(constants.IMPUTE_FLAG) ?
(properties[constants.IMPUTE_FLAG] == '0' ? false : true) : null,
isDisadvagtaged: false,
};
/**
* Aggregate indicators based on categories
*
@ -683,15 +683,6 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
isExceedBothSocioBurdens: properties[constants.IS_WORKFORCE_EXCEED_BOTH_SOCIO_INDICATORS] ?
properties[constants.IS_WORKFORCE_EXCEED_BOTH_SOCIO_INDICATORS] : null,
},
{
id: 'test',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.TEST),
indicators: [adjacency],
socioEcIndicators: [imputeFlag],
isDisadvagtaged: null,
isExceed1MoreBurden: null,
isExceedBothSocioBurdens: null,
},
];
@ -772,86 +763,115 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
return (
<aside className={styles.areaDetailContainer} data-cy={'aside'}>
{
<>
{/* Tract Info */}
<TractInfo
blockGroup={blockGroup}
countyName={countyName}
stateName={stateName}
population={population}
sidePanelState={properties[constants.SIDE_PANEL_STATE]}
/>
{/* Tract Info */}
<TractInfo
blockGroup={blockGroup}
countyName={countyName}
stateName={stateName}
population={population}
sidePanelState={properties[constants.SIDE_PANEL_STATE]}
/>
{/* Demographics */}
<TractDemographics properties={properties}/>
{/* Demographics */}
<TractDemographics properties={properties}/>
{/* Disadvantaged? */}
<div className={styles.categorization}>
{/* Disadvantaged? */}
<div className={styles.categorization}>
{/* Questions asking if disadvantaged? */}
<div className={styles.isInFocus}>
{EXPLORE_COPY.COMMUNITY.IS_FOCUS}
{/* Questions asking if disadvantaged? */}
<div className={styles.isInFocus}>
{EXPLORE_COPY.COMMUNITY.IS_FOCUS}
</div>
{/* YES with Dot or NO with no Dot */}
<div className={styles.communityOfFocus}>
{isCommunityFocus ?
<h3 className={styles.invert}>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3> :
<h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
}
</div>
{/* Number of categories exceeded */}
<div className={styles.showCategoriesExceed}>
{EXPLORE_COPY.numberOfCategoriesExceeded(properties[constants.COUNT_OF_CATEGORIES_DISADV])}
</div>
</div>
{/* Send Feedback button */}
<a
className={styles.sendFeedbackLink}
// The mailto string must be on a single line otherwise the email does not display subject and body
href={`
mailto:${COMMON_COPY.FEEDBACK_EMAIL}?subject=${feedbackEmailSubject}&body=${feedbackEmailBody}
`}
target={"_blank"}
rel="noreferrer"
>
<Button
type="button"
className={styles.sendFeedbackBtn}
>
<div className={styles.buttonContainer}>
<div className={styles.buttonText}>
{EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
</div>
{/* YES with Dot or NO with no Dot */}
<div className={styles.communityOfFocus}>
{isCommunityFocus ?
<>
<h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
<DisadvantageDot isDisadvantaged={isCommunityFocus} />
</> :
<h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
}
</div>
{/* Number of categories exceeded */}
<div className={styles.showCategoriesExceed}>
{EXPLORE_COPY.numberOfCategoriesExceeded(properties[constants.COUNT_OF_CATEGORIES_DISADV])}
</div>
{/* Number of thresholds exceeded */}
{/* <div className={styles.showThresholdExceed}>
{EXPLORE_COPY.numberOfThresholdsExceeded(properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS])}
</div> */}
{/* Send Feedback button */}
<a
className={styles.sendFeedbackLink}
// The mailto string must be on a single line otherwise the email does not display subject and body
href={`
mailto:${COMMON_COPY.FEEDBACK_EMAIL}?subject=${feedbackEmailSubject}&body=${feedbackEmailBody}
`}
target={"_blank"}
rel="noreferrer"
>
<Button
type="button"
className={styles.sendFeedbackBtn}
>
<div className={styles.buttonContainer}>
<div className={styles.buttonText}>
{EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
</div>
<img
className={styles.buttonImage}
src={mailIcon}
alt={intl.formatMessage(EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.IMG_ICON.ALT_TAG)}
/>
</div>
</Button>
</a>
<img
className={styles.buttonImage}
src={mailIcon}
alt={intl.formatMessage(EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.IMG_ICON.ALT_TAG)}
/>
</div>
</>
}
</Button>
</a>
{/* TEMP FOR CEQ - Imputed income, adjacency and tribal info */}
<div className={styles.testSignals}>
<div>
<span>
Income imputed?
</span>
<span>
{properties[constants.IMPUTE_FLAG] ? ' YES' : ' NO'}
</span>
</div>
<div>
<span>
Adjacency indicator?
</span>
<span>
{properties[constants.ADJACENCY_EXCEEDS_THRESH] ? ' YES' : ' NO'}
</span>
</div>
<div>
<span>
Tribal lands?
</span>
<span>
{getTribalPercentValue(properties[constants.TRIBAL_AREAS_PERCENTAGE])}
</span>
</div>
<div>
<span>
Tribal count?
</span>
<span>
{
properties[constants.TRIBAL_AREAS_COUNT] ?
` ${properties[constants.TRIBAL_AREAS_COUNT]}` : ` 0`
}
</span>
</div>
</div>
{/* All category accordions in this component */}
{<Accordion multiselectable={true} items={categoryItems} />}
{/* Methodology version */}
<div className={styles.versionInfo}>
{EXPLORE_COPY.SIDE_PANEL_VERION.TITLE}
{EXPLORE_COPY.SIDE_PANEL_VERSION.TITLE}
</div>
</aside>
);

View file

@ -41,6 +41,13 @@ $sidePanelLabelFontColor: #171716;
margin-top: 0;
margin-bottom: 0;
}
h3.invert {
background-color: $disadvantagedDotColor;
color: white;
@include u-padding-left('05');
@include u-padding-right('05');
}
}
.showCategoriesExceed {
@ -48,41 +55,38 @@ $sidePanelLabelFontColor: #171716;
@include u-margin-top('05');
}
// .showThresholdExceed {
// font-size: small;
// @include u-margin-top('05');
// }
}
.sendFeedbackLink {
@include u-margin-top(2);
.sendFeedbackLink {
@include u-margin-top(2);
@include u-margin-left(2);
@include u-margin-bottom(2);
.sendFeedbackBtn{
@include u-text("blue-70v");
@include u-bg("yellow-20v");
height: 40px;
&:hover {
@include u-bg("yellow-20");
@include u-text("gray-90");
.sendFeedbackBtn{
@include u-text("blue-70v");
@include u-bg("yellow-20v");
height: 40px;
&:hover {
@include u-bg("yellow-20");
@include u-text("gray-90");
}
.buttonContainer{
display: flex;
.buttonText{
@include u-margin-right(1);
}
.buttonContainer{
display: flex;
.buttonImage{
width: 21px;
margin-top: -3px;
.buttonText{
@include u-margin-right(1);
}
.buttonImage{
width: 21px;
margin-top: -3px;
filter: invert(13%) sepia(76%) saturate(5142%) hue-rotate(192deg) brightness(80%) contrast(106%);
}
filter: invert(13%) sepia(76%) saturate(5142%) hue-rotate(192deg) brightness(80%) contrast(106%);
}
}
}
}
//Census row styles
@ -121,3 +125,8 @@ $sidePanelLabelFontColor: #171716;
@include u-padding-bottom(1);
@include u-padding-left(2.5);
}
.testSignals{
padding-left: 1rem;
padding-bottom: 1rem;
}

View file

@ -18,6 +18,8 @@ declare namespace MapModuleScssNamespace {
buttonText: string;
buttonImage: string;
categorySpacer: string;
testSignals: string;
invert: string;
}
}

View file

@ -197,37 +197,70 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL
<h3>
YES
</h3>
<div />
</div>
<div>
in 5 categories
</div>
<a
href="
mailto:Screeningtool-Support@omb.eop.gov?subject=
</div>
<a
href="
mailto:Screeningtool-Support@omb.eop.gov?subject=
Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 )
&body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
"
rel="noreferrer"
target="_blank"
"
rel="noreferrer"
target="_blank"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
<div>
<div>
<div>
Send feedback
</div>
<img
alt="Send feedback"
src="test-file-stub"
/>
Send feedback
</div>
</button>
</a>
<img
alt="Send feedback"
src="test-file-stub"
/>
</div>
</button>
</a>
<div>
<div>
<span>
Income imputed?
</span>
<span>
NO
</span>
</div>
<div>
<span>
Adjacency indicator?
</span>
<span>
NO
</span>
</div>
<div>
<span>
Tribal lands?
</span>
<span>
0 %
</span>
</div>
<div>
<span>
Tribal count?
</span>
<span>
0
</span>
</div>
</div>
<div
aria-multiselectable="true"
@ -610,37 +643,70 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
<h3>
YES
</h3>
<div />
</div>
<div>
in 5 categories
</div>
<a
href="
mailto:Screeningtool-Support@omb.eop.gov?subject=
</div>
<a
href="
mailto:Screeningtool-Support@omb.eop.gov?subject=
Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 )
&body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
"
rel="noreferrer"
target="_blank"
"
rel="noreferrer"
target="_blank"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
<div>
<div>
<div>
Send feedback
</div>
<img
alt="Send feedback"
src="test-file-stub"
/>
Send feedback
</div>
</button>
</a>
<img
alt="Send feedback"
src="test-file-stub"
/>
</div>
</button>
</a>
<div>
<div>
<span>
Income imputed?
</span>
<span>
NO
</span>
</div>
<div>
<span>
Adjacency indicator?
</span>
<span>
NO
</span>
</div>
<div>
<span>
Tribal lands?
</span>
<span>
0 %
</span>
</div>
<div>
<span>
Tribal count?
</span>
<span>
0
</span>
</div>
</div>
<div
aria-multiselectable="true"
@ -2008,92 +2074,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
</div>
</li>
</div>
<h4
class="usa-accordion__heading"
>
<button
aria-controls="test"
aria-expanded="false"
class="usa-accordion__button"
data-testid="accordionButton_test"
type="button"
>
<div>
<div>
Testing
</div>
<div
class=""
/>
</div>
</button>
</h4>
<div
class="usa-accordion__content usa-prose"
data-testid="accordionItem_test"
hidden=""
id="test"
>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Adjacency
<div>
Adjacency percentile?
</div>
</div>
<div>
<div>
<div>
--
</div>
<div />
</div>
<div>
<div>
missing data
</div>
</div>
</div>
</div>
</li>
<div>
AND
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Impute flag
<div>
A flag to inform imputation?
</div>
</div>
<div>
<div>
<div>
--
</div>
<div />
</div>
<div>
<div>
missing data
</div>
</div>
</div>
</div>
</li>
</div>
</div>
<div>
Methodology version 1.0
@ -2299,37 +2279,70 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
<h3>
YES
</h3>
<div />
</div>
<div>
in 5 categories
</div>
<a
href="
mailto:Screeningtool-Support@omb.eop.gov?subject=
</div>
<a
href="
mailto:Screeningtool-Support@omb.eop.gov?subject=
Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 )
&body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
"
rel="noreferrer"
target="_blank"
"
rel="noreferrer"
target="_blank"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
<div>
<div>
<div>
Send feedback
</div>
<img
alt="Send feedback"
src="test-file-stub"
/>
Send feedback
</div>
</button>
</a>
<img
alt="Send feedback"
src="test-file-stub"
/>
</div>
</button>
</a>
<div>
<div>
<span>
Income imputed?
</span>
<span>
NO
</span>
</div>
<div>
<span>
Adjacency indicator?
</span>
<span>
NO
</span>
</div>
<div>
<span>
Tribal lands?
</span>
<span>
0 %
</span>
</div>
<div>
<span>
Tribal count?
</span>
<span>
0
</span>
</div>
</div>
<div
aria-multiselectable="true"

View file

@ -4,7 +4,6 @@
@include u-bg("gray-cool-2");
.betaBanner {
@include u-display("flex");
@include u-height(3);
max-width: 70.25rem; // Needs this exact value to align with GovBanner
@include u-font("body", "3xs");
@ -22,17 +21,5 @@
@include u-height(6);
}
.betaPillIcon {
@include u-bg("yellow-20v");
@include u-height(1);
@include u-width(2);
@include u-radius("2px");
@include u-margin-right(1);
margin-top: 0.4rem; //Needs this exact value for vertical alignment
}
.betaHeading {
@include u-text("bold");
}
}
}

View file

@ -1,24 +1,13 @@
import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import * as COMMON_COPY from '../../data/copy/common';
import * as styles from './BetaBanner.module.scss';
const BetaBanner = () => {
const intl = useIntl();
return (
<div className={styles.betaBannerContainer}>
<div className={styles.betaBanner}>
<div className={styles.betaPillIcon}></div>
<div>
<span className={styles.betaHeading}>
{intl.formatMessage(COMMON_COPY.BETA_BANNER.TITLE)}{' '}
</span>
<span>
{intl.formatMessage(COMMON_COPY.BETA_BANNER.INFO)}
</span>
</div>
{COMMON_COPY.BETA_BANNER_CONTENT}
</div>
</div>
);

View file

@ -4,16 +4,10 @@ exports[`rendering of the BetaBanner checks if component renders 1`] = `
<DocumentFragment>
<div>
<div>
<div />
<div>
<span>
This is a beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited datasets that will
be regularly updated.
</span>
</div>
<strong>
This site has been updated.
</strong>
The current version of the site is 1.0 that was released on Oct 25, 2022
</div>
</div>
</DocumentFragment>

View file

@ -0,0 +1,6 @@
@use '../../styles/design-system.scss' as *;
.fileDownIcon{
margin-bottom: -4px;
@include u-padding-left(1);
}

View file

@ -0,0 +1,12 @@
declare namespace ExploreDataBoxNamespace {
export interface IExploreDataBoxScss {
fileDownIcon: string;
}
}
declare const ExploreDataBoxScssModule: ExploreDataBoxNamespace.IExploreDataBoxScss & {
/** WARNING: Only available when "css-loader" is used without "style-loader" or "mini-css-extract-plugin" */
locals: ExploreDataBoxNamespace.IExploreDataBoxScss;
};
export = ExploreDataBoxScssModule;

View file

@ -0,0 +1,15 @@
import React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import ExploreDataBox from './ExploreDataBox';
describe('rendering of ExploreDataBox Component', () => {
const {asFragment} = render(
<LocalizedComponent>
<ExploreDataBox />
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});

View file

@ -0,0 +1,36 @@
import React from 'react';
import {SummaryBox, SummaryBoxContent, SummaryBoxHeading} from '@trussworks/react-uswds';
import {useIntl} from 'gatsby-plugin-intl';
import * as EXPLORE_COPY from '../../data/copy/explore';
import * as styles from './ExploreDataBox.module.scss';
// @ts-ignore
import fileDownIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
export interface IExploreDataBoxProps {}
const ExploreDataBox = ({}: IExploreDataBoxProps) => {
const intl = useIntl();
return (
<SummaryBox>
<SummaryBoxHeading headingLevel='h2'>
{intl.formatMessage(EXPLORE_COPY.EXPLORE_DATA_BOX.TITLE)}
<img tabIndex={0} className={styles.fileDownIcon} src={fileDownIcon}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT.PLUS)}
/>
</SummaryBoxHeading>
<SummaryBoxContent>
<p>{EXPLORE_COPY.EXPLORE_DATA_BOX_BODY}</p>
</SummaryBoxContent>
</SummaryBox>
);
};
export default ExploreDataBox;

View file

@ -0,0 +1,43 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of ExploreDataBox Component checks if component renders 1`] = `
<DocumentFragment>
<div
class="usa-summary-box"
data-testid="summary-box"
>
<div
class="usa-summary-box__body"
>
<h2
class="usa-summary-box__heading"
>
Get the data
<img
alt="
a plus icon indicating that the user can zoom in
*"
src="test-file-stub"
tabindex="0"
/>
</h2>
<div
class="usa-summary-box__text"
>
<p>
Download the data with documentation and shapefiles, from the
<a
class="usa-link"
href="/en/downloads"
>
downloads
</a>
page
</p>
</div>
</div>
</div>
</DocumentFragment>
`;

View file

@ -0,0 +1,2 @@
import ExploreDataBox from './ExploreDataBox';
export default ExploreDataBox;

View file

@ -162,16 +162,10 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
</div>
<div>
<div>
<div />
<div>
<span>
This is a beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited datasets that will
be regularly updated.
</span>
</div>
<strong>
This site has been updated.
</strong>
The current version of the site is 1.0 that was released on Oct 25, 2022
</div>
</div>
<div

View file

@ -11,20 +11,30 @@
.mapHeaderRow{
@include u-display("flex");
@include u-padding-left(1.5);
justify-content: space-between;
@include at-media-max("mobile-lg") {
flex-direction: column;
@include u-padding-right(1.5);
.geolocateBox {
align-self: flex-end;
}
.geolocateBox > div {
right: 13px;
}
}
.geolocateBox {
// flex: 1 2 47%;
// align-self: flex-end;
// margin-bottom: 30px;
// margin-left: 1rem;
margin-top: 6px;
@include u-margin-left(1);
.geolocateMessage {
visibility: visible;
background-color: white;
margin-bottom: 3px;
max-width: fit-content;
}
.geolocateMessageHide {
@ -33,9 +43,7 @@
margin-bottom: 3px;
}
.geolocateIcon{
// align-self: flex-end;
}
}
}
@ -66,7 +74,5 @@
.j40Map {
@include at-media-max("desktop") {
height: 55vh;
@include u-margin-top(7); // Allow for tribal toggle to appear above map on screens < 1024
}
}

View file

@ -401,26 +401,24 @@ const J40Map = ({location}: IJ40Interface) => {
{/* Geolocate Icon */}
<div className={styles.geolocateBox}>
{windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
<div
className={
{
windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG - 1 &&
<div className={
(geolocationInProgress && !isGeolocateLocked) ?
styles.geolocateMessage :
styles.geolocateMessageHide}
>
{intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)}
</div>}
<div>
<GeolocateControl
positionOptions={{enableHighAccuracy: true}}
onGeolocate={onGeolocate}
onClick={onClickGeolocate}
trackUserLocation={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG}
showUserHeading={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG}
disabledLabel={intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_DISABLED)}
/>
</div>
styles.geolocateMessageHide
}>
{intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)}
</div>
}
<GeolocateControl
positionOptions={{enableHighAccuracy: true}}
onGeolocate={onGeolocate}
onClick={onClickGeolocate}
trackUserLocation={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG}
showUserHeading={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG}
disabledLabel={intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_DISABLED)}
/>
</div>
</div>

View file

@ -30,6 +30,8 @@ export const MISSING_DATA_STRING = '--';
// Tribal signals
export const TRIBAL_ID = 'tribalId';
export const LAND_AREA_NAME = 'landAreaName';
export const TRIBAL_AREAS_PERCENTAGE = 'TA_PERC';
export const TRIBAL_AREAS_COUNT = 'TA_COUNT';
// Set the threshold percentile used by most indicators in the side panel
export const DEFAULT_THRESHOLD_PERCENTILE = 90;

View file

@ -28,21 +28,24 @@ export const linkFn = (to:string | IDefineMessage, isInternal:boolean, isOpenNew
export const FEEDBACK_EMAIL = 'Screeningtool-Support@omb.eop.gov';
export const METH_1_0_RELEASE_DATE = new Date(2022, 9, 25, 11, 59, 59); // Oct 25
// Beta Banner
export const BETA_BANNER = defineMessages({
TITLE: {
id: 'common.pages.banner.beta.title',
defaultMessage: 'This is a beta site.',
description: 'Navigate to the about page. This is the main title of the beta banner',
},
INFO: {
id: 'common.pages.banner.beta.info',
defaultMessage: `It is an early, in-progress version of the tool with limited datasets that will
be regularly updated.`,
description: 'Navigate to the about page. This is the main info of the beta banner',
},
});
export const BETA_BANNER_CONTENT = <FormattedMessage
id={'common.pages.alerts.banner.beta.content'}
defaultMessage={`<bold1>This site has been updated.</bold1> The current version of the site is 1.0 that was released on {relDate}`}
description={`Alert body that appears on landing page.`}
values={{
bold1: boldFn,
relDate: <FormattedDate
value={METH_1_0_RELEASE_DATE}
year="numeric"
month="short"
day="numeric"
/>,
}}
/>;
export const TSD = defineMessages({
URL: {

View file

@ -13,6 +13,8 @@ export const EXPLORE_PAGE_LINKS = {
TRIBAL_ACTION_PLAN: `https://www.whitehouse.gov/wp-content/uploads/2022/01/CEQ-Tribal-Consultation-Plan-04.26.2021.pdf`,
TRIBAL_WHITEHOUSE: `https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/26/memorandum-on-tribal-consultation-and-strengthening-nation-to-nation-relationships/`,
TRIBAL_FED_REGISTER: `https://www.federalregister.gov/documents/2000/11/09/00-29003/consultation-and-coordination-with-indian-tribal-governments`,
CENSUS_15_19: `https://www.census.gov/programs-surveys/decennial-census/data.html`,
DECENNIAL: `https://www.census.gov/programs-surveys/decennial-census/data.html`,
};
export const PAGE_INTRO = defineMessages({
@ -28,18 +30,26 @@ export const PAGE_INTRO = defineMessages({
},
});
export const PAGE_DESCRIPTION = <FormattedMessage
id={'explore.map.page.description.text'}
export const PAGE_DESCRIPTION1 = <FormattedMessage
id={'explore.map.page.description.1'}
defaultMessage={`
Use the map to see communities that are identified as disadvantaged. The map uses
publicly-available, nationally-consistent datasets. Learn more about
the methodology and datasets that were used to identify disadvantaged communities
in the current version of the map on the <link1>Methodology & data</link1> page.
`}
description={'On the explore the map page, the description of the page'}
values={{
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
}}
Overburdened and underserved census tracts are highlighted as being disadvantaged on the map. The map also highlights areas within Federally-recognized Tribal reservations. These areas are also considered disadvantaged.
`}
description={'On the explore the map page, the first description of the page'}
// values={{
// link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
// }}
/>;
export const PAGE_DESCRIPTION2 = <FormattedMessage
id={'explore.map.page.description.2'}
defaultMessage={`
Zooming and selecting shows information about each census tract or tribal area. Change the selection to see information about tribal land areas.
`}
description={'On the explore the map page, the fifth description of the page'}
// values={{
// link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
// }}
/>;
export const LEGEND = defineMessages({
@ -59,6 +69,25 @@ export const LEGEND = defineMessages({
},
});
// Explore the data box
export const EXPLORE_DATA_BOX = defineMessages({
TITLE: {
id: 'explore.map.page.explore.data.box.title',
defaultMessage: 'Get the data',
description: 'On the explore the map page, a summary box title of Get the data',
},
});
export const EXPLORE_DATA_BOX_BODY = <FormattedMessage
id={'explore.map.page.explore.data.box.body'}
defaultMessage={ `
Download the data with documentation and shapefiles, from the <link1>downloads</link1> page
`}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Things to know, this is the fifth paragraph of this side pane`}
values={{
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.DOWNLOADS, true, false),
}}
/>;
// Map
export const MAP = defineMessages({
@ -386,7 +415,7 @@ export const SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT = defineMessages({
},
});
export const SIDE_PANEL_VERION = {
export const SIDE_PANEL_VERSION = {
TITLE: <FormattedMessage
id={'explore.map.page.side.panel.version.title'}
defaultMessage={ 'Methodology version {version}'}
@ -1181,49 +1210,39 @@ export const DOWNLOAD_DRAFT = {
export const NOTE_ON_TERRITORIES = {
INTRO: <FormattedMessage
id={'explore.map.page.under.map.note.on.territories.intro'}
defaultMessage={`A note on the U.S. territories`}
defaultMessage={`U.S. territories note`}
description={`Navigate to the explore the map page. Under the map, you will see territories intro text`}
/>,
PARA_1: <FormattedMessage
id={'explore.map.page.under.map.note.on.territories.para.1'}
defaultMessage={`
The data sources described on the <link1>Methodology & data</link1> page are used to
identify disadvantaged communities in all fifty states and the District of Columbia. However, not all
of these data sources are currently available for the U.S. territories.
Puerto Rico: The <link1>U.S. Census Bureau's American Community Survey data</link1> from 2015 - 2019
are used for all fields in the workforce development category except for linguistic isolation. Linguistic isolation was removed based on feedback during the beta period. Proximity to National Priorities List (NPL) sites, proximity to Risk Management Plan (RMP) facilities, traffic proximity and volume, diesel particulate matter exposure, energy cost and housing cost were added for Puerto Rico in the 1.0 version.
`}
description={`Navigate to the explore the map page. Under the map, you will see territories paragraph 1`}
values={{
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
link1: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.CENSUS_15_19, false, true),
}}
/>,
PARA_2: <FormattedMessage
id={'explore.map.page.under.map.note.on.territories.para.2'}
defaultMessage={`
For Puerto Rico, the Census Bureaus American Community Survey data from 2015-2019 are used for higher
ed enrollment rate and all the other fields in the Training and Workforce Development category
to identify disadvantaged communities. Data in the other categories are unavailable at this
time.
`}
American Samoa and the Northern Mariana Islands: The <link1>Decennial Census data</link1> from 2010 are used. The CEJST uses the following data for these territories: unemployment, poverty, low median income, and high school education. These burdens are in the workforce Development category.
`}
description={`Navigate to the explore the map page. Under the map, you will see territories paragraph 2`}
values={{
link1: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.DECENNIAL, false, true),
}}
/>,
PARA_3: <FormattedMessage
id={'explore.map.page.under.map.note.on.territories.para.3'}
defaultMessage={`
For American Samoa and the Northern Mariana Islands, the data used to identify
disadvantaged communities are from the 2010 Decennial Census, the last reported data from the
U.S. Census Bureau. Available data for these territories includes unemployment, poverty,
low median income, and high school degree achievement rate fields in the Training and
Workforce Development category.
Guam and the U.S. Virgin Islands: Some <link1>Decennial Census data</link1> from 2010 are used. They show burdens in the workforce development category. The data includes: Unemployment, poverty, low median income, and high school education.
`}
description={`Navigate to the explore the map page. Under the map, you will see territories paragraph 3`}
/>,
PARA_4: <FormattedMessage
id={'explore.map.page.under.map.note.on.territories.para.4'}
defaultMessage={`
Work is currently underway to identify disadvantaged communities and update the
map accordingly for Guam and the U.S. Virgin Islands.
`}
description={`Navigate to the explore the map page. Under the map, you will see territories paragraph 4`}
values={{
link1: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.DECENNIAL, false, true),
}}
/>,
};
@ -1236,22 +1255,9 @@ export const NOTE_ON_TRIBAL_NATIONS = {
PARA_1: <FormattedMessage
id={'explore.map.page.under.map.note.on.tribal.nations.para.1'}
defaultMessage={`
The map covers all U.S. census tracts, including those located within Tribal Nations, to the extent
that data is available (see our <link1>Methodology & data</link1> page for more information). CEQ
is engaging in consultation and coordination with Tribal Nations on the beta version of the map
to provide Tribal Nations with meaningful opportunities for input, consistent with CEQs <link2>
Action Plan for Consultation and Coordination with Tribal Nations</link2>,
President Bidens <link3>Memorandum on Tribal Consultation and Strengthening
Nation-to-Nation Consultation</link3>, and <link4>Executive Order 13175 on Consultation and
Coordination With Indian Tribal Governments</link4>.
To honor the Administration's commitment to the Federal trust responsibility to Tribal Nations, areas within the boundaries of Federally recognized Tribes, including Alaska Native villages, are designated as disadvantaged. In some areas, like rural Alaska, this includes Tribal areas that are smaller than a census tract.
`}
description={`Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1`}
values={{
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
link2: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_ACTION_PLAN, false, true),
link3: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_WHITEHOUSE, false, true),
link4: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_FED_REGISTER, false, true),
}}
/>,
};

BIN
client/src/images/wh.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View file

@ -99,6 +99,10 @@
"defaultMessage": "Download new <link1>technical support</link1> and other documentation and <link2>send feedback</link2>.",
"description": "Alert title that appears at the top of pages."
},
"common.pages.alerts.banner.beta.content": {
"defaultMessage": "<bold1>This site has been updated.</bold1> The current version of the site is 1.0 that was released on {relDate}",
"description": "Alert body that appears on landing page."
},
"common.pages.alerts.census.tract.title": {
"defaultMessage": "Additional documentation now available",
"description": "Navigate to any page. This the title of the alert that informs the user that new census tract information is available"
@ -111,14 +115,6 @@
"defaultMessage": "Public comment period extended",
"description": "Alert title that appears on landing page."
},
"common.pages.banner.beta.info": {
"defaultMessage": "It is an early, in-progress version of the tool with limited datasets that will be regularly updated.",
"description": "Navigate to the about page. This is the main info of the beta banner"
},
"common.pages.banner.beta.title": {
"defaultMessage": "This is a beta site.",
"description": "Navigate to the about page. This is the main title of the beta banner"
},
"common.pages.console.error.stage.url": {
"defaultMessage": "Please check stage_hash value. It must be a 4 digit decimal value / 40 digit hexadecimal value",
"description": "Navigate to the about page. This is console error staging URL"
@ -323,9 +319,21 @@
"defaultMessage": "Downloads",
"description": "Navigate to the Downloads page, this will be the page title text"
},
"explore.map.page.description.text": {
"defaultMessage": "Use the map to see communities that are identified as disadvantaged. The map uses publicly-available, nationally-consistent datasets. Learn more about the methodology and datasets that were used to identify disadvantaged communities in the current version of the map on the <link1>Methodology & data</link1> page.",
"description": "On the explore the map page, the description of the page"
"explore.map.page.description.1": {
"defaultMessage": "Overburdened and underserved census tracts are highlighted as being disadvantaged on the map. The map also highlights areas within Federally-recognized Tribal reservations. These areas are also considered disadvantaged.",
"description": "On the explore the map page, the first description of the page"
},
"explore.map.page.description.2": {
"defaultMessage": "Zooming and selecting shows information about each census tract or tribal area. Change the selection to see information about tribal land areas.",
"description": "On the explore the map page, the fifth description of the page"
},
"explore.map.page.explore.data.box.body": {
"defaultMessage": "Download the data with documentation and shapefiles, from the <link1>downloads</link1> page",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Things to know, this is the fifth paragraph of this side pane"
},
"explore.map.page.explore.data.box.title": {
"defaultMessage": "Get the data",
"description": "On the explore the map page, a summary box title of Get the data"
},
"explore.map.page.heading.text": {
"defaultMessage": "Explore the map",
@ -1052,31 +1060,27 @@
"description": "Navigate to the explore the map page. Under the map, you will see RFI is expired"
},
"explore.map.page.under.map.note.on.territories.intro": {
"defaultMessage": "A note on the U.S. territories",
"defaultMessage": "U.S. territories note",
"description": "Navigate to the explore the map page. Under the map, you will see territories intro text"
},
"explore.map.page.under.map.note.on.territories.para.1": {
"defaultMessage": "The data sources described on the <link1>Methodology & data</link1> page are used to identify disadvantaged communities in all fifty states and the District of Columbia. However, not all of these data sources are currently available for the U.S. territories.",
"defaultMessage": "Puerto Rico: The <link1>U.S. Census Bureau's American Community Survey data</link1> from 2015 - 2019 are used for all fields in the workforce development category except for linguistic isolation. Linguistic isolation was removed based on feedback during the beta period. Proximity to National Priorities List (NPL) sites, proximity to Risk Management Plan (RMP) facilities, traffic proximity and volume, diesel particulate matter exposure, energy cost and housing cost were added for Puerto Rico in the 1.0 version.",
"description": "Navigate to the explore the map page. Under the map, you will see territories paragraph 1"
},
"explore.map.page.under.map.note.on.territories.para.2": {
"defaultMessage": "For Puerto Rico, the Census Bureaus American Community Survey data from 2015-2019 are used for higher ed enrollment rate and all the other fields in the Training and Workforce Development category to identify disadvantaged communities. Data in the other categories are unavailable at this time.",
"defaultMessage": "American Samoa and the Northern Mariana Islands: The <link1>Decennial Census data</link1> from 2010 are used. The CEJST uses the following data for these territories: unemployment, poverty, low median income, and high school education. These burdens are in the workforce Development category.",
"description": "Navigate to the explore the map page. Under the map, you will see territories paragraph 2"
},
"explore.map.page.under.map.note.on.territories.para.3": {
"defaultMessage": "For American Samoa and the Northern Mariana Islands, the data used to identify disadvantaged communities are from the 2010 Decennial Census, the last reported data from the U.S. Census Bureau. Available data for these territories includes unemployment, poverty, low median income, and high school degree achievement rate fields in the Training and Workforce Development category.",
"defaultMessage": "Guam and the U.S. Virgin Islands: Some <link1>Decennial Census data</link1> from 2010 are used. They show burdens in the workforce development category. The data includes: Unemployment, poverty, low median income, and high school education.",
"description": "Navigate to the explore the map page. Under the map, you will see territories paragraph 3"
},
"explore.map.page.under.map.note.on.territories.para.4": {
"defaultMessage": "Work is currently underway to identify disadvantaged communities and update the map accordingly for Guam and the U.S. Virgin Islands.",
"description": "Navigate to the explore the map page. Under the map, you will see territories paragraph 4"
},
"explore.map.page.under.map.note.on.tribal.nations.intro": {
"defaultMessage": "A note on Tribal Nations",
"description": "Navigate to the explore the map page. Under the map, you will see tribal nations intro text"
},
"explore.map.page.under.map.note.on.tribal.nations.para.1": {
"defaultMessage": "The map covers all U.S. census tracts, including those located within Tribal Nations, to the extent that data is available (see our <link1>Methodology & data</link1> page for more information). CEQ is engaging in consultation and coordination with Tribal Nations on the beta version of the map to provide Tribal Nations with meaningful opportunities for input, consistent with CEQs <link2> Action Plan for Consultation and Coordination with Tribal Nations</link2>, President Bidens <link3>Memorandum on Tribal Consultation and Strengthening Nation-to-Nation Consultation</link3>, and <link4>Executive Order 13175 on Consultation and Coordination With Indian Tribal Governments</link4>.",
"defaultMessage": "To honor the Administration's commitment to the Federal trust responsibility to Tribal Nations, areas within the boundaries of Federally recognized Tribes, including Alaska Native villages, are designated as disadvantaged. In some areas, like rural Alaska, this includes Tribal areas that are smaller than a census tract.",
"description": "Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1"
},
"fab.survey.text": {

View file

@ -2,10 +2,10 @@ import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import {Grid} from '@trussworks/react-uswds';
import HowYouCanHelp from '../components/HowYouCanHelp';
import ExploreDataBox from '../components/ExploreDataBox';
import J40Map from '../components/J40Map';
import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout';
import MapWrapper from '../components/MapWrapper';
import * as EXPLORE_COPY from '../data/copy/explore';
@ -31,10 +31,20 @@ const ExporeToolPage = ({location}: IMapPageProps) => {
{/* Gradually increase width of the Grid as the width decreases from desktop to mobile*/}
{/* desktop = 7 columns, tablet = 10 columns and mobile = 12 columns (full width) */}
<Grid desktop={{col: 7}} tablet={{col: 10}} col={12}>
<Grid desktop={{col: 8}} tablet={{col: 10}} col={12}>
<section>
<p>
{EXPLORE_COPY.PAGE_DESCRIPTION}
{EXPLORE_COPY.PAGE_DESCRIPTION1}
</p>
<p>
{EXPLORE_COPY.PAGE_DESCRIPTION2}
</p>
</section>
</Grid>
<Grid desktop={{col: 4}} tablet={{col: 10}} col={12}>
<section>
<p>
<ExploreDataBox />
</p>
</section>
</Grid>
@ -42,7 +52,9 @@ const ExporeToolPage = ({location}: IMapPageProps) => {
</J40MainGridContainer>
<J40MainGridContainer>
<MapWrapper location={location}/>
<Grid row>
<J40Map location={location}/>
</Grid>
</J40MainGridContainer>
<J40MainGridContainer>
@ -51,7 +63,6 @@ const ExporeToolPage = ({location}: IMapPageProps) => {
<p>{EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_1}</p>
<p>{EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_2}</p>
<p>{EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_3}</p>
<p>{EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_4}</p>
</Grid>
<Grid desktop={{col: 7}} tablet={{col: 10}} col={12}>
@ -60,16 +71,8 @@ const ExporeToolPage = ({location}: IMapPageProps) => {
</Grid>
</J40MainGridContainer>
<J40MainGridContainer>
<Grid row>
<Grid col>
<section>
<HowYouCanHelp/>
</section>
</Grid>
</Grid>
</J40MainGridContainer>
</Layout>);
</Layout>
);
};
export default ExporeToolPage;

View file

@ -162,16 +162,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
<div>
<div>
<div />
<div>
<span>
This is a beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited datasets that will
be regularly updated.
</span>
</div>
<strong>
This site has been updated.
</strong>
The current version of the site is 1.0 that was released on Oct 25, 2022
</div>
</div>
<div

View file

@ -162,16 +162,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
<div>
<div>
<div />
<div>
<span>
This is a beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited datasets that will
be regularly updated.
</span>
</div>
<strong>
This site has been updated.
</strong>
The current version of the site is 1.0 that was released on Oct 25, 2022
</div>
</div>
<div

View file

@ -162,16 +162,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
<div>
<div>
<div />
<div>
<span>
This is a beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited datasets that will
be regularly updated.
</span>
</div>
<strong>
This site has been updated.
</strong>
The current version of the site is 1.0 that was released on Oct 25, 2022
</div>
</div>
<div

View file

@ -162,16 +162,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
<div>
<div>
<div />
<div>
<span>
This is a beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited datasets that will
be regularly updated.
</span>
</div>
<strong>
This site has been updated.
</strong>
The current version of the site is 1.0 that was released on Oct 25, 2022
</div>
</div>
<div

View file

@ -162,16 +162,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
<div>
<div>
<div />
<div>
<span>
This is a beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited datasets that will
be regularly updated.
</span>
</div>
<strong>
This site has been updated.
</strong>
The current version of the site is 1.0 that was released on Oct 25, 2022
</div>
</div>
<div

View file

@ -162,16 +162,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
<div>
<div>
<div />
<div>
<span>
This is a beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited datasets that will
be regularly updated.
</span>
</div>
<strong>
This site has been updated.
</strong>
The current version of the site is 1.0 that was released on Oct 25, 2022
</div>
</div>
<div

View file

@ -162,16 +162,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
<div>
<div>
<div />
<div>
<span>
This is a beta site.
</span>
<span>
It is an early, in-progress version of the tool with limited datasets that will
be regularly updated.
</span>
</div>
<strong>
This site has been updated.
</strong>
The current version of the site is 1.0 that was released on Oct 25, 2022
</div>
</div>
<div