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

@@ -0,0 +1,59 @@
+@use '../../styles/design-system.scss' as *;
+@import "../utils.scss";
+
+@mixin indicator {
+  display: flex;
+  flex-direction: column;
+  @include u-padding-bottom(3);
+  &:last-child {
+    border-bottom: none;
+    @include u-padding-bottom(0);
+  }
+  
+  .indicatorRow {
+    display: flex;
+    
+    @media screen and (max-width: $mobileBreakpoint) {
+      flex: 1 0 40%;
+      align-self: inherit;
+      padding-left: 3rem;
+      padding-top: 1rem;
+    }
+    
+    .indicatorName {
+      flex: 0 1 77%;
+      display: flex;
+      flex-direction: column;
+      @include typeset('sans', '2xs', 2);
+      @include u-text('bold'); 
+      
+      .indicatorDesc {
+        @include typeset('sans', '3xs', 2); 
+        @include u-text('normal'); 
+        max-width: 12rem;    
+        @include u-margin-top(0);
+        @media screen and (max-width: 1024px) {
+          max-width: 80%;
+        }
+      }
+    }
+    
+    .indicatorValue {
+      margin-left: 2.2rem;
+      
+      .indicatorSuperscript {
+        top: -0.2em
+      }
+    }  
+  }
+}
+
+//Indicator box styles
+.indicatorBoxMain {
+  @include indicator;
+}
+
+.disadvantagedIndicator {
+  @include indicator;
+  @include u-text('blue-warm-70v');
+}

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

@@ -0,0 +1,19 @@
+declare namespace IndicatorNamespace {
+    export interface IIndicatorScss {
+      indicatorBoxMain:string;
+      indicatorBoxAdditional:string;
+      indicatorRow:string;
+      indicatorName:string;
+      indicatorValue:string;
+      indicatorSuperscript:string;
+      indicatorDesc:string;
+      disadvantagedIndicator:string;
+    }
+  }
+
+declare const IndicatorScssModule: IndicatorNamespace.IIndicatorScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: IndicatorNamespace.IIndicatorScss;
+  };
+
+  export = IndicatorScssModule;

client/src/components/Indicator/Indicator.test.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import Indicator, {readablePercentile} from './Indicator';
+import {indicatorInfo} from '../AreaDetail';
+
+const highSchool:indicatorInfo = {
+  label: 'some label',
+  description: 'some description',
+  value: 97,
+};
+
+describe('rendering of the Indicator', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <Indicator indicator={highSchool}/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('tests the readablePercentile function', () => {
+  expect(readablePercentile(.98)).toEqual(98);
+  expect(readablePercentile(.07)).toEqual(7);
+  expect(readablePercentile(.123)).toEqual(12);
+  expect(readablePercentile(.789)).toEqual(79);
+});

client/src/components/Indicator/Indicator.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {indicatorInfo} from '../AreaDetail';
+
+import * as styles from './Indicator.module.scss';
+
+interface IIndicator {
+    indicator: indicatorInfo,
+}
+
+export const readablePercentile = (percentile: number | null) => {
+  return percentile ? Math.round(percentile * 100) : 'N/A';
+};
+
+// Todo: Add internationalization to superscript ticket #582
+export const getSuperscriptOrdinal = (percentile: number | string) => {
+  if (typeof percentile === 'number') {
+    const englishOrdinalRules = new Intl.PluralRules('en', {
+      type: 'ordinal',
+    });
+    const suffixes = {
+      zero: 'th',
+      one: 'st',
+      two: 'nd',
+      few: 'rd',
+      many: 'th',
+      other: 'th',
+    };
+    return suffixes[englishOrdinalRules.select(percentile)];
+  }
+};
+
+const Indicator = ({indicator}:IIndicator) => {
+  return (
+    <li
+      className={indicator.isDisadvagtaged ? styles.disadvantagedIndicator : styles.indicatorBoxMain}
+      data-cy={'indicatorBox'}>
+      <div className={styles.indicatorRow}>
+        <div className={styles.indicatorName}>
+          {indicator.label}
+          <div className={styles.indicatorDesc}>
+            {indicator.description}
+          </div>
+        </div>
+        <div className={styles.indicatorValue}>
+          {readablePercentile(indicator.value)}
+          <sup className={styles.indicatorSuperscript}><span>
+            {getSuperscriptOrdinal(readablePercentile(indicator.value))}
+          </span></sup>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+export default Indicator;

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

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the Indicator checks if component renders 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        9700
+        <sup>
+          <span>
+            th
+          </span>
+        </sup>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;

client/src/components/Indicator/index.tsx

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