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

@@ -1,4 +1,4 @@
-$primary-color: #112f4e;
+@use '../../styles/design-system.scss' as *;
 
 .downloadBoxContainer {
 
@@ -6,7 +6,7 @@ $primary-color: #112f4e;
     margin: auto;
 
     .downloadBox {
-      background-color: $primary-color;
+      @include u-bg('blue-80v');
       border-radius: 6px 6px;
 
       .downloadBoxTextBox {
@@ -15,12 +15,15 @@ $primary-color: #112f4e;
         flex-direction: column;
         
         .downloadBoxTitle {
-          font-weight: bold;
-          margin-bottom: 10px;
+          @include typeset('sans', 'xs', 3);
+          @include u-text('semibold');
+          @include u-margin-bottom(2);
         }
-
+        
         .downloadBoxText {
-          margin-bottom: 20px;
+          @include typeset('sans', 'xs', 3);
+          @include u-margin-bottom(4);
+          
           span {
             font-style: italic;
           }
@@ -42,8 +45,8 @@ $primary-color: #112f4e;
         }
 
         .downloadBoxButton{
-          background-color: white;
-          color: $primary-color;
+          @include u-bg('white');
+          @include u-color('blue-80v');
           display: flex;
 
           .downloadPacketText {