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

Adds dataset cards to Methodology page (#442)

Browse source 
* intial cards for methodology page

* PR and QA feedback
- adds alert above dataset section
- adds intl
- removes nbsp
- creates directory structure for new components

* revert noUsedLocals flag

* fixed path error

* re-creates scss file to test build failure

* renaming file to troubleshoot build error

* links open in new tabs and removes console.log

* removes units on all scss value that equal 0

* resolving merge conflicts from header merge

* updates snapshots from conflict resolution
This commit is contained in:
Vim 2021-08-02 08:49:49 -07:00 • committed by GitHub
commit 51f7666062
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 688 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

34
client/src/components/DatasetContainer/dsContainer.module.scss Normal file
View file

@ -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;
}

16
client/src/components/DatasetContainer/dsContainer.module.scss.d.ts vendored Normal file
View file

@ -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;

93
client/src/components/DatasetContainer/index.tsx Normal file
View file

@ -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 (
<div className={`${styles.datasetContainer} desktop:grid-col`}>
<div className={`${styles.j40AlertContainer} desktop:grid-col`}>
<div className={'grid-container-desktop-lg'}>
<J40Alert />
</div>
</div>
<div className={'grid-container-desktop-lg'}>
<h1 className={styles.datasetContainerHeader}>{intl.formatMessage(messages.cumulativeScore)}</h1>
<p className={styles.datasetContainerSubTitle}>{intl.formatMessage(messages.subTitle)}</p>
<div className={styles.datasetCardsContainer}>
{cards.map((card, index) => <DatasetCard key={index} datasetCardProps={card}/>)}
</div>
</div>
</div>
);
};
export default DatasetContainer;

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

@ -0,0 +1,225 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = `
<DocumentFragment>
<div
class="undefined desktop:grid-col"
>
<div
class="undefined desktop:grid-col"
>
<div
class="grid-container-desktop-lg"
>
<div>
Limited data sources — Datasets may be added, updated, or removed.
</div>
</div>
</div>
<div
class="grid-container-desktop-lg"
>
<h1>
Datasets used in cumulative score
</h1>
<p>
The datasets come from a variety of sources and were selected after considering relevance, availability, recency and quality.
</p>
<div>
<div>
<h3>
Poverty
</h3>
<div>
What is it?
</div>
<div>
Percent of a block group's population in households where the household
income is less than or equal to twice the federal "poverty level"
</div>
<ul>
<li>
<span>
Data resolution:
</span>
Census block group
</li>
<li>
<span>
Data source:
</span>
<a
href="https://www.census.gov/"
rel="noreferrer"
target="_blank"
>
U.S. Census Bureau
</a>
</li>
<li>
<span>
Data date range:
</span>
5-year estimates, 2015-2019
</li>
</ul>
</div>
<div>
<h3>
Education (less than high school)
</h3>
<div>
What is it?
</div>
<div>
Percent of people age 25 or older in a block group whose education is short of a high school diploma
</div>
<ul>
<li>
<span>
Data resolution:
</span>
Census block group
</li>
<li>
<span>
Data source:
</span>
<a
href="https://www.census.gov/"
rel="noreferrer"
target="_blank"
>
U.S. Census Bureau
</a>
</li>
<li>
<span>
Data date range:
</span>
5-year estimates, 2015-2019
</li>
</ul>
</div>
<div>
<h3>
Linguistic isolation
</h3>
<div>
What is it?
</div>
<div>
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)
</div>
<ul>
<li>
<span>
Data resolution:
</span>
Census block group
</li>
<li>
<span>
Data source:
</span>
<a
href="https://www.census.gov/"
rel="noreferrer"
target="_blank"
>
U.S. Census Bureau
</a>
</li>
<li>
<span>
Data date range:
</span>
5-year estimates, 2015-2019
</li>
</ul>
</div>
<div>
<h3>
Unemployment rate
</h3>
<div>
What is it?
</div>
<div>
Unemployment rate (people who are unemployed divided by the total population of
people in the labor force over 16 years old)
</div>
<ul>
<li>
<span>
Data resolution:
</span>
Census block group
</li>
<li>
<span>
Data source:
</span>
<a
href="https://www.census.gov/"
rel="noreferrer"
target="_blank"
>
U.S. Census Bureau
</a>
</li>
<li>
<span>
Data date range:
</span>
5-year estimates, 2015-2019
</li>
</ul>
</div>
<div>
<h3>
Housing burden
</h3>
<div>
What is it?
</div>
<div>
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)
</div>
<ul>
<li>
<span>
Data resolution:
</span>
Census block group
</li>
<li>
<span>
Data source:
</span>
<a
href="https://www.census.gov/"
rel="noreferrer"
target="_blank"
>
U.S. Census Bureau
</a>
</li>
<li>
<span>
Data date range:
</span>
5-year estimates, 2015-2019
</li>
</ul>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;

16
client/src/components/DatasetContainer/tests/datasetContainer.test.tsx Normal file
View file

@ -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(
<LocalizedComponent>
<DatasetContainer />
</LocalizedComponent>,
);
it('checks if various text fields are visible', () => {
expect(asFragment()).toMatchSnapshot();
});
});