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

@@ -1,20 +1,15 @@
 $primary-color: #112f4e;
 
 .downloadBoxContainer {
-    flex: 0 0 350px;
-    // flex: 1;
-    // border: 1px solid red;
 
     color: whitesmoke;
     margin: auto;
 
     .downloadBox {
       background-color: $primary-color;
-      min-width: 400px;
       border-radius: 6px 6px;
 
       .downloadBoxTextBox {
-        // border: 2px solid green;
         padding: 25px 25px;
         display: flex;
         flex-direction: column;

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

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import {render, screen} from '@testing-library/react';
-import DownloadPacket from './downloadPacket';
+import {LocalizedComponent} from '../../test/testHelpers';
+import DownloadPacket from '.';
 
 test('download packet component defined', () => {
-  render(<DownloadPacket />);
+  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;

client/src/components/downloadPacket.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import {Button} from '@trussworks/react-uswds';
-// @ts-ignore
-import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
-import * as styles from './downloadPacket.module.scss';
-import * as constants from '../data/constants';
-
-const DownloadPacket = () => {
-  return (
-    <div className={styles.downloadBoxContainer}>
-      <div className={styles.downloadBox}>
-        <div className={styles.downloadBoxTextBox}>
-          <div className={styles.downloadBoxTitle}>Just Progress Packet</div>
-          <div className={styles.downloadBoxText}>This downloadable packet includes the list of Just Progress
-          prioritized communities (30,021 census block groups) and 18 datasets.
-          </div>
-          <div className={styles.downloadBoxButtonContainer}>
-            <a id={'download-link'} href={constants.DOWNLOAD_ZIP_URL}>
-              <Button className={styles.downloadBoxButton} type="button">
-                <div><img src={downloadIcon} /> </div>
-                <div className={styles.downloadPacketText}>Download packet</div>
-              </Button>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DownloadPacket;