publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 18:14:19 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix all link colors, prevent logo from wrapping, update non-selected side-panel (#1908)

Browse source 
* Update links colors

- Language links
- Download links
- Simple links
- External links
- Side panel demographics links
- return to top links
- update snapshots

* Fix wrapping on logo title

- remove beta pill

* Update un-selected side panel copy (desktop)

- two icons are needed

* Remove icons on mobile view

* Remove the pub. eng. button on all pages

* Add usa-link class to all links

- will create consiste visible state on all links

* Remove tribal toggle

- remove tribal layer from feature flag and make it default
This commit is contained in:
Vim 2022-09-21 13:39:54 -07:00 • committed by GitHub
parent eeb7d07c40
commit 5633d0f86e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
46 changed files with 933 additions and 729 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

149
client/src/components/AreaDetail/AreaDetail.tsx
View file

@ -23,7 +23,6 @@ import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail_outline.svg';
interface IAreaDetailProps { interface IAreaDetailProps {
properties: constants.J40Properties, properties: constants.J40Properties,
hash: string[], hash: string[],
isCensusLayerSelected: boolean,
} }
/** /**
@ -106,7 +105,7 @@ export const indicatorFilter = (label:MessageDescriptor) => {
* @param {IAreaDetailProps} {} * @param {IAreaDetailProps} {}
* @return {void} * @return {void}
*/ */
const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) => { const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
const intl = useIntl(); const intl = useIntl();
// console.log the properties of the census that is selected: // console.log the properties of the census that is selected:
@ -118,7 +117,6 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const countyName = properties[constants.COUNTY_NAME] ? properties[constants.COUNTY_NAME] : "N/A"; const countyName = properties[constants.COUNTY_NAME] ? properties[constants.COUNTY_NAME] : "N/A";
const stateName = properties[constants.STATE_NAME] ? properties[constants.STATE_NAME] : "N/A"; const stateName = properties[constants.STATE_NAME] ? properties[constants.STATE_NAME] : "N/A";
const sidePanelState = properties[constants.SIDE_PANEL_STATE]; const sidePanelState = properties[constants.SIDE_PANEL_STATE];
const landAreaName = properties[constants.LAND_AREA_NAME];
const isCommunityFocus = score >= constants.SCORE_BOUNDARY_THRESHOLD; const isCommunityFocus = score >= constants.SCORE_BOUNDARY_THRESHOLD;
@ -775,92 +773,81 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
return ( return (
<aside className={styles.areaDetailContainer} data-cy={'aside'}> <aside className={styles.areaDetailContainer} data-cy={'aside'}>
{ {
isCensusLayerSelected ? ( <>
<> {/* Tract Info */}
{/* Tract Info */} <TractInfo
<TractInfo blockGroup={blockGroup}
blockGroup={blockGroup} countyName={countyName}
countyName={countyName} stateName={stateName}
stateName={stateName} population={population}
population={population} sidePanelState={properties[constants.SIDE_PANEL_STATE]}
sidePanelState={properties[constants.SIDE_PANEL_STATE]} />
/>
{/* Demographics */} {/* Demographics */}
<TractDemographics properties={properties}/> <TractDemographics properties={properties}/>
{/* Disadvantaged? */} {/* Disadvantaged? */}
<div className={styles.categorization}> <div className={styles.categorization}>
{/* Questions asking if disadvantaged? */} {/* Questions asking if disadvantaged? */}
<div className={styles.isInFocus}> <div className={styles.isInFocus}>
{EXPLORE_COPY.COMMUNITY.IS_FOCUS} {EXPLORE_COPY.COMMUNITY.IS_FOCUS}
</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>
</div> </div>
</>
) : ( {/* YES with Dot or NO with no Dot */}
<ul className={styles.censusRow}> <div className={styles.communityOfFocus}>
<li> {isCommunityFocus ?
<span className={styles.censusLabel}> <>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_TRIBAL_INFO.LAND_AREA_NAME)} <h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
</span> <DisadvantageDot isDisadvantaged={isCommunityFocus} />
<span className={styles.censusText}>{` ${landAreaName}`}</span> </> :
</li> <h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
</ul> }
) </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>
</div>
</>
} }
{/* All category accordions in this component */} {/* All category accordions in this component */}
{isCensusLayerSelected && <Accordion multiselectable={true} items={categoryItems} />} {<Accordion multiselectable={true} items={categoryItems} />}
{/* Methodology version */} {/* Methodology version */}
<div className={styles.versionInfo}> <div className={styles.versionInfo}>

42
client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
View file

@ -52,14 +52,15 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL
Race / Ethnicity Race / Ethnicity
<span> <span>
( (
<button <a
aria-controls="race-panel" aria-controls="race-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="race-header" id="race-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -141,14 +142,15 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL
Age Age
<span> <span>
( (
<button <a
aria-controls="age-panel" aria-controls="age-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="age-header" id="age-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -202,11 +204,11 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL
</div> </div>
<a <a
href=" href="
mailto:Screeningtool-Support@omb.eop.gov?subject= mailto:Screeningtool-Support@omb.eop.gov?subject=
Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 ) 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. &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" rel="noreferrer"
target="_blank" target="_blank"
> >
@ -463,14 +465,15 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
Race / Ethnicity Race / Ethnicity
<span> <span>
( (
<button <a
aria-controls="race-panel" aria-controls="race-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="race-header" id="race-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -552,14 +555,15 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
Age Age
<span> <span>
( (
<button <a
aria-controls="age-panel" aria-controls="age-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="age-header" id="age-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -613,11 +617,11 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
</div> </div>
<a <a
href=" href="
mailto:Screeningtool-Support@omb.eop.gov?subject= mailto:Screeningtool-Support@omb.eop.gov?subject=
Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 ) 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. &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" rel="noreferrer"
target="_blank" target="_blank"
> >
@ -2150,14 +2154,15 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
Race / Ethnicity Race / Ethnicity
<span> <span>
( (
<button <a
aria-controls="race-panel" aria-controls="race-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="race-header" id="race-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -2239,14 +2244,15 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
Age Age
<span> <span>
( (
<button <a
aria-controls="age-panel" aria-controls="age-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="age-header" id="age-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -2300,11 +2306,11 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
</div> </div>
<a <a
href=" href="
mailto:Screeningtool-Support@omb.eop.gov?subject= mailto:Screeningtool-Support@omb.eop.gov?subject=
Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 ) 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. &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" rel="noreferrer"
target="_blank" target="_blank"
> >

38
client/src/components/Categories/__snapshots__/Categories.test.tsx.snap
View file

@ -43,18 +43,21 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#exp-agr-loss-rate" href="#exp-agr-loss-rate"
> >
expected agriculture loss rate expected agriculture loss rate
</a> </a>
OR OR
<a <a
class="usa-link"
href="#exp-bld-loss-rate" href="#exp-bld-loss-rate"
> >
expected building loss rate expected building loss rate
</a> </a>
OR OR
<a <a
class="usa-link"
href="#exp-pop-loss-rate" href="#exp-pop-loss-rate"
> >
expected population loss rate expected population loss rate
@ -68,12 +71,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -102,12 +107,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#energy-burden" href="#energy-burden"
> >
energy burden energy burden
</a> </a>
OR OR
<a <a
class="usa-link"
href="#pm-25" href="#pm-25"
> >
PM2.5 in the air PM2.5 in the air
@ -121,12 +128,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -157,12 +166,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#diesel-pm" href="#diesel-pm"
> >
diesel particulate matter exposure diesel particulate matter exposure
</a> </a>
or or
<a <a
class="usa-link"
href="#traffic-vol" href="#traffic-vol"
> >
traffic proximity and volume traffic proximity and volume
@ -178,12 +189,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -212,18 +225,21 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#lead-paint" href="#lead-paint"
> >
lead paint lead paint
</a> </a>
AND AND
<a <a
class="usa-link"
href="#median-home" href="#median-home"
> >
median home value median home value
</a> </a>
is at or less than the 90th percentile OR at or above the 90th percentile for the is at or less than the 90th percentile OR at or above the 90th percentile for the
<a <a
class="usa-link"
href="#house-burden" href="#house-burden"
> >
housing cost burden housing cost burden
@ -237,12 +253,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -271,18 +289,21 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#prox-haz" href="#prox-haz"
> >
proximity to hazardous waste facilities proximity to hazardous waste facilities
</a> </a>
OR OR
<a <a
class="usa-link"
href="#prox-npl" href="#prox-npl"
> >
proximity to National Priorities List (NPL) sites proximity to National Priorities List (NPL) sites
</a> </a>
OR OR
<a <a
class="usa-link"
href="#prox-rmp" href="#prox-rmp"
> >
proximity to Risk Management Plan (RMP) facilities proximity to Risk Management Plan (RMP) facilities
@ -296,12 +317,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -330,6 +353,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#waste-water" href="#waste-water"
> >
wastewater discharge wastewater discharge
@ -343,12 +367,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -377,24 +403,28 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#asthma" href="#asthma"
> >
asthma asthma
</a> </a>
OR OR
<a <a
class="usa-link"
href="#diabetes" href="#diabetes"
> >
diabetes diabetes
</a> </a>
OR OR
<a <a
class="usa-link"
href="#heart-disease" href="#heart-disease"
> >
heart disease heart disease
</a> </a>
OR OR
<a <a
class="usa-link"
href="#life-exp" href="#life-exp"
> >
low life expectancy low life expectancy
@ -408,12 +438,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -442,24 +474,28 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#low-med-inc" href="#low-med-inc"
> >
low median income low median income
</a> </a>
as a percentage of area median income OR as a percentage of area median income OR
<a <a
class="usa-link"
href="#ling-iso" href="#ling-iso"
> >
linguistic isolation linguistic isolation
</a> </a>
OR OR
<a <a
class="usa-link"
href="#unemploy" href="#unemploy"
> >
unemployment unemployment
</a> </a>
OR percentage of individuals in households at or below 100% Federal OR percentage of individuals in households at or below 100% Federal
<a <a
class="usa-link"
href="#poverty" href="#poverty"
> >
poverty poverty
@ -473,12 +509,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</strong> </strong>
10% or more of adults 25 or older have not attained a 10% or more of adults 25 or older have not attained a
<a <a
class="usa-link"
href="#high-school" href="#high-school"
> >
high school degree high school degree
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education

5
client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap
View file

@ -21,18 +21,21 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#exp-agr-loss-rate" href="#exp-agr-loss-rate"
> >
expected agriculture loss rate expected agriculture loss rate
</a> </a>
OR OR
<a <a
class="usa-link"
href="#exp-bld-loss-rate" href="#exp-bld-loss-rate"
> >
expected building loss rate expected building loss rate
</a> </a>
OR OR
<a <a
class="usa-link"
href="#exp-pop-loss-rate" href="#exp-pop-loss-rate"
> >
expected population loss rate expected population loss rate
@ -46,12 +49,14 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education

2
client/src/components/DatasetContainer/index.tsx
View file

@ -44,7 +44,7 @@ const DatasetContainer = () => {
</Grid> </Grid>
<div className={styles.returnToTop}> <div className={styles.returnToTop}>
<Link to={PAGES_ENDPOINTS.METHODOLOGY}> <Link className={'usa-link'} to={PAGES_ENDPOINTS.METHODOLOGY}>
{METHODOLOGY_COPY.RETURN_TO_TOP.LINK} {METHODOLOGY_COPY.RETURN_TO_TOP.LINK}
</Link> </Link>
</div> </div>

1
client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
View file

@ -1377,6 +1377,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div> </div>
<div> <div>
<a <a
class="usa-link"
href="/en/methodology" href="/en/methodology"
> >
Return to top Return to top

2
client/src/components/DownloadLink/DownloadLink.tsx
View file

@ -27,7 +27,7 @@ const DownloadLink = ({href, linkText}:IDownloadLink) => {
} }
return ( return (
<> <>
<a href={href} download>{linkText}</a> <a href={href} className={`usa-link`} download>{linkText}</a>
<img <img
className={styles.downloadIcon} className={styles.downloadIcon}
src={fileDownloadIcon} src={fileDownloadIcon}

1
client/src/components/DownloadLink/__snapshots__/DownloadLink.test.tsx.snap
View file

@ -3,6 +3,7 @@
exports[`rendering of the DownloadLink disadvantaged checks if component renders 1`] = ` exports[`rendering of the DownloadLink disadvantaged checks if component renders 1`] = `
<DocumentFragment> <DocumentFragment>
<a <a
class="usa-link"
download="" download=""
href="https://google.com" href="https://google.com"
> >

2
client/src/components/GovernmentBanner/__snapshots__/GovernmentBanner.test.tsx.snap
View file

@ -141,11 +141,13 @@ exports[`rendering of the GovernmentBanner checks if component renders 1`] = `
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español

1
client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap
View file

@ -10,6 +10,7 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
<li> <li>
View the View the
<a <a
class="usa-link"
href="/en/methodology" href="/en/methodology"
> >
Methodology & data Methodology & data

2
client/src/components/J40Footer/__snapshots__/J40Footer.spec.tsx.snap
View file

@ -79,7 +79,7 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
class="footer-link-first-child" class="usa-link footer-link-first-child"
href="/en/public-engagement" href="/en/public-engagement"
> >
Engagement calendar Engagement calendar

18
client/src/components/J40Header/J40Header.module.scss
View file

@ -18,22 +18,8 @@
@include u-display("flex"); @include u-display("flex");
@include u-flex-direction("column"); @include u-flex-direction("column");
@include typeset("sans", 8, 3); @include typeset("sans", 8, 3);
} max-width: 270px;
min-width: 218px;
.title2BetaPill {
@include u-display("flex");
}
.betaPill {
@include u-display("inline-block");
@include u-bg("yellow-20v");
@include u-radius(1);
@include u-padding-left(2);
@include u-padding-right(2);
@include u-padding-top('05');
@include u-margin-left(1);
@include u-font("body", "2xs");
@include u-text('bold')
} }
.navLinks { .navLinks {

9
client/src/components/J40Header/J40Header.tsx
View file

@ -36,7 +36,6 @@ const J40Header = () => {
// Logo text // Logo text
const logoLine1 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_1); const logoLine1 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_1);
const logoLine2 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_2);
/** /**
* State variable to control the toggling of mobile menu button * State variable to control the toggling of mobile menu button
@ -203,17 +202,13 @@ const J40Header = () => {
{/* Logo */} {/* Logo */}
<Grid col={1}> <Grid col={1}>
<img className={styles.logo} src={siteLogo} alt={`${logoLine1} ${logoLine2}`} /> <img className={styles.logo} src={siteLogo} alt={`${logoLine1}`} />
</Grid> </Grid>
{/* Logo Title */} {/* Logo Title */}
<Grid col={6}> <Grid col={6}>
<div className={styles.logoTitle}> <div className={styles.logoTitle}>
<div>{logoLine1}</div> {logoLine1}
<div className={styles.title2BetaPill}>
<div> {logoLine2} </div>
<div className={styles.betaPill}>BETA</div>
</div>
</div> </div>
</Grid> </Grid>

16
client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap
View file

@ -146,11 +146,13 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -194,17 +196,7 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
data-testid="grid" data-testid="grid"
> >
<div> <div>
<div> Climate and Economic Justice Screening Tool
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div> </div>
</div> </div>
<div <div
@ -315,11 +307,13 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español

43
client/src/components/J40Map.tsx
View file

@ -29,7 +29,6 @@ import MapInfoPanel from './mapInfoPanel';
import MapSearch from './MapSearch'; import MapSearch from './MapSearch';
import MapTractLayers from './MapTractLayers/MapTractLayers'; import MapTractLayers from './MapTractLayers/MapTractLayers';
import MapTribalLayer from './MapTribalLayers/MapTribalLayers'; import MapTribalLayer from './MapTribalLayers/MapTribalLayers';
import LayerSelector from './LayerSelector';
import TerritoryFocusControl from './territoryFocusControl'; import TerritoryFocusControl from './territoryFocusControl';
import {getOSBaseMap} from '../data/getOSBaseMap'; import {getOSBaseMap} from '../data/getOSBaseMap';
@ -86,11 +85,6 @@ const J40Map = ({location}: IJ40Interface) => {
const [transitionInProgress, setTransitionInProgress] = useState<boolean>(false); const [transitionInProgress, setTransitionInProgress] = useState<boolean>(false);
const [geolocationInProgress, setGeolocationInProgress] = useState<boolean>(false); const [geolocationInProgress, setGeolocationInProgress] = useState<boolean>(false);
const [isMobileMapState, setIsMobileMapState] = useState<boolean>(false); const [isMobileMapState, setIsMobileMapState] = useState<boolean>(false);
const [censusSelected, setCensusSelected] = useState<boolean>(true);
// In order to detect that the layer has been toggled (between census and tribal),
// this state variable will hold that information
const [layerToggled, setLayerToggled] = useState<boolean>(false);
const {width: windowWidth} = useWindowSize(); const {width: windowWidth} = useWindowSize();
/** /**
@ -176,8 +170,6 @@ const J40Map = ({location}: IJ40Interface) => {
} else { } else {
// This else clause will fire when the ID is null or empty. This is the case where the map is clicked // This else clause will fire when the ID is null or empty. This is the case where the map is clicked
setLayerToggled(false);
// @ts-ignore // @ts-ignore
const feature = event.features && event.features[0]; const feature = event.features && event.features[0];
@ -324,7 +316,7 @@ const J40Map = ({location}: IJ40Interface) => {
setGeolocationInProgress(true); setGeolocationInProgress(true);
}; };
const mapBoxBaseLayer = 'tl' in flags ? `mapbox://styles/justice40/cl2qimpi2000014qeb1egpox8` : `mapbox://styles/justice40/cl5mp95tu000k14lpl21spgny`; const mapBoxBaseLayer = `mapbox://styles/justice40/cl2qimpi2000014qeb1egpox8`;
return ( return (
<> <>
@ -364,7 +356,7 @@ const J40Map = ({location}: IJ40Interface) => {
// ****** Map state props: ****** // ****** Map state props: ******
// http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#map-state // http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#map-state
{...viewport} {...viewport}
mapStyle={process.env.MAPBOX_STYLES_READ_TOKEN ? mapBoxBaseLayer : getOSBaseMap(censusSelected)} mapStyle={process.env.MAPBOX_STYLES_READ_TOKEN ? mapBoxBaseLayer : getOSBaseMap()}
width="100%" width="100%"
// Ajusting this height with a conditional statement will not render the map on staging. // Ajusting this height with a conditional statement will not render the map on staging.
// The reason for this issue is unknown. Consider styling the parent container via SASS. // The reason for this issue is unknown. Consider styling the parent container via SASS.
@ -379,13 +371,10 @@ const J40Map = ({location}: IJ40Interface) => {
dragRotate={false} dragRotate={false}
touchRotate={false} touchRotate={false}
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
interactiveLayerIds={censusSelected ? interactiveLayerIds={
[ [
constants.HIGH_ZOOM_LAYER_ID, constants.HIGH_ZOOM_LAYER_ID,
constants.PRIORITIZED_HIGH_ZOOM_LAYER_ID, constants.PRIORITIZED_HIGH_ZOOM_LAYER_ID,
] : [
constants.TRIBAL_LAYER_ID,
constants.TRIBAL_ALASKA_POINTS_LAYER_ID,
] ]
} }
@ -401,18 +390,10 @@ const J40Map = ({location}: IJ40Interface) => {
data-cy={'reactMapGL'} data-cy={'reactMapGL'}
> >
{/* Load either the Tribal layer or Census layer depending on the censusSelected state variable */} <MapTractLayers
{ selectedFeature={selectedFeature}
censusSelected ? selectedFeatureId={selectedFeatureId}
<MapTractLayers />
selectedFeature={selectedFeature}
selectedFeatureId={selectedFeatureId}
/> :
<MapTribalLayer
selectedFeature={selectedFeature}
selectedFeatureId={selectedFeatureId}
/>
}
{/* This is the first overlayed row on the map: Search and Geolocation */} {/* This is the first overlayed row on the map: Search and Geolocation */}
<div className={styles.mapHeaderRow}> <div className={styles.mapHeaderRow}>
@ -442,13 +423,6 @@ const J40Map = ({location}: IJ40Interface) => {
</div> </div>
</div> </div>
{/* This will allow to select between the census tract layer and the tribal lands layer */}
<LayerSelector
censusSelected={censusSelected}
setCensusSelected={setCensusSelected}
setLayerToggled={setLayerToggled}
/>
</div> </div>
{/* This is the second row overlayed on the map, it will add the navigation controls {/* This is the second row overlayed on the map, it will add the navigation controls
@ -478,7 +452,6 @@ const J40Map = ({location}: IJ40Interface) => {
<AreaDetail <AreaDetail
properties={detailViewData.properties} properties={detailViewData.properties}
hash={zoomLatLngHash} hash={zoomLatLngHash}
isCensusLayerSelected={censusSelected}
/> />
</Popup> </Popup>
)} )}
@ -493,8 +466,6 @@ const J40Map = ({location}: IJ40Interface) => {
featureProperties={detailViewData?.properties} featureProperties={detailViewData?.properties}
selectedFeatureId={selectedFeature?.id} selectedFeatureId={selectedFeature?.id}
hash={zoomLatLngHash} hash={zoomLatLngHash}
isCensusLayerSelected={censusSelected}
layerToggled={layerToggled}
/> />
</Grid> </Grid>
</> </>

4
client/src/components/Language/Language.module.scss
View file

@ -11,13 +11,11 @@
.languageLink { .languageLink {
@include u-display("inline-block"); @include u-display("inline-block");
@include u-margin-left(1.5); @include u-margin-left(1.5);
cursor: pointer; cursor: pointer;
font-size: .8rem; // government banner text size not a token font-size: .8rem; // government banner text size not a token
@include u-padding-top('2px'); @include u-padding-top('2px');
&:hover {
text-decoration-line: underline;
}
} }
} }

2
client/src/components/Language/Language.tsx
View file

@ -29,7 +29,7 @@ const Language = ({isDesktop}:ILanguageProps) => {
languages.map((language: React.Key | null | undefined) => ( languages.map((language: React.Key | null | undefined) => (
<a <a
href="#" href="#"
className={styles.languageLink} className={styles.languageLink ? `usa-link ${styles.languageLink}` : `usa-link`}
key={language} key={language}
onClick={() => changeLocale(language)} onClick={() => changeLocale(language)}
> >

2
client/src/components/Language/__snapshots__/Language.test.tsx.snap
View file

@ -10,11 +10,13 @@ exports[`rendering of the Language component on mobile checks if component rende
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español

2
client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx
View file

@ -41,7 +41,7 @@ const LinkTypeWrapper = (props:ILinkTypeWrapper) => {
if (props.internal) { if (props.internal) {
return ( return (
<Link to={`${url}`} <Link to={`${url}`}
className={props.className} className={props.className ? `usa-link ${props.className}` : `usa-link`}
> >
{props.linkText} {props.linkText}
</Link> </Link>

1
client/src/components/LinkTypeWrapper/__snapshots__/linkTypeWrapper.test.tsx.snap
View file

@ -28,6 +28,7 @@ exports[`testing all link types tests external links same tab 1`] = `
exports[`testing all link types tests internal links 1`] = ` exports[`testing all link types tests internal links 1`] = `
<DocumentFragment> <DocumentFragment>
<a <a
class="usa-link"
href="/en/methodology" href="/en/methodology"
> >
test link text test link text

12
client/src/components/SidePanelInfo/SidePanelInfo.module.scss
View file

@ -9,19 +9,17 @@
.sidePanelInfoTitle { .sidePanelInfoTitle {
@include u-padding-top(2); @include u-padding-top(2);
font-size: x-large; font-size: large;
line-height: 1.9rem; font-weight: 600;
} }
.sidePanelInfoHeading { .sidePanelInfoHeading {
@include u-padding-top(2); @include u-padding-top(2);
font-size: x-large; font-size: large;
// line-height: 1.9rem; font-weight: 600;
} }
.sidePanelInfoIcon { .sidePanelInfoIcon {
@include u-height(5); @include u-height(2);
@include u-margin-top(4);
@include u-margin-bottom(-2)
} }
} }

122
client/src/components/SidePanelInfo/SidePanelInfo.tsx
View file

@ -1,58 +1,120 @@
import React from 'react'; import React from 'react';
import {useIntl} from 'gatsby-plugin-intl'; import {useIntl} from 'gatsby-plugin-intl';
import {useWindowSize} from 'react-use';
// @ts-ignore // @ts-ignore
import puzzle from '../../images/sidePanelIcons/puzzle.svg'; import plusIcon from '/node_modules/uswds/dist/img/usa-icons/add.svg';
// @ts-ignore // @ts-ignore
import bellCurve from '../../images/sidePanelIcons/bellCurve.svg'; import searchIcon from '/node_modules/uswds/dist/img/usa-icons/search.svg';
// @ts-ignore // @ts-ignore
import pieChart from '../../images/sidePanelIcons/pieChart.svg'; import locateIcon from '/node_modules/uswds/dist/img/usa-icons/my_location.svg';
// @ts-ignore // @ts-ignore
import upDown from '../../images/sidePanelIcons/upDown.svg'; import puzzleIcon from '../../images/sidePanelIcons/puzzle.svg';
// @ts-ignore
import bellCurveIcon from '../../images/sidePanelIcons/bellCurve.svg';
// @ts-ignore
import pieChartIcon from '../../images/sidePanelIcons/pieChart.svg';
// @ts-ignore
import notAvailIcon from '/node_modules/uswds/dist/img/usa-icons/do_not_disturb.svg';
import * as styles from './SidePanelInfo.module.scss'; import * as styles from './SidePanelInfo.module.scss';
import * as constants from '../../data/constants';
import * as EXPLORE_COPY from '../../data/copy/explore'; import * as EXPLORE_COPY from '../../data/copy/explore';
const SidePanelInfo = () => { const SidePanelInfo = () => {
const intl = useIntl(); const intl = useIntl();
const {width: windowWidth} = useWindowSize();
return ( return (
<aside className={styles.sidePanelInfoContainer}> <aside className={styles.sidePanelInfoContainer}>
{/* Heading 1 */}
<header tabIndex={0} className={styles.sidePanelInfoTitle}> <header tabIndex={0} className={styles.sidePanelInfoTitle}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.TITLE)}
</header>
<p tabIndex={0}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA1)}
</p>
<p tabIndex={0} className={styles.sidePanelInfoHeading}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.HEADING1)} {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.HEADING1)}
</p> </header>
<img tabIndex={0} className={styles.sidePanelInfoIcon}
src={puzzle} {/* Paragraph 1 */}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.ALT_TEXT_ICON1)}
/>
<p tabIndex={0}> <p tabIndex={0}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA2)} {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA1_PART1)}
{
windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
<img tabIndex={0} className={styles.sidePanelInfoIcon} src={plusIcon}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT.PLUS)}
/>
}
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA1_PART2)}
{
windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
<img tabIndex={0} className={styles.sidePanelInfoIcon} src={searchIcon}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT.SEARCH)}
/>
}
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA1_PART3)}
{
windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
<img tabIndex={0} className={styles.sidePanelInfoIcon} src={locateIcon}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT.LOCATE)}
/>
}
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA1_PART4)}
{
windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
<img tabIndex={0} className={styles.sidePanelInfoIcon} src={notAvailIcon}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT.MOUSE)}
/>
}
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA1_PART5)}
</p> </p>
<img tabIndex={0} className={styles.sidePanelInfoIcon}
src={bellCurve} {/* Heading 2 */}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.ALT_TEXT_ICON2)} <p tabIndex={0} className={styles.sidePanelInfoHeading}>
/> {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.HEADING2)}
</p>
{/* Paragraph 2 */}
<p tabIndex={0}> <p tabIndex={0}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA3)} {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA2_PART1)}
{
windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
<img tabIndex={0} className={styles.sidePanelInfoIcon} src={puzzleIcon}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT.TRACT)}
/>
}
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA2_PART2)}
</p> </p>
<img tabIndex={0} className={styles.sidePanelInfoIcon}
src={pieChart} {/* Paragraph 3 */}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.ALT_TEXT_ICON3)}
/>
<p tabIndex={0}> <p tabIndex={0}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA4)} {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA3_PART1)}
{
windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
<img tabIndex={0} className={styles.sidePanelInfoIcon} src={notAvailIcon}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT.DAC_CIRCLE)}
/>
}
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA3_PART2)}
</p> </p>
<img tabIndex={0} className={styles.sidePanelInfoIcon}
src={upDown} {/* Paragraph 4 */}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.ALT_TEXT_ICON4)} <p tabIndex={0}>
/> {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA4_PART1)}
{
windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
<img tabIndex={0} className={styles.sidePanelInfoIcon} src={bellCurveIcon}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT.BELL_CURVE)}
/>
}
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA4_PART2)}
{
windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
<img tabIndex={0} className={styles.sidePanelInfoIcon} src={pieChartIcon}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT.PIE_CHART)}
/>
}
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA4_PART3)}
</p>
{/* Paragraph 5 */}
<p tabIndex={0}> <p tabIndex={0}>
{EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE_PARA5} {EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE_PARA5}
</p> </p>

