From e677df794ddac9e600917b9313b1f5c8b0fbf24c Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Wed, 26 Jan 2022 16:12:33 -0500 Subject: [PATCH] Add external link icons & all outstanding changes from Living copy (#1173) * Refactor Footer component - Make Footer component align to normal folder structure - Make links in Footer use LinkTypeWrapper, which will allow icon to be added to all external links in one place * Add Trussworks link to LinkTypeWrapper * Add icon to SurveyButton comp * Add launch icon to About page cards * Add launch icon to FederalRegister link * Refactor Methodology page - Add Source and Available for fields to dataset Cards - refactor data structure for dataset Cards to handle more than 1 source - update constants file - modify SASS for source list items - update snapshots * Add copy changes; How you can help and territories * Update methodology section with copy changes * Swap out all email links with - update tests --- .../__snapshots__/AboutCard.test.tsx.snap | 1 + .../DatasetCard/datasetCard.module.scss | 7 + .../DatasetCard/datasetCard.module.scss.d.ts | 1 + client/src/components/DatasetCard/index.tsx | 51 +- .../__snapshots__/datasetCard.test.tsx.snap | 27 +- .../datasetContainer.test.tsx.snap | 825 +++++++++++------ .../__snapshots__/howYouCanHelp.test.tsx.snap | 18 +- .../{ => J40Footer}/J40Footer.spec.tsx | 2 +- .../components/{ => J40Footer}/J40Footer.tsx | 69 +- .../__snapshots__/J40Footer.spec.tsx.snap | 10 +- client/src/components/J40Footer/index.tsx | 3 + .../LinkTypeWrapper/LinkTypeWrapper.tsx | 60 ++ .../linkTypeWrapper.test.tsx.snap | 3 + .../src/components/LinkTypeWrapper/index.tsx | 49 +- client/src/components/MapWrapper/index.tsx | 1 + .../SurveyButton/SurveyButton.module.scss | 7 +- .../SurveyButton.module.scss.d.ts | 1 + .../components/SurveyButton/SurveyButton.tsx | 8 + .../__snapshots__/SurveyButton.test.tsx.snap | 4 + client/src/data/copy/about.tsx | 22 +- client/src/data/copy/explore.tsx | 37 +- client/src/data/copy/methodology.tsx | 743 ++++++++++------ .../pages/__snapshots__/contact.test.tsx.snap | 12 +- .../pages/__snapshots__/index.test.tsx.snap | 26 +- .../__snapshots__/methodology.test.tsx.snap | 835 ++++++++++++------ client/src/pages/contact.tsx | 13 +- 26 files changed, 1867 insertions(+), 968 deletions(-) rename client/src/components/{ => J40Footer}/J40Footer.spec.tsx (85%) rename client/src/components/{ => J40Footer}/J40Footer.tsx (65%) rename client/src/components/{ => J40Footer}/__snapshots__/J40Footer.spec.tsx.snap (93%) create mode 100644 client/src/components/J40Footer/index.tsx create mode 100644 client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx diff --git a/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap b/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap index 8c2a073d..27af5591 100644 --- a/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap +++ b/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap @@ -78,6 +78,7 @@ exports[`rendering of the AboutCard checks if small cards component renders 1`] > Test Action diff --git a/client/src/components/DatasetCard/datasetCard.module.scss b/client/src/components/DatasetCard/datasetCard.module.scss index ca250ddc..828d776a 100644 --- a/client/src/components/DatasetCard/datasetCard.module.scss +++ b/client/src/components/DatasetCard/datasetCard.module.scss @@ -40,6 +40,13 @@ font-size: large; } + +.datasetCardListItemSource { + @include u-margin-top(2); + margin-bottom: 0.4rem; + font-size: large; +} + .datasetCardDescription { font-size: large; padding-top: 0.3rem; diff --git a/client/src/components/DatasetCard/datasetCard.module.scss.d.ts b/client/src/components/DatasetCard/datasetCard.module.scss.d.ts index 7dbf4e77..6a0fdd24 100644 --- a/client/src/components/DatasetCard/datasetCard.module.scss.d.ts +++ b/client/src/components/DatasetCard/datasetCard.module.scss.d.ts @@ -7,6 +7,7 @@ declare namespace DatasetCardScssNamespace { datasetCardDescription: string; datasetCardLabels: string; datasetCardList: string; + datasetCardListItemSource: string; datasetCardListItem: string; } } diff --git a/client/src/components/DatasetCard/index.tsx b/client/src/components/DatasetCard/index.tsx index 52c14dfa..562f2a19 100644 --- a/client/src/components/DatasetCard/index.tsx +++ b/client/src/components/DatasetCard/index.tsx @@ -5,9 +5,7 @@ import * as styles from './datasetCard.module.scss'; import * as METHODOLOGY_COPY from '../../data/copy/methodology'; interface IDatasetCardProps { - datasetCardProps: { - [key:string]: string - } + datasetCardProps: METHODOLOGY_COPY.IIndicators } const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => { @@ -15,30 +13,53 @@ const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => { return (
+ {/* Dataset header */}

{datasetCardProps.indicator}

+ + {/* Dataset description */}
{datasetCardProps.description}
    -
  • - - {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESP_PARTY)} - - {datasetCardProps.responsibleParty} -
    • -
  • - - {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.DATE_RANGE)} - - {datasetCardProps.dateRange} -
    • + + {/* Dataset Used in */}
  • {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.USED_IN)} {datasetCardProps.usedIn}
    • + + {/* Dataset Responsible Party */} +
  • + + {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESP_PARTY)} + + {datasetCardProps.responsibleParty} +
    • + + + {datasetCardProps.sources.map((dataSource) => ( + <> + {/* Dataset Source */} +
  • + + {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.SOURCE)} + + {dataSource.source} +
    • + + {/* Dataset Available for */} +
  • + + {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.AVAILABLE_FOR)} + + {dataSource.availableFor} +
    • + + ))} +
); diff --git a/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap b/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap index cc95578d..739e5c1d 100644 --- a/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap +++ b/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap @@ -15,29 +15,38 @@ exports[`rendering of indicator dataset card checks if component renders 1`] = ` diff --git a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap index c2eef2f4..e0ad1bc0 100644 --- a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap +++ b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap @@ -45,29 +45,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -79,37 +88,46 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
- Percent of agriculture value at risk from losses due to natural hazards. Calculated by dividing - the agriculture value at risk in a census tract by the total agriculture value in that census - tract. Fourteen natural hazards that have some link to climate change include: avalanche, - coastal flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, - riverine flooding, strong wind, tornado, wildfire, and winter weather. + Percent of agriculture value at risk from losses due to natural hazards such as the fourteen + natural hazards that have some link to climate change including: avalanche, coastal flooding, + cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, riverine flooding, strong + wind, tornado, wildfire, and winter weather. Calculated by dividing the agriculture value at risk in + a census tract by the total agriculture value in that census tract.
@@ -121,38 +139,47 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
- Percent of building value at risk from losses due to natural hazards. Calculated by dividing the - building value at risk in a census tract by the total building value in that census tract. - Fourteen natural hazards that have some link to climate change include: avalanche, - coastal flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, - riverine flooding, strong wind, tornado, wildfire, and winter weather. - + Percent of building value at risk from losses due to natural hazards such as the fourteen + natural hazards that have some link to climate change including: avalanche, coastal flooding, + cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, riverine flooding, strong + wind, tornado, wildfire, and winter weather. Calculated by dividing the building value at risk in + a census tract by the total building value in that census tract. +
- Rate relative to the population in fatalities and injuries due to natural hazards each year. - Fourteen natural hazards that have some link to climate change include: avalanche, coastal - flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, riverine - flooding, strong wind, tornado, wildfire, and winter weather. - Population loss is defined as the Spatial Hazard Events and Losses or National Centers - for Environmental Information’s (NCEI) reported number of fatalities and injuries caused by the - hazard occurrence. To combine fatalities and injuries for the computation of population loss value, - an injury is counted as one-tenth (1/10) of a fatality. The NCEI Storm Events Database - classifies injuries and fatalities as direct or indirect. Both direct and indirect injuries - and fatalities are counted as population loss. This total number of injuries and fatalities - is then divided by the population in the census tract to get a per-capita rate of population risk. + Rate relative to the population in fatalities and injuries due to natural hazards each year such as + the fourteen natural hazards that have some link to climate change including: avalanche, + coastal flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, + riverine flooding, strong wind, tornado, wildfire, and winter weather. Population loss is defined + as the Spatial Hazard Events and Losses or National Centers for Environmental Information’s + (NCEI) reported number of fatalities and injuries caused by the hazard occurrence. To + combine fatalities and injuries for the computation of population loss value, an injury is counted + as one-tenth (1/10) of a fatality. The NCEI Storm Events Database classifies injuries and fatalities + as direct or indirect. Both direct and indirect injuries and fatalities are counted as population + loss. This total number of injuries and fatalities is then divided by the population in the + census tract to get a per-capita rate of population risk.
@@ -213,29 +249,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis Average annual energy cost ($) divided by household income. @@ -251,33 +296,42 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -293,32 +347,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -335,31 +395,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -371,37 +438,43 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
- The percent of households in a census tract that are both earning less than 80% of HUD Area Median - Family Income by county and are paying greater than 30% of their income to housing costs. + The percent of households in a census tract that are both earning less than 80% of HUD Area Median + Family Income by county and are paying greater than 30% of their income to housing costs.
@@ -413,34 +486,43 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
- Percent of housing units built pre-1960, used as an indicator of potential lead paint exposure in + Percent of housing units built pre-1960, used as an indicator of potential lead paint exposure in tracts with median home values less than 90th percentile
@@ -456,29 +538,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -495,32 +586,42 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -533,35 +634,42 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
Count of proposed or listed NPL - also known as superfund - sites within 5 km (or nearest one - beyond 5 km), each divided by distance in kilometers. + beyond 5 km), each divided by distance in kilometers.
@@ -578,31 +686,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -614,37 +729,43 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
- Risk-Screening Environmental Indicators (RSEI) modeled Toxic Concentrations at + Risk-Screening Environmental Indicators (RSEI) modeled Toxic Concentrations at stream segments within 500 meters, divided by distance in kilometers (km).
@@ -656,37 +777,44 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
- Weighted percent of people who answer “yes” to both of the following questions: “Have you ever + Weighted percent of people who answer “yes” to both of the following questions: “Have you ever been told by a doctor, nurse, or other health professional that you have asthma?” and the question “Do you still have asthma?”
@@ -704,31 +832,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -746,31 +881,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -789,10 +931,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis Note: - Unlike most of the other datasets, high values of this indicator indicate low burdens. - For percentile calculations, the percentile is calculated in reverse order, so that the tract with - the highest median income relative to area median income (lowest burden on this measure) is at the - 0th percentile, and the tract with the lowest median income relative to area median income + Unlike most of the other datasets, high values of this indicator indicate low burdens. + For percentile calculations, the percentile is calculated in reverse order, so that the tract with + the highest median income relative to area median income (lowest burden on this measure) is at the + 0th percentile, and the tract with the lowest median income relative to area median income (highest burden on this measure) is at the 100th percentile.

@@ -800,31 +942,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -840,29 +989,59 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -874,33 +1053,43 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
- The percent of limited speaking households, which are households where no one over age 14 speaks English well. + The percent of limited speaking households, which are households where no one over age + 14 speaks English well.
@@ -916,29 +1105,59 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -950,34 +1169,64 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
- Percent of a tract's population in households where the household income is at or below 100% of + Percent of a tract's population in households where the household income is at or below 100% of the federal poverty level.
@@ -994,29 +1243,59 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis diff --git a/client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap b/client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap index 4d0342ed..58476fe9 100644 --- a/client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap +++ b/client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap @@ -8,29 +8,35 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl