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

client/src/components/DatasetCard/datasetCard.module.scss

@@ -1,3 +1,4 @@
+@use '../../styles/design-system.scss' as *;
 @import '../utils.scss';
 
 @mixin baseCard {
@@ -8,7 +9,7 @@
 
 .datasetCard {
   @include baseCard;
-  background-color: white;
+  @include u-bg("gray-3");
 }
 
 .datasetCardAdditional {

client/src/components/DatasetCard/index.tsx

@@ -5,15 +5,16 @@ import * as styles from './datasetCard.module.scss';
 import * as METHODOLOGY_COPY from '../../data/copy/methodology';
 
 interface IDatasetCardProps {
-  datasetCardProps: { [key:string]: string }
-  additionalIndicator: boolean
+  datasetCardProps: {
+    [key:string]: string
+  }
 }
 
-const DatasetCard = ({datasetCardProps, additionalIndicator}:IDatasetCardProps) => {
+const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
   const intl = useIntl();
 
   return (
-    <div className={additionalIndicator ? styles.datasetCardAdditional : styles.datasetCard}>
+    <div className={styles.datasetCard} id={datasetCardProps.domID}>
       <h3 className={styles.datasetCardIndicator}>{datasetCardProps.indicator}</h3>
       <div className={styles.datasetCardDescription}>
         {datasetCardProps.description}
@@ -22,23 +23,23 @@ const DatasetCard = ({datasetCardProps, additionalIndicator}:IDatasetCardProps)
       <ul className={styles.datasetCardList}>
         <li className={styles.datasetCardListItem}>
           <span className={styles.datasetCardLabels}>
-            {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.SOURCE)}
+            {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESP_PARTY)}
           </span>
           <a href={datasetCardProps.dataSourceURL} target={'_blank'} rel="noreferrer">
-            {datasetCardProps.dataSourceLabel}
+            {datasetCardProps.respPartyLabel}
           </a>
         </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}>
           <span className={styles.datasetCardLabels}>
             {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.DATE_RANGE)}
           </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>
       </ul>
     </div>

client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap

@@ -1,41 +1,43 @@
 // 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`] = `
 <DocumentFragment>
-  <div>
+  <div
+    id="low-income"
+  >
     <h3>
-      Area Median Income
+      Low Income
     </h3>
     <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>
     <ul>
       <li>
         <span>
-          Data source: 
+          Responsible Party: 
         </span>
         <a
           href="https://www.census.gov/programs-surveys/acs"
           rel="noreferrer"
           target="_blank"
         >
-          Census's American Community Survey
+          Census's American Community Survey.
         </a>
       </li>
       <li>
         <span>
-          Data resolution: 
+          Date range: 
         </span>
-        Census block group
+        2015-2019
       </li>
       <li>
         <span>
-          Data date range: 
+          Used in: 
         </span>
-        2015-2019
+        All methodologies except for training and workforce development
       </li>
     </ul>
   </div>

client/src/components/DatasetCard/tests/datasetCard.test.tsx

@@ -8,19 +8,7 @@ import * as METHODOLOGY_COPY from '../../../data/copy/methodology';
 describe('rendering of indicator dataset card', () => {
   const {asFragment} = render(
       <LocalizedComponent>
-        <DatasetCard key={0} datasetCardProps={METHODOLOGY_COPY.INDICATORS[0]} additionalIndicator={false}/>
-      </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}/>
+        <DatasetCard key={0} datasetCardProps={METHODOLOGY_COPY.INDICATORS[0]}/>
       </LocalizedComponent>,
   );