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/DatasetContainer/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {useIntl} from 'gatsby-plugin-intl';
+import {Link, useIntl} from 'gatsby-plugin-intl';
 import {Grid} from '@trussworks/react-uswds';
 
 import DatasetCard from '../DatasetCard';
@@ -15,7 +15,7 @@ const DatasetContainer = () => {
 
   return (
     <>
-      <J40MainGridContainer fullWidth={true} blueBackground={true}>
+      <J40MainGridContainer fullWidth={true} blueBackground={false}>
         <J40MainGridContainer
           dataCy={`${hyphenizeString(METHODOLOGY_COPY.DATASETS.HEADING.defaultMessage)}-block`}>
 
@@ -25,49 +25,26 @@ const DatasetContainer = () => {
             </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 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 row>
-            <Grid col={12} tablet={{col: 7}} className={'j40-mb-3'}>
-              <p>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.ADDITIONAL_INFO)}</p>
-            </Grid>
-          </Grid>
-
-          <div className={styles.datasetCardsContainer}>
-            {METHODOLOGY_COPY.ADDITIONAL_INDICATORS.map((card) => <DatasetCard
-              key={card.indicator}
-              datasetCardProps={card}
-              additionalIndicator={true}
-            />)}
+          <div className={styles.returnToTop}>
+            <Link to={`/methodology`}>
+              {METHODOLOGY_COPY.RETURN_TO_TOP.LINK}
+            </Link>
           </div>
 
         </J40MainGridContainer>
       </J40MainGridContainer>
+
     </>
   );
 };