mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-04 01:54:19 -07:00
Methodology page update for Score L (#1010)
* Add first column of Methodology score L - create a new component MethodologyFormula (MF) - MF component contain text on formula calculation - add snapshots * Add 2nd column to Methodology page - add LowIncome component - add USWDS styles on download component - add margin-top styles to global - enable all font-sizes to theme file * Add Categories to Methodology page - create CategoryCard component - create Categories component - add snapshots * Update datasets - update styling to match mock - add additional indicators - remove additional indicators - update snapshots * Add links to categories to datasets - update snapshots * Remove additional indicator test as they now N/A * ensure each DOM ID is unique for a11y - update snapshots * Add Category heading for a11y - removes ScoreSteps tests - comment out ScoreStep component - update snapshots - cypress passes all a11y * Update to methodology copy - based on PDF and spreadsheet and Living Copy -updates snapshots * Add comments around using IF, AND, ELSE constants - make indicator constant names more explicit * Update copy based on living doc - update snapshots
This commit is contained in:
Vim
GitHub
parent
123fbf6254
commit
24bac56d9e
41 changed files with 4008 additions and 1804 deletions
|
|
@ -4,8 +4,3 @@ Feature: All links on the dataset cards should be functional
|
||||||
Given I am on the "Methodology" page
|
Given I am on the "Methodology" page
|
||||||
When I look for the "Datasets used in methodology" CTA
|
When I look for the "Datasets used in methodology" CTA
|
||||||
Then All links under "Datasets used in methodology" should work
|
Then All links under "Datasets used in methodology" should work
|
||||||
|
|
||||||
Scenario: If I click on any link in the additional indicators dataset, they should work
|
|
||||||
Given I am on the "Methodology" page
|
|
||||||
When I look for the "Additional Indicators" CTA
|
|
||||||
Then All links under "Additional Indicators" should work
|
|
||||||
|
|
|
||||||
8
client/src/components/Categories/Categories.module.scss
Normal file
8
client/src/components/Categories/Categories.module.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@use '../../styles/design-system.scss' as *;
|
||||||
|
|
||||||
|
.categoriesContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
@include u-margin-top(4);
|
||||||
|
}
|
||||||
12
client/src/components/Categories/Categories.module.scss.d.ts
vendored
Normal file
12
client/src/components/Categories/Categories.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
declare namespace CategoriesNamespace {
|
||||||
|
export interface ICategoriesScss {
|
||||||
|
categoriesContainer: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const CategoriesScssModule: CategoriesNamespace.ICategoriesScss & {
|
||||||
|
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||||
|
locals: CategoriesNamespace.ICategoriesScss;
|
||||||
|
};
|
||||||
|
|
||||||
|
export = CategoriesScssModule;
|
||||||
16
client/src/components/Categories/Categories.test.tsx
Normal file
16
client/src/components/Categories/Categories.test.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import {render} from '@testing-library/react';
|
||||||
|
import {LocalizedComponent} from '../../test/testHelpers';
|
||||||
|
import Categories from './Categories';
|
||||||
|
|
||||||
|
describe('rendering of the Categories', () => {
|
||||||
|
const {asFragment} = render(
|
||||||
|
<LocalizedComponent>
|
||||||
|
<Categories />
|
||||||
|
</LocalizedComponent>,
|
||||||
|
);
|
||||||
|
|
||||||
|
it('checks if component renders', () => {
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
43
client/src/components/Categories/Categories.tsx
Normal file
43
client/src/components/Categories/Categories.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {Grid} from '@trussworks/react-uswds';
|
||||||
|
|
||||||
|
import IndicatorCategory from '../CategoryCard';
|
||||||
|
import J40MainGridContainer from '../J40MainGridContainer';
|
||||||
|
|
||||||
|
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||||
|
import * as styles from './Categories.module.scss';
|
||||||
|
|
||||||
|
const categories = [
|
||||||
|
METHODOLOGY_COPY.CATEGORIES.CLIMATE_CHANGE,
|
||||||
|
METHODOLOGY_COPY.CATEGORIES.CLEAN_ENERGY,
|
||||||
|
METHODOLOGY_COPY.CATEGORIES.CLEAN_TRANSPORT,
|
||||||
|
METHODOLOGY_COPY.CATEGORIES.AFFORDABLE_HOUSING,
|
||||||
|
METHODOLOGY_COPY.CATEGORIES.LEGACY_POLLUTION,
|
||||||
|
METHODOLOGY_COPY.CATEGORIES.CLEAN_WATER,
|
||||||
|
METHODOLOGY_COPY.CATEGORIES.HEALTH_BURDENS,
|
||||||
|
METHODOLOGY_COPY.CATEGORIES.WORKFORCE_DEV,
|
||||||
|
];
|
||||||
|
|
||||||
|
const Categories = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<J40MainGridContainer className={styles.categoriesContainer}>
|
||||||
|
|
||||||
|
<Grid row>
|
||||||
|
<Grid col={12}>
|
||||||
|
<h2>{METHODOLOGY_COPY.CATEGORY.HEADING}</h2>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
</J40MainGridContainer>
|
||||||
|
|
||||||
|
<J40MainGridContainer className={styles.categoriesContainer}>
|
||||||
|
{
|
||||||
|
categories.map((category, index) => <IndicatorCategory key={index} categoryInfo={category} />)
|
||||||
|
}
|
||||||
|
</J40MainGridContainer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Categories;
|
||||||
|
|
@ -0,0 +1,403 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`rendering of the Categories checks if component renders 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div
|
||||||
|
class="grid-container-desktop-lg"
|
||||||
|
data-testid="gridContainer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="grid-row"
|
||||||
|
data-testid="grid"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="grid-col-12"
|
||||||
|
data-testid="grid"
|
||||||
|
>
|
||||||
|
<h2>
|
||||||
|
Categories
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="grid-container-desktop-lg"
|
||||||
|
data-testid="gridContainer"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Climate change
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
IF
|
||||||
|
</strong>
|
||||||
|
at or above 90th percentile for
|
||||||
|
<a
|
||||||
|
href="#exp-agr-loss-rate"
|
||||||
|
>
|
||||||
|
expected agriculture loss rate
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
<a
|
||||||
|
href="#exp-bld-loss-rate"
|
||||||
|
>
|
||||||
|
expected building loss rate
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
<a
|
||||||
|
href="#exp-pop-loss-rate"
|
||||||
|
>
|
||||||
|
expected population loss rate
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
AND
|
||||||
|
</strong>
|
||||||
|
is low income
|
||||||
|
<sup>
|
||||||
|
*
|
||||||
|
</sup>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
THEN
|
||||||
|
</strong>
|
||||||
|
the community is disadvantaged.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Clean energy and energy efficiency
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
IF
|
||||||
|
</strong>
|
||||||
|
at or above 90th percentile for
|
||||||
|
<a
|
||||||
|
href="#energy-burden"
|
||||||
|
>
|
||||||
|
energy cost burden score
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
<a
|
||||||
|
href="#pm-25"
|
||||||
|
>
|
||||||
|
PM2.5
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
AND
|
||||||
|
</strong>
|
||||||
|
is low income
|
||||||
|
<sup>
|
||||||
|
*
|
||||||
|
</sup>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
THEN
|
||||||
|
</strong>
|
||||||
|
the community is disadvantaged.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Clean transportation
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
IF
|
||||||
|
</strong>
|
||||||
|
at or above 90th percentile for
|
||||||
|
<a
|
||||||
|
href="#diesel-pm"
|
||||||
|
>
|
||||||
|
diesel particulate matter
|
||||||
|
</a>
|
||||||
|
or
|
||||||
|
<a
|
||||||
|
href="#traffic-vol"
|
||||||
|
>
|
||||||
|
traffic proximity and volume
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
AND
|
||||||
|
</strong>
|
||||||
|
is low income
|
||||||
|
<sup>
|
||||||
|
*
|
||||||
|
</sup>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
THEN
|
||||||
|
</strong>
|
||||||
|
the community is disadvantaged.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Affordable and sustainable housing
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
IF
|
||||||
|
</strong>
|
||||||
|
at or above 90th percentile for
|
||||||
|
<a
|
||||||
|
href="#lead-paint"
|
||||||
|
>
|
||||||
|
lead paint
|
||||||
|
</a>
|
||||||
|
AND
|
||||||
|
<a
|
||||||
|
href="#median-home"
|
||||||
|
>
|
||||||
|
the median home value
|
||||||
|
</a>
|
||||||
|
is less than
|
||||||
|
90th percentile OR at or above the 90th percentile for the
|
||||||
|
<a
|
||||||
|
href="#house-burden"
|
||||||
|
>
|
||||||
|
housing cost burden
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
AND
|
||||||
|
</strong>
|
||||||
|
is low income
|
||||||
|
<sup>
|
||||||
|
*
|
||||||
|
</sup>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
THEN
|
||||||
|
</strong>
|
||||||
|
the community is disadvantaged.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Reduction and remediation of legacy pollution
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
IF
|
||||||
|
</strong>
|
||||||
|
at or above 90th percentile for
|
||||||
|
<a
|
||||||
|
href="#prox-haz"
|
||||||
|
>
|
||||||
|
proximity to hazardous waste facilities
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
<a
|
||||||
|
href="#prox-npl"
|
||||||
|
>
|
||||||
|
proximity to NLP sites
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
<a
|
||||||
|
href="#prox-rmp"
|
||||||
|
>
|
||||||
|
proximity to RMP sites
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
AND
|
||||||
|
</strong>
|
||||||
|
is low income
|
||||||
|
<sup>
|
||||||
|
*
|
||||||
|
</sup>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
THEN
|
||||||
|
</strong>
|
||||||
|
the community is disadvantaged.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Critical clean water and waste infrastructure
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
IF
|
||||||
|
</strong>
|
||||||
|
at or above 90th percentile for
|
||||||
|
<a
|
||||||
|
href="#waste-water"
|
||||||
|
>
|
||||||
|
wastewater discharge
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
AND
|
||||||
|
</strong>
|
||||||
|
is low income
|
||||||
|
<sup>
|
||||||
|
*
|
||||||
|
</sup>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
THEN
|
||||||
|
</strong>
|
||||||
|
the community is disadvantaged.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Health burdens
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
IF
|
||||||
|
</strong>
|
||||||
|
at or above 90th percentile for
|
||||||
|
<a
|
||||||
|
href="#asthma"
|
||||||
|
>
|
||||||
|
asthma
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
<a
|
||||||
|
href="#diabetes"
|
||||||
|
>
|
||||||
|
diabetes
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
<a
|
||||||
|
href="#heart-disease"
|
||||||
|
>
|
||||||
|
heart disease
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
<a
|
||||||
|
href="#life-exp"
|
||||||
|
>
|
||||||
|
low life expectancy
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
AND
|
||||||
|
</strong>
|
||||||
|
is low income
|
||||||
|
<sup>
|
||||||
|
*
|
||||||
|
</sup>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
THEN
|
||||||
|
</strong>
|
||||||
|
the community is disadvantaged.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Training and workforce development
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
IF
|
||||||
|
</strong>
|
||||||
|
at or above 90th percentile for
|
||||||
|
<a
|
||||||
|
href="#low-med-inc"
|
||||||
|
>
|
||||||
|
low median income relative to area median income
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
at or above the 90th percentile for
|
||||||
|
<a
|
||||||
|
href="#ling-iso"
|
||||||
|
>
|
||||||
|
linguistic isolation
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#unemploy"
|
||||||
|
>
|
||||||
|
unemployment
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
for percentage individuals in households at or below 100% federal
|
||||||
|
<a
|
||||||
|
href="#poverty"
|
||||||
|
>
|
||||||
|
poverty
|
||||||
|
</a>
|
||||||
|
level at or above 90%
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
AND
|
||||||
|
</strong>
|
||||||
|
where
|
||||||
|
<a
|
||||||
|
href="#high-school"
|
||||||
|
>
|
||||||
|
the high school degree achievement rates
|
||||||
|
</a>
|
||||||
|
for adults 25 years and older is less than 90%
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
THEN
|
||||||
|
</strong>
|
||||||
|
the community is disadvantaged.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
3
client/src/components/Categories/index.tsx
Normal file
3
client/src/components/Categories/index.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Categories from './Categories';
|
||||||
|
|
||||||
|
export default Categories;
|
||||||
15
client/src/components/CategoryCard/CategoryCard.module.scss
Normal file
15
client/src/components/CategoryCard/CategoryCard.module.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
@use '../../styles/design-system.scss' as *;
|
||||||
|
|
||||||
|
@mixin baseCard {
|
||||||
|
@include u-padding-top(0);
|
||||||
|
@include u-padding-right(6);
|
||||||
|
@include u-padding-bottom(6);
|
||||||
|
@include u-padding-left(6);
|
||||||
|
@include u-margin-bottom(6);
|
||||||
|
max-width: 34rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categoryCard {
|
||||||
|
@include baseCard;
|
||||||
|
@include u-bg('blue-cool-5');
|
||||||
|
}
|
||||||
12
client/src/components/CategoryCard/CategoryCard.module.scss.d.ts
vendored
Normal file
12
client/src/components/CategoryCard/CategoryCard.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
declare namespace IndicatorCategoryNamespace {
|
||||||
|
export interface IIndicatorCategoryScss {
|
||||||
|
categoryCard: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const IndicatorCategoryScssModule: IndicatorCategoryNamespace.IIndicatorCategoryScss & {
|
||||||
|
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||||
|
locals: IndicatorCategoryNamespace.IIndicatorCategoryScss;
|
||||||
|
};
|
||||||
|
|
||||||
|
export = IndicatorCategoryScssModule;
|
||||||
18
client/src/components/CategoryCard/CategoryCard.test.tsx
Normal file
18
client/src/components/CategoryCard/CategoryCard.test.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import {render} from '@testing-library/react';
|
||||||
|
import {LocalizedComponent} from '../../test/testHelpers';
|
||||||
|
import CategoryCard from './CategoryCard';
|
||||||
|
|
||||||
|
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||||
|
|
||||||
|
describe('rendering of the CategoryCard', () => {
|
||||||
|
const {asFragment} = render(
|
||||||
|
<LocalizedComponent>
|
||||||
|
<CategoryCard categoryInfo={METHODOLOGY_COPY.CATEGORIES.CLIMATE_CHANGE}/>
|
||||||
|
</LocalizedComponent>,
|
||||||
|
);
|
||||||
|
|
||||||
|
it('checks if component renders', () => {
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
32
client/src/components/CategoryCard/CategoryCard.tsx
Normal file
32
client/src/components/CategoryCard/CategoryCard.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import * as styles from './CategoryCard.module.scss';
|
||||||
|
|
||||||
|
interface ICategoryInterface {
|
||||||
|
categoryInfo: {
|
||||||
|
TITLE: JSX.Element,
|
||||||
|
IF: JSX.Element,
|
||||||
|
AND: JSX.Element,
|
||||||
|
THEN: JSX.Element
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const IndicatorCategory = ({categoryInfo}: ICategoryInterface) => {
|
||||||
|
return (
|
||||||
|
<div className={styles.categoryCard}>
|
||||||
|
<h3>
|
||||||
|
{categoryInfo.TITLE}
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
{categoryInfo.IF}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
{categoryInfo.AND}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
{categoryInfo.THEN}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IndicatorCategory;
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`rendering of the CategoryCard checks if component renders 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Climate change
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
IF
|
||||||
|
</strong>
|
||||||
|
at or above 90th percentile for
|
||||||
|
<a
|
||||||
|
href="#exp-agr-loss-rate"
|
||||||
|
>
|
||||||
|
expected agriculture loss rate
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
<a
|
||||||
|
href="#exp-bld-loss-rate"
|
||||||
|
>
|
||||||
|
expected building loss rate
|
||||||
|
</a>
|
||||||
|
OR
|
||||||
|
<a
|
||||||
|
href="#exp-pop-loss-rate"
|
||||||
|
>
|
||||||
|
expected population loss rate
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
AND
|
||||||
|
</strong>
|
||||||
|
is low income
|
||||||
|
<sup>
|
||||||
|
*
|
||||||
|
</sup>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>
|
||||||
|
THEN
|
||||||
|
</strong>
|
||||||
|
the community is disadvantaged.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
3
client/src/components/CategoryCard/index.tsx
Normal file
3
client/src/components/CategoryCard/index.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import CategoryCard from './CategoryCard';
|
||||||
|
|
||||||
|
export default CategoryCard;
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
@use '../../styles/design-system.scss' as *;
|
||||||
@import '../utils.scss';
|
@import '../utils.scss';
|
||||||
|
|
||||||
@mixin baseCard {
|
@mixin baseCard {
|
||||||
|
|
@ -8,7 +9,7 @@
|
||||||
|
|
||||||
.datasetCard {
|
.datasetCard {
|
||||||
@include baseCard;
|
@include baseCard;
|
||||||
background-color: white;
|
@include u-bg("gray-3");
|
||||||
}
|
}
|
||||||
|
|
||||||
.datasetCardAdditional {
|
.datasetCardAdditional {
|
||||||
|
|
|
||||||
|
|
@ -5,15 +5,16 @@ import * as styles from './datasetCard.module.scss';
|
||||||
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||||
|
|
||||||
interface IDatasetCardProps {
|
interface IDatasetCardProps {
|
||||||
datasetCardProps: { [key:string]: string }
|
datasetCardProps: {
|
||||||
additionalIndicator: boolean
|
[key:string]: string
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const DatasetCard = ({datasetCardProps, additionalIndicator}:IDatasetCardProps) => {
|
const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={additionalIndicator ? styles.datasetCardAdditional : styles.datasetCard}>
|
<div className={styles.datasetCard} id={datasetCardProps.domID}>
|
||||||
<h3 className={styles.datasetCardIndicator}>{datasetCardProps.indicator}</h3>
|
<h3 className={styles.datasetCardIndicator}>{datasetCardProps.indicator}</h3>
|
||||||
<div className={styles.datasetCardDescription}>
|
<div className={styles.datasetCardDescription}>
|
||||||
{datasetCardProps.description}
|
{datasetCardProps.description}
|
||||||
|
|
@ -22,23 +23,23 @@ const DatasetCard = ({datasetCardProps, additionalIndicator}:IDatasetCardProps)
|
||||||
<ul className={styles.datasetCardList}>
|
<ul className={styles.datasetCardList}>
|
||||||
<li className={styles.datasetCardListItem}>
|
<li className={styles.datasetCardListItem}>
|
||||||
<span className={styles.datasetCardLabels}>
|
<span className={styles.datasetCardLabels}>
|
||||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.SOURCE)}
|
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESP_PARTY)}
|
||||||
</span>
|
</span>
|
||||||
<a href={datasetCardProps.dataSourceURL} target={'_blank'} rel="noreferrer">
|
<a href={datasetCardProps.dataSourceURL} target={'_blank'} rel="noreferrer">
|
||||||
{datasetCardProps.dataSourceLabel}
|
{datasetCardProps.respPartyLabel}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className={styles.datasetCardListItem}>
|
|
||||||
<span className={styles.datasetCardLabels}>
|
|
||||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESOLUTION)}
|
|
||||||
</span>
|
|
||||||
{datasetCardProps.dataResolution}
|
|
||||||
</li>
|
|
||||||
<li className={styles.datasetCardListItem}>
|
<li className={styles.datasetCardListItem}>
|
||||||
<span className={styles.datasetCardLabels}>
|
<span className={styles.datasetCardLabels}>
|
||||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.DATE_RANGE)}
|
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.DATE_RANGE)}
|
||||||
</span>
|
</span>
|
||||||
{datasetCardProps.dataDateRange}
|
{datasetCardProps.dateRange}
|
||||||
|
</li>
|
||||||
|
<li className={styles.datasetCardListItem}>
|
||||||
|
<span className={styles.datasetCardLabels}>
|
||||||
|
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.USED_IN)}
|
||||||
|
</span>
|
||||||
|
{datasetCardProps.usedIn}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,43 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`rendering of addtional indicator dataset card checks if component renders 1`] = `<DocumentFragment />`;
|
|
||||||
|
|
||||||
exports[`rendering of indicator dataset card checks if component renders 1`] = `
|
exports[`rendering of indicator dataset card checks if component renders 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<div>
|
<div
|
||||||
|
id="low-income"
|
||||||
|
>
|
||||||
<h3>
|
<h3>
|
||||||
Area Median Income
|
Low Income
|
||||||
</h3>
|
</h3>
|
||||||
<div>
|
<div>
|
||||||
Median income of the census block group calculated as a percent
|
|
||||||
of the metropolitan area’s or state's median income.
|
Percent of a block group's population in households where household income is at or below
|
||||||
|
200% of the federal poverty level.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<span>
|
<span>
|
||||||
Data source:
|
Responsible Party:
|
||||||
</span>
|
</span>
|
||||||
<a
|
<a
|
||||||
href="https://www.census.gov/programs-surveys/acs"
|
href="https://www.census.gov/programs-surveys/acs"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
Census's American Community Survey
|
Census's American Community Survey.
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>
|
<span>
|
||||||
Data resolution:
|
Date range:
|
||||||
</span>
|
</span>
|
||||||
Census block group
|
2015-2019
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>
|
<span>
|
||||||
Data date range:
|
Used in:
|
||||||
</span>
|
</span>
|
||||||
2015-2019
|
All methodologies except for training and workforce development
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,19 +8,7 @@ import * as METHODOLOGY_COPY from '../../../data/copy/methodology';
|
||||||
describe('rendering of indicator dataset card', () => {
|
describe('rendering of indicator dataset card', () => {
|
||||||
const {asFragment} = render(
|
const {asFragment} = render(
|
||||||
<LocalizedComponent>
|
<LocalizedComponent>
|
||||||
<DatasetCard key={0} datasetCardProps={METHODOLOGY_COPY.INDICATORS[0]} additionalIndicator={false}/>
|
<DatasetCard key={0} datasetCardProps={METHODOLOGY_COPY.INDICATORS[0]}/>
|
||||||
</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>,
|
</LocalizedComponent>,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,14 @@
|
||||||
|
@use '../../styles/design-system.scss' as *;
|
||||||
|
|
||||||
.datasetCardsContainer {
|
.datasetCardsContainer {
|
||||||
|
@include u-margin-top(4);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.returnToTop {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
@include u-margin-bottom(4);
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
declare namespace DatasetContainerScssNamespace {
|
declare namespace DatasetContainerScssNamespace {
|
||||||
export interface IDatasetContainerScss {
|
export interface IDatasetContainerScss {
|
||||||
datasetCardsContainer: string;
|
datasetCardsContainer: string;
|
||||||
|
returnToTop: string;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {useIntl} from 'gatsby-plugin-intl';
|
import {Link, useIntl} from 'gatsby-plugin-intl';
|
||||||
import {Grid} from '@trussworks/react-uswds';
|
import {Grid} from '@trussworks/react-uswds';
|
||||||
|
|
||||||
import DatasetCard from '../DatasetCard';
|
import DatasetCard from '../DatasetCard';
|
||||||
|
|
@ -15,7 +15,7 @@ const DatasetContainer = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<J40MainGridContainer fullWidth={true} blueBackground={true}>
|
<J40MainGridContainer fullWidth={true} blueBackground={false}>
|
||||||
<J40MainGridContainer
|
<J40MainGridContainer
|
||||||
dataCy={`${hyphenizeString(METHODOLOGY_COPY.DATASETS.HEADING.defaultMessage)}-block`}>
|
dataCy={`${hyphenizeString(METHODOLOGY_COPY.DATASETS.HEADING.defaultMessage)}-block`}>
|
||||||
|
|
||||||
|
|
@ -25,49 +25,26 @@ const DatasetContainer = () => {
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Grid row>
|
|
||||||
<Grid col={12} tablet={{col: 7}} className={'j40-mb-3'}>
|
|
||||||
<p>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.INFO)}</p>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<div className={styles.datasetCardsContainer}>
|
|
||||||
{METHODOLOGY_COPY.INDICATORS.map((card) => <DatasetCard
|
|
||||||
key={card.indicator}
|
|
||||||
datasetCardProps={card}
|
|
||||||
additionalIndicator={false}
|
|
||||||
/>)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</J40MainGridContainer>
|
|
||||||
</J40MainGridContainer>
|
|
||||||
|
|
||||||
<J40MainGridContainer fullWidth={true} blueBackground={false} >
|
|
||||||
<J40MainGridContainer
|
|
||||||
dataCy={`${hyphenizeString(METHODOLOGY_COPY.DATASETS.ADDITIONAL_HEADING.defaultMessage)}-block`}>
|
|
||||||
|
|
||||||
<Grid row>
|
<Grid row>
|
||||||
<Grid col={12}>
|
<Grid col={12}>
|
||||||
<h2>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.ADDITIONAL_HEADING)}</h2>
|
<div className={styles.datasetCardsContainer}>
|
||||||
|
{METHODOLOGY_COPY.INDICATORS.map((card) => <DatasetCard
|
||||||
|
key={card.indicator}
|
||||||
|
datasetCardProps={card}
|
||||||
|
/>)}
|
||||||
|
</div>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Grid row>
|
<div className={styles.returnToTop}>
|
||||||
<Grid col={12} tablet={{col: 7}} className={'j40-mb-3'}>
|
<Link to={`/methodology`}>
|
||||||
<p>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.ADDITIONAL_INFO)}</p>
|
{METHODOLOGY_COPY.RETURN_TO_TOP.LINK}
|
||||||
</Grid>
|
</Link>
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<div className={styles.datasetCardsContainer}>
|
|
||||||
{METHODOLOGY_COPY.ADDITIONAL_INDICATORS.map((card) => <DatasetCard
|
|
||||||
key={card.indicator}
|
|
||||||
datasetCardProps={card}
|
|
||||||
additionalIndicator={true}
|
|
||||||
/>)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</J40MainGridContainer>
|
</J40MainGridContainer>
|
||||||
</J40MainGridContainer>
|
</J40MainGridContainer>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,4 @@
|
||||||
$primary-color: #112f4e;
|
@use '../../styles/design-system.scss' as *;
|
||||||
|
|
||||||
.downloadBoxContainer {
|
.downloadBoxContainer {
|
||||||
|
|
||||||
|
|
@ -6,7 +6,7 @@ $primary-color: #112f4e;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
.downloadBox {
|
.downloadBox {
|
||||||
background-color: $primary-color;
|
@include u-bg('blue-80v');
|
||||||
border-radius: 6px 6px;
|
border-radius: 6px 6px;
|
||||||
|
|
||||||
.downloadBoxTextBox {
|
.downloadBoxTextBox {
|
||||||
|
|
@ -15,12 +15,15 @@ $primary-color: #112f4e;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.downloadBoxTitle {
|
.downloadBoxTitle {
|
||||||
font-weight: bold;
|
@include typeset('sans', 'xs', 3);
|
||||||
margin-bottom: 10px;
|
@include u-text('semibold');
|
||||||
|
@include u-margin-bottom(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.downloadBoxText {
|
.downloadBoxText {
|
||||||
margin-bottom: 20px;
|
@include typeset('sans', 'xs', 3);
|
||||||
|
@include u-margin-bottom(4);
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
@ -42,8 +45,8 @@ $primary-color: #112f4e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.downloadBoxButton{
|
.downloadBoxButton{
|
||||||
background-color: white;
|
@include u-bg('white');
|
||||||
color: $primary-color;
|
@include u-color('blue-80v');
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.downloadPacketText {
|
.downloadPacketText {
|
||||||
|
|
|
||||||
20
client/src/components/LowIncome/LowIncome.module.scss
Normal file
20
client/src/components/LowIncome/LowIncome.module.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
@use '../../styles/design-system.scss' as *;
|
||||||
|
|
||||||
|
.lowIncomeContainer {
|
||||||
|
|
||||||
|
border: 1px solid #DFE1E2;
|
||||||
|
@include u-margin-top(4);
|
||||||
|
@include u-padding-left(4);
|
||||||
|
@include u-padding-right(3);
|
||||||
|
@include u-padding-bottom(4);
|
||||||
|
|
||||||
|
.lowIncomeTitle {
|
||||||
|
@include typeset('sans', 'xs', 3);
|
||||||
|
@include u-text('semibold');
|
||||||
|
}
|
||||||
|
|
||||||
|
.lowIncomeText {
|
||||||
|
@include typeset('sans', 'xs', 3);
|
||||||
|
@include u-text('light');
|
||||||
|
}
|
||||||
|
};
|
||||||
14
client/src/components/LowIncome/LowIncome.module.scss.d.ts
vendored
Normal file
14
client/src/components/LowIncome/LowIncome.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
declare namespace LowIncomeNamespace {
|
||||||
|
export interface ILowIncomeScss {
|
||||||
|
lowIncomeContainer: string;
|
||||||
|
lowIncomeTitle: string;
|
||||||
|
lowIncomeText: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const LowIncomeScssModule: LowIncomeNamespace.ILowIncomeScss & {
|
||||||
|
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||||
|
locals: LowIncomeNamespace.ILowIncomeScss;
|
||||||
|
};
|
||||||
|
|
||||||
|
export = LowIncomeScssModule;
|
||||||
16
client/src/components/LowIncome/LowIncome.test.tsx
Normal file
16
client/src/components/LowIncome/LowIncome.test.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import {render} from '@testing-library/react';
|
||||||
|
import {LocalizedComponent} from '../../test/testHelpers';
|
||||||
|
import LowIncome from './LowIncome';
|
||||||
|
|
||||||
|
describe('rendering of the LowIncome', () => {
|
||||||
|
const {asFragment} = render(
|
||||||
|
<LocalizedComponent>
|
||||||
|
<LowIncome />
|
||||||
|
</LocalizedComponent>,
|
||||||
|
);
|
||||||
|
|
||||||
|
it('checks if component renders', () => {
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
26
client/src/components/LowIncome/LowIncome.tsx
Normal file
26
client/src/components/LowIncome/LowIncome.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
|
|
||||||
|
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||||
|
import * as styles from './LowIncome.module.scss';
|
||||||
|
|
||||||
|
const LowIncome = () => {
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.lowIncomeContainer}>
|
||||||
|
<p className={styles.lowIncomeTitle}>
|
||||||
|
<sup>*</sup>
|
||||||
|
{' '}
|
||||||
|
{intl.formatMessage(METHODOLOGY_COPY.LOW_INCOME.HEADING)}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p className={styles.lowIncomeText}>
|
||||||
|
{intl.formatMessage(METHODOLOGY_COPY.LOW_INCOME.INFO)}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LowIncome;
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`rendering of the LowIncome checks if component renders 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<sup>
|
||||||
|
*
|
||||||
|
</sup>
|
||||||
|
Low Income
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
At or above 65th percentile for percent of census tract population of households where household
|
||||||
|
income is at or below 200% of the federal poverty level
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
3
client/src/components/LowIncome/index.tsx
Normal file
3
client/src/components/LowIncome/index.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import LowIncome from './LowIncome';
|
||||||
|
|
||||||
|
export default LowIncome;
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
@use '../../styles/design-system.scss' as *;
|
||||||
|
|
||||||
|
.formulaContainer {
|
||||||
|
@include u-margin-top(5);
|
||||||
|
p:not(:first-child) {
|
||||||
|
font-style: italic;
|
||||||
|
|
||||||
|
span {
|
||||||
|
@include u-text('bold');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
12
client/src/components/MethodologyFormula/MethodologyFormula.module.scss.d.ts
vendored
Normal file
12
client/src/components/MethodologyFormula/MethodologyFormula.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
declare namespace MethodologyFormulaNamespace {
|
||||||
|
export interface IMethodologyFormulaScss {
|
||||||
|
formulaContainer: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const MethodologyFormulaScssModule: MethodologyFormulaNamespace.IMethodologyFormulaScss & {
|
||||||
|
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||||
|
locals: MethodologyFormulaNamespace.IMethodologyFormulaScss;
|
||||||
|
};
|
||||||
|
|
||||||
|
export = MethodologyFormulaScssModule;
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import {render} from '@testing-library/react';
|
||||||
|
import {LocalizedComponent} from '../../test/testHelpers';
|
||||||
|
import MethodologyFormula from './MethodologyFormula';
|
||||||
|
|
||||||
|
describe('rendering of the MethodologyFormula', () => {
|
||||||
|
const {asFragment} = render(
|
||||||
|
<LocalizedComponent>
|
||||||
|
<MethodologyFormula />
|
||||||
|
</LocalizedComponent>,
|
||||||
|
);
|
||||||
|
|
||||||
|
it('checks if component renders', () => {
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
|
|
||||||
|
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||||
|
import * as styles from './MethodologyFormula.module.scss';
|
||||||
|
|
||||||
|
// The site shows the formula used in the methodology. The constants seen
|
||||||
|
// below aim to capture the 3 part of that formula. These are not
|
||||||
|
// reserved words.
|
||||||
|
|
||||||
|
const MethodologyFormula = () => {
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={styles.formulaContainer}>
|
||||||
|
<p>
|
||||||
|
{intl.formatMessage(METHODOLOGY_COPY.PAGE.FORMULA_INTRO)}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{METHODOLOGY_COPY.FORMULA.IF}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{METHODOLOGY_COPY.FORMULA.AND}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{METHODOLOGY_COPY.FORMULA.THEN}
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MethodologyFormula;
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`rendering of the MethodologyFormula checks if component renders 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<section>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
Under the current formula, a census tract will be considered disadvantaged:
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
IF
|
||||||
|
</span>
|
||||||
|
it is above the threshold for one or more climate or environmental indicator
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
AND
|
||||||
|
</span>
|
||||||
|
it is above the threshold for one or more socioeconomic indicator
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
THEN
|
||||||
|
</span>
|
||||||
|
the community is considered disadvantaged.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
3
client/src/components/MethodologyFormula/index.tsx
Normal file
3
client/src/components/MethodologyFormula/index.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import MethodologyFormula from './MethodologyFormula';
|
||||||
|
|
||||||
|
export default MethodologyFormula;
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`rendering of the component should match the snapshot of the MapIntroduction component 1`] = `
|
|
||||||
<DocumentFragment>
|
|
||||||
<h2>
|
|
||||||
Methodology
|
|
||||||
</h2>
|
|
||||||
<div
|
|
||||||
class="grid-row"
|
|
||||||
data-testid="grid"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="grid-col-7"
|
|
||||||
data-testid="grid"
|
|
||||||
>
|
|
||||||
<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.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
The following describes the process for identifying communities of focus.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ol
|
|
||||||
class="usa-process-list"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
class="usa-process-list__item"
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
class="usa-process-list__heading"
|
|
||||||
data-testid="processListHeading"
|
|
||||||
>
|
|
||||||
Gather datasets
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
|
|
||||||
</p>
|
|
||||||
<p
|
|
||||||
class="flush"
|
|
||||||
>
|
|
||||||
The methodology includes the following inputs that are equally weighted.
|
|
||||||
</p>
|
|
||||||
<h4>
|
|
||||||
Percent of Area Median Income
|
|
||||||
</h4>
|
|
||||||
<p
|
|
||||||
class="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>
|
|
||||||
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.
|
|
||||||
<h4>
|
|
||||||
The high school degree achievement rate for adults 25 years and older
|
|
||||||
</h4>
|
|
||||||
<p
|
|
||||||
class="flush"
|
|
||||||
>
|
|
||||||
The percent of individuals who are 25 or older who have received a high school degree.
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="usa-process-list__item"
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
class="usa-process-list__heading"
|
|
||||||
data-testid="processListHeading"
|
|
||||||
>
|
|
||||||
Determine communites of focus
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
|
|
||||||
</p>
|
|
||||||
<p
|
|
||||||
class="flush"
|
|
||||||
>
|
|
||||||
Under the existing formula, a census block group will be considered a community of focus if:
|
|
||||||
</p>
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
The high school degree achievement rate for adults 25 years and older is greater than 95%
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</DocumentFragment>
|
|
||||||
`;
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
import {render} from '@testing-library/react';
|
|
||||||
import ScoreStepsList from './scoreStepsList';
|
|
||||||
import {LocalizedComponent} from '../test/testHelpers';
|
|
||||||
|
|
||||||
// TODO: Move this to a location that will detect on all tests
|
|
||||||
// See ticket: #550
|
|
||||||
beforeAll(() => {
|
|
||||||
jest.spyOn(global.console, 'error').mockImplementation((...params) => {
|
|
||||||
console.error(params);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('rendering of the component', () => {
|
|
||||||
const {asFragment} = render(
|
|
||||||
<LocalizedComponent>
|
|
||||||
<ScoreStepsList/>
|
|
||||||
</LocalizedComponent>,
|
|
||||||
);
|
|
||||||
|
|
||||||
it('should match the snapshot of the MapIntroduction component', () => {
|
|
||||||
expect(asFragment()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('No console errors', () => {
|
|
||||||
expect(console.error).toBeCalledTimes(0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -2,11 +2,14 @@ import * as React from 'react';
|
||||||
import {Grid} from '@trussworks/react-uswds';
|
import {Grid} from '@trussworks/react-uswds';
|
||||||
import {useIntl} from 'gatsby-plugin-intl';
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
|
|
||||||
|
import Categories from '../components/Categories';
|
||||||
import DatasetContainer from '../components/DatasetContainer';
|
import DatasetContainer from '../components/DatasetContainer';
|
||||||
import DownloadPacket from '../components/DownloadPacket';
|
import DownloadPacket from '../components/DownloadPacket';
|
||||||
import J40MainGridContainer from '../components/J40MainGridContainer';
|
import J40MainGridContainer from '../components/J40MainGridContainer';
|
||||||
|
import MethodologyFormula from '../components/MethodologyFormula';
|
||||||
import Layout from '../components/layout';
|
import Layout from '../components/layout';
|
||||||
import ScoreStepsList from '../components/scoreStepsList';
|
import LowIncome from '../components/LowIncome';
|
||||||
|
// import ScoreStepsList from '../components/scoreStepsList';
|
||||||
|
|
||||||
import * as METHODOLOGY_COPY from '../data/copy/methodology';
|
import * as METHODOLOGY_COPY from '../data/copy/methodology';
|
||||||
|
|
||||||
|
|
@ -14,7 +17,6 @@ interface MethodPageProps {
|
||||||
location: Location;
|
location: Location;
|
||||||
}
|
}
|
||||||
|
|
||||||
// markup
|
|
||||||
const IndexPage = ({location}: MethodPageProps) => {
|
const IndexPage = ({location}: MethodPageProps) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
|
|
@ -25,29 +27,44 @@ const IndexPage = ({location}: MethodPageProps) => {
|
||||||
|
|
||||||
<h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1>
|
<h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1>
|
||||||
|
|
||||||
|
{/* First column */}
|
||||||
<Grid row gap className={'j40-mb-5'}>
|
<Grid row gap className={'j40-mb-5'}>
|
||||||
<Grid col={12} tablet={{col: 6}}>
|
<Grid col={12} tablet={{col: 8}}>
|
||||||
<section>
|
<section>
|
||||||
<p>
|
<p>
|
||||||
{intl.formatMessage(METHODOLOGY_COPY.PAGE.DESCRIPTION)}
|
{intl.formatMessage(METHODOLOGY_COPY.PAGE.DESCRIPTION)}
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Formula section */}
|
||||||
|
<MethodologyFormula />
|
||||||
|
|
||||||
|
{/* Category description */}
|
||||||
|
<section className={`j40-mt-7`}>
|
||||||
|
<p>
|
||||||
|
{intl.formatMessage(METHODOLOGY_COPY.PAGE.CATEGORY_TEXT)}
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid col={12} tablet={{col: 6}}>
|
|
||||||
|
{/* Second column */}
|
||||||
|
<Grid col={12} tablet={{col: 4}}>
|
||||||
<DownloadPacket />
|
<DownloadPacket />
|
||||||
|
<LowIncome />
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
</J40MainGridContainer>
|
</J40MainGridContainer>
|
||||||
|
|
||||||
|
<Categories />
|
||||||
<DatasetContainer/>
|
<DatasetContainer/>
|
||||||
|
|
||||||
<J40MainGridContainer>
|
{/* <J40MainGridContainer>
|
||||||
<Grid row>
|
<Grid row>
|
||||||
<Grid col>
|
<Grid col>
|
||||||
<ScoreStepsList/>
|
<ScoreStepsList/>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
</J40MainGridContainer>
|
</J40MainGridContainer> */}
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -81,14 +81,19 @@ p.flush {
|
||||||
@include j40-element('sm', 4, 'normal', 0);
|
@include j40-element('sm', 4, 'normal', 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 24 pixel margin-bottom
|
||||||
|
.j40-mb-3 {
|
||||||
|
@include u-margin-bottom(3)
|
||||||
|
}
|
||||||
|
|
||||||
// 40 pixel margin-bottom
|
// 40 pixel margin-bottom
|
||||||
.j40-mb-5 {
|
.j40-mb-5 {
|
||||||
@include u-margin-bottom(5)
|
@include u-margin-bottom(5)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 24 pixel margin-bottom
|
// 56 pixel margin-top
|
||||||
.j40-mb-3 {
|
.j40-mt-7 {
|
||||||
@include u-margin-bottom(3)
|
@include u-margin-top(7)
|
||||||
}
|
}
|
||||||
|
|
||||||
.j40-footer-ceq-font {
|
.j40-footer-ceq-font {
|
||||||
|
|
|
||||||
|
|
@ -319,13 +319,13 @@ Or use `false` for unneeded weights.
|
||||||
----------------------------------------
|
----------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
$theme-font-weight-thin: false;
|
$theme-font-weight-thin: 100;
|
||||||
$theme-font-weight-light: 300;
|
$theme-font-weight-light: 300;
|
||||||
$theme-font-weight-normal: 400;
|
$theme-font-weight-normal: 400;
|
||||||
$theme-font-weight-medium: false;
|
$theme-font-weight-medium: 500;
|
||||||
$theme-font-weight-semibold: false;
|
$theme-font-weight-semibold: 600;
|
||||||
$theme-font-weight-bold: 700;
|
$theme-font-weight-bold: 700;
|
||||||
$theme-font-weight-heavy: false;
|
$theme-font-weight-heavy: 800;
|
||||||
|
|
||||||
// If USWDS is generating your @font-face rules,
|
// If USWDS is generating your @font-face rules,
|
||||||
// should we generate all available weights
|
// should we generate all available weights
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue