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

@@ -0,0 +1,24 @@
+@import "../utils.scss";
+
+.howYouCanHelpContainer {
+  margin: 2rem 0;
+
+  .howYouCanHelpText {
+    color: $headingFontColor;
+    padding-left: 1rem;
+  }
+}
+
+.howYouCanHelpHeader {
+  color: $headingFontColor;
+  font-weight: normal;
+}
+
+.howYouCanHelpList {
+  list-style-type: disc;
+  padding-bottom: 1rem;
+}
+
+.howYouCanHelpListWrapper {
+  padding-left: 2rem;
+}

client/src/components/HowYouCanHelp/howYouCanHelp.module.scss.d.ts

@@ -0,0 +1,18 @@
+declare namespace HowYouCanHelpModuleScssNamespace {
+  export interface IHowYouCanHelpModuleScss {
+    howYouCanHelpContainer: string;
+    howYouCanHelpHeader: string;
+    howYouCanHelpBullet: string,
+    listWrapper: string;
+    howYouCanHelpText: string;
+    howYouCanHelpList: string;
+    howYouCanHelpListWrapper: string;
+  }
+}
+
+declare const HowYouCanHelpModuleScssModule: HowYouCanHelpModuleScssNamespace.IHowYouCanHelpModuleScss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: HowYouCanHelpModuleScssNamespace.IHowYouCanHelpModuleScss;
+};
+
+export = HowYouCanHelpModuleScssModule;

client/src/components/HowYouCanHelp/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import {Link} from 'gatsby-plugin-intl';
+import {useIntl} from 'gatsby-plugin-intl';
+import {defineMessages} from 'react-intl';
+
+import * as styles from './howYouCanHelp.module.scss';
+
+const HowYouCanHelp = () => {
+  const intl = useIntl();
+  const messages = defineMessages({
+    youCanHelpHeader: {
+      id: 'howYouCanHelp.header.text',
+      defaultMessage: 'How You Can Help Improve the Tool',
+      description: 'the header of the how you can help section',
+    },
+    youCanHelpInfoText: {
+      id: 'youCanHelpInfoText.list.element.prefix',
+      defaultMessage: 'If you have helpful information, we’d love to',
+      description: 'you can help info text ',
+    },
+    youCanHelpInfoLinkText: {
+      id: 'youCanHelpInfoLink.link.text',
+      defaultMessage: 'get an email from you',
+      description: 'you can help info text ',
+    },
+    youCanHelpDataMethPrefixText: {
+      id: 'youCanHelpDataMethPrefixText.link.prefix.text',
+      defaultMessage: 'View our',
+      description: 'view our',
+    },
+    youCanHelpDataMethLinkText: {
+      id: 'youCanHelpDataMethLinkText.link.text',
+      defaultMessage: 'Data & methodology',
+      description: 'Data & methodology link',
+    },
+    youCanHelpDataMethSuffixText: {
+      id: 'youCanHelpDataMethSuffixText.link.suffix.text',
+      defaultMessage: 'and send us feedback',
+      description: 'send us feedbackv via email',
+    },
+    youCanHelpSharingPrefixText: {
+      id: 'youCanHelpSharingPrefixText.link.prefix.text',
+      defaultMessage: 'Find your community and',
+      description: 'find your community',
+    },
+    youCanHelpSharingLinkText: {
+      id: 'youCanHelpSharingLinkText.link.text',
+      defaultMessage: 'share your feedback',
+      description: 'sharing link to email',
+    },
+  });
+
+  return (
+    <div className={styles.howYouCanHelpContainer}>
+      <h2 className={styles.howYouCanHelpHeader}>
+        {intl.formatMessage(messages.youCanHelpHeader)}
+      </h2>
+      <ul className={styles.howYouCanHelpListWrapper}>
+        <li className={styles.howYouCanHelpList}>
+          <div className={styles.howYouCanHelpText}>
+            {intl.formatMessage(messages.youCanHelpInfoText)}
+            {` `}
+            <a href={'mailto:screeningtool.feedback@usds.gov'}>
+              {intl.formatMessage(messages.youCanHelpInfoLinkText)}
+            </a>
+            {` `}.
+          </div>
+        </li>
+        <li className={styles.howYouCanHelpList}>
+          <div className={styles.howYouCanHelpText}>
+            {intl.formatMessage(messages.youCanHelpDataMethPrefixText)}
+            {` `}
+            <Link to={'/methodology'}>
+              {intl.formatMessage(messages.youCanHelpDataMethLinkText)}
+            </Link>
+            {` `}
+            {intl.formatMessage(messages.youCanHelpDataMethSuffixText)}
+          </div>
+        </li>
+        <li className={styles.howYouCanHelpList}>
+          <div className={styles.howYouCanHelpText}>
+            {intl.formatMessage(messages.youCanHelpSharingPrefixText)}
+            {` `}
+            <a href={'mailto:screeningtool.feedback@usds.gov'}>
+              {intl.formatMessage(messages.youCanHelpSharingLinkText)}
+            </a>
+            {` `}.
+          </div>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default HowYouCanHelp;

client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the HowYouCanHelp checks if various text fields are visible 1`] = `
+<DocumentFragment>
+  <div>
+    <h2>
+      How You Can Help Improve the Tool
+    </h2>
+    <ul>
+      <li>
+        <div>
+          If you have helpful information, we’d love to 
+          <a
+            href="mailto:screeningtool.feedback@usds.gov"
+          >
+            get an email from you
+          </a>
+           .
+        </div>
+      </li>
+      <li>
+        <div>
+          View our 
+          <a
+            href="/en/methodology"
+          >
+            Data & methodology
+          </a>
+           and send us feedback.
+        </div>
+      </li>
+      <li>
+        <div>
+          Find your community and 
+          <a
+            href="mailto:screeningtool.feedback@usds.gov"
+          >
+            share your feedback
+          </a>
+           .
+        </div>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;

client/src/components/HowYouCanHelp/tests/howYouCanHelp.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../../test/testHelpers';
+import HowYouCanHelp from '../index';
+
+describe('rendering of the HowYouCanHelp', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <HowYouCanHelp />
+      </LocalizedComponent>,
+  );
+
+  it('checks if various text fields are visible', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});