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/MethodologyFormula/MethodologyFormula.module.scss

@@ -0,0 +1,12 @@
+@use '../../styles/design-system.scss' as *;
+
+.formulaContainer {
+    @include u-margin-top(5);
+    p:not(:first-child) {
+        font-style: italic;
+        
+        span {
+            @include u-text('bold');
+        }
+    }
+};

client/src/components/MethodologyFormula/MethodologyFormula.module.scss.d.ts

@@ -0,0 +1,12 @@
+declare namespace MethodologyFormulaNamespace {
+    export interface IMethodologyFormulaScss {
+        formulaContainer: string;
+    }
+  }
+
+declare const MethodologyFormulaScssModule: MethodologyFormulaNamespace.IMethodologyFormulaScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: MethodologyFormulaNamespace.IMethodologyFormulaScss;
+  };
+
+  export = MethodologyFormulaScssModule;

client/src/components/MethodologyFormula/MethodologyFormula.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import MethodologyFormula from './MethodologyFormula';
+
+describe('rendering of the MethodologyFormula', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <MethodologyFormula />
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/MethodologyFormula/MethodologyFormula.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+
+import * as METHODOLOGY_COPY from '../../data/copy/methodology';
+import * as styles from './MethodologyFormula.module.scss';
+
+// The site shows the formula used in the methodology. The constants seen
+// below aim to capture the 3 part of that formula.  These are not
+// reserved words.
+
+const MethodologyFormula = () => {
+  const intl = useIntl();
+
+  return (
+    <section className={styles.formulaContainer}>
+      <p>
+        {intl.formatMessage(METHODOLOGY_COPY.PAGE.FORMULA_INTRO)}
+      </p>
+
+      <p>
+        {METHODOLOGY_COPY.FORMULA.IF}
+      </p>
+
+      <p>
+        {METHODOLOGY_COPY.FORMULA.AND}
+      </p>
+
+      <p>
+        {METHODOLOGY_COPY.FORMULA.THEN}
+      </p>
+    </section>
+  );
+};
+
+export default MethodologyFormula;

client/src/components/MethodologyFormula/__snapshots__/MethodologyFormula.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the MethodologyFormula checks if component renders 1`] = `
+<DocumentFragment>
+  <section>
+    <p>
+      
+      Under the current formula, a census tract will be considered disadvantaged:
+    
+    </p>
+    <p>
+      <span>
+        IF
+      </span>
+       it is above the threshold for one or more climate or environmental indicator
+    </p>
+    <p>
+      <span>
+        AND
+      </span>
+       it is above the threshold for one or more socioeconomic indicator
+    </p>
+    <p>
+      <span>
+        THEN
+      </span>
+       the community is considered disadvantaged.
+    </p>
+  </section>
+</DocumentFragment>
+`;

client/src/components/MethodologyFormula/index.tsx

@@ -0,0 +1,3 @@
+import MethodologyFormula from './MethodologyFormula';
+
+export default MethodologyFormula;