mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-14 02:54:18 -07:00
Update version number on frontend (#730)
* Update version number on frontend - add verion to download packet - add verison to side panel - update snaphots - add version to constant file * Add minor UI changes from QA - adjust copy in download package - update tests * Refactor all intl code and will add page tests - remove all copy app wide and place into respective data/copy folder - adds tests for each page - allow product to make copy changes in one place - prepare for spanish language effort
This commit is contained in:
Vim
GitHub
parent
b1a4d26be8
commit
53c2d98eaa
41 changed files with 3992 additions and 1050 deletions
|
|
@ -6,12 +6,13 @@ import LinkTypeWrapper from '../LinkTypeWrapper';
|
|||
interface AboutCardProps {
|
||||
imgSrc: string;
|
||||
header: string;
|
||||
size?: 'small' | 'large';
|
||||
size: 'small' | 'large';
|
||||
linkText?: string;
|
||||
url?: string;
|
||||
openUrlNewTab?: boolean;
|
||||
className?: string;
|
||||
internal?:boolean;
|
||||
// body:string | React.ReactNode;
|
||||
}
|
||||
|
||||
const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
|
||||
|
|
@ -30,7 +31,7 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
|
|||
|
||||
<Grid tablet={{col: 9}}>
|
||||
<Grid row>
|
||||
<h2 data-cy={'about-screen-tool-heading'}>{props.header} </h2>
|
||||
<h2 data-cy={'about-screen-tool-heading'}>{props.header}</h2>
|
||||
{props.children}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
|
@ -54,7 +55,7 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
|
|||
<Grid tablet={{col: 9}}>
|
||||
<Grid row>
|
||||
<h3>{props.header}</h3>
|
||||
<p>{props.children}</p>
|
||||
{props.children}
|
||||
<div className={'j40-aboutcard-sm-link'}>
|
||||
<LinkTypeWrapper
|
||||
linkText={props.linkText}
|
||||
|
|
|
|||
|
|
@ -31,9 +31,7 @@ exports[`rendering of the AboutCard checks if component renders 1`] = `
|
|||
<h3>
|
||||
Test Header
|
||||
</h3>
|
||||
<p>
|
||||
Content body of the action card.
|
||||
</p>
|
||||
Content body of the action card.
|
||||
<div
|
||||
class="j40-aboutcard-sm-link"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,64 +3,34 @@ import {Alert} from '@trussworks/react-uswds';
|
|||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
import * as styles from './alertWrapper.module.scss';
|
||||
import {defineMessages} from 'react-intl';
|
||||
import * as COMMON_COPY from '../../data/copy/common';
|
||||
|
||||
interface IAlertWrapperProps {
|
||||
showBetaAlert?: boolean, // defaults to true
|
||||
showBetaAlert?: boolean, // defaults to false
|
||||
showLimitedDataAlert?: boolean, // defaults to false
|
||||
}
|
||||
|
||||
// use like this:
|
||||
// <AlertWrapper showBetaAlert={true} showLimitedDataAlert={true}/>
|
||||
// <AlertWrapper showBetaAlert={true}/>
|
||||
|
||||
const AlertWrapper = ({
|
||||
showBetaAlert = false,
|
||||
showLimitedDataAlert = false,
|
||||
}: IAlertWrapperProps) => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
alertBetaTitle: {
|
||||
id: 'alert.alertBetaTitle',
|
||||
defaultMessage:
|
||||
'Public beta',
|
||||
description: 'Title for an alert inform users that datasets may change',
|
||||
},
|
||||
alertBetaBody: {
|
||||
id: 'alert.alertBetaBody',
|
||||
defaultMessage:
|
||||
'This website may be continuously updated',
|
||||
description: 'Body for an alert inform users that datasets may change',
|
||||
},
|
||||
alertDataLimitedTitle: {
|
||||
id: 'alert.alertDataLimitedTitle',
|
||||
defaultMessage:
|
||||
'Limited data sources',
|
||||
description: 'Title for an alert inform users that datasets may change',
|
||||
},
|
||||
alertDataLimitedBody: {
|
||||
id: 'alert.alertDataLimitedBody',
|
||||
defaultMessage:
|
||||
'Datasets may be added, updated, or removed.',
|
||||
description: 'Body for an alert inform users that datasets may change',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.alertWrapper}>
|
||||
{showBetaAlert && (
|
||||
<Alert className={'j40-sitealert'} type="info">
|
||||
<span className={'j40-sitealert-title'}>{intl.formatMessage(messages.alertBetaTitle)}</span>
|
||||
<span className={'j40-sitealert-body'}> — {intl.formatMessage(messages.alertBetaBody)}</span>
|
||||
<span className={'j40-sitealert-title'}>{intl.formatMessage(COMMON_COPY.ALERTS.BETA_TITLE)}</span>
|
||||
<span className={'j40-sitealert-body'}> — {intl.formatMessage(COMMON_COPY.ALERTS.BETA_BODY)}</span>
|
||||
<br/>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{showLimitedDataAlert && (
|
||||
<Alert className={'j40-sitealert'} type="warning">
|
||||
<span className={'j40-sitealert-title'}>{intl.formatMessage(messages.alertDataLimitedTitle)}</span>
|
||||
<span className={'j40-sitealert-body'}> — {intl.formatMessage(messages.alertDataLimitedBody)}</span>
|
||||
<span className={'j40-sitealert-title'}>{intl.formatMessage(COMMON_COPY.ALERTS.LIMITED_TITLE)}</span>
|
||||
<span className={'j40-sitealert-body'}> — {intl.formatMessage(COMMON_COPY.ALERTS.LIMITED_BODY)}</span>
|
||||
<br/>
|
||||
</Alert>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// External Libs:
|
||||
import * as React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
|
||||
// Components:
|
||||
// import {Accordion} from '@trussworks/react-uswds';
|
||||
|
|
@ -10,6 +9,8 @@ import {defineMessages} from 'react-intl';
|
|||
// Styles and constants
|
||||
import * as styles from './areaDetail.module.scss';
|
||||
import * as constants from '../../data/constants';
|
||||
import * as EXPLORE_COPY from '../../data/copy/explore';
|
||||
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||
|
||||
export const readablePercentile = (percentile: number) => {
|
||||
return Math.round(percentile * 100);
|
||||
|
|
@ -37,13 +38,13 @@ export const getCategorization = (percentile: number) => {
|
|||
let categoryCircleStyle;
|
||||
|
||||
if (percentile >= constants.SCORE_BOUNDARY_PRIORITIZED ) {
|
||||
categorization = 'Community of focus';
|
||||
categorization = EXPLORE_COPY.COMMUNITY.OF_FOCUS;
|
||||
categoryCircleStyle = styles.prioritized;
|
||||
} else if (constants.SCORE_BOUNDARY_THRESHOLD <= percentile && percentile < constants.SCORE_BOUNDARY_PRIORITIZED) {
|
||||
categorization = 'Not a community of focus';
|
||||
categorization = EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS;
|
||||
categoryCircleStyle = styles.threshold;
|
||||
} else {
|
||||
categorization = 'Not a community of focus';
|
||||
categorization = EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS;
|
||||
categoryCircleStyle = styles.nonPrioritized;
|
||||
}
|
||||
return [categorization, categoryCircleStyle];
|
||||
|
|
@ -55,140 +56,6 @@ interface IAreaDetailProps {
|
|||
|
||||
const AreaDetail = ({properties}:IAreaDetailProps) => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
percentile: {
|
||||
id: 'areaDetail.priorityInfo.percentile',
|
||||
defaultMessage: 'percentile',
|
||||
description: 'the percentil of the feature selected',
|
||||
},
|
||||
categorization: {
|
||||
id: 'areaDetail.priorityInfo.categorization',
|
||||
defaultMessage: 'Categorization',
|
||||
description: 'the categorization of prioritized, threshold or non-prioritized',
|
||||
},
|
||||
censusBlockGroup: {
|
||||
id: 'areaDetail.geographicInfo.censusBlockGroup',
|
||||
defaultMessage: 'Census block group:',
|
||||
description: 'the census block group id number of the feature selected',
|
||||
},
|
||||
county: {
|
||||
id: 'areaDetail.geographicInfo.county',
|
||||
defaultMessage: 'County:',
|
||||
description: 'the county of the feature selected',
|
||||
},
|
||||
state: {
|
||||
id: 'areaDetail.geographicInfo.state',
|
||||
defaultMessage: 'State: ',
|
||||
description: 'the state of the feature selected',
|
||||
},
|
||||
population: {
|
||||
id: 'areaDetail.geographicInfo.population',
|
||||
defaultMessage: 'Population:',
|
||||
description: 'the population of the feature selected',
|
||||
},
|
||||
indicatorColumnHeader: {
|
||||
id: 'areaDetail.indicators.indicatorColumnHeader',
|
||||
defaultMessage: 'Indicator',
|
||||
description: 'the population of the feature selected',
|
||||
},
|
||||
percentileColumnHeader: {
|
||||
id: 'areaDetail.indicators.percentileColumnHeader',
|
||||
defaultMessage: 'Percentile (0-100)',
|
||||
description: 'the population of the feature selected',
|
||||
},
|
||||
poverty: {
|
||||
id: 'areaDetail.indicator.poverty',
|
||||
defaultMessage: 'Poverty',
|
||||
description: 'Household income is less than or equal to twice the federal "poverty level"',
|
||||
},
|
||||
areaMedianIncome: {
|
||||
id: 'areaDetail.indicator.areaMedianIncome',
|
||||
defaultMessage: 'Area Median Income',
|
||||
description: 'calculated as percent of the area median income',
|
||||
},
|
||||
education: {
|
||||
id: 'areaDetail.indicator.education',
|
||||
defaultMessage: 'Education, less than high school',
|
||||
description: 'Percent of people age 25 or older that didn’t get a high school diploma',
|
||||
},
|
||||
linguisticIsolation: {
|
||||
id: 'areaDetail.indicator.linguisticIsolation',
|
||||
defaultMessage: 'Linguistic isolation',
|
||||
description: 'Households in which all members speak a non-English language and ' +
|
||||
'speak English less than "very well"',
|
||||
},
|
||||
unemployment: {
|
||||
id: 'areaDetail.indicator.unemployment',
|
||||
defaultMessage: 'Unemployment rate',
|
||||
description: 'Number of unemployed people as a percentage of the labor force',
|
||||
},
|
||||
asthma: {
|
||||
id: 'areaDetail.indicator.asthma',
|
||||
defaultMessage: 'Asthma',
|
||||
description: 'have asthma or been diagnosed by a doctor to have asthma',
|
||||
},
|
||||
diabetes: {
|
||||
id: 'areaDetail.indicator.diabetes',
|
||||
defaultMessage: 'Diabetes',
|
||||
description: 'diabetes from dr or nurse',
|
||||
},
|
||||
dieselPartMatter: {
|
||||
id: 'areaDetail.indicator.dieselPartMatter',
|
||||
defaultMessage: 'Diesel particulate matter',
|
||||
description: 'Diesel particulate matter level in air',
|
||||
},
|
||||
energyBurden: {
|
||||
id: 'areaDetail.indicator.energyBurden',
|
||||
defaultMessage: 'Energy burden',
|
||||
description: 'Average annual energy cost ($) divided by household income',
|
||||
},
|
||||
femaRisk: {
|
||||
id: 'areaDetail.indicator.femaRisk',
|
||||
defaultMessage: 'FEMA Risk Index',
|
||||
description: 'Risk based on 18 natural hazard types, in addition to a'+
|
||||
"community's social vulnerability and community resilience",
|
||||
},
|
||||
heartDisease: {
|
||||
id: 'areaDetail.indicator.heartDisease',
|
||||
defaultMessage: 'Heart disease',
|
||||
description: 'People ages 18 and up who report ever having been told by a' +
|
||||
'doctor, nurse, or other health professionals that they had angina or coronary heart disease',
|
||||
},
|
||||
houseBurden: {
|
||||
id: 'areaDetail.indicator.houseBurden',
|
||||
defaultMessage: 'Housing cost burden',
|
||||
description: 'People ages 18 and up who report having been told by a doctor,' +
|
||||
' nurse, or other health professionals that they have diabetes other than diabetes during pregnancy',
|
||||
},
|
||||
leadPaint: {
|
||||
id: 'areaDetail.indicator.leadPaint',
|
||||
defaultMessage: 'Lead paint',
|
||||
description: 'Housing units built pre-1960, used as an indicator of potential'+
|
||||
' lead paint exposure in homes',
|
||||
},
|
||||
lifeExpect: {
|
||||
id: 'areaDetail.indicator.lifeExpect',
|
||||
defaultMessage: 'Life expectancy',
|
||||
description: 'Estimated years of life expectancy',
|
||||
},
|
||||
pm25: {
|
||||
id: 'areaDetail.indicator.pm25',
|
||||
defaultMessage: 'PM2.5',
|
||||
description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
|
||||
},
|
||||
trafficVolume: {
|
||||
id: 'areaDetail.indicator.trafficVolume',
|
||||
defaultMessage: 'Traffic proximity and volume',
|
||||
description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
|
||||
' divided by distance in meters',
|
||||
},
|
||||
wasteWater: {
|
||||
id: 'areaDetail.indicator.wasteWater',
|
||||
defaultMessage: 'Wastewater discharge',
|
||||
description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
|
||||
' kilometers',
|
||||
},
|
||||
});
|
||||
|
||||
const score = properties[constants.SCORE_PROPERTY_HIGH] as number;
|
||||
const blockGroup = properties[constants.GEOID_PROPERTY];
|
||||
|
|
@ -204,99 +71,78 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
|
||||
// Todo: Ticket #367 will be replacing descriptions with YAML file
|
||||
const areaMedianIncome:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.areaMedianIncome),
|
||||
description: 'Median income of the census block group calculated as a percent of the metropolitan'+
|
||||
" area’s or state's median income",
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.AREA_MEDIAN_INCOME),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.AREA_MEDIAN_INCOME),
|
||||
value: properties[constants.POVERTY_PROPERTY_PERCENTILE],
|
||||
};
|
||||
const eduInfo:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.education),
|
||||
description: 'Percent of people age 25 or older that didn’t get a high school diploma',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EDUCATION),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EDUCATION),
|
||||
value: properties[constants.EDUCATION_PROPERTY_PERCENTILE],
|
||||
};
|
||||
const poverty:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.poverty),
|
||||
description: "Percent of a block group's population in households where the household income" +
|
||||
' is at or below 100% of the federal poverty level',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY),
|
||||
value: properties[constants.POVERTY_PROPERTY_PERCENTILE],
|
||||
};
|
||||
// const linIsoInfo:indicatorInfo = {
|
||||
// label: intl.formatMessage(messages.linguisticIsolation),
|
||||
// eslint-disable-next-line max-len
|
||||
// description: 'Households in which all members speak a non-English language and speak English less than "very well"',
|
||||
// value: properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE],
|
||||
// };
|
||||
// const umemployInfo:indicatorInfo = {
|
||||
// label: intl.formatMessage(messages.unemployment),
|
||||
// description: 'Number of unemployed people as a percentage of the labor force',
|
||||
// value: properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE],
|
||||
// };
|
||||
const asthma:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.asthma),
|
||||
description: 'People who answer “yes” to both of the questions: “Have you ever been told by' +
|
||||
' a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?"',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
|
||||
value: properties[constants.ASTHMA_PERCENTILE],
|
||||
};
|
||||
const diabetes:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.diabetes),
|
||||
description: 'People ages 18 and up who report having been told by a doctor, nurse, or other' +
|
||||
' health professionals that they have diabetes other than diabetes during pregnancy',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
|
||||
value: properties[constants.DIABETES_PERCENTILE],
|
||||
};
|
||||
const dieselPartMatter:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.dieselPartMatter),
|
||||
description: 'Mixture of particles that is part of diesel exhaust in the air',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER),
|
||||
value: properties[constants.DIESEL_MATTER_PERCENTILE],
|
||||
};
|
||||
const lifeExpect:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.lifeExpect),
|
||||
description: 'Estimated years of life expectancy',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LIFE_EXPECT),
|
||||
value: properties[constants.LIFE_PERCENTILE],
|
||||
};
|
||||
const energyBurden:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.energyBurden),
|
||||
description: 'Average annual energy cost ($) divided by household income',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
|
||||
value: properties[constants.ENERGY_PERCENTILE],
|
||||
};
|
||||
const pm25:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.pm25),
|
||||
description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PM_2_5),
|
||||
value: properties[constants.PM25_PERCENTILE],
|
||||
};
|
||||
const leadPaint:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.leadPaint),
|
||||
description: 'Housing units built pre-1960, used as an indicator of potential'+
|
||||
' lead paint exposure in homes',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
|
||||
value: properties[constants.LEAD_PAINT_PERCENTILE],
|
||||
};
|
||||
const trafficVolume:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.trafficVolume),
|
||||
description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
|
||||
' divided by distance in meters',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME),
|
||||
value: properties[constants.TRAFFIC_PERCENTILE],
|
||||
};
|
||||
const wasteWater:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.wasteWater),
|
||||
description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
|
||||
' kilometers',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER),
|
||||
value: properties[constants.WASTEWATER_PERCENTILE],
|
||||
};
|
||||
const femaRisk:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.femaRisk),
|
||||
description: 'Expected Annual Loss Score, which is the average economic loss in dollars' +
|
||||
' resulting from natural hazards each year.',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FEMA_RISK),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FEMA_RISK),
|
||||
value: properties[constants.FEMA_PERCENTILE],
|
||||
};
|
||||
const heartDisease:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.heartDisease),
|
||||
description: 'People ages 18 and up who report ever having been told by a' +
|
||||
' doctor, nurse, or other health professionals that they had angina or coronary heart disease',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HEART_DISEASE),
|
||||
value: properties[constants.HEART_PERCENTILE],
|
||||
};
|
||||
const houseBurden:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.houseBurden),
|
||||
description: 'Households that are low income and spend more than 30% of their income on' +
|
||||
' housing costs',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
|
||||
value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE],
|
||||
};
|
||||
|
||||
|
|
@ -313,19 +159,27 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
<aside className={styles.areaDetailContainer} data-cy={'aside'}>
|
||||
<ul className={styles.censusRow}>
|
||||
<li>
|
||||
<span className={styles.censusLabel}>{intl.formatMessage(messages.censusBlockGroup)} </span>
|
||||
<span className={styles.censusLabel}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.CENSUS_BLOCK_GROUP)}
|
||||
</span>
|
||||
<span className={styles.censusText}>{blockGroup}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={styles.censusLabel}>{intl.formatMessage(messages.county)} </span>
|
||||
<span className={styles.censusLabel}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.COUNTY)}
|
||||
</span>
|
||||
<span className={styles.censusText}>{countyName}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={styles.censusLabel}>{intl.formatMessage(messages.state)}</span>
|
||||
<span className={styles.censusLabel}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.STATE)}
|
||||
</span>
|
||||
<span className={styles.censusText}>{stateName}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={styles.censusLabel}>{intl.formatMessage(messages.population)} </span>
|
||||
<span className={styles.censusLabel}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.POPULATION)}
|
||||
</span>
|
||||
<span className={styles.censusText}>{population.toLocaleString()}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -334,10 +188,15 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
<div className={categoryCircleStyle} />
|
||||
<h3>{categorization}</h3>
|
||||
</div>
|
||||
<p className={"secondary"}>version {METHODOLOGY_COPY.VERSION_NUMBER}</p>
|
||||
</div>
|
||||
<div className={styles.divider}>
|
||||
<h6>{intl.formatMessage(messages.indicatorColumnHeader)}</h6>
|
||||
<h6>{intl.formatMessage(messages.percentileColumnHeader)}</h6>
|
||||
<h6>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.INDICATOR_COLUMN_HEADER)}
|
||||
</h6>
|
||||
<h6>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PERCENTILE_COLUMN_HEADER)}
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
|
|||
<ul>
|
||||
<li>
|
||||
<span>
|
||||
Census block group:
|
||||
Census block group:
|
||||
</span>
|
||||
<span>
|
||||
98729374234
|
||||
|
|
@ -16,7 +16,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
|
|||
</li>
|
||||
<li>
|
||||
<span>
|
||||
County:
|
||||
County:
|
||||
</span>
|
||||
<span />
|
||||
</li>
|
||||
|
|
@ -28,7 +28,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
|
|||
</li>
|
||||
<li>
|
||||
<span>
|
||||
Population:
|
||||
Population:
|
||||
</span>
|
||||
<span>
|
||||
3,435,435
|
||||
|
|
@ -42,6 +42,11 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
|
|||
Community of focus
|
||||
</h3>
|
||||
</div>
|
||||
<p
|
||||
class="secondary"
|
||||
>
|
||||
version 0.1
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h6>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@ import * as React from 'react';
|
|||
import {render} from '@testing-library/react';
|
||||
import AreaDetail, {getCategorization, readablePercentile} from '..';
|
||||
import {LocalizedComponent} from '../../../test/testHelpers';
|
||||
|
||||
import * as constants from '../../../data/constants';
|
||||
import * as EXPLORE_COPY from '../../../data/copy/explore';
|
||||
|
||||
describe('rendering of the AreaDetail', () => {
|
||||
const properties = {
|
||||
|
|
@ -37,14 +39,14 @@ describe('tests the readablePercentile function', () => {
|
|||
|
||||
describe('tests the getCategorization function', () => {
|
||||
it(`should equal Community of focus for value >= ${constants.SCORE_BOUNDARY_LOW}`, () => {
|
||||
expect(getCategorization(.756)).toEqual(['Community of focus', undefined]);
|
||||
expect(getCategorization(.756)).toEqual([EXPLORE_COPY.COMMUNITY.OF_FOCUS, undefined]);
|
||||
});
|
||||
|
||||
it(`should equal Threshold for .60 <= value < ${constants.SCORE_BOUNDARY_THRESHOLD}`, () => {
|
||||
expect(getCategorization(.65)).toEqual(['Not a community of focus', undefined]);
|
||||
expect(getCategorization(.65)).toEqual([EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS, undefined]);
|
||||
});
|
||||
|
||||
it(`should equal Non-prioritized for value < ${constants.SCORE_BOUNDARY_PRIORITIZED}`, () => {
|
||||
expect(getCategorization(.53)).toEqual(['Not a community of focus', undefined]);
|
||||
expect(getCategorization(.53)).toEqual([EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS, undefined]);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
|
||||
import * as styles from './datasetCard.module.scss';
|
||||
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||
|
||||
interface IDatasetCardProps {
|
||||
datasetCardProps: { [key:string]: string }
|
||||
|
|
@ -10,23 +11,6 @@ interface IDatasetCardProps {
|
|||
|
||||
const DatasetCard = ({datasetCardProps, additionalIndicator}:IDatasetCardProps) => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
dataResolution: {
|
||||
id: 'datasetCard.dataResolution',
|
||||
defaultMessage: 'Data resolution: ',
|
||||
description: 'label associated with explaining the card',
|
||||
},
|
||||
dataSource: {
|
||||
id: 'datasetCard.dataSource',
|
||||
defaultMessage: 'Data source: ',
|
||||
description: 'label associated with explaining the card',
|
||||
},
|
||||
dataDateRange: {
|
||||
id: 'datasetCard.dataDateRange',
|
||||
defaultMessage: 'Data date range: ',
|
||||
description: 'label associated with explaining the card',
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={additionalIndicator ? styles.datasetCardAdditional : styles.datasetCard}>
|
||||
|
|
@ -38,7 +22,7 @@ const DatasetCard = ({datasetCardProps, additionalIndicator}:IDatasetCardProps)
|
|||
<ul className={styles.datasetCardList}>
|
||||
<li className={styles.datasetCardListItem}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(messages.dataSource)}
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.SOURCE)}
|
||||
</span>
|
||||
<a href={datasetCardProps.dataSourceURL} target={'_blank'} rel="noreferrer">
|
||||
{datasetCardProps.dataSourceLabel}
|
||||
|
|
@ -46,13 +30,13 @@ const DatasetCard = ({datasetCardProps, additionalIndicator}:IDatasetCardProps)
|
|||
</li>
|
||||
<li className={styles.datasetCardListItem}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(messages.dataResolution)}
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESOLUTION)}
|
||||
</span>
|
||||
{datasetCardProps.dataResolution}
|
||||
</li>
|
||||
<li className={styles.datasetCardListItem}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(messages.dataDateRange)}
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.DATE_RANGE)}
|
||||
</span>
|
||||
{datasetCardProps.dataDateRange}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`rendering of the DatasetCard checks if component renders 1`] = `
|
||||
exports[`rendering of addtional indicator dataset card checks if component renders 1`] = `<DocumentFragment />`;
|
||||
|
||||
exports[`rendering of indicator dataset card checks if component renders 1`] = `
|
||||
<DocumentFragment>
|
||||
<div>
|
||||
<h3>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,24 @@ import {render} from '@testing-library/react';
|
|||
import {LocalizedComponent} from '../../../test/testHelpers';
|
||||
import DatasetCard from '../../DatasetCard';
|
||||
|
||||
import {indicators} from '../../DatasetContainer/index';
|
||||
import * as METHODOLOGY_COPY from '../../../data/copy/methodology';
|
||||
|
||||
describe('rendering of the DatasetCard', () => {
|
||||
describe('rendering of indicator dataset card', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<DatasetCard key={0} datasetCardProps={indicators[0]}/>
|
||||
<DatasetCard key={0} datasetCardProps={METHODOLOGY_COPY.INDICATORS[0]} additionalIndicator={false}/>
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
it('checks if component renders', () => {
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('rendering of addtional indicator dataset card', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<DatasetCard key={0} datasetCardProps={METHODOLOGY_COPY.ADDITIONAL_INDICATORS[0]} additionalIndicator={true}/>
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
import {Grid} from '@trussworks/react-uswds';
|
||||
|
||||
import AlertWrapper from '../AlertWrapper';
|
||||
|
|
@ -8,185 +7,12 @@ import DatasetCard from '../DatasetCard';
|
|||
import J40MainGridContainer from '../J40MainGridContainer';
|
||||
|
||||
import * as styles from './dsContainer.module.scss';
|
||||
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||
|
||||
export const indicators = [
|
||||
{
|
||||
indicator: 'Area Median Income',
|
||||
description: `Median income of the census block group calculated as a percent
|
||||
of the metropolitan area’s or state's median income.`,
|
||||
dataResolution: `Census block group`,
|
||||
dataSourceLabel: `Census's American Community Survey`,
|
||||
dataSourceURL: `https://www.census.gov/programs-surveys/acs`,
|
||||
dataDateRange: `2015-2019`,
|
||||
},
|
||||
{
|
||||
indicator: 'Poverty',
|
||||
description: `Percent of a block group's population in households where the household income` +
|
||||
` is at or below 100% of the federal poverty level`,
|
||||
dataResolution: `Census block group`,
|
||||
dataSourceLabel: `Census's American Community Survey`,
|
||||
dataSourceURL: `https://www.census.gov/programs-surveys/acs`,
|
||||
dataDateRange: `2015-2019`,
|
||||
},
|
||||
{
|
||||
indicator: 'Education, less than high school education',
|
||||
description: `Percent of people ages 25 years or older in a block group whose
|
||||
education level is less than a high school diploma.`,
|
||||
dataResolution: `Census block group`,
|
||||
dataSourceLabel: `Census's American Community Survey`,
|
||||
dataSourceURL: `https://www.census.gov/programs-surveys/acs`,
|
||||
dataDateRange: `2015-2019`,
|
||||
},
|
||||
];
|
||||
|
||||
export const additionalIndicators = [
|
||||
{
|
||||
indicator: 'Diabetes',
|
||||
description: `People ages 18 years and older who report having ever been
|
||||
told by a doctor, nurse, or other health professionals that they have
|
||||
diabetes other than diabetes during pregnancy.`,
|
||||
dataResolution: `Census tract`,
|
||||
dataSourceLabel: `Centers for Disease Control and Prevention (CDC) PLACES`,
|
||||
dataSourceURL: `https://www.cdc.gov/places/index.html`,
|
||||
dataDateRange: `2016-2019`,
|
||||
},
|
||||
{
|
||||
indicator: 'Asthma',
|
||||
description: `Weighted number of respondents people who answer “yes” both
|
||||
to both of the following questions: “Have you ever been told by a doctor,
|
||||
nurse, or other health professional that you have asthma?” and the question
|
||||
“Do you still have asthma?”`,
|
||||
dataResolution: `Census tract`,
|
||||
dataSourceLabel: `Centers for Disease Control and Prevention (CDC) PLACES`,
|
||||
dataSourceURL: `https://www.cdc.gov/places/index.html`,
|
||||
dataDateRange: `2016-2019`,
|
||||
},
|
||||
{
|
||||
indicator: 'Heart disease',
|
||||
description: `People ages 18 years and older who report ever having been told
|
||||
by a doctor, nurse, or other health professionals that they had angina or
|
||||
coronary heart disease.`,
|
||||
dataResolution: `Census tract`,
|
||||
dataSourceLabel: `Centers for Disease Control and Prevention (CDC) PLACES`,
|
||||
dataSourceURL: `https://www.cdc.gov/places/index.html`,
|
||||
dataDateRange: `2016-2019`,
|
||||
},
|
||||
{
|
||||
indicator: 'Life expectancy',
|
||||
description: `Estimated years of life expectancy.`,
|
||||
dataResolution: `Census tract`,
|
||||
dataSourceLabel: `Centers for Disease Control and Prevention (CDC)
|
||||
US Small-area Life Expectancy Estimates Project`,
|
||||
dataSourceURL: `https://www.cdc.gov/nchs/nvss/usaleep/usaleep.html#data`,
|
||||
dataDateRange: `2010-2015`,
|
||||
},
|
||||
{
|
||||
indicator: 'Traffic proximity and volume',
|
||||
description: `Count of vehicles (average annual daily traffic) at major roads
|
||||
within 500 meters, divided by distance in meters (not km).`,
|
||||
dataResolution: `Census block group`,
|
||||
dataSourceLabel: `Department of Transportation (DOT) traffic data`,
|
||||
dataSourceURL: `https://www.fhwa.dot.gov/policyinformation/hpms/shapefiles.cfm`,
|
||||
dataDateRange: `2017`,
|
||||
},
|
||||
{
|
||||
indicator: 'FEMA Risk Index Expected Annual Loss Score',
|
||||
description: `Average economic loss in dollars resulting from natural
|
||||
hazards each year. It is calculated for each hazard type and quantifies
|
||||
loss for relevant consequence types: buildings, people, and agriculture.`,
|
||||
dataResolution: `Census tract`,
|
||||
dataSourceLabel: `Federal Emergency Management Agency (FEMA)`,
|
||||
dataSourceURL: `https://hazards.fema.gov/nri/expected-annual-loss`,
|
||||
dataDateRange: `2014-2017`,
|
||||
},
|
||||
{
|
||||
indicator: 'Energy burden',
|
||||
description: `Average annual energy cost ($) divided by household income.`,
|
||||
dataResolution: `Census tract`,
|
||||
dataSourceLabel: `Department of Energy (DOE) LEAD Score`,
|
||||
dataSourceURL: `https://www.energy.gov/eere/slsc/low-income-energy-affordability-data-lead-tool`,
|
||||
dataDateRange: `2018`,
|
||||
},
|
||||
{
|
||||
indicator: 'Housing cost burden',
|
||||
description: `Households that are low income and spend more than 30% of their
|
||||
income to housing costs.`,
|
||||
dataResolution: `Census tract`,
|
||||
dataSourceLabel: `Department of Housing & Urban Development’s
|
||||
(HUD) Comprehensive Housing Affordability Strategy dataset`,
|
||||
dataSourceURL: `https://www.huduser.gov/portal/datasets/cp.html`,
|
||||
dataDateRange: `2013-2017`,
|
||||
},
|
||||
{
|
||||
indicator: 'Wastewater discharge',
|
||||
description: `RSEI modeled Toxic Concentrations at stream segments within 500
|
||||
meters, divided by distance in kilometers (km).`,
|
||||
dataResolution: `Census block group`,
|
||||
dataSourceLabel: `Environmental Protection Agency (EPA) Risk-Screening
|
||||
Environmental Indicators (RSEI) Model`,
|
||||
dataSourceURL: `https://www.epa.gov/rsei`,
|
||||
dataDateRange: `2020`,
|
||||
},
|
||||
{
|
||||
indicator: 'Lead paint',
|
||||
description: `Percent of housing units built pre-1960, used as an
|
||||
indicator of potential lead paint exposure in homes.`,
|
||||
dataResolution: `Census block group`,
|
||||
dataSourceLabel: `Census's American Community Survey`,
|
||||
dataSourceURL: `https://www.census.gov/programs-surveys/acs`,
|
||||
dataDateRange: `2015-2019`,
|
||||
},
|
||||
{
|
||||
indicator: 'Diesel particulate matter',
|
||||
description: `Mixture of particles that is part of diesel exhaust in the air.`,
|
||||
dataResolution: `Census block group`,
|
||||
dataSourceLabel: `Environmental Protection Agency (EPA) National Air Toxics Assessment (NATA)
|
||||
`,
|
||||
dataSourceURL: `https://www.epa.gov/national-air-toxics-assessment/2014-nata-assessment-results`,
|
||||
dataDateRange: `5-year estimates, 2015-2019`,
|
||||
},
|
||||
{
|
||||
indicator: 'PM2.5',
|
||||
description: `Fine inhalable particles, with diameters that are generally
|
||||
2.5 micrometers and smaller.`,
|
||||
dataResolution: `Census block group`,
|
||||
dataSourceLabel: `Environmental Protection Agency (EPA) Office of Air
|
||||
and Radiation (OAR) fusion of model and monitor data`,
|
||||
dataSourceURL: `https://www.epa.gov/aboutepa/about-office-air-and-radiation-oar`,
|
||||
dataDateRange: `2017`,
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
const DatasetContainer = () => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
cumulativeScore: {
|
||||
id: 'datasetContainer.header.cumulativeScore',
|
||||
defaultMessage: 'Datasets used in methodology',
|
||||
description: 'section label of which datasets are used in cumulative score',
|
||||
},
|
||||
subTitle: {
|
||||
id: 'datasetContainer.subTitle',
|
||||
defaultMessage: 'The datasets come from a variety of sources and were selected' +
|
||||
' based on relevance, availability, recency, and quality. The datasets seek to' +
|
||||
' identify a range of human health, environmental, climate-related, and other' +
|
||||
' cumulative impacts on communities.',
|
||||
description: 'description of the dataset section',
|
||||
},
|
||||
additionalSubtitle: {
|
||||
id: 'datasetContainer.additionalSubtitle',
|
||||
defaultMessage: 'Additional Indicators',
|
||||
description: 'indicator heading',
|
||||
},
|
||||
additionalText: {
|
||||
id: 'datasetContainer.additionalText',
|
||||
defaultMessage: 'These datasets provide additional information about each community.',
|
||||
description: 'additional indicator heading',
|
||||
},
|
||||
});
|
||||
|
||||
// JSX return value:
|
||||
return (
|
||||
<>
|
||||
<J40MainGridContainer fullWidth={true} blueBackground={true}>
|
||||
|
|
@ -195,18 +21,18 @@ const DatasetContainer = () => {
|
|||
<Grid row>
|
||||
<Grid col={12}>
|
||||
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
|
||||
<h2>{intl.formatMessage(messages.cumulativeScore)}</h2>
|
||||
<h2>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.HEADING)}</h2>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid row>
|
||||
<Grid col={12} tablet={{col: 7}} className={'j40-mb-3'}>
|
||||
<p>{intl.formatMessage(messages.subTitle)}</p>
|
||||
<p>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.INFO)}</p>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<div className={styles.datasetCardsContainer}>
|
||||
{indicators.map((card) => <DatasetCard
|
||||
{METHODOLOGY_COPY.INDICATORS.map((card) => <DatasetCard
|
||||
key={card.indicator}
|
||||
datasetCardProps={card}
|
||||
additionalIndicator={false}
|
||||
|
|
@ -221,18 +47,18 @@ const DatasetContainer = () => {
|
|||
|
||||
<Grid row>
|
||||
<Grid col={12}>
|
||||
<h2>{intl.formatMessage(messages.additionalSubtitle)}</h2>
|
||||
<h2>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.ADDITIONAL_HEADING)}</h2>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid row>
|
||||
<Grid col={12} tablet={{col: 7}} className={'j40-mb-3'}>
|
||||
<p>{intl.formatMessage(messages.additionalText)}</p>
|
||||
<p>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.ADDITIONAL_INFO)}</p>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<div className={styles.datasetCardsContainer}>
|
||||
{additionalIndicators.map((card) => <DatasetCard
|
||||
{METHODOLOGY_COPY.ADDITIONAL_INDICATORS.map((card) => <DatasetCard
|
||||
key={card.indicator}
|
||||
datasetCardProps={card}
|
||||
additionalIndicator={true}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@ $primary-color: #112f4e;
|
|||
|
||||
.downloadBoxText {
|
||||
margin-bottom: 20px;
|
||||
span {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.downloadBoxButtonContainer {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ test('download packet component defined', () => {
|
|||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
screen.getByRole('button', {name: /download packet/i});
|
||||
screen.getByRole('button', {name: /download package/i});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,49 +1,37 @@
|
|||
import React from 'react';
|
||||
import {Button, Grid} from '@trussworks/react-uswds';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
|
||||
import * as styles from './downloadPacket.module.scss';
|
||||
import * as constants from '../../data/constants';
|
||||
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||
|
||||
// @ts-ignore
|
||||
import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
|
||||
|
||||
const DownloadPacket = () => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
downloadPacketHeader: {
|
||||
id: 'downloadPacket.header.text',
|
||||
defaultMessage: `Draft communities list (${constants.DOWNLOAD_FILE_SIZE})`,
|
||||
description: 'download packet header text',
|
||||
},
|
||||
downloadPacketInfo: {
|
||||
id: 'downloadPacket.info.text',
|
||||
defaultMessage: 'The package includes the draft list of prioritized communities (.csv and .xlsx) '+
|
||||
` and information about how to use the list (.pdf). Last updated: ${constants.DOWNLOAD_LAST_UPDATED} `,
|
||||
description: 'download packet info text',
|
||||
},
|
||||
downloadPacketButtonText: {
|
||||
id: 'downloadPacket.button.text',
|
||||
defaultMessage: 'Download packet',
|
||||
description: 'download packet button text',
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
<div className={styles.downloadBoxContainer}>
|
||||
<div className={styles.downloadBox}>
|
||||
<div className={styles.downloadBoxTextBox}>
|
||||
<div className={styles.downloadBoxTitle}>{intl.formatMessage(messages.downloadPacketHeader)}</div>
|
||||
<div className={styles.downloadBoxTitle}>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE)}
|
||||
</div>
|
||||
<div className={styles.downloadBoxText}>
|
||||
{intl.formatMessage(messages.downloadPacketInfo)}
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION)}
|
||||
{' '}
|
||||
<span>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.downloadBoxButtonContainer}>
|
||||
<a data-cy={'download-link'} href={constants.DOWNLOAD_ZIP_URL}>
|
||||
<a data-cy={'download-link'} href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
|
||||
<Button className={styles.downloadBoxButton} type="button">
|
||||
<div><img src={downloadIcon} /> </div>
|
||||
<div className={styles.downloadPacketText}>
|
||||
{intl.formatMessage(messages.downloadPacketButtonText)}
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT)}
|
||||
</div>
|
||||
</Button>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,6 @@
|
|||
|
||||
.howYouCanHelpContainer {
|
||||
margin: 2rem 0;
|
||||
|
||||
.howYouCanHelpText {
|
||||
color: $headingFontColor;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.howYouCanHelpList {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
declare namespace HowYouCanHelpModuleScssNamespace {
|
||||
export interface IHowYouCanHelpModuleScss {
|
||||
howYouCanHelpContainer: string;
|
||||
howYouCanHelpBullet: string,
|
||||
listWrapper: string;
|
||||
howYouCanHelpText: string;
|
||||
howYouCanHelpList: string;
|
||||
howYouCanHelpListWrapper: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,89 +1,23 @@
|
|||
import React from 'react';
|
||||
import {Link} from 'gatsby-plugin-intl';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
|
||||
import * as styles from './howYouCanHelp.module.scss';
|
||||
import * as EXPLORE_COPY from '../../data/copy/explore';
|
||||
|
||||
const HowYouCanHelp = () => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
youCanHelpHeader: {
|
||||
id: 'howYouCanHelp.header.text',
|
||||
defaultMessage: 'How you can help improve the tool',
|
||||
description: 'the header of the how you can help section',
|
||||
},
|
||||
youCanHelpInfoText: {
|
||||
id: 'youCanHelpInfoText.list.element.prefix',
|
||||
defaultMessage: 'If you have helpful information, we would love to',
|
||||
description: 'you can help info text ',
|
||||
},
|
||||
youCanHelpInfoLinkText: {
|
||||
id: 'youCanHelpInfoLink.link.text',
|
||||
defaultMessage: 'recieve an email from you',
|
||||
description: 'you can help info text ',
|
||||
},
|
||||
youCanHelpDataMethPrefixText: {
|
||||
id: 'youCanHelpDataMethPrefixText.link.prefix.text',
|
||||
defaultMessage: 'View our',
|
||||
description: 'view our',
|
||||
},
|
||||
youCanHelpDataMethLinkText: {
|
||||
id: 'youCanHelpDataMethLinkText.link.text',
|
||||
defaultMessage: 'Data and methodology',
|
||||
description: 'Data & methodology link',
|
||||
},
|
||||
youCanHelpDataMethSuffixText: {
|
||||
id: 'youCanHelpDataMethSuffixText.link.suffix.text',
|
||||
defaultMessage: 'page and send us feedback.',
|
||||
description: 'send us feedbackv via email',
|
||||
},
|
||||
youCanHelpSharingPrefixText: {
|
||||
id: 'youCanHelpSharingPrefixText.link.prefix.text',
|
||||
defaultMessage: 'Find your community of interest and',
|
||||
description: 'find your community',
|
||||
},
|
||||
youCanHelpSharingLinkText: {
|
||||
id: 'youCanHelpSharingLinkText.link.text',
|
||||
defaultMessage: 'share your feedback',
|
||||
description: 'sharing link to email',
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={styles.howYouCanHelpContainer}>
|
||||
<h2>
|
||||
{intl.formatMessage(messages.youCanHelpHeader)}
|
||||
{EXPLORE_COPY.HOW_YOU_CAN_HELP_LIST_ITEMS.HEADING}
|
||||
</h2>
|
||||
<ul className={styles.howYouCanHelpListWrapper}>
|
||||
<li className={styles.howYouCanHelpList}>
|
||||
<div className={styles.howYouCanHelpText}>
|
||||
{intl.formatMessage(messages.youCanHelpInfoText)}
|
||||
{` `}
|
||||
<a href={'mailto:screeningtool.feedback@usds.gov'}>
|
||||
{intl.formatMessage(messages.youCanHelpInfoLinkText)}
|
||||
</a>.
|
||||
</div>
|
||||
{EXPLORE_COPY.HOW_YOU_CAN_HELP_LIST_ITEMS.LIST_ITEM_1}
|
||||
</li>
|
||||
<li className={styles.howYouCanHelpList}>
|
||||
<div className={styles.howYouCanHelpText}>
|
||||
{intl.formatMessage(messages.youCanHelpDataMethPrefixText)}
|
||||
{` `}
|
||||
<Link to={'/methodology'}>
|
||||
{intl.formatMessage(messages.youCanHelpDataMethLinkText)}
|
||||
</Link>
|
||||
{` `}
|
||||
{intl.formatMessage(messages.youCanHelpDataMethSuffixText)}
|
||||
</div>
|
||||
{EXPLORE_COPY.HOW_YOU_CAN_HELP_LIST_ITEMS.LIST_ITEM_2}
|
||||
</li>
|
||||
<li className={styles.howYouCanHelpList}>
|
||||
<div className={styles.howYouCanHelpText}>
|
||||
{intl.formatMessage(messages.youCanHelpSharingPrefixText)}
|
||||
{` `}
|
||||
<a href={'mailto:screeningtool.feedback@usds.gov'}>
|
||||
{intl.formatMessage(messages.youCanHelpSharingLinkText)}
|
||||
</a>.
|
||||
</div>
|
||||
{EXPLORE_COPY.HOW_YOU_CAN_HELP_LIST_ITEMS.LIST_ITEM_3}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,37 +8,31 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
|
|||
</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<div>
|
||||
If you have helpful information, we would love to
|
||||
<a
|
||||
href="mailto:screeningtool.feedback@usds.gov"
|
||||
>
|
||||
recieve an email from you
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
If you have helpful information, we would love to
|
||||
<a
|
||||
href="mailto:screeningtool.feedback@usds.gov"
|
||||
>
|
||||
recieve an email from you
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
View our
|
||||
<a
|
||||
href="/en/methodology"
|
||||
>
|
||||
Data and methodology
|
||||
</a>
|
||||
page and send us feedback.
|
||||
</div>
|
||||
View our
|
||||
<a
|
||||
href="/en/methodology"
|
||||
>
|
||||
Data and methodology
|
||||
</a>
|
||||
page and send us feedback.
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
Find your community of interest and
|
||||
<a
|
||||
href="mailto:screeningtool.feedback@usds.gov"
|
||||
>
|
||||
share your feedback
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
Find your community of interest and
|
||||
<a
|
||||
href="mailto:screeningtool.feedback@usds.gov"
|
||||
>
|
||||
share your feedback
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,56 +5,15 @@ import {
|
|||
} from '@trussworks/react-uswds';
|
||||
import {NavList} from '@trussworks/react-uswds';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
|
||||
import J40MainGridContainer from './J40MainGridContainer';
|
||||
|
||||
// @ts-ignore
|
||||
import whitehouseIcon from '../images/eop-seal.svg';
|
||||
import J40MainGridContainer from './J40MainGridContainer';
|
||||
import * as COMMON_COPY from '../data/copy/common';
|
||||
|
||||
const J40Footer = () => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
arialabelfooter: {
|
||||
id: 'footer.arialabel',
|
||||
defaultMessage: 'Footer navigation',
|
||||
description: 'aria-label text for whole footer',
|
||||
},
|
||||
logotitle: {
|
||||
id: 'footer.logo.title',
|
||||
defaultMessage: 'Council on Environmental Quality',
|
||||
description: 'Footer under logo',
|
||||
},
|
||||
moreinfoheader: {
|
||||
id: 'footer.moreinfoheader',
|
||||
defaultMessage: 'More information',
|
||||
description: 'Footer column header',
|
||||
},
|
||||
foia: {
|
||||
id: 'footer.foialink',
|
||||
defaultMessage: 'Freedom of Information Act (FOIA)',
|
||||
description: 'Footer FOIA link text',
|
||||
},
|
||||
privacy: {
|
||||
id: 'footer.privacylink',
|
||||
defaultMessage: 'Privacy Policy',
|
||||
description: 'Footer privacy policy link text',
|
||||
},
|
||||
whitehouselogoalt: {
|
||||
id: 'footer.whitehouselogoalt',
|
||||
defaultMessage: 'Whitehouse logo',
|
||||
description: 'Footer Whitehouse logo alt text',
|
||||
},
|
||||
questionsheader: {
|
||||
id: 'footer.questionsheader',
|
||||
defaultMessage: 'Have a question about government services?',
|
||||
description: 'Footer column header',
|
||||
},
|
||||
contactlink: {
|
||||
id: 'footer.findcontactlink',
|
||||
defaultMessage: 'Find a contact at USA.gov',
|
||||
description: 'Footer find contact link text',
|
||||
},
|
||||
});
|
||||
|
||||
const NAVLINKS = [
|
||||
['Contact',
|
||||
|
|
@ -63,15 +22,15 @@ const J40Footer = () => {
|
|||
className={'j40-footer-address'}
|
||||
size={'big'}
|
||||
items={[
|
||||
'Council on Environmental Quality',
|
||||
'730 Jackson Pl NW',
|
||||
'Washington, D.C. 20506',
|
||||
'(202) 395-5750',
|
||||
COMMON_COPY.FOOTER_CEQ_ADDRESS.NAME,
|
||||
COMMON_COPY.FOOTER_CEQ_ADDRESS.STREET,
|
||||
COMMON_COPY.FOOTER_CEQ_ADDRESS.CITY_STATE,
|
||||
COMMON_COPY.FOOTER_CEQ_ADDRESS.PHONE,
|
||||
]}
|
||||
/>,
|
||||
],
|
||||
[
|
||||
intl.formatMessage(messages.moreinfoheader),
|
||||
intl.formatMessage(COMMON_COPY.FOOTER.MORE_INFO),
|
||||
<a
|
||||
className={'footer-link-first-child'}
|
||||
key={'whitehouselink2'}
|
||||
|
|
@ -83,23 +42,23 @@ const J40Footer = () => {
|
|||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
href={'https://www.whitehouse.gov/ceq/foia'}>
|
||||
{intl.formatMessage(messages.foia)}
|
||||
{intl.formatMessage(COMMON_COPY.FOOTER.FOIA)}
|
||||
</a>,
|
||||
<a
|
||||
key={'privacylink'}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
href={'https://www.whitehouse.gov/privacy/'}>
|
||||
{intl.formatMessage(messages.privacy)}
|
||||
{intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY)}
|
||||
</a>,
|
||||
],
|
||||
[
|
||||
intl.formatMessage(messages.questionsheader),
|
||||
intl.formatMessage(COMMON_COPY.FOOTER.QUESTIONS),
|
||||
<a
|
||||
className={'footer-link-first-child'}
|
||||
key={'contactlink'}
|
||||
href={'https://www.usa.gov/'}>
|
||||
{intl.formatMessage(messages.contactlink)}
|
||||
{intl.formatMessage(COMMON_COPY.FOOTER.CONTACT_LINK)}
|
||||
</a>,
|
||||
],
|
||||
];
|
||||
|
|
@ -134,9 +93,9 @@ const J40Footer = () => {
|
|||
<img
|
||||
className={'usa-footer__logo-img'}
|
||||
src={whitehouseIcon}
|
||||
alt={intl.formatMessage(messages.whitehouselogoalt)}/>
|
||||
alt={intl.formatMessage(COMMON_COPY.FOOTER.LOGO_ALT)}/>
|
||||
}
|
||||
heading={<h5>{intl.formatMessage(messages.logotitle)}</h5>}
|
||||
heading={<h5>{intl.formatMessage(COMMON_COPY.FOOTER.TITLE)}</h5>}
|
||||
/>
|
||||
</J40MainGridContainer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,47 +7,17 @@ import {
|
|||
GovBanner,
|
||||
Tag,
|
||||
} from '@trussworks/react-uswds';
|
||||
import {defineMessages} from 'react-intl';
|
||||
|
||||
// @ts-ignore
|
||||
import siteLogo from '../../src/images/icon.png';
|
||||
import * as COMMON_COPY from '../data/copy/common';
|
||||
|
||||
const J40Header = () => {
|
||||
const intl = useIntl();
|
||||
const [mobileNavOpen, setMobileNavOpen] = useState(false);
|
||||
const messages = defineMessages({
|
||||
titleLine1: {
|
||||
id: 'header.title.line1',
|
||||
defaultMessage: `Climate and Economic Justice`,
|
||||
description: 'Title in nav header line 1 of 2',
|
||||
},
|
||||
titleLine2: {
|
||||
id: 'header.title.line2',
|
||||
defaultMessage: `Screening Tool`,
|
||||
description: 'Title in nav header line 2 of 2',
|
||||
},
|
||||
about: {
|
||||
id: 'header.about',
|
||||
defaultMessage: 'About',
|
||||
description: 'Header navigate item to the about page',
|
||||
},
|
||||
explore: {
|
||||
id: 'header.explore',
|
||||
defaultMessage: 'Explore the tool',
|
||||
description: 'Header navigate item to the Explore the tool page',
|
||||
},
|
||||
methodology: {
|
||||
id: 'header.methodology',
|
||||
defaultMessage: 'Data & methodology',
|
||||
description: 'Header navigate item to the Methodology page',
|
||||
},
|
||||
contact: {
|
||||
id: 'header.contact',
|
||||
defaultMessage: 'Contact',
|
||||
description: 'Header navigate item to the Contact page',
|
||||
},
|
||||
});
|
||||
const titleL1 = intl.formatMessage(messages.titleLine1);
|
||||
const titleL2 = intl.formatMessage(messages.titleLine2);
|
||||
|
||||
const titleL1 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_1);
|
||||
const titleL2 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_2);
|
||||
|
||||
const toggleMobileNav = (): void =>
|
||||
setMobileNavOpen((prevOpen) => !prevOpen);
|
||||
|
|
@ -62,9 +32,8 @@ const J40Header = () => {
|
|||
key={'about'}
|
||||
activeClassName="usa-current"
|
||||
className={'j40-header'}
|
||||
data-cy={'nav-link-about'}
|
||||
>
|
||||
{intl.formatMessage(messages.about)}
|
||||
data-cy={'nav-link-about'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
|
||||
</Link>,
|
||||
],
|
||||
['cejst',
|
||||
|
|
@ -73,9 +42,8 @@ const J40Header = () => {
|
|||
key={'cejst'}
|
||||
activeClassName="usa-current"
|
||||
className={'j40-header'}
|
||||
data-cy={'nav-link-explore'}
|
||||
>
|
||||
{intl.formatMessage(messages.explore)}
|
||||
data-cy={'nav-link-explore'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)}
|
||||
</Link>,
|
||||
],
|
||||
['methodology',
|
||||
|
|
@ -84,9 +52,8 @@ const J40Header = () => {
|
|||
key={'methodology'}
|
||||
activeClassName="usa-current"
|
||||
className={'j40-header'}
|
||||
data-cy={'nav-link-methodology'}
|
||||
>
|
||||
{intl.formatMessage(messages.methodology)}
|
||||
data-cy={'nav-link-methodology'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
|
||||
</Link>,
|
||||
],
|
||||
['contact',
|
||||
|
|
@ -95,9 +62,8 @@ const J40Header = () => {
|
|||
key={'contact'}
|
||||
activeClassName="usa-current"
|
||||
className={'j40-header'}
|
||||
data-cy={'nav-link-contact'}
|
||||
>
|
||||
{intl.formatMessage(messages.contact)}
|
||||
data-cy={'nav-link-contact'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.CONTACT)}
|
||||
</Link>,
|
||||
],
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
import * as styles from './mapLegend.module.scss';
|
||||
import * as constants from '../../data/constants';
|
||||
import * as EXPLORE_COPY from '../../data/copy/explore';
|
||||
|
||||
const MapLegend = () => {
|
||||
const intl = useIntl();
|
||||
|
|
@ -11,10 +11,10 @@ const MapLegend = () => {
|
|||
<div className={styles.colorSwatch} />
|
||||
<div>
|
||||
<h4>
|
||||
{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_LABEL)}
|
||||
{intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_LABEL)}
|
||||
</h4>
|
||||
<p className={'secondary'}>
|
||||
{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_DESCRIPT)}
|
||||
{intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_DESCRIPT)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,17 @@
|
|||
import * as React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
import {Grid} from '@trussworks/react-uswds';
|
||||
|
||||
import AlertWrapper from '../AlertWrapper';
|
||||
import J40Map from '../J40Map';
|
||||
|
||||
import * as styles from './mapWrapper.module.scss';
|
||||
import * as constants from '../../data/constants';
|
||||
import AlertWrapper from '../AlertWrapper';
|
||||
import * as EXPLORE_COPY from '../../data/copy/explore';
|
||||
|
||||
interface IMapWrapperProps {
|
||||
location: Location
|
||||
}
|
||||
|
||||
const MapWrapper = ({location}: IMapWrapperProps) => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
downloadLinkText: {
|
||||
id: 'mapwrapper.download.link',
|
||||
defaultMessage: 'Download the draft list ',
|
||||
description: 'download link for datasets',
|
||||
},
|
||||
downloadLinkText1: {
|
||||
id: 'mapwrapper.download1.link',
|
||||
defaultMessage: `of communities of focus and datasets used. Last updated: ${constants.DOWNLOAD_LAST_UPDATED}`,
|
||||
description: 'download link for datasets',
|
||||
},
|
||||
downloadContents: {
|
||||
id: 'mapwrapper.download.contents',
|
||||
defaultMessage: `ZIP file will contain one .xlsx, one .csv, and one .pdf (${constants.DOWNLOAD_FILE_SIZE}).`,
|
||||
description: 'download link contents',
|
||||
},
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<Grid row>
|
||||
|
|
@ -47,14 +27,11 @@ const MapWrapper = ({location}: IMapWrapperProps) => {
|
|||
<Grid row>
|
||||
<Grid col={7}>
|
||||
<div className={styles.mapCaptionTextLink}>
|
||||
<a href={constants.DOWNLOAD_ZIP_URL}>
|
||||
{intl.formatMessage(messages.downloadLinkText)}
|
||||
</a>
|
||||
<span>
|
||||
{intl.formatMessage(messages.downloadLinkText1)}
|
||||
</span>
|
||||
{EXPLORE_COPY.DOWNLOAD_DRAFT.PARAGRAPH_1}
|
||||
</div>
|
||||
<div>
|
||||
{EXPLORE_COPY.DOWNLOAD_DRAFT.PARAGRAPH_2}
|
||||
</div>
|
||||
<div>{intl.formatMessage(messages.downloadContents)}</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -55,19 +55,17 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
|
|||
<h4>
|
||||
Percent of households below or at 100% of the federal poverty line
|
||||
</h4>
|
||||
<p
|
||||
class="flush"
|
||||
This is the percent of households in a state with a household income
|
||||
below or at 100% of the
|
||||
<a
|
||||
href="https://www.census.gov/topics/income-poverty/poverty/guidance/poverty-measures.html"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
This is the percent of households in a state with a household income below or at 100% of the
|
||||
<a
|
||||
href="https://www.census.gov/topics/income-poverty/poverty/guidance/poverty-measures.html"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
federal poverty line
|
||||
</a>
|
||||
. This federal poverty line is calculated based on the composition of each household (e.g., based on household size), but it does not vary geographically.
|
||||
</p>
|
||||
federal poverty line
|
||||
</a>
|
||||
. This federal poverty line is calculated
|
||||
based on the composition of each household (e.g., based on household size), but it does not vary geographically.
|
||||
<h4>
|
||||
The high school degree achievement rate for adults 25 years and older
|
||||
</h4>
|
||||
|
|
@ -97,21 +95,25 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
|
|||
<p>
|
||||
(The median income is less than 80% of the area median income
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="flush"
|
||||
>
|
||||
OR
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="flush"
|
||||
>
|
||||
households living in poverty (at or below 100% of the federal poverty level) is greater than 20%)
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="flush"
|
||||
>
|
||||
AND
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="flush"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,28 @@
|
|||
import React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
|
||||
// @ts-ignore
|
||||
import lightbulbIcon from '/node_modules/uswds/dist/img/usa-icons/lightbulb_outline.svg';
|
||||
import * as styles from './mapIntroduction.module.scss';
|
||||
import * as EXPLORE_COPY from '../data/copy/explore';
|
||||
|
||||
const MapIntroduction = () => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
mapIntroHeader: {
|
||||
id: 'mapIntro.mapIntroHeader',
|
||||
defaultMessage: 'Zoom and select a census block group to view data',
|
||||
description: 'introductory text of ways to use the map',
|
||||
},
|
||||
didYouKnow: {
|
||||
id: 'mapIntro.didYouKnow',
|
||||
defaultMessage: ' Did you know?',
|
||||
description: 'text prompting a cite paragraph',
|
||||
},
|
||||
censusBlockGroupDefinition: {
|
||||
id: 'mapIntro.censusBlockGroupDefinition',
|
||||
defaultMessage: 'A census block group is generally between 600 and 3,000 people. ' +
|
||||
'It is the smallest geographical unit for which the U.S. Census ' +
|
||||
'Bureau publishes sample data.',
|
||||
description: 'cites the definition and helpful information about census groups',
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<aside className={styles.mapIntroContainer}>
|
||||
<header className={styles.mapIntroHeader}>{intl.formatMessage(messages.mapIntroHeader)}</header>
|
||||
<header className={styles.mapIntroHeader}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.TITLE)}
|
||||
</header>
|
||||
<div className={styles.mapIntroText}>
|
||||
<img className={styles.mapIntroLightbulb} src={lightbulbIcon} />
|
||||
<div className={styles.didYouKnowBox}>
|
||||
<div className={styles.didYouKnow}>{intl.formatMessage(messages.didYouKnow)}</div>
|
||||
<cite className={styles.didYouKnowText}>{intl.formatMessage(messages.censusBlockGroupDefinition)}</cite>
|
||||
<div className={styles.didYouKnow}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.DID_YOU_KNOW)}
|
||||
</div>
|
||||
<cite className={styles.didYouKnowText}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.CBG_DEFINITION)}
|
||||
</cite>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -5,89 +5,82 @@ import {
|
|||
ProcessListHeading,
|
||||
Grid,
|
||||
} from '@trussworks/react-uswds';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
import * as METHODOLOGY_COPY from '../data/copy/methodology';
|
||||
|
||||
const ScoreStepsList = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>Methodology</h2>
|
||||
<h2>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.HEADING)}
|
||||
</h2>
|
||||
<Grid row>
|
||||
<Grid col={7}>
|
||||
<p>
|
||||
The methodology for identifying communities of focus is calculated at the
|
||||
census block group level. Census block geographical boundaries are determined
|
||||
by the U.S. Census Bureau once every ten years. This tool utilizes the census
|
||||
block boundaries from 2010.
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.DESCRIPTION_1)}
|
||||
</p>
|
||||
<p>
|
||||
The following describes the process for identifying communities of focus.
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.DESCRIPTION_2)}
|
||||
</p>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<ProcessList>
|
||||
|
||||
{/* Step 1 */}
|
||||
<ProcessListItem>
|
||||
<ProcessListHeading type="h4">Gather datasets</ProcessListHeading>
|
||||
<p>{' '}</p>
|
||||
<p className={'flush'}>
|
||||
The methodology includes the following inputs that are equally weighted.
|
||||
</p>
|
||||
|
||||
<h4>
|
||||
Percent of Area Median Income
|
||||
</h4>
|
||||
<p className={'flush'}>
|
||||
If a census block group is in a metropolitan area, this value is the
|
||||
median income of the census block group calculated as a percent of
|
||||
the metropolitan area’s median income.
|
||||
</p>
|
||||
<p>
|
||||
If a census block group is not in a metropolitan area, this value is
|
||||
the median income of the census block group calculated as a percent
|
||||
of the state’s median income.
|
||||
</p>
|
||||
|
||||
<h4>
|
||||
Percent of households below or at 100% of the federal poverty line
|
||||
</h4>
|
||||
<p className={'flush'}>
|
||||
This is the percent of households in a state with a household income
|
||||
below or at 100% of the <a href="https://www.census.gov/topics/income-poverty/poverty/guidance/poverty-measures.html" target="_blank" rel="noreferrer">federal poverty line</a>. This federal poverty line is
|
||||
calculated based on the composition of each household (e.g., based on
|
||||
household size), but it does not vary geographically.
|
||||
</p>
|
||||
<h4>
|
||||
The high school degree achievement rate for adults 25 years and older
|
||||
</h4>
|
||||
<p className={'flush'}>
|
||||
The percent of individuals who are 25 or older who have received a high school degree.
|
||||
</p>
|
||||
</ProcessListItem>
|
||||
|
||||
<ProcessListItem>
|
||||
<ProcessListHeading type="h4">
|
||||
Determine communites of focus
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_HEADING)}
|
||||
</ProcessListHeading>
|
||||
<p>{' '}</p>
|
||||
<p className={'flush'}>
|
||||
Under the existing formula, a census block group will be considered a
|
||||
community of focus if:
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_INFO)}
|
||||
</p>
|
||||
|
||||
{/* Step 1 A */}
|
||||
<h4>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_HEADING)}
|
||||
</h4>
|
||||
<p className={'flush'}>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_INFO_1)}
|
||||
</p>
|
||||
<p>
|
||||
(The median income is less than 80% of the area median income
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_INFO_2)}
|
||||
</p>
|
||||
|
||||
{/* Step 1 B */}
|
||||
<h4>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_B_HEADING)}
|
||||
</h4>
|
||||
{METHODOLOGY_COPY.COMPLEX_METH_STEPS.STEP_2_B_INFO}
|
||||
|
||||
{/* Step 1 C */}
|
||||
<h4>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_C_HEADING)}
|
||||
</h4>
|
||||
<p className={'flush'}>
|
||||
OR
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_C_INFO)}
|
||||
</p>
|
||||
</ProcessListItem>
|
||||
|
||||
{/* Step 2 */}
|
||||
<ProcessListItem>
|
||||
|
||||
<ProcessListHeading type="h4">
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_2_HEADING)}
|
||||
</ProcessListHeading>
|
||||
|
||||
<p>{' '}</p>
|
||||
<p className={'flush'}>
|
||||
households living in poverty (at or below 100% of the federal poverty level) is greater than 20%)
|
||||
</p>
|
||||
<p className={'flush'}>
|
||||
AND
|
||||
</p>
|
||||
<p className={'flush'}>
|
||||
The high school degree achievement rate for adults 25 years and older is greater than 95%
|
||||
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_2_INFO)}
|
||||
</p>
|
||||
|
||||
{METHODOLOGY_COPY.COMPLEX_METH_STEPS.FORMULA}
|
||||
|
||||
</ProcessListItem>
|
||||
|
||||
</ProcessList>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import * as React from 'react';
|
||||
import * as styles from './zoomWarning.module.scss';
|
||||
import React from 'react';
|
||||
import {useIntl} from 'react-intl';
|
||||
|
||||
// @ts-ignore
|
||||
import zoomIcon from '/node_modules/uswds/dist/img/usa-icons/zoom_in.svg';
|
||||
import * as styles from './zoomWarning.module.scss';
|
||||
import * as EXPLORE_COPY from '../data/copy/explore';
|
||||
|
||||
interface IZoomWarningProps {
|
||||
zoomLevel: number
|
||||
|
|
@ -10,12 +12,14 @@ interface IZoomWarningProps {
|
|||
|
||||
// Update this file to trigger build
|
||||
const ZoomWarning = ({zoomLevel}: IZoomWarningProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<>
|
||||
{zoomLevel <= 5 ? (
|
||||
<div className={styles.zoomWarning}>
|
||||
<img src={zoomIcon} alt={'zoom icon'}/>
|
||||
Zoom in to the state or regional level to see prioritized communities on the map.
|
||||
{intl.formatMessage(EXPLORE_COPY.MAP.ZOOM_WARNING)}
|
||||
</div>
|
||||
) :
|
||||
''
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue