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/mapIntroduction.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+import {defineMessages} from 'react-intl';
+
+// @ts-ignore
+import lightbulbIcon from '/node_modules/uswds/dist/img/usa-icons/lightbulb_outline.svg';
+import * as styles from './mapIntroduction.module.scss';
+
+const MapIntroduction = () => {
+  const intl = useIntl();
+  const messages = defineMessages({
+    mapIntroHeader: {
+      id: 'mapIntro.mapIntroHeader',
+      defaultMessage: 'Zoom and select a census block group to view data',
+      description: 'introductory text of ways to use the map',
+    },
+    didYouKnow: {
+      id: 'mapIntro.didYouKnow',
+      defaultMessage: ' Did you know?',
+      description: 'text prompting a cite paragraph',
+    },
+    censusBlockGroupDefinition: {
+      id: 'mapIntro.censusBlockGroupDefinition',
+      defaultMessage: 'A census block group is generally between 600 and 3,000 people. ' +
+      'It is the smallest geographical unit for which the U.S. Census ' +
+      'Bureau publishes sample data.',
+      description: 'cites the definition and helpful information about census groups',
+    },
+  });
+
+  return (
+    <aside className={styles.mapIntroContainer}>
+      <header className={styles.mapIntroHeader}>{intl.formatMessage(messages.mapIntroHeader)}</header>
+      <div className={styles.mapIntroText}>
+        <img className={styles.mapIntroLightbulb} src={lightbulbIcon} />
+        <div className={styles.didYouKnowBox}>
+          <div className={styles.didYouKnow}>{intl.formatMessage(messages.didYouKnow)}</div>
+          <cite className={styles.didYouKnowText}>{intl.formatMessage(messages.censusBlockGroupDefinition)}</cite>
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default MapIntroduction;