Updated side panel for score L launch (#1022)

* Remove un-needed state and useEffect vars

* Add initial Accordion UI to side panel

- abstract out Indicators to separate component
- add snapshot test
- define new indicators in EXPLORE copy
- intl copy to AreaDetail component

* Make side panel indicators styling match design

* Rename export IndicatorCategory -> CategoryCard

* Add disadvangted dots to category and indicators

- add new Category component
- add new DisadvantageDot component
- make copy corrections
- comment out send feedback link in side panel

* Integrate MapLegend's dot into component

- change color to 'blue-warm-70v'
- update map stroke to 'blue-warm-70v'

* Add new indicator names from BE

- add abbreviations and use key in json file to decode

client/src/components/MapLegend/index.tsx

@@ -3,13 +3,14 @@ import {useIntl} from 'gatsby-plugin-intl';
 
 import * as styles from './mapLegend.module.scss';
 import * as EXPLORE_COPY from '../../data/copy/explore';
+import DisadvantageDot from '../DisadvantageDot';
 
 const MapLegend = () => {
   const intl = useIntl();
   return (
     <div className={styles.legendContainer}>
-      <div className={styles.colorSwatch} />
-      <div>
+      <DisadvantageDot isBig={true} />
+      <div className={styles.legendTextBox}>
         <div className={'j40-h4'}>
           {intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_LABEL)}
         </div>

client/src/components/MapLegend/mapLegend.module.scss

@@ -1,26 +1,17 @@
 @import "../utils.scss";
 
-$min-color: #fafaf8;
-$med-color: rgba(26, 68, 128, 0.2);
-$max-color: rgba(26, 68, 128, 0.6);
-$alertInfoColor: #e7f6f8;
-
 .legendContainer {
   display: flex;
-  margin: 1rem 0 1rem 2.5rem;
   border: 1px solid #DFE1E2;
-  padding: .5rem 1.5rem 1rem 1.5rem;
+  margin: 1rem 0 1rem 2.5rem;
+  padding: 0 1.5rem 1rem 1.5rem;
 
+  .legendTextBox {
+    // Set maximum width for text area so that blue dot
+    // doesn't lose aspect ratio
+    flex-basis: 88%;
+  }
   @media screen and (max-width: 640px) {
     margin: 1rem 0 0;
   }
 }
-
-.colorSwatch {
-  flex: 1 0 2rem; 
-  box-sizing: border-box;
-  height: 2rem;
-  margin: 2rem 1.5rem 2rem 0;
-  border-radius: 50%;
-  background-color: $max-color;
-}

client/src/components/MapLegend/mapLegend.module.scss.d.ts

@@ -1,7 +1,7 @@
 declare namespace HowYouCanHelpModuleScssNamespace {
   export interface IHowYouCanHelpModuleScss {
     legendContainer: string;
-    colorSwatch: string;
+    legendTextBox: string;
   }
 }