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/pages/methodology.tsx

@@ -2,11 +2,14 @@ import * as React from 'react';
 import {Grid} from '@trussworks/react-uswds';
 import {useIntl} from 'gatsby-plugin-intl';
 
+import Categories from '../components/Categories';
 import DatasetContainer from '../components/DatasetContainer';
 import DownloadPacket from '../components/DownloadPacket';
 import J40MainGridContainer from '../components/J40MainGridContainer';
+import MethodologyFormula from '../components/MethodologyFormula';
 import Layout from '../components/layout';
-import ScoreStepsList from '../components/scoreStepsList';
+import LowIncome from '../components/LowIncome';
+// import ScoreStepsList from '../components/scoreStepsList';
 
 import * as METHODOLOGY_COPY from '../data/copy/methodology';
 
@@ -14,7 +17,6 @@ interface MethodPageProps {
   location: Location;
 }
 
-// markup
 const IndexPage = ({location}: MethodPageProps) => {
   const intl = useIntl();
 
@@ -25,29 +27,44 @@ const IndexPage = ({location}: MethodPageProps) => {
 
         <h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1>
 
+        {/* First column */}
         <Grid row gap className={'j40-mb-5'}>
-          <Grid col={12} tablet={{col: 6}}>
+          <Grid col={12} tablet={{col: 8}}>
             <section>
               <p>
                 {intl.formatMessage(METHODOLOGY_COPY.PAGE.DESCRIPTION)}
               </p>
             </section>
+
+            {/* Formula section */}
+            <MethodologyFormula />
+
+            {/* Category description */}
+            <section className={`j40-mt-7`}>
+              <p>
+                {intl.formatMessage(METHODOLOGY_COPY.PAGE.CATEGORY_TEXT)}
+              </p>
+            </section>
           </Grid>
-          <Grid col={12} tablet={{col: 6}}>
+
+          {/* Second column */}
+          <Grid col={12} tablet={{col: 4}}>
             <DownloadPacket />
+            <LowIncome />
           </Grid>
         </Grid>
       </J40MainGridContainer>
 
+      <Categories />
       <DatasetContainer/>
 
-      <J40MainGridContainer>
+      {/* <J40MainGridContainer>
         <Grid row>
           <Grid col>
             <ScoreStepsList/>
           </Grid>
         </Grid>
-      </J40MainGridContainer>
+      </J40MainGridContainer> */}
     </Layout>
   );
 };