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/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>