142
client/src/components/SidePanelInfo/__snapshots__/SidePanelInfo.test.tsx.snap
View file

@ -6,76 +6,134 @@ exports[`rendering of the component expects the render to match snapshot 1`] = `
<header <header
tabindex="0" tabindex="0"
> >
Things to know
How to use the map:
</header> </header>
<p <p
tabindex="0" tabindex="0"
> >
This tool identifies communities that are marginalized, underserved, and overburdened by pollution. These communities are located in census tracts that are at or above the thresholds in one or more of eight categories of criteria. Zoom in
</p> <img
<p alt="
tabindex="0" a plus icon indicating that the user can zoom in
> *"
src="test-file-stub"
tabindex="0"
/>
Zoom in or search and select to see data about any census tract of interest , search
</p> <img
<img alt="
alt=" a magnifying glass icon informing the user can search
An icon that has depicts pieces of a block selected mimicking the census block census tracts
" "
src="test-file-stub" src="test-file-stub"
tabindex="0" tabindex="0"
/> />
, or locate yourself
<img
alt="
a gps icon informing the user can locate
"
src="test-file-stub"
tabindex="0"
/>
and select
<img
alt="
a mouse arrow icon informing the user can use the mouse
"
src="test-file-stub"
tabindex="0"
/>
to see information about any census tract
</p>
<p <p
tabindex="0" tabindex="0"
> >
The tool uses census tracts that represent about 4,000 people, which is the smallest unit of geography for which consistent data can be displayed on the map. Things to know:
</p> </p>
<img <p
alt=" tabindex="0"
>
The tool uses census tracts
<img
alt="
a tract icon informing the user of census tracts
"
src="test-file-stub"
tabindex="0"
/>
. Census tracts are a small unit of geography. They make it possible to display data consistenly across the nation.
</p>
<p
tabindex="0"
>
Communities that are disadvantaged live in tracts that experience burdens. These tracts are highlighted in a blueish gray color
<img
alt="
a blue circle icon informing the user of what a disadvantaged community is depicted as
"
src="test-file-stub"
tabindex="0"
/>
on the map. This color is an opacity. This is so information about the map can be seen.
</p>
<p
tabindex="0"
>
The tool uses percentiles
<img
alt="
An icon that a bell curve or gaussian distribution An icon that a bell curve or gaussian distribution
" "
src="test-file-stub" src="test-file-stub"
tabindex="0" tabindex="0"
/> />
<p
tabindex="0"
>
The tool ranks each census tract using percentiles that show how much burden each tract experiences relative to all other tracts, for each criterion. , percentages
</p> <img
<img alt="
alt="
An icon that depicts a part of pie chart being removed An icon that depicts a part of pie chart being removed
" "
src="test-file-stub" src="test-file-stub"
tabindex="0" tabindex="0"
/> />
<p
tabindex="0"
>
Percentages are used for certain variables, i.e. those relating to high school achievement rate and to the share of individuals not currently enrolled in higher education. , or a simple yes/no to indicate how much burden the communities are experiencing in each tract.
</p> </p>
<img
alt="
An icon that has an up arrow and a down arrow
"
src="test-file-stub"
tabindex="0"
/>
<p <p
tabindex="0" tabindex="0"
> >
Thresholds for each category determine if a tract should be identified as disadvantaged because it has exceeded a certain value for the relevant indicators. The tool also uses thresholds. If the tract meets or exceeds the threshold of any climate, environmental, or other burden
<strong>
AND
</strong>
it meets the threshold for the associated socioeconomic burden, then communites in the tract are considered disadvantaged.
</p> </p>
</aside> </aside>

8
client/src/components/SubPageNav/SubPageNav.test.tsx
View file

@ -16,8 +16,8 @@ describe('rendering of the SubPageNav', () => {
const firstLink = container.querySelector(`.usa-sidenav li:nth-child(${firstLinkActive}) a`); const firstLink = container.querySelector(`.usa-sidenav li:nth-child(${firstLinkActive}) a`);
const secondLink = container.querySelector(`.usa-sidenav li:nth-child(${secondLinkIndex}) a`); const secondLink = container.querySelector(`.usa-sidenav li:nth-child(${secondLinkIndex}) a`);
expect(firstLink?.className).toBe('usa-current'); expect(firstLink?.className).toBe('usa-link usa-current');
expect(secondLink?.className).not.toBe('usa-current'); expect(secondLink?.className).not.toBe('usa-link usa-current');
}); });
it('checks if the second link is active', () => { it('checks if the second link is active', () => {
@ -29,7 +29,7 @@ describe('rendering of the SubPageNav', () => {
const firstLink = container.querySelector(`.usa-sidenav li:nth-child(${firstLinkActive}) a`); const firstLink = container.querySelector(`.usa-sidenav li:nth-child(${firstLinkActive}) a`);
const secondLink = container.querySelector(`.usa-sidenav li:nth-child(${secondLinkIndex}) a`); const secondLink = container.querySelector(`.usa-sidenav li:nth-child(${secondLinkIndex}) a`);
expect(secondLink?.className).toBe('usa-current'); expect(secondLink?.className).toBe('usa-link usa-current');
expect(firstLink?.className).not.toBe('usa-current'); expect(firstLink?.className).not.toBe('usa-link usa-current');
}); });
}); });

4
client/src/components/TractDemographics/TractDemographics.module.scss
View file

@ -23,7 +23,7 @@
@include u-margin-top(.5); @include u-margin-top(.5);
} }
.demographicHeading { .demographicHeading {
@include u-margin-top(.5); @include u-margin-top(1);
font-size: .875rem; font-size: .875rem;
span{ span{
@ -37,7 +37,6 @@
//emulate a link //emulate a link
cursor:pointer; cursor:pointer;
color:blue;
text-decoration:underline; text-decoration:underline;
min-width: 45px; min-width: 45px;
@ -47,7 +46,6 @@
.showHideIcon{ .showHideIcon{
vertical-align: middle; vertical-align: middle;
height: 1rem; height: 1rem;
margin-left: -8px;
filter: invert(8%) sepia(90%) saturate(7490%) hue-rotate(247deg) brightness(105%) contrast(143%); filter: invert(8%) sepia(90%) saturate(7490%) hue-rotate(247deg) brightness(105%) contrast(143%);
&:hover{ &:hover{

8
client/src/components/TractDemographics/TractDemographics.tsx
View file

@ -39,9 +39,9 @@ const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
<h6 className={styles.demographicHeading}> <h6 className={styles.demographicHeading}>
{title} {title}
<span> <span>
{'('} {'( '}
<button <a
className={styles.showHideText} className={styles.showHideText ? `usa-link ${styles.showHideText}` : `usa-link`}
id={`${id}-header`} id={`${id}-header`}
aria-controls={`${id}-panel`} aria-controls={`${id}-panel`}
aria-expanded={isExpanded} aria-expanded={isExpanded}
@ -49,7 +49,7 @@ const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
tabIndex={0} tabIndex={0}
> >
{isExpanded ? 'hide' : 'show'} {isExpanded ? 'hide' : 'show'}
</button> </a>
{ isExpanded ? { isExpanded ?
<img <img
className={styles.showHideIcon} className={styles.showHideIcon}

30
client/src/components/TractDemographics/__snapshots__/TractDemographics.test.tsx.snap
View file

@ -10,14 +10,15 @@ exports[`rendering of TractDemographics component does it render a tract in Alas
Race / Ethnicity Race / Ethnicity
<span> <span>
( (
<button <a
aria-controls="race-panel" aria-controls="race-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="race-header" id="race-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -99,14 +100,15 @@ exports[`rendering of TractDemographics component does it render a tract in Alas
Age Age
<span> <span>
( (
<button <a
aria-controls="age-panel" aria-controls="age-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="age-header" id="age-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -158,14 +160,15 @@ exports[`rendering of TractDemographics component does it render a tract in Amer
Race / Ethnicity Race / Ethnicity
<span> <span>
( (
<button <a
aria-controls="race-panel" aria-controls="race-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="race-header" id="race-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -247,14 +250,15 @@ exports[`rendering of TractDemographics component does it render a tract in Amer
Age Age
<span> <span>
( (
<button <a
aria-controls="age-panel" aria-controls="age-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="age-header" id="age-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -306,14 +310,15 @@ exports[`rendering of TractDemographics component does it render a tract in NYC
Race / Ethnicity Race / Ethnicity
<span> <span>
( (
<button <a
aria-controls="race-panel" aria-controls="race-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="race-header" id="race-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"
@ -395,14 +400,15 @@ exports[`rendering of TractDemographics component does it render a tract in NYC
Age Age
<span> <span>
( (
<button <a
aria-controls="age-panel" aria-controls="age-panel"
aria-expanded="false" aria-expanded="false"
class="usa-link"
id="age-header" id="age-header"
tabindex="0" tabindex="0"
> >
show show
</button> </a>
<img <img
alt="expand icon" alt="expand icon"
src="test-file-stub" src="test-file-stub"

142
client/src/components/__snapshots__/mapInfoPanel.test.tsx.snap
View file

@ -11,76 +11,134 @@ exports[`simulate app starting up, no click on map should match the snapshot of
<header <header
tabindex="0" tabindex="0"
> >
Things to know
How to use the map:
</header> </header>
<p <p
tabindex="0" tabindex="0"
> >
This tool identifies communities that are marginalized, underserved, and overburdened by pollution. These communities are located in census tracts that are at or above the thresholds in one or more of eight categories of criteria. Zoom in
</p> <img
<p alt="
tabindex="0" a plus icon indicating that the user can zoom in
> *"
src="test-file-stub"
tabindex="0"
/>
Zoom in or search and select to see data about any census tract of interest , search
</p> <img
<img alt="
alt=" a magnifying glass icon informing the user can search
An icon that has depicts pieces of a block selected mimicking the census block census tracts
" "
src="test-file-stub" src="test-file-stub"
tabindex="0" tabindex="0"
/> />
, or locate yourself
<img
alt="
a gps icon informing the user can locate
"
src="test-file-stub"
tabindex="0"
/>
and select
<img
alt="
a mouse arrow icon informing the user can use the mouse
"
src="test-file-stub"
tabindex="0"
/>
to see information about any census tract
</p>
<p <p
tabindex="0" tabindex="0"
> >
The tool uses census tracts that represent about 4,000 people, which is the smallest unit of geography for which consistent data can be displayed on the map. Things to know:
</p> </p>
<img <p
alt=" tabindex="0"
>
The tool uses census tracts
<img
alt="
a tract icon informing the user of census tracts
"
src="test-file-stub"
tabindex="0"
/>
. Census tracts are a small unit of geography. They make it possible to display data consistenly across the nation.
</p>
<p
tabindex="0"
>
Communities that are disadvantaged live in tracts that experience burdens. These tracts are highlighted in a blueish gray color
<img
alt="
a blue circle icon informing the user of what a disadvantaged community is depicted as
"
src="test-file-stub"
tabindex="0"
/>
on the map. This color is an opacity. This is so information about the map can be seen.
</p>
<p
tabindex="0"
>
The tool uses percentiles
<img
alt="
An icon that a bell curve or gaussian distribution An icon that a bell curve or gaussian distribution
" "
src="test-file-stub" src="test-file-stub"
tabindex="0" tabindex="0"
/> />
<p
tabindex="0"
>
The tool ranks each census tract using percentiles that show how much burden each tract experiences relative to all other tracts, for each criterion. , percentages
</p> <img
<img alt="
alt="
An icon that depicts a part of pie chart being removed An icon that depicts a part of pie chart being removed
" "
src="test-file-stub" src="test-file-stub"
tabindex="0" tabindex="0"
/> />
<p
tabindex="0"
>
Percentages are used for certain variables, i.e. those relating to high school achievement rate and to the share of individuals not currently enrolled in higher education. , or a simple yes/no to indicate how much burden the communities are experiencing in each tract.
</p> </p>
<img
alt="
An icon that has an up arrow and a down arrow
"
src="test-file-stub"
tabindex="0"
/>
<p <p
tabindex="0" tabindex="0"
> >
Thresholds for each category determine if a tract should be identified as disadvantaged because it has exceeded a certain value for the relevant indicators. The tool also uses thresholds. If the tract meets or exceeds the threshold of any climate, environmental, or other burden
<strong>
AND
</strong>
it meets the threshold for the associated socioeconomic burden, then communites in the tract are considered disadvantaged.
</p> </p>
</aside> </aside>

17
client/src/components/mapInfoPanel.tsx
View file

@ -7,8 +7,6 @@ interface IMapInfoPanelProps {
featureProperties: { [key:string]: string | number } | undefined, featureProperties: { [key:string]: string | number } | undefined,
selectedFeatureId: string | number | undefined selectedFeatureId: string | number | undefined
hash: string[], hash: string[],
isCensusLayerSelected: boolean,
layerToggled: boolean, // indicates if census layer or tribal layer has been toggled
} }
const MapInfoPanel = ({ const MapInfoPanel = ({
@ -16,23 +14,18 @@ const MapInfoPanel = ({
featureProperties, featureProperties,
selectedFeatureId, selectedFeatureId,
hash, hash,
isCensusLayerSelected,
layerToggled,
}:IMapInfoPanelProps) => { }:IMapInfoPanelProps) => {
return ( return (
<div className={className} > <div className={className} >
{/* The tertiary conditional statement below will control the side panel state. Currently {/*
The tertiary conditional statement below will control the side panel state. Currently
there are two states, namely showing the AreaDetail or SidePanelInfo. When a feature there are two states, namely showing the AreaDetail or SidePanelInfo. When a feature
is selected, on - for example - the census tract layer, and if the Tribal Layer is the selected is selected, show the AreaDetail. When not selected show SidePanelInfo
the Side Panel should revert back to the SidePanelInfo. */}
{(featureProperties && selectedFeatureId) ?
A new boolean called layerToggle captures that a layer has been selected and to render
the SidePanelInfo component */}
{(featureProperties && selectedFeatureId && !layerToggled) ?
<AreaDetail <AreaDetail
properties={featureProperties} properties={featureProperties}
hash={hash} hash={hash}
isCensusLayerSelected={isCensusLayerSelected}
/> : /> :
<SidePanelInfo /> <SidePanelInfo />
} }

11
client/src/data/copy/common.tsx
View file

@ -20,7 +20,7 @@ export interface IDefineMessage {
* */ * */
export const italicFn = (str:string) => <i>{str}</i>; export const italicFn = (str:string) => <i>{str}</i>;
export const boldFn = (str:string) => <strong>{str}</strong>; export const boldFn = (str:string) => <strong>{str}</strong>;
export const simpleLink = (href:string) => (str:string) => <a href={href}>{str}</a>; export const simpleLink = (href:string) => (str:string) => <a className={'usa-link'} href={href}>{str}</a>;
// export const downloadLink = (href:string) => (str:string) => <a href={href} download>{str}</a>; // export const downloadLink = (href:string) => (str:string) => <a href={href} download>{str}</a>;
export const downloadLink = (href:string) => (str:string) => <DownloadLink href={href} linkText={str} />; export const downloadLink = (href:string) => (str:string) => <DownloadLink href={href} linkText={str} />;
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
@ -101,13 +101,8 @@ export const ALERTS = {
export const HEADER = defineMessages({ export const HEADER = defineMessages({
TITLE_LINE_1: { TITLE_LINE_1: {
id: 'common.pages.header.title.line1', id: 'common.pages.header.title.line1',
defaultMessage: `Climate and Economic Justice`, defaultMessage: `Climate and Economic Justice Screening Tool`,
description: 'Navigate to the about page. This is Title in nav header line 1 of 2', description: 'Navigate to the about page. This is Title in nav header',
},
TITLE_LINE_2: {
id: 'common.pages.header.title.line2',
defaultMessage: `Screening Tool`,
description: 'Navigate to the about page. This is Title in nav header line 2 of 2',
}, },
ABOUT: { ABOUT: {
id: 'common.pages.header.about', id: 'common.pages.header.about',

187
client/src/data/copy/explore.tsx
View file

@ -207,86 +207,185 @@ export const MAP = defineMessages({
}); });
// Side Panel copy // Side Panel non-selected state copy
export const SIDE_PANEL_INITIAL_STATE = defineMessages({ export const SIDE_PANEL_INITIAL_STATE = defineMessages({
TITLE: {
id: 'explore.map.page.side.panel.info.title',
defaultMessage: 'Things to know',
description: 'introductory text of ways to use the map',
},
PARA1: {
id: 'explore.map.page.side.panel.info.para1',
defaultMessage: `
This tool identifies communities that are marginalized, underserved, and overburdened by pollution. These communities are located in census tracts that are at or above the thresholds in one or more of eight categories of criteria.
`,
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 first paragraph of this side panel`,
},
HEADING1: { HEADING1: {
id: 'explore.map.page.side.panel.info.heading1', id: 'explore.map.page.side.panel.info.heading1',
defaultMessage: ` defaultMessage: `
Zoom in or search and select to see data about any census tract of interest How to use the map:
`, `,
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 first paragraph of this side panel`, description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the first heading of the non-selected side panel',
}, },
PARA2: { PARA1_PART1: {
id: 'explore.map.page.side.panel.info.para2', id: 'explore.map.page.side.panel.info.para.1.part.1',
defaultMessage: ` defaultMessage: `
The tool uses census tracts that represent about 4,000 people, which is the smallest unit of geography for which consistent data can be displayed on the map. Zoom in
`, `,
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 second paragraph of this side panel`, description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Zoom in',
}, },
PARA3: { PARA1_PART2: {
id: 'explore.map.page.side.panel.info.para3', id: 'explore.map.page.side.panel.info.para.1.part.2',
defaultMessage: ` defaultMessage: `
The tool ranks each census tract using percentiles that show how much burden each tract experiences relative to all other tracts, for each criterion. , search
`, `,
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 third paragraph of this side panel`, description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show search',
}, },
PARA4: { PARA1_PART3: {
id: 'explore.map.page.side.panel.info.para4', id: 'explore.map.page.side.panel.info.para.1.part.2',
defaultMessage: ` defaultMessage: `
Percentages are used for certain variables, i.e. those relating to high school achievement rate and to the share of individuals not currently enrolled in higher education. , or locate yourself
`, `,
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 forth paragraph of this side panel`, description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show or locate yourself',
}, },
ALT_TEXT_ICON1: { PARA1_PART4: {
id: 'explore.map.page.side.panel.info.alt.text.icon1', id: 'explore.map.page.side.panel.info.para.1.part.4',
defaultMessage: ` defaultMessage: `
An icon that has depicts pieces of a block selected mimicking the census block census tracts and select
`, `,
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 first icon in this side panel`, description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show and select',
}, },
ALT_TEXT_ICON2: { PARA1_PART5: {
id: 'explore.map.page.side.panel.info.alt.text.icon2', id: 'explore.map.page.side.panel.info.para.1.part.5',
defaultMessage: ` defaultMessage: `
An icon that a bell curve or gaussian distribution to see information about any census tract
`, `,
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 second icon in this side panel`, description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show to see information about any census tract',
}, },
ALT_TEXT_ICON3: { HEADING2: {
id: 'explore.map.page.side.panel.info.alt.text.icon3', id: 'explore.map.page.side.panel.info.heading2',
defaultMessage: ` defaultMessage: `
An icon that depicts a part of pie chart being removed Things to know:
`, `,
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 third icon in this side panel`, 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:`,
}, },
ALT_TEXT_ICON4: { PARA2_PART1: {
id: 'explore.map.page.side.panel.info.alt.text.icon4', id: 'explore.map.page.side.panel.info.para.2.part.1',
defaultMessage: ` defaultMessage: `
An icon that has an up arrow and a down arrow The tool uses census tracts
`, `,
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 forth icon in this side panel`, description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show The tool uses census tracts',
},
PARA2_PART2: {
id: 'explore.map.page.side.panel.info.para.2.part.2',
defaultMessage: `
. Census tracts are a small unit of geography. They make it possible to display data consistenly across the nation.
`,
description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Census tracts are a small unit of geography. They make it possible to display data consistenly across the nation.',
},
PARA3_PART1: {
id: 'explore.map.page.side.panel.info.para.3.part.1',
defaultMessage: `
Communities that are disadvantaged live in tracts that experience burdens. These tracts are highlighted in a blueish gray color
`,
description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Communities that are disadvantaged live in tracts that experience burdens. These tracts are highlighted in a blueish gray color',
},
PARA3_PART2: {
id: 'explore.map.page.side.panel.info.para.3.part.2',
defaultMessage: `
on the map. This color is an opacity. This is so information about the map can be seen.
`,
description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show on the map. This color is an opacity. This is so information about the map can be seen.',
},
PARA4_PART1: {
id: 'explore.map.page.side.panel.info.para.4.part.1',
defaultMessage: `
The tool uses percentiles
`,
description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show The tool uses percentiles',
},
PARA4_PART2: {
id: 'explore.map.page.side.panel.info.para.4.part.2',
defaultMessage: `
, percentages
`,
description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show percentages',
},
PARA4_PART3: {
id: 'explore.map.page.side.panel.info.para.4.part.3',
defaultMessage: `
, or a simple yes/no to indicate how much burden the communities are experiencing in each tract.
`,
description: '`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show or a simple yes/no to indicate how much burden the communities are experiencing in each tract.',
}, },
}); });
export const SIDE_PANEL_INITIAL_STATE_PARA5 = <FormattedMessage export const SIDE_PANEL_INITIAL_STATE_PARA5 = <FormattedMessage
id={'explore.map.page.side.panel.info.para5'} id={'explore.map.page.side.panel.info.para5'}
defaultMessage={ ` defaultMessage={ `
Thresholds for each category determine if a tract should be identified as disadvantaged because it has exceeded a certain value for the relevant indicators. The tool also uses thresholds. If the tract meets or exceeds the threshold of any climate, environmental, or other burden <bold>AND</bold> it meets the threshold for the associated socioeconomic burden, then communites in the tract are considered disadvantaged.
`} `}
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`} 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={{
bold: COMMON_COPY.boldFn,
}}
/>; />;
export const SIDE_PANEL_INIT_STATE_ICON_ALT_TEXT = defineMessages({
PLUS: {
id: 'explore.map.page.side.panel.info.alt.text.icon.plus',
defaultMessage: `
a plus icon indicating that the user can zoom in
*`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a plus icon indicating that the user can zoom in`,
},
SEARCH: {
id: 'explore.map.page.side.panel.info.alt.text.icon.search',
defaultMessage: `
a magnifying glass icon informing the user can search
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a magnifying glass icon informing the user can search`,
},
LOCATE: {
id: 'explore.map.page.side.panel.info.alt.text.icon.locate',
defaultMessage: `
a gps icon informing the user can locate
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a gps icon informing the user can locate`,
},
MOUSE: {
id: 'explore.map.page.side.panel.info.alt.text.icon.mouse',
defaultMessage: `
a mouse arrow icon informing the user can use the mouse
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a mouse arrow icon informing the user can use the mouse`,
},
TRACT: {
id: 'explore.map.page.side.panel.info.alt.text.icon.tract',
defaultMessage: `
a tract icon informing the user of census tracts
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a tract icon informing the user of census tracts`,
},
DAC_CIRCLE: {
id: 'explore.map.page.side.panel.info.alt.text.icon.dac.circle',
defaultMessage: `
a blue circle icon informing the user of what a disadvantaged community is depicted as
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a blue circle icon informing the user of what a disadvantaged community is depicted as`,
},
BELL_CURVE: {
id: 'explore.map.page.side.panel.info.alt.text.icon.bell',
defaultMessage: `
An icon that a bell curve or gaussian distribution
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show An icon that a bell curve or gaussian distribution`,
},
PIE_CHART: {
id: 'explore.map.page.side.panel.info.alt.text.icon.pie',
defaultMessage: `
An icon that depicts a part of pie chart being removed
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show An icon that depicts a part of pie chart being removed`,
},
UP_ARROW: {
id: 'explore.map.page.side.panel.info.alt.text.icon.up.arrow',
defaultMessage: `
An icon that has an up arrow and a down arrow
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show An icon that has an up arrow and a down arrow`,
},
});
export const SIDE_PANEL_VERION = { export const SIDE_PANEL_VERION = {
TITLE: <FormattedMessage TITLE: <FormattedMessage
id={'explore.map.page.side.panel.version.title'} id={'explore.map.page.side.panel.version.title'}

121
client/src/data/getOSBaseMap.tsx
View file

@ -1,8 +1,6 @@
import {Style} from 'maplibre-gl'; import {Style} from 'maplibre-gl';
import {featureURLForTilesetName} from '../components/MapTractLayers/MapTractLayers'; import {featureURLForTilesetName} from '../components/MapTractLayers/MapTractLayers';
import {tribalURL} from '../components/MapTribalLayers/MapTribalLayers';
import * as constants from '../data/constants'; import * as constants from '../data/constants';
// *********** OPEN SOURCE BASE MAP CONSTANTS *************** // *********** OPEN SOURCE BASE MAP CONSTANTS ***************
@ -29,128 +27,15 @@ const cartoLightBaseLayer = {
// *********** OPEN SOURCE STATIC MAP STYLES *************** // *********** OPEN SOURCE STATIC MAP STYLES ***************
/** /**
* This function will be called when there is no MapBox token found. This function will * This function will be called when there is no MapBox token found. This function will
* return the open source base map along with styles for the chosen source. We currently * return the open source base map along with styles for the chosen source.
* have two sources, either the census tracts or the tribal layer.
* * * *
* This function returns a Style in accordance to JSON spec of MapBox * This function returns a Style in accordance to JSON spec of MapBox
* https://docs.mapbox.com/mapbox-gl-js/style-spec/ * https://docs.mapbox.com/mapbox-gl-js/style-spec/
* *
* @param {boolean} censusSelected
* @return {Style} * @return {Style}
*/ */
export const getOSBaseMap = ( export const getOSBaseMap = (): Style => {
censusSelected: boolean, return {
) : Style => {
return !censusSelected ? {
/**
* Tribal Source
*/
'version': 8,
/**
* Map Sources
* */
'sources': {
/**
* The base map source source allows us to define where the tiles can be fetched from.
*/
[constants.BASE_MAP_SOURCE_NAME]: {
'type': 'raster',
'tiles': cartoLightBaseLayer.noLabels,
'minzoom': constants.GLOBAL_MIN_ZOOM,
'maxzoom': constants.GLOBAL_MAX_ZOOM,
},
/**
* Tribal source
*/
[constants.TRIBAL_SOURCE_NAME]: {
'type': 'vector',
'promoteId': constants.TRIBAL_ID,
'tiles': [tribalURL()],
'minzoom': constants.TRIBAL_MIN_ZOOM,
'maxzoom': constants.TRIBAL_MAX_ZOOM,
},
// The labels source:
'labels': {
'type': 'raster',
'tiles': cartoLightBaseLayer.labelsOnly,
},
},
/**
* Tribal Layers
*/
'layers': [
// The baseMapLayer
{
'id': constants.BASE_MAP_LAYER_ID,
'source': constants.BASE_MAP_SOURCE_NAME,
'type': 'raster',
'minzoom': constants.GLOBAL_MIN_ZOOM,
'maxzoom': constants.GLOBAL_MAX_ZOOM,
},
/**
* Tribal layer
*/
{
'id': constants.TRIBAL_LAYER_ID,
'source': constants.TRIBAL_SOURCE_NAME,
'source-layer': constants.TRIBAL_SOURCE_LAYER,
'type': 'fill',
'paint': {
'fill-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
'fill-opacity': constants.HIGH_ZOOM_PRIORITIZED_FEATURE_FILL_OPACITY,
},
'minzoom': constants.TRIBAL_MIN_ZOOM,
'maxzoom': constants.TRIBAL_MAX_ZOOM,
},
/**
* Tribal layer - controls the border between features
*/
{
'id': constants.FEATURE_BORDER_LAYER_ID,
'source': constants.TRIBAL_SOURCE_NAME,
'source-layer': constants.TRIBAL_SOURCE_LAYER,
'type': 'line',
'paint': {
'line-color': constants.FEATURE_BORDER_COLOR,
'line-width': constants.FEATURE_BORDER_WIDTH,
'line-opacity': constants.FEATURE_BORDER_OPACITY},
'minzoom': constants.TRIBAL_MIN_ZOOM,
'maxzoom': constants.TRIBAL_MAX_ZOOM,
},
/**
* Alaska layer
*/
{
'id': constants.TRIBAL_ALASKA_POINTS_LAYER_ID,
'source': constants.TRIBAL_SOURCE_NAME,
'source-layer': constants.TRIBAL_SOURCE_LAYER,
'type': 'circle',
'filter': ['==', ['geometry-type'], 'Point'],
'paint': {
'circle-radius': constants.TRIBAL_ALASKA_CIRCLE_RADIUS,
'circle-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
'circle-opacity': constants.HIGH_ZOOM_PRIORITIZED_FEATURE_FILL_OPACITY,
'circle-stroke-color': constants.FEATURE_BORDER_COLOR,
'circle-stroke-width': constants.ALAKSA_POINTS_STROKE_WIDTH,
'circle-stroke-opacity': constants.FEATURE_BORDER_OPACITY,
},
'minzoom': constants.TRIBAL_MIN_ZOOM,
'maxzoom': constants.TRIBAL_MAX_ZOOM,
},
],
} :
{
'version': 8, 'version': 8,
/** /**

111
client/src/data/tribalToggleLayerOSMap.tsx Normal file
View file

@ -0,0 +1,111 @@
/**
* This file holds the tribal layer styling for the OS map in case we want to add the toggle back.
*/
// const tribal:any = {
// /**
// * Tribal Source
// */
// 'version': 8,
// /**
// * Map Sources
// * */
// 'sources': {
// /**
// * The base map source source allows us to define where the tiles can be fetched from.
// */
// [constants.BASE_MAP_SOURCE_NAME]: {
// 'type': 'raster',
// 'tiles': cartoLightBaseLayer.noLabels,
// 'minzoom': constants.GLOBAL_MIN_ZOOM,
// 'maxzoom': constants.GLOBAL_MAX_ZOOM,
// },
// /**
// * Tribal source
// */
// [constants.TRIBAL_SOURCE_NAME]: {
// 'type': 'vector',
// 'promoteId': constants.TRIBAL_ID,
// 'tiles': [tribalURL()],
// 'minzoom': constants.TRIBAL_MIN_ZOOM,
// 'maxzoom': constants.TRIBAL_MAX_ZOOM,
// },
// // The labels source:
// 'labels': {
// 'type': 'raster',
// 'tiles': cartoLightBaseLayer.labelsOnly,
// },
// },
// /**
// * Tribal Layers
// */
// 'layers': [
// // The baseMapLayer
// {
// 'id': constants.BASE_MAP_LAYER_ID,
// 'source': constants.BASE_MAP_SOURCE_NAME,
// 'type': 'raster',
// 'minzoom': constants.GLOBAL_MIN_ZOOM,
// 'maxzoom': constants.GLOBAL_MAX_ZOOM,
// },
// /**
// * Tribal layer
// */
// {
// 'id': constants.TRIBAL_LAYER_ID,
// 'source': constants.TRIBAL_SOURCE_NAME,
// 'source-layer': constants.TRIBAL_SOURCE_LAYER,
// 'type': 'fill',
// 'paint': {
// 'fill-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
// 'fill-opacity': constants.HIGH_ZOOM_PRIORITIZED_FEATURE_FILL_OPACITY,
// },
// 'minzoom': constants.TRIBAL_MIN_ZOOM,
// 'maxzoom': constants.TRIBAL_MAX_ZOOM,
// },
// /**
// * Tribal layer - controls the border between features
// */
// {
// 'id': constants.FEATURE_BORDER_LAYER_ID,
// 'source': constants.TRIBAL_SOURCE_NAME,
// 'source-layer': constants.TRIBAL_SOURCE_LAYER,
// 'type': 'line',
// 'paint': {
// 'line-color': constants.FEATURE_BORDER_COLOR,
// 'line-width': constants.FEATURE_BORDER_WIDTH,
// 'line-opacity': constants.FEATURE_BORDER_OPACITY},
// 'minzoom': constants.TRIBAL_MIN_ZOOM,
// 'maxzoom': constants.TRIBAL_MAX_ZOOM,
// },
// /**
// * Alaska layer
// */
// {
// 'id': constants.TRIBAL_ALASKA_POINTS_LAYER_ID,
// 'source': constants.TRIBAL_SOURCE_NAME,
// 'source-layer': constants.TRIBAL_SOURCE_LAYER,
// 'type': 'circle',
// 'filter': ['==', ['geometry-type'], 'Point'],
// 'paint': {
// 'circle-radius': constants.TRIBAL_ALASKA_CIRCLE_RADIUS,
// 'circle-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
// 'circle-opacity': constants.HIGH_ZOOM_PRIORITIZED_FEATURE_FILL_OPACITY,
// 'circle-stroke-color': constants.FEATURE_BORDER_COLOR,
// 'circle-stroke-width': constants.ALAKSA_POINTS_STROKE_WIDTH,
// 'circle-stroke-opacity': constants.FEATURE_BORDER_OPACITY,
// },
// 'minzoom': constants.TRIBAL_MIN_ZOOM,
// 'maxzoom': constants.TRIBAL_MAX_ZOOM,
// },
// ],
// };

114
client/src/intl/en.json
View file

@ -224,12 +224,8 @@
"description": "Navigate to the about page. This is Header navigate item to the public eng page" "description": "Navigate to the about page. This is Header navigate item to the public eng page"
}, },
"common.pages.header.title.line1": { "common.pages.header.title.line1": {
"defaultMessage": "Climate and Economic Justice", "defaultMessage": "Climate and Economic Justice Screening Tool",
"description": "Navigate to the about page. This is Title in nav header line 1 of 2" "description": "Navigate to the about page. This is Title in nav header"
},
"common.pages.header.title.line2": {
"defaultMessage": "Screening Tool",
"description": "Navigate to the about page. This is Title in nav header line 2 of 2"
}, },
"common.pages.header.tsd": { "common.pages.header.tsd": {
"defaultMessage": "Technical Support Document", "defaultMessage": "Technical Support Document",
@ -903,50 +899,98 @@
"defaultMessage": "Projected wildfire risk", "defaultMessage": "Projected wildfire risk",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk" "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk"
}, },
"explore.map.page.side.panel.info.alt.text.icon1": { "explore.map.page.side.panel.info.alt.text.icon.bell": {
"defaultMessage": "An icon that has depicts pieces of a block selected mimicking the census block census tracts",
"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 first icon in this side panel"
},
"explore.map.page.side.panel.info.alt.text.icon2": {
"defaultMessage": "An icon that a bell curve or gaussian distribution", "defaultMessage": "An icon that a bell curve or gaussian distribution",
"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 second icon in this side panel" "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show An icon that a bell curve or gaussian distribution"
}, },
"explore.map.page.side.panel.info.alt.text.icon3": { "explore.map.page.side.panel.info.alt.text.icon.dac.circle": {
"defaultMessage": "a blue circle icon informing the user of what a disadvantaged community is depicted as",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a blue circle icon informing the user of what a disadvantaged community is depicted as"
},
"explore.map.page.side.panel.info.alt.text.icon.locate": {
"defaultMessage": "a gps icon informing the user can locate",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a gps icon informing the user can locate"
},
"explore.map.page.side.panel.info.alt.text.icon.mouse": {
"defaultMessage": "a mouse arrow icon informing the user can use the mouse",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a mouse arrow icon informing the user can use the mouse"
},
"explore.map.page.side.panel.info.alt.text.icon.pie": {
"defaultMessage": "An icon that depicts a part of pie chart being removed", "defaultMessage": "An icon that depicts a part of pie chart being removed",
"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 third icon in this side panel" "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show An icon that depicts a part of pie chart being removed"
}, },
"explore.map.page.side.panel.info.alt.text.icon4": { "explore.map.page.side.panel.info.alt.text.icon.plus": {
"defaultMessage": "a plus icon indicating that the user can zoom in *",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a plus icon indicating that the user can zoom in"
},
"explore.map.page.side.panel.info.alt.text.icon.search": {
"defaultMessage": "a magnifying glass icon informing the user can search",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a magnifying glass icon informing the user can search"
},
"explore.map.page.side.panel.info.alt.text.icon.tract": {
"defaultMessage": "a tract icon informing the user of census tracts",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show a tract icon informing the user of census tracts"
},
"explore.map.page.side.panel.info.alt.text.icon.up.arrow": {
"defaultMessage": "An icon that has an up arrow and a down arrow", "defaultMessage": "An icon that has an up arrow and a down arrow",
"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 forth icon in this side panel" "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show An icon that has an up arrow and a down arrow"
}, },
"explore.map.page.side.panel.info.heading1": { "explore.map.page.side.panel.info.heading1": {
"defaultMessage": "Zoom in or search and select to see data about any census tract of interest", "defaultMessage": "How to use the map:",
"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 first paragraph of this side panel" "description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the first heading of the non-selected side panel"
}, },
"explore.map.page.side.panel.info.para1": { "explore.map.page.side.panel.info.heading2": {
"defaultMessage": "This tool identifies communities that are marginalized, underserved, and overburdened by pollution. These communities are located in census tracts that are at or above the thresholds in one or more of eight categories of criteria.", "defaultMessage": "Things to know:",
"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 first paragraph of this side panel" "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:"
}, },
"explore.map.page.side.panel.info.para2": { "explore.map.page.side.panel.info.para.1.part.1": {
"defaultMessage": "The tool uses census tracts that represent about 4,000 people, which is the smallest unit of geography for which consistent data can be displayed on the map.", "defaultMessage": "Zoom in",
"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 second paragraph of this side panel" "description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Zoom in"
}, },
"explore.map.page.side.panel.info.para3": { "explore.map.page.side.panel.info.para.1.part.2": {
"defaultMessage": "The tool ranks each census tract using percentiles that show how much burden each tract experiences relative to all other tracts, for each criterion.", "defaultMessage": ", or locate yourself",
"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 third paragraph of this side panel" "description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show or locate yourself"
}, },
"explore.map.page.side.panel.info.para4": { "explore.map.page.side.panel.info.para.1.part.4": {
"defaultMessage": "Percentages are used for certain variables, i.e. those relating to high school achievement rate and to the share of individuals not currently enrolled in higher education.", "defaultMessage": "and select",
"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 forth paragraph of this side panel" "description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show and select"
},
"explore.map.page.side.panel.info.para.1.part.5": {
"defaultMessage": "to see information about any census tract",
"description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show to see information about any census tract"
},
"explore.map.page.side.panel.info.para.2.part.1": {
"defaultMessage": "The tool uses census tracts",
"description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show The tool uses census tracts"
},
"explore.map.page.side.panel.info.para.2.part.2": {
"defaultMessage": ". Census tracts are a small unit of geography. They make it possible to display data consistenly across the nation.",
"description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Census tracts are a small unit of geography. They make it possible to display data consistenly across the nation."
},
"explore.map.page.side.panel.info.para.3.part.1": {
"defaultMessage": "Communities that are disadvantaged live in tracts that experience burdens. These tracts are highlighted in a blueish gray color",
"description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Communities that are disadvantaged live in tracts that experience burdens. These tracts are highlighted in a blueish gray color"
},
"explore.map.page.side.panel.info.para.3.part.2": {
"defaultMessage": "on the map. This color is an opacity. This is so information about the map can be seen.",
"description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show on the map. This color is an opacity. This is so information about the map can be seen."
},
"explore.map.page.side.panel.info.para.4.part.1": {
"defaultMessage": "The tool uses percentiles",
"description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show The tool uses percentiles"
},
"explore.map.page.side.panel.info.para.4.part.2": {
"defaultMessage": ", percentages",
"description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show percentages"
},
"explore.map.page.side.panel.info.para.4.part.3": {
"defaultMessage": ", or a simple yes/no to indicate how much burden the communities are experiencing in each tract.",
"description": "`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show or a simple yes/no to indicate how much burden the communities are experiencing in each tract."
}, },
"explore.map.page.side.panel.info.para5": { "explore.map.page.side.panel.info.para5": {
"defaultMessage": "Thresholds for each category determine if a tract should be identified as disadvantaged because it has exceeded a certain value for the relevant indicators.", "defaultMessage": "The tool also uses thresholds. If the tract meets or exceeds the threshold of any climate, environmental, or other burden <bold>AND</bold> it meets the threshold for the associated socioeconomic burden, then communites in the tract are considered disadvantaged.",
"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" "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.side.panel.info.title": {
"defaultMessage": "Things to know",
"description": "introductory text of ways to use the map"
},
"explore.map.page.side.panel.is.community.of.focus": { "explore.map.page.side.panel.is.community.of.focus": {
"defaultMessage": "Identified as disadvantaged?", "defaultMessage": "Identified as disadvantaged?",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show asking IF the communities is focused on" "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show asking IF the communities is focused on"

2
client/src/pages/about.tsx
View file

@ -5,7 +5,6 @@ import AboutCard from '../components/AboutCard/AboutCard';
import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer'; import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer';
import J40MainGridContainer from '../components/J40MainGridContainer'; import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout'; import Layout from '../components/layout';
import PublicEngageButton from '../components/PublicEngageButton';
import * as ABOUT_COPY from '../data/copy/about'; import * as ABOUT_COPY from '../data/copy/about';
import * as COMMON_COPY from '../data/copy/common'; import * as COMMON_COPY from '../data/copy/common';
@ -42,7 +41,6 @@ const AboutPage = ({location}: IAboutPageProps) => {
<section className={'page-heading'}> <section className={'page-heading'}>
<h1 data-cy={'about-page-heading'}>{intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}</h1> <h1 data-cy={'about-page-heading'}>{intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}</h1>
<PublicEngageButton />
</section> </section>
{/* Section 1 */} {/* Section 1 */}

2
client/src/pages/contact.tsx
View file

@ -6,7 +6,6 @@ import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout'; import Layout from '../components/layout';
import LinkTypeWrapper from '../components/LinkTypeWrapper'; import LinkTypeWrapper from '../components/LinkTypeWrapper';
import RequestForInfo from '../components/RequestForInfo'; import RequestForInfo from '../components/RequestForInfo';
import PublicEngageButton from '../components/PublicEngageButton';
import * as CONTACT_COPY from '../data/copy/contact'; import * as CONTACT_COPY from '../data/copy/contact';
import * as COMMON_COPY from '../data/copy/common'; import * as COMMON_COPY from '../data/copy/common';
@ -24,7 +23,6 @@ const ContactPage = ({location}: IContactPageProps) => {
<section className={'page-heading'}> <section className={'page-heading'}>
<h1>{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_HEADING)}</h1> <h1>{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
<PublicEngageButton />
</section> </section>
<Grid row gap={6}> <Grid row gap={6}>

2
client/src/pages/downloads.tsx
View file

@ -4,7 +4,6 @@ import {useIntl} from 'gatsby-plugin-intl';
import J40MainGridContainer from '../components/J40MainGridContainer'; import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout'; import Layout from '../components/layout';
import PublicEngageButton from '../components/PublicEngageButton';
import SubPageNav from '../components/SubPageNav'; import SubPageNav from '../components/SubPageNav';
import {useWindowSize} from 'react-use'; import {useWindowSize} from 'react-use';
@ -25,7 +24,6 @@ const DownloadsPage = ({location}: IDownloadsPageProps) => {
<section className={'page-heading'}> <section className={'page-heading'}>
<h1>{intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_HEADING1)}</h1> <h1>{intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_HEADING1)}</h1>
<PublicEngageButton />
</section> </section>
<Grid row gap className={'j40-mb5-mt3'}> <Grid row gap className={'j40-mb5-mt3'}>

2
client/src/pages/index.tsx
View file

@ -6,7 +6,6 @@ import HowYouCanHelp from '../components/HowYouCanHelp';
import J40MainGridContainer from '../components/J40MainGridContainer'; import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout'; import Layout from '../components/layout';
import MapWrapper from '../components/MapWrapper'; import MapWrapper from '../components/MapWrapper';
import PublicEngageButton from '../components/PublicEngageButton';
import * as EXPLORE_COPY from '../data/copy/explore'; import * as EXPLORE_COPY from '../data/copy/explore';
@ -26,7 +25,6 @@ const ExporeToolPage = ({location}: IMapPageProps) => {
<section className={'page-heading'}> <section className={'page-heading'}>
<h1>{intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}</h1> <h1>{intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
<PublicEngageButton />
</section> </section>
<Grid row gap className={'j40-mb5-mt3'}> <Grid row gap className={'j40-mb5-mt3'}>

2
client/src/pages/methodology.tsx
View file

@ -7,7 +7,6 @@ import DatasetContainer from '../components/DatasetContainer';
import J40MainGridContainer from '../components/J40MainGridContainer'; import J40MainGridContainer from '../components/J40MainGridContainer';
import MethodologyFormula from '../components/MethodologyFormula'; import MethodologyFormula from '../components/MethodologyFormula';
import Layout from '../components/layout'; import Layout from '../components/layout';
import PublicEngageButton from '../components/PublicEngageButton';
import SubPageNav from '../components/SubPageNav'; import SubPageNav from '../components/SubPageNav';
import {useWindowSize} from 'react-use'; import {useWindowSize} from 'react-use';
@ -29,7 +28,6 @@ const IndexPage = ({location}: MethodPageProps) => {
<section className={'page-heading'}> <section className={'page-heading'}>
<h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1> <h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1>
<PublicEngageButton />
</section> </section>
<Grid row gap className={'j40-mb5-mt3'}> <Grid row gap className={'j40-mb5-mt3'}>

41
client/src/pages/tests/__snapshots__/about.test.tsx.snap
View file

@ -146,11 +146,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -194,17 +196,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
data-testid="grid" data-testid="grid"
> >
<div> <div>
<div> Climate and Economic Justice Screening Tool
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div> </div>
</div> </div>
<div <div
@ -315,11 +307,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -348,27 +342,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
> >
About About
</h1> </h1>
<div>
<a
href="/en/public-engagement"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
<div>
<img
alt="an icon that represents a calendar"
src="test-file-stub"
/>
<div>
Public engagement
</div>
</div>
</button>
</a>
</div>
</section> </section>
<div <div
class="grid-row grid-gap-lg j40-aboutcard-container " class="grid-row grid-gap-lg j40-aboutcard-container "
@ -607,6 +580,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="j40-aboutcard-sm-link" class="j40-aboutcard-sm-link"
> >
<a <a
class="usa-link"
href="/en/methodology" href="/en/methodology"
> >
Methodology & data Methodology & data
@ -661,6 +635,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="j40-aboutcard-sm-link" class="j40-aboutcard-sm-link"
> >
<a <a
class="usa-link"
href="/en/" href="/en/"
> >
Explore the map Explore the map
@ -888,7 +863,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
class="footer-link-first-child" class="usa-link footer-link-first-child"
href="/en/public-engagement" href="/en/public-engagement"
> >
Engagement calendar Engagement calendar

40
client/src/pages/tests/__snapshots__/contact.test.tsx.snap
View file

@ -146,11 +146,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -194,17 +196,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
data-testid="grid" data-testid="grid"
> >
<div> <div>
<div> Climate and Economic Justice Screening Tool
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div> </div>
</div> </div>
<div <div
@ -315,11 +307,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -346,27 +340,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<h1> <h1>
Contact Contact
</h1> </h1>
<div>
<a
href="/en/public-engagement"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
<div>
<img
alt="an icon that represents a calendar"
src="test-file-stub"
/>
<div>
Public engagement
</div>
</div>
</button>
</a>
</div>
</section> </section>
<div <div
class="grid-row grid-gap-6" class="grid-row grid-gap-6"
@ -400,6 +373,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
To provide feedback about a specific census tract, either select the send feedback button after To provide feedback about a specific census tract, either select the send feedback button after
selecting a census tract on the selecting a census tract on the
<a <a
class="usa-link"
href="/en/" href="/en/"
> >
Explore the map Explore the map
@ -535,7 +509,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
class="footer-link-first-child" class="usa-link footer-link-first-child"
href="/en/public-engagement" href="/en/public-engagement"
> >
Engagement calendar Engagement calendar

42
client/src/pages/tests/__snapshots__/downloads.test.tsx.snap
View file

@ -146,11 +146,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -194,17 +196,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
data-testid="grid" data-testid="grid"
> >
<div> <div>
<div> Climate and Economic Justice Screening Tool
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div> </div>
</div> </div>
<div <div
@ -315,11 +307,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -346,27 +340,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<h1> <h1>
Downloads Downloads
</h1> </h1>
<div>
<a
href="/en/public-engagement"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
<div>
<img
alt="an icon that represents a calendar"
src="test-file-stub"
/>
<div>
Public engagement
</div>
</div>
</button>
</a>
</div>
</section> </section>
<div <div
class="grid-row grid-gap j40-mb5-mt3" class="grid-row grid-gap j40-mb5-mt3"
@ -386,6 +359,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<a <a
class="usa-link"
download="" download=""
href="//" href="//"
> >
@ -400,6 +374,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</p> </p>
<p> <p>
<a <a
class="usa-link"
download="" download=""
href="//" href="//"
> >
@ -413,6 +388,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</p> </p>
<p> <p>
<a <a
class="usa-link"
download="" download=""
href="//" href="//"
> >
@ -533,7 +509,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
class="footer-link-first-child" class="usa-link footer-link-first-child"
href="/en/public-engagement" href="/en/public-engagement"
> >
Engagement calendar Engagement calendar

18
client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap
View file

@ -146,11 +146,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -194,17 +196,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
data-testid="grid" data-testid="grid"
> >
<div> <div>
<div> Climate and Economic Justice Screening Tool
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div> </div>
</div> </div>
<div <div
@ -315,11 +307,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -428,7 +422,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
class="footer-link-first-child" class="usa-link footer-link-first-child"
href="/en/public-engagement" href="/en/public-engagement"
> >
Engagement calendar Engagement calendar

78
client/src/pages/tests/__snapshots__/methodology.test.tsx.snap
View file

@ -146,11 +146,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -194,17 +196,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
data-testid="grid" data-testid="grid"
> >
<div> <div>
<div> Climate and Economic Justice Screening Tool
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div> </div>
</div> </div>
<div <div
@ -315,11 +307,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -346,27 +340,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<h1> <h1>
Methodology Methodology
</h1> </h1>
<div>
<a
href="/en/public-engagement"
>
<button
class="usa-button"
data-testid="button"
type="button"
>
<div>
<img
alt="an icon that represents a calendar"
src="test-file-stub"
/>
<div>
Public engagement
</div>
</div>
</button>
</a>
</div>
</section> </section>
<div <div
class="grid-row grid-gap j40-mb5-mt3" class="grid-row grid-gap j40-mb5-mt3"
@ -471,18 +444,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#exp-agr-loss-rate" href="#exp-agr-loss-rate"
> >
expected agriculture loss rate expected agriculture loss rate
</a> </a>
OR OR
<a <a
class="usa-link"
href="#exp-bld-loss-rate" href="#exp-bld-loss-rate"
> >
expected building loss rate expected building loss rate
</a> </a>
OR OR
<a <a
class="usa-link"
href="#exp-pop-loss-rate" href="#exp-pop-loss-rate"
> >
expected population loss rate expected population loss rate
@ -496,12 +472,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -530,12 +508,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#energy-burden" href="#energy-burden"
> >
energy burden energy burden
</a> </a>
OR OR
<a <a
class="usa-link"
href="#pm-25" href="#pm-25"
> >
PM2.5 in the air PM2.5 in the air
@ -549,12 +529,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -585,12 +567,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#diesel-pm" href="#diesel-pm"
> >
diesel particulate matter exposure diesel particulate matter exposure
</a> </a>
or or
<a <a
class="usa-link"
href="#traffic-vol" href="#traffic-vol"
> >
traffic proximity and volume traffic proximity and volume
@ -606,12 +590,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -640,18 +626,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#lead-paint" href="#lead-paint"
> >
lead paint lead paint
</a> </a>
AND AND
<a <a
class="usa-link"
href="#median-home" href="#median-home"
> >
median home value median home value
</a> </a>
is at or less than the 90th percentile OR at or above the 90th percentile for the is at or less than the 90th percentile OR at or above the 90th percentile for the
<a <a
class="usa-link"
href="#house-burden" href="#house-burden"
> >
housing cost burden housing cost burden
@ -665,12 +654,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -699,18 +690,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#prox-haz" href="#prox-haz"
> >
proximity to hazardous waste facilities proximity to hazardous waste facilities
</a> </a>
OR OR
<a <a
class="usa-link"
href="#prox-npl" href="#prox-npl"
> >
proximity to National Priorities List (NPL) sites proximity to National Priorities List (NPL) sites
</a> </a>
OR OR
<a <a
class="usa-link"
href="#prox-rmp" href="#prox-rmp"
> >
proximity to Risk Management Plan (RMP) facilities proximity to Risk Management Plan (RMP) facilities
@ -724,12 +718,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -758,6 +754,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#waste-water" href="#waste-water"
> >
wastewater discharge wastewater discharge
@ -771,12 +768,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -805,24 +804,28 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#asthma" href="#asthma"
> >
asthma asthma
</a> </a>
OR OR
<a <a
class="usa-link"
href="#diabetes" href="#diabetes"
> >
diabetes diabetes
</a> </a>
OR OR
<a <a
class="usa-link"
href="#heart-disease" href="#heart-disease"
> >
heart disease heart disease
</a> </a>
OR OR
<a <a
class="usa-link"
href="#life-exp" href="#life-exp"
> >
low life expectancy low life expectancy
@ -836,12 +839,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
is at or above the 65th percentile for is at or above the 65th percentile for
<a <a
class="usa-link"
href="#low-income" href="#low-income"
> >
low income low income
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -870,24 +875,28 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
at or above the 90th percentile for at or above the 90th percentile for
<a <a
class="usa-link"
href="#low-med-inc" href="#low-med-inc"
> >
low median income low median income
</a> </a>
as a percentage of area median income OR as a percentage of area median income OR
<a <a
class="usa-link"
href="#ling-iso" href="#ling-iso"
> >
linguistic isolation linguistic isolation
</a> </a>
OR OR
<a <a
class="usa-link"
href="#unemploy" href="#unemploy"
> >
unemployment unemployment
</a> </a>
OR percentage of individuals in households at or below 100% Federal OR percentage of individuals in households at or below 100% Federal
<a <a
class="usa-link"
href="#poverty" href="#poverty"
> >
poverty poverty
@ -901,12 +910,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</strong> </strong>
10% or more of adults 25 or older have not attained a 10% or more of adults 25 or older have not attained a
<a <a
class="usa-link"
href="#high-school" href="#high-school"
> >
high school degree high school degree
</a> </a>
AND 80% or more of individuals 15 or older are not enrolled in AND 80% or more of individuals 15 or older are not enrolled in
<a <a
class="usa-link"
href="#high-ed-enroll-rate" href="#high-ed-enroll-rate"
> >
higher education higher education
@ -2292,6 +2303,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div> </div>
<div> <div>
<a <a
class="usa-link"
href="/en/methodology" href="/en/methodology"
> >
Return to top Return to top
@ -2377,7 +2389,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
class="footer-link-first-child" class="usa-link footer-link-first-child"
href="/en/public-engagement" href="/en/public-engagement"
> >
Engagement calendar Engagement calendar

18
client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap
View file

@ -146,11 +146,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -194,17 +196,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
data-testid="grid" data-testid="grid"
> >
<div> <div>
<div> Climate and Economic Justice Screening Tool
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div> </div>
</div> </div>
<div <div
@ -315,11 +307,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -1026,7 +1020,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
class="footer-link-first-child" class="usa-link footer-link-first-child"
href="/en/public-engagement" href="/en/public-engagement"
> >
Engagement calendar Engagement calendar

18
client/src/pages/tests/__snapshots__/techSupportDoc.test.tsx.snap
View file

@ -146,11 +146,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -194,17 +196,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
data-testid="grid" data-testid="grid"
> >
<div> <div>
<div> Climate and Economic Justice Screening Tool
Climate and Economic Justice
</div>
<div>
<div>
Screening Tool
</div>
<div>
BETA
</div>
</div>
</div> </div>
</div> </div>
<div <div
@ -315,11 +307,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
src="test-file-stub" src="test-file-stub"
/> />
<a <a
class="usa-link"
href="#" href="#"
> >
English English
</a> </a>
<a <a
class="usa-link"
href="#" href="#"
> >
Español Español
@ -428,7 +422,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="usa-footer__secondary-link" class="usa-footer__secondary-link"
> >
<a <a
class="footer-link-first-child" class="usa-link footer-link-first-child"
href="/en/public-engagement" href="/en/public-engagement"
> >
Engagement calendar Engagement calendar