mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-18 12:11:39 -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
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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue