diff --git a/client/src/components/DatasetCard/datasetCard.module.scss b/client/src/components/DatasetCard/datasetCard.module.scss new file mode 100644 index 00000000..c4fa5bc2 --- /dev/null +++ b/client/src/components/DatasetCard/datasetCard.module.scss @@ -0,0 +1,40 @@ +.datasetCard { + background-color: white; + padding: 2.7rem 3rem 3rem 3rem; + margin-bottom: 3rem; + max-width: 34rem; +} + +.datasetCardIndicator { + margin-top: 0; + font-size: x-large; + margin-bottom: 0.8rem; +} + +.datasetCardWhatIsIt { + margin-bottom: 0; + font-size: large; + font-weight: bolder; +} + +.datasetCardList { + list-style-type: none; + padding-left: 0; + margin-top: 1.6rem; +} + +.datasetCardListItem { + margin-bottom: 0.4rem; + font-size: large; +} + +.datasetCardDescription { + font-size: large; + padding-top: 0.3rem; + line-height: 1.5rem; +} + +.datasetCardLabels { + font-size: large; + font-weight: bolder; +} diff --git a/client/src/components/DatasetCard/datasetCard.module.scss.d.ts b/client/src/components/DatasetCard/datasetCard.module.scss.d.ts new file mode 100644 index 00000000..136b1188 --- /dev/null +++ b/client/src/components/DatasetCard/datasetCard.module.scss.d.ts @@ -0,0 +1,18 @@ +declare namespace DatasetCardScssNamespace { + export interface IDatasetCardScss { + datasetCard: string; + datasetCardIndicator:string; + datasetCardWhatIsIt: string; + datasetCardDescription: string; + datasetCardLabels: string; + datasetCardList: string; + datasetCardListItem: string; + } + } + +declare const DatasetCardScssModule: DatasetCardScssNamespace.IDatasetCardScss & { + /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */ + locals: DatasetCardScssNamespace.IDatasetCardScss; + }; + + export = DatasetCardScssModule; diff --git a/client/src/components/DatasetCard/index.tsx b/client/src/components/DatasetCard/index.tsx new file mode 100644 index 00000000..2c29830a --- /dev/null +++ b/client/src/components/DatasetCard/index.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import {useIntl} from 'gatsby-plugin-intl'; +import {defineMessages} from 'react-intl'; +import * as styles from './datasetCard.module.scss'; + +interface IDatasetCardProps { + key: number, + datasetCardProps: { [key:string]: string } +} + +const DatasetCard = ({key, datasetCardProps}:IDatasetCardProps) => { + const intl = useIntl(); + const messages = defineMessages({ + whatIsIt: { + id: 'datasetCard.whatIsIt', + defaultMessage: 'What is it?', + description: 'label associated with explaining the card', + }, + 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', + }, + }); + + // Todo VS: figure out how to ignore unused variables such as keys + // tried tsconfig, no-unused-vars, @typescript-eslint/no-unused-vars + // Also check associated unit test warning. + console.log(key); + + return ( +
+

{datasetCardProps.indicator}

+
{intl.formatMessage(messages.whatIsIt)}
+
+ {datasetCardProps.description} +
+ + +
+ ); +}; + +export default DatasetCard; diff --git a/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap b/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap new file mode 100644 index 00000000..bc66c3d5 --- /dev/null +++ b/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap @@ -0,0 +1,44 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the DatasetCard checks if component renders 1`] = ` + +
+

+ Poverty +

+
+ What is it? +
+
+ Percent of a block group's population in households where the household + income is less than or equal to twice the federal "poverty level" +
+ +
+ +`; diff --git a/client/src/components/DatasetCard/tests/datasetCard.test.tsx b/client/src/components/DatasetCard/tests/datasetCard.test.tsx new file mode 100644 index 00000000..c5d7d537 --- /dev/null +++ b/client/src/components/DatasetCard/tests/datasetCard.test.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../../test/testHelpers'; +import DatasetCard from '../../DatasetCard'; + +import {cards} from '../../DatasetContainer/index'; + +describe('rendering of the DatasetCard', () => { + const {asFragment} = render( + + + , + ); + + it('checks if component renders', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/DatasetContainer/dsContainer.module.scss b/client/src/components/DatasetContainer/dsContainer.module.scss new file mode 100644 index 00000000..ab0abb17 --- /dev/null +++ b/client/src/components/DatasetContainer/dsContainer.module.scss @@ -0,0 +1,34 @@ +@import "../utils.scss"; + +$headingFontColor: #122e51; + +.datasetContainer { + background-color: #eef6fb; +} +.datasetContainerHeader { + font-size: 1.8rem; + margin-bottom: 0.4rem; + color: $headingFontColor; +} + +.datasetContainerSubTitle { + width: 50%; + line-height: 1.7rem; + margin-top: 0; + margin-bottom: 1.4rem; + color: $headingFontColor; + + @media screen and (max-width: 700px) { + width: 90%; + } +} + +.datasetCardsContainer { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.j40AlertContainer { + background-color: #faf3d1; +} diff --git a/client/src/components/DatasetContainer/dsContainer.module.scss.d.ts b/client/src/components/DatasetContainer/dsContainer.module.scss.d.ts new file mode 100644 index 00000000..b443ce05 --- /dev/null +++ b/client/src/components/DatasetContainer/dsContainer.module.scss.d.ts @@ -0,0 +1,16 @@ +declare namespace DatasetContainerScssNamespace { + export interface IDatasetContainerScss { + datasetContainer:string; + datasetCardsContainer: string; + datasetContainerHeader: string; + datasetContainerSubTitle: string; + j40AlertContainer: string; + } + } + +declare const DatasetContainerScssModule: DatasetContainerScssNamespace.IDatasetContainerScss & { + /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */ + locals: DatasetContainerScssNamespace.IDatasetContainerScss; + }; + + export = DatasetContainerScssModule; diff --git a/client/src/components/DatasetContainer/index.tsx b/client/src/components/DatasetContainer/index.tsx new file mode 100644 index 00000000..c8d8436b --- /dev/null +++ b/client/src/components/DatasetContainer/index.tsx @@ -0,0 +1,93 @@ +import React from 'react'; +import {useIntl} from 'gatsby-plugin-intl'; +import {defineMessages} from 'react-intl'; +import DatasetCard from '../DatasetCard'; +import J40Alert from '../J40Alert'; +import * as styles from './dsContainer.module.scss'; + +export const cards = [ + { + indicator: 'Poverty', + description: `Percent of a block group's population in households where the household + income is less than or equal to twice the federal "poverty level"`, + dataResolution: `Census block group`, + dataSourceLabel: `U.S. Census Bureau`, + dataSourceURL: `https://www.census.gov/`, + dataDateRange: `5-year estimates, 2015-2019`, + }, + { + indicator: 'Education (less than high school)', + description: `Percent of people age 25 or older in a block group whose education is short of a high school diploma`, + dataResolution: `Census block group`, + dataSourceLabel: `U.S. Census Bureau`, + dataSourceURL: `https://www.census.gov/`, + dataDateRange: `5-year estimates, 2015-2019`, + }, + { + indicator: 'Linguistic isolation', + description: `Percent of people in a block group living in linguistically + isolated households — a linguistically isolated household is a household in + which all members aged 14 years and over speak a non-English language and also speak + English less than "very well" (i.e., have difficulty with English)`, + dataResolution: `Census block group`, + dataSourceLabel: `U.S. Census Bureau`, + dataSourceURL: `https://www.census.gov/`, + dataDateRange: `5-year estimates, 2015-2019`, + }, + { + indicator: 'Unemployment rate', + description: `Unemployment rate (people who are unemployed divided by the total population of + people in the labor force over 16 years old)`, + dataResolution: `Census block group`, + dataSourceLabel: `U.S. Census Bureau`, + dataSourceURL: `https://www.census.gov/`, + dataDateRange: `5-year estimates, 2015-2019`, + }, + { + indicator: 'Housing burden', + description: `Percent of households in a census tract that are both low income (making less + than 80% of the HUD Area Median Family Income) and severely burdened by housing costs + (paying greater than 30% of their income to housing costs)`, + dataResolution: `Census block group`, + dataSourceLabel: `U.S. Census Bureau`, + dataSourceURL: `https://www.census.gov/`, + dataDateRange: `5-year estimates, 2015-2019`, + }, + +]; + +const DatasetContainer = () => { + const intl = useIntl(); + const messages = defineMessages({ + cumulativeScore: { + id: 'datasetContainer.header.cumulativeScore', + defaultMessage: 'Datasets used in cumulative score', + 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 after considering relevance, availability, recency and quality.', + description: 'description of the dataset section', + }, + }); + + return ( +
+
+
+ +
+
+
+

{intl.formatMessage(messages.cumulativeScore)}

+

{intl.formatMessage(messages.subTitle)}

+
+ {cards.map((card, index) => )} +
+
+
+ ); +}; + +export default DatasetContainer; diff --git a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap new file mode 100644 index 00000000..215712dc --- /dev/null +++ b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap @@ -0,0 +1,225 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = ` + +
+
+
+
+ Limited data sources — Datasets may be added, updated, or removed. +
+
+
+
+

+ Datasets used in cumulative score +

+

+ The datasets come from a variety of sources and were selected after considering relevance, availability, recency and quality. +

+
+
+

+ Poverty +

+
+ What is it? +
+
+ Percent of a block group's population in households where the household + income is less than or equal to twice the federal "poverty level" +
+
    +
  • + + Data resolution: + + Census block group +
    • +
  • + + Data source: + + + U.S. Census Bureau + +
    • +
  • + + Data date range: + + 5-year estimates, 2015-2019 +
    • +
+
+
+

+ Education (less than high school) +

+
+ What is it? +
+
+ Percent of people age 25 or older in a block group whose education is short of a high school diploma +
+
    +
  • + + Data resolution: + + Census block group +
    • +
  • + + Data source: + + + U.S. Census Bureau + +
    • +
  • + + Data date range: + + 5-year estimates, 2015-2019 +
    • +
+
+
+

+ Linguistic isolation +

+
+ What is it? +
+
+ Percent of people in a block group living in linguistically + isolated households — a linguistically isolated household is a household in + which all members aged 14 years and over speak a non-English language and also speak + English less than "very well" (i.e., have difficulty with English) +
+
    +
  • + + Data resolution: + + Census block group +
    • +
  • + + Data source: + + + U.S. Census Bureau + +
    • +
  • + + Data date range: + + 5-year estimates, 2015-2019 +
    • +
+
+
+

+ Unemployment rate +

+
+ What is it? +
+
+ Unemployment rate (people who are unemployed divided by the total population of + people in the labor force over 16 years old) +
+
    +
  • + + Data resolution: + + Census block group +
    • +
  • + + Data source: + + + U.S. Census Bureau + +
    • +
  • + + Data date range: + + 5-year estimates, 2015-2019 +
    • +
+
+
+

+ Housing burden +

+
+ What is it? +
+
+ Percent of households in a census tract that are both low income (making less + than 80% of the HUD Area Median Family Income) and severely burdened by housing costs + (paying greater than 30% of their income to housing costs) +
+
    +
  • + + Data resolution: + + Census block group +
    • +
  • + + Data source: + + + U.S. Census Bureau + +
    • +
  • + + Data date range: + + 5-year estimates, 2015-2019 +
    • +
+
+
+
+
+ +`; diff --git a/client/src/components/DatasetContainer/tests/datasetContainer.test.tsx b/client/src/components/DatasetContainer/tests/datasetContainer.test.tsx new file mode 100644 index 00000000..4b894fa3 --- /dev/null +++ b/client/src/components/DatasetContainer/tests/datasetContainer.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../../test/testHelpers'; +import DatasetContainer from '../../DatasetContainer'; + +describe('rendering of the DatasetContainer', () => { + const {asFragment} = render( + + + , + ); + + it('checks if various text fields are visible', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/J40Alert/index.tsx b/client/src/components/J40Alert/index.tsx new file mode 100644 index 00000000..d4d43b61 --- /dev/null +++ b/client/src/components/J40Alert/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import {useIntl} from 'gatsby-plugin-intl'; +import {defineMessages} from 'react-intl'; +import * as styles from './j40Alert.module.scss'; + +const J40Alert = () => { + const intl = useIntl(); + const messages = defineMessages({ + alertMsg: { + id: 'datasetAlert.header.alertMsg', + defaultMessage: 'Limited data sources — Datasets may be added, updated, or removed.', + description: 'an alert message to inform users that datasets may change', + }, + }); + return ( +
+ {intl.formatMessage(messages.alertMsg)} +
+ ); +}; + +export default J40Alert; diff --git a/client/src/components/J40Alert/j40Alert.module.scss b/client/src/components/J40Alert/j40Alert.module.scss new file mode 100644 index 00000000..9e057e0c --- /dev/null +++ b/client/src/components/J40Alert/j40Alert.module.scss @@ -0,0 +1,5 @@ +.j40Alert { + font-size: large; + font-weight: 600; + padding: 1rem 0; +} diff --git a/client/src/components/J40Alert/j40Alert.module.scss.d.ts b/client/src/components/J40Alert/j40Alert.module.scss.d.ts new file mode 100644 index 00000000..6de09e5c --- /dev/null +++ b/client/src/components/J40Alert/j40Alert.module.scss.d.ts @@ -0,0 +1,12 @@ +declare namespace J40AlertScssNamespace { + export interface IJ40AlertScss { + j40Alert: string; + } + } + +declare const J40AlertScssModule: J40AlertScssNamespace.IJ40AlertScss & { + /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */ + locals: J40AlertScssNamespace.IJ40AlertScss; + }; + + export = J40AlertScssModule; diff --git a/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap b/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap new file mode 100644 index 00000000..4cdcea95 --- /dev/null +++ b/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the J40Alert checks if various text fields are visible 1`] = ` + +
+ Limited data sources — Datasets may be added, updated, or removed. +
+ +`; diff --git a/client/src/components/J40Alert/tests/j40Alert.test.tsx b/client/src/components/J40Alert/tests/j40Alert.test.tsx new file mode 100644 index 00000000..96506b63 --- /dev/null +++ b/client/src/components/J40Alert/tests/j40Alert.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../../test/testHelpers'; +import J40Alert from '../../J40Alert'; + +describe('rendering of the J40Alert', () => { + const {asFragment} = render( + + + , + ); + + it('checks if various text fields are visible', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/J40Header.tsx b/client/src/components/J40Header.tsx index 83751b03..f082f06f 100644 --- a/client/src/components/J40Header.tsx +++ b/client/src/components/J40Header.tsx @@ -11,7 +11,11 @@ import {defineMessages} from 'react-intl'; // @ts-ignore import siteLogo from '../../src/images/icon.png'; -const J40Header = () => { +interface IJ40HeaderProps { + location: Location +} +const J40Header = ({location}:IJ40HeaderProps) => { + const isMethodologyPage = location.pathname.match(/methodology\/?/); const intl = useIntl(); const [mobileNavOpen, setMobileNavOpen] = useState(false); const messages = defineMessages({ @@ -128,6 +132,16 @@ const J40Header = () => {
+ {!isMethodologyPage && + Limited data sources — + This tool currently includes 16 datasets. Over time, datasets could be + added, updated, or removed. The datasets come from a variety of sources + based on availability, quality, and relevance to environmental, energy, + and climate issues. Each dataset has limitations, such as how recently + the data was updated. + } ); }; diff --git a/client/src/components/J40Map.module.scss b/client/src/components/J40Map.module.scss index 046203fb..f4dc30ef 100644 --- a/client/src/components/J40Map.module.scss +++ b/client/src/components/J40Map.module.scss @@ -1,4 +1,4 @@ -@import "./areaDetailUtils.scss"; +@import "./utils.scss"; .mapAndInfoPanelContainer { display: flex; diff --git a/client/src/components/areaDetail.module.scss b/client/src/components/areaDetail.module.scss index 96f7d902..94b2024f 100644 --- a/client/src/components/areaDetail.module.scss +++ b/client/src/components/areaDetail.module.scss @@ -1,4 +1,4 @@ -@import "./areaDetailUtils.scss"; +@import "./utils.scss"; $sidePanelLabelFontColor: #171716; $featureSelectBorderColor: #00bde3; diff --git a/client/src/components/layout.tsx b/client/src/components/layout.tsx index 1880c731..bedca4ef 100644 --- a/client/src/components/layout.tsx +++ b/client/src/components/layout.tsx @@ -3,8 +3,8 @@ import {GridContainer, Grid} from '@trussworks/react-uswds'; import J40Header from './J40Header'; import J40Footer from './J40Footer'; import {URLFlagProvider} from '../contexts/FlagContext'; -import {Helmet} from 'react-helmet'; -import {useIntl} from 'gatsby-plugin-intl'; +import DatasetContainer from '../components/DatasetContainer'; +// this has to be wrong interface ILayoutProps { children: ReactNode, @@ -12,16 +12,12 @@ interface ILayoutProps { } const Layout = ({children, location}: ILayoutProps) => { - const intl = useIntl(); + const isMethodologyPage = location.pathname.match(/methodology\/?/); // @ts-ignore return ( - - - - - + @@ -31,6 +27,7 @@ const Layout = ({children, location}: ILayoutProps) => { + {isMethodologyPage ? : null} ); diff --git a/client/src/components/mapWrapper.tsx b/client/src/components/mapWrapper.tsx index 122e2f6f..0be7a25b 100644 --- a/client/src/components/mapWrapper.tsx +++ b/client/src/components/mapWrapper.tsx @@ -8,11 +8,11 @@ interface IMapWrapperProps { const MapWrapper = ({location}: IMapWrapperProps) => { return ( -
+ <>

Explore the Tool

-
+ ); }; diff --git a/client/src/components/areaDetailUtils.scss b/client/src/components/utils.scss similarity index 77% rename from client/src/components/areaDetailUtils.scss rename to client/src/components/utils.scss index 7f8d4207..ad8bc5f8 100644 --- a/client/src/components/areaDetailUtils.scss +++ b/client/src/components/utils.scss @@ -5,6 +5,10 @@ Todo Design System: replace colors with tokens. Once these styles become more general the name can be less specific */ +//Styles associated with the side panel $sidePanelBorderColor: #f2f2f2; $sidePanelBorder: 2px solid $sidePanelBorderColor; $mobileBreakpoint: 400px; + +//Styles with Dataset container +$datasetContainerColor: #eef6fb; diff --git a/client/src/contexts/FlagContext.tsx b/client/src/contexts/FlagContext.tsx index 71656a3c..901d1a68 100644 --- a/client/src/contexts/FlagContext.tsx +++ b/client/src/contexts/FlagContext.tsx @@ -54,7 +54,6 @@ const URLFlagProvider = ({children, location}: IURLFlagProviderProps) => { flags[flag] = true; } } - console.log(JSON.stringify(location), JSON.stringify(flags)); return ( {
-

Explore the Tool

diff --git a/client/src/pages/methodology.tsx b/client/src/pages/methodology.tsx index 2ea6abad..af7e5b04 100644 --- a/client/src/pages/methodology.tsx +++ b/client/src/pages/methodology.tsx @@ -7,39 +7,35 @@ interface MethodPageProps { // markup const IndexPage = ({location}: MethodPageProps) => { - return ( -
-

Methodology

-

+ return ( + +

+

Methodology

+

The Just Progress tool combines demographic, environmental, and socio-economic data to generate a cumulative index score, referred to as the Just Progress Index. The tool currently utilizes national, publically-available data from the United States Census Bureau’s American Community Survey (ACS) and the EPA’s EJScreen tool. -

-

+

+

The various inputs into the Just Progress Index are averaged into 2 categories: Pollution Burden and Demographics. -

-

+

+

Pollution Burden: health risks arising from proximity and potential exposures to pollution and other adverse environmental conditions -

-

+

+

Demographics: sensitive populations and socioeconomic factors that make a community more vulnerable -

-

- Pollution Burden average x Demographics average = Just Progress +

+

+ Pollution Burden average x Demographics average = Just Progress Index -

- -

Just Progress Index datasets

- -

Data pending

- -
- +

+
+ ); };