Adds download packet to methodology page (Sprint 4 designs) (#578)

* adds responsive download packet

* adds tests and intl

client/src/components/DownloadPacket/downloadPacket.module.scss

@@ -0,0 +1,54 @@
+$primary-color: #112f4e;
+
+.downloadBoxContainer {
+
+    color: whitesmoke;
+    margin: auto;
+
+    .downloadBox {
+      background-color: $primary-color;
+      border-radius: 6px 6px;
+
+      .downloadBoxTextBox {
+        padding: 25px 25px;
+        display: flex;
+        flex-direction: column;
+        
+        .downloadBoxTitle {
+          font-weight: bold;
+          margin-bottom: 10px;
+        }
+
+        .downloadBoxText {
+          margin-bottom: 20px;
+        }
+
+        .downloadBoxButtonContainer {
+          margin-top: 20px 0 0 0;
+          align-self: center;
+
+          a {
+            text-decoration: none;
+          }
+
+          img {
+            // This should be a global css-filter value as it's generated
+            // from the primary color.
+            filter: invert(15%) sepia(9%) saturate(5666%) hue-rotate(175deg) brightness(96%) contrast(95%);
+          }
+        }
+
+        .downloadBoxButton{
+          background-color: white;
+          color: $primary-color;
+          display: flex;
+
+          .downloadPacketText {
+            padding-top: 4px;
+            padding-left: 5px;
+          }
+        }
+
+      }
+    }
+  }

client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts

@@ -0,0 +1,19 @@
+declare namespace DownloadPacketModuleScssNamespace {
+    export interface IDownloadPacketModuleScss {
+        downloadBoxContainer: string;
+        downloadBox: string;
+        downloadBoxTextBox: string;
+        downloadBoxTitle: string;
+        downloadBoxText: string;
+        downloadBoxButtonContainer: string;
+        downloadBoxButton: string;
+        downloadPacketText: string;
+    }
+  }
+
+declare const DownloadPacketModuleScssModule: DownloadPacketModuleScssNamespace.IDownloadPacketModuleScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: DownloadPacketModuleScssNamespace.IDownloadPacketModuleScss;
+  };
+
+export = DownloadPacketModuleScssModule;

client/src/components/DownloadPacket/downloadPacket.test.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import DownloadPacket from '.';
+
+test('download packet component defined', () => {
+  render(
+      <LocalizedComponent>
+        <DownloadPacket />
+      </LocalizedComponent>,
+  );
+
+  screen.getByRole('button', {name: /download packet/i});
+});
+

client/src/components/DownloadPacket/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {Button, Grid} from '@trussworks/react-uswds';
+import {useIntl} from 'gatsby-plugin-intl';
+import {defineMessages} from 'react-intl';
+
+import * as styles from './downloadPacket.module.scss';
+import * as constants from '../../data/constants';
+// @ts-ignore
+import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
+
+const DownloadPacket = () => {
+  const intl = useIntl();
+  const messages = defineMessages({
+    downloadPacketHeader: {
+      id: 'downloadPacket.header.text',
+      defaultMessage: 'Draft communities list (pre-decisional, 137MB)',
+      description: 'download packet header text',
+    },
+    downloadPacketInfo: {
+      id: 'downloadPacket.info.text',
+      defaultMessage: 'The package includes the draft list of prioritized communities (.csv and .xlsx) and'+
+      ' information about how to use the list (.pdf). This information should not be used' +
+      ' to make program resource allocation decisions.',
+      description: 'download packet info text',
+    },
+    downloadPacketButtonText: {
+      id: 'downloadPacket.button.text',
+      defaultMessage: 'Download packet',
+      description: 'download packet button text',
+    },
+  });
+
+  return (
+    <Grid>
+      <div className={styles.downloadBoxContainer}>
+        <div className={styles.downloadBox}>
+          <div className={styles.downloadBoxTextBox}>
+            <div className={styles.downloadBoxTitle}>{intl.formatMessage(messages.downloadPacketHeader)}</div>
+            <div className={styles.downloadBoxText}>
+              {intl.formatMessage(messages.downloadPacketInfo)}
+            </div>
+            <div className={styles.downloadBoxButtonContainer}>
+              <a data-cy={'download-link'} href={constants.DOWNLOAD_ZIP_URL}>
+                <Button className={styles.downloadBoxButton} type="button">
+                  <div><img src={downloadIcon} /> </div>
+                  <div className={styles.downloadPacketText}>
+                    {intl.formatMessage(messages.downloadPacketButtonText)}
+                  </div>
+                </Button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Grid>
+  );
+};
+
+export default DownloadPacket;