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

@@ -1,13 +1,17 @@
-$sidebar-background: rgba(35, 55, 75, 0.9);
-$sidebar-color: #ffffff;
+@import "./areaDetailUtils.scss";
 
-.mapContainer {
-  height: 676px;
+.mapAndInfoPanelContainer {
+  display: flex;
+  height: 81vh; //desktop
+
+  @media screen and (max-width: $mobileBreakpoint) {
+    flex-direction: column;
+    height: fit-content;
+  }
 }
 
 .j40Popup {
-  max-height: 50%;
-  overflow-y: scroll;
+  width: 375px;
 }
 
 .navigationControl {
@@ -25,3 +29,9 @@ $sidebar-color: #ffffff;
   right: 1.25em;
   top: 5em;
 }
+
+.mapInfoPanel {
+  border: 2px solid $sidePanelBorderColor;
+  overflow-y: auto;
+  max-width: 22rem;
+}