Modifies ExploreTool page to match sprint 4 design (#481)

* initial commit of sprint 4 explore page

* adds styling on HowYouCanHelp module

* troubleshooting li element on deployed URL

removing local bullet styles

* removing unused styles

* recreating HowYouCanHelp

* explicit list el styles

* adds bullets back in

* fixes tooltip style and alert padding

* componentize MapLegend

* fix links

* inital intl and unit tests

* adds trusswork tooltip for comparison

* updates based on various feedback and disucssions:

- removes react-tooltip
- placeholder trussworks tooltip
- removes download packet component
- intl on HowYouCanHelp
- updates MapLegend tests
- add initial cy test on ExploreTool page

* removes bold on alert

* PR feedback:

- removes location from J40Alert
- localizes `COLOR KEY`

* adds intl to constants file

* modifies download zip URL to new S3 location

* removes location depedencies on Alerts

* add localization for HowYouCanHelp

client/src/components/AlertWrapper/alertWrapper.module.scss

@@ -0,0 +1,11 @@
+.alertWrapper {
+  margin-bottom: 0;
+}
+
+.alertHide {
+  display: none;
+}
+
+.alertWarning {
+  margin-top: 0;
+}

client/src/components/AlertWrapper/alertWrapper.module.scss.d.ts

@@ -0,0 +1,14 @@
+declare namespace AlertWrapperScssNamespace {
+    export interface IAlertWrapperScss {
+        alertWrapper: string;
+        alertHide: string;
+        alertWarning: string;
+    }
+  }
+
+declare const AlertWrapperScssModule: AlertWrapperScssNamespace.IAlertWrapperScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: AlertWrapperScssNamespace.IAlertWrapperScss;
+  };
+
+  export = AlertWrapperScssModule;

client/src/components/AlertWrapper/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {Alert} from '@trussworks/react-uswds';
+import {FormattedMessage} from 'gatsby-plugin-intl';
+
+import * as styles from './alertWrapper.module.scss';
+
+interface IAlertWrapperProps {
+    hideWarningAlert?: boolean
+}
+
+const AlertWrapper = ({hideWarningAlert}:IAlertWrapperProps) => {
+  return (
+    <div className={styles.alertWrapper}>
+      <Alert className={'j40-sitealert'} type="info">
+        <span className={'j40-sitealert-title'}><FormattedMessage
+          id='header.alertTitleBeta'
+          description={'Alerts that appear on every page - title'}
+          defaultMessage={`Public beta`}/> - </span>
+        <span className={'j40-sitealert-body'}>
+          <FormattedMessage
+            id='header.alertBodyBeta'
+            description={'Alerts that appear on every page'}
+            defaultMessage={`This website will be continuously updated`}/>
+        </span>
+        <br/>
+      </Alert>
+      <Alert
+        className={`j40-sitealert' ${hideWarningAlert ? styles.alertHide : null} ${styles.alertWarning}`}
+        type="warning">
+        <b>Limited data sources — </b>
+        This tool currently includes 16 datasets. Over time, datasets could be
+        added, updated, or removed. The datasets come from a variety of sources
+        based on availability, quality, and relevance to environmental, energy,
+        and climate issues. Each dataset has limitations, such as how recently
+        the data was updated.
+      </Alert>
+    </div>
+  );
+}; ;
+
+export default AlertWrapper;