adds map side panel (#406)

* initial map side panel

* componentize MapSidePanel

* remove selection from J40Map

* adds isFeatureSelected to toggle component

* filters data from server for client UI

* styling and refactor

* added TODO

* adds styling to intro and pairing feedback

* add mobile styling

* adds popup back to fs feature flag

* adds tests and aria roles

* makes mobile content same as desktop

* prettier update

* initial e2e mapSidePanel test

* adds cypress tests on desktop and mobile

* adds sass util and updates cypress tests

* cleans up tests

* reverts tsconfig file

* fixes map alignment

* renaming and using constants

* renaming sidePanel to infoPanel

* intl messaging

* adds snapshot testing and utility sass file

* PR feedback
- adds intl messages
- adds data-cy attr to cy tests
- snapshot testing for unit tests
- fixes bug where side panel extends past the map
- moves all wrapper content in MapWrapper

* logs isMobile to troubleshoot deployed PR

* adds react-device-detect for isMobile detection

* adds new instance of map for mobile

* adds instance

* adds isMobile to state

* tests the fix for mobile map view on PR

* PR review feedback
- localize MapIntroduction
- update snapshot tests
- QA feedback
- constants.isMobile points to react-device-detect

client/src/components/areaDetail.test.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import AreaDetail, {getCategorization, readablePercent} from './areaDetail';
+import {LocalizedComponent} from '../test/testHelpers';
+import * as constants from '../data/constants';
+
+describe('rendering of the AreaDetail', () => {
+  const properties = {
+    [constants.POVERTY_PROPERTY_PERCENTILE]: 99,
+    [constants.EDUCATION_PROPERTY_PERCENTILE]: 98,
+    [constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE]: 97,
+    [constants.UNEMPLOYMENT_PROPERTY_PERCENTILE]: 96,
+    [constants.HOUSING_BURDEN_PROPERTY_PERCENTILE]: 95,
+    [constants.SCORE_PROPERTY_HIGH]: 95,
+    [constants.GEOID_PROPERTY]: 98729374234,
+    [constants.TOTAL_POPULATION]: 3435435,
+  };
+
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <AreaDetail properties={properties}/>
+      </LocalizedComponent>,
+  )
+  ;
+
+  it('checks if various text fields are visible', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('tests the readablePercent function', () => {
+  expect(readablePercent(.9877665443)).toEqual('98.8');
+});
+
+describe('tests the getCategorization function', () => {
+  it(`should equal Prioritized for value >= ${constants.SCORE_BOUNDARY_LOW}`, () => {
+    expect(getCategorization(.756)).toEqual(['Prioritized', undefined]);
+  });
+
+  it(`should equal Threshold for .60 <= value < ${constants.SCORE_BOUNDARY_THRESHOLD}`, () => {
+    expect(getCategorization(.65)).toEqual(['Threshold', undefined]);
+  });
+
+  it(`should equal Non-prioritized for value < ${constants.SCORE_BOUNDARY_PRIORITIZED}`, () => {
+    expect(getCategorization(.53)).toEqual(['Non-prioritized', undefined]);
+  });
+});