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

@@ -0,0 +1,20 @@
+@use '../../styles/design-system.scss' as *;
+
+.lowIncomeContainer {
+
+    border: 1px solid #DFE1E2;
+    @include u-margin-top(4);
+    @include u-padding-left(4);
+    @include u-padding-right(3);
+    @include u-padding-bottom(4);
+
+    .lowIncomeTitle {
+        @include typeset('sans', 'xs', 3);
+        @include u-text('semibold');
+    }
+        
+    .lowIncomeText {
+        @include typeset('sans', 'xs', 3);
+        @include u-text('light');
+    }
+};

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

@@ -0,0 +1,14 @@
+declare namespace LowIncomeNamespace {
+    export interface ILowIncomeScss {
+        lowIncomeContainer: string;
+        lowIncomeTitle: string;
+        lowIncomeText: string;
+    }
+  }
+
+declare const LowIncomeScssModule: LowIncomeNamespace.ILowIncomeScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: LowIncomeNamespace.ILowIncomeScss;
+  };
+
+  export = LowIncomeScssModule;

client/src/components/LowIncome/LowIncome.test.tsx

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

client/src/components/LowIncome/LowIncome.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+
+import * as METHODOLOGY_COPY from '../../data/copy/methodology';
+import * as styles from './LowIncome.module.scss';
+
+const LowIncome = () => {
+  const intl = useIntl();
+
+  return (
+    <div className={styles.lowIncomeContainer}>
+      <p className={styles.lowIncomeTitle}>
+        <sup>*</sup>
+        {' '}
+        {intl.formatMessage(METHODOLOGY_COPY.LOW_INCOME.HEADING)}
+      </p>
+
+      <p className={styles.lowIncomeText}>
+        {intl.formatMessage(METHODOLOGY_COPY.LOW_INCOME.INFO)}
+      </p>
+
+    </div>
+  );
+};
+
+export default LowIncome;

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the LowIncome checks if component renders 1`] = `
+<DocumentFragment>
+  <div>
+    <p>
+      <sup>
+        *
+      </sup>
+       Low Income
+    </p>
+    <p>
+      
+      At or above 65th percentile  for percent of census tract population of households where household 
+      income is at or below 200% of the federal poverty level
+    
+    </p>
+  </div>
+</DocumentFragment>
+`;

client/src/components/LowIncome/index.tsx

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