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/mapInfoPanel.test.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import MapInfoPanel from './mapInfoPanel';
+import {LocalizedComponent} from '../test/testHelpers';
+
+describe('simulate app starting up, no click on map', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <MapInfoPanel
+          className={'someClassName'}
+          featureProperties={undefined}
+          selectedFeatureId={undefined}
+        />
+      </LocalizedComponent>,
+  );
+
+  it('should match the snapshot of the MapIntroduction component', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('simulate a click on map', () => {
+  const featureProperties = {
+    'GEOID10': '350459430003',
+    'Total population': 960,
+    'GEOID10 (percentile)': 0.5784380914343289,
+    'Housing burden (percent) (percentile)': 0.10073235017829946,
+    'Total population (percentile)': 0.2985685303608629,
+    'Linguistic isolation (percent) (percentile)': 0.9623469180109516,
+    'Percent of households in linguistic isolation (percentile)': 0.9230800651740774,
+    'Poverty (Less than 200% of federal poverty line) (percentile)': 0.947202643271775,
+    'Percent individuals age 25 or over with less than high school degree (percentile)': 0.7804232684164424,
+    'Unemployed civilians (percent) (percentile)': 0.9873599918675144,
+    'Score D (percentile)': 0.9321799276549586,
+  };
+  const selectedFeatureId = 345;
+
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <MapInfoPanel
+          className={'J40Map-module--mapInfoPanel--8Ap7p'}
+          featureProperties={featureProperties}
+          selectedFeatureId={selectedFeatureId}
+        />
+      </LocalizedComponent>,
+  );
+
+  it('hould match the snapshot of the MapInfoPanel component', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});