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

* adds responsive download packet

* adds tests and intl

client/cypress/e2e/downloadPacket.spec.js

@@ -2,22 +2,21 @@
 
 describe('Census Block Group download', () => {
   it('validate file download', () => {
-    // const filename = `usa.zip`;
-    cy.visit('localhost:8000/en/cejst');
+    const filename = `Screening+Tool+Data.zip`;
+    cy.visit('localhost:8000/en/methodology');
 
-    // Todo VS: Download packet component is being moved. Will be re-enabled with
-    // cy.get('#download-link').invoke('attr', 'target', '_blank');
-    // cy.intercept(`https://justice40-data.s3.amazonaws.com/Score/${filename}`,
-    //     {
-    //       body: 'success',
-    //       headers: {
-    //         'Content-Type': 'text/html; charset=utf-8',
-    //         'Content-Disposition': 'attachment',
-    //       },
-    //     },
-    // ).as('downloadRequest');
-    // cy.get('button[class*="downloadPacket"]').click();
-    // cy.wait('@downloadRequest');
-    // cy.readFile(`cypress/downloads/${filename}`).should('exist');
+    cy.get('[data-cy="download-link"]').invoke('attr', 'target', '_blank');
+    cy.intercept(`https://justice40-data.s3.amazonaws.com/data-pipeline/data/score/downloadable/${filename}`,
+        {
+          body: 'success',
+          headers: {
+            'Content-Type': 'text/html; charset=utf-8',
+            'Content-Disposition': 'attachment',
+          },
+        },
+    ).as('downloadRequest');
+    cy.get('button[class*="downloadPacket"]').click();
+    cy.wait('@downloadRequest');
+    cy.readFile(`cypress/downloads/${filename}`).should('exist');
   });
 });

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;

client/src/pages/methodology.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import {Grid} from '@trussworks/react-uswds';
+import {useIntl} from 'gatsby-plugin-intl';
+import {defineMessages} from 'react-intl';
 
 import AlertWrapper from '../components/AlertWrapper';
 import DatasetContainer from '../components/DatasetContainer';
+import DownloadPacket from '../components/DownloadPacket';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
 import ScoreStepsList from '../components/scoreStepsList';
@@ -13,6 +16,30 @@ interface MethodPageProps {
 
 // markup
 const IndexPage = ({location}: MethodPageProps) => {
+  const intl = useIntl();
+  const messages = defineMessages({
+    methodologyPageHeader: {
+      id: 'methodology.page.header.text',
+      defaultMessage: 'Methodology',
+      description: 'methodology page header text',
+    },
+    methodologyPagep1: {
+      id: 'methodology.page.paragraph.first',
+      defaultMessage: 'The cumulative index score is a metric that is intended to assist Federal agencies'+
+      ' in identifying disadvantaged communities for the purposes of the Justice 40'+
+      ' Initiative. The score methodology and included data sets are currently in beta and'+
+      ' may change over time.',
+      description: 'methodology page paragraph 1',
+    },
+    methodologyPagep2: {
+      id: 'methodology.page.paragraph.second',
+      defaultMessage: 'Learn about the datasets used in the cumulative score and read about'+
+       ' how the score is calculated. Download the list of prioritized communities along with the datasets'+
+       ' used in the score.',
+      description: 'methodology page paragraph 2',
+    },
+  });
+
   return (
     <Layout location={location}>
 
@@ -21,37 +48,22 @@ const IndexPage = ({location}: MethodPageProps) => {
       </J40MainGridContainer>
 
       <J40MainGridContainer className={'j40-main-content'}>
-        <Grid row>
-          <Grid col>
+        <h1>{intl.formatMessage(messages.methodologyPageHeader)}</h1>
+        <Grid row gap>
+          <Grid col={12} tablet={{col: 6}}>
             <section>
-              <h1>Methodology</h1>
               <p>
-            The Just Progress tool combines demographic, environmental, and
-            socio-economic data to generate a cumulative index score, referred
-            to as the Just Progress Index. The tool currently utilizes
-            national,
-            publically-available data from the United States Census Bureau’s
-            American Community Survey (ACS) and the EPA’s EJScreen tool.
+                {intl.formatMessage(messages.methodologyPagep1)}
               </p>
               <p>
-            The various inputs into the Just Progress Index are averaged into
-            2 categories: Pollution Burden and Demographics.
-              </p>
-              <p>
-            Pollution Burden: health risks arising from proximity and
-            potential exposures to pollution and other adverse environmental
-            conditions
-              </p>
-              <p>
-            Demographics: sensitive populations and socioeconomic factors that
-            make a community more vulnerable
-              </p>
-              <p>
-                <b>Pollution Burden average x Demographics average = Just Progress
-              Index</b>
+                {intl.formatMessage(messages.methodologyPagep2)}
               </p>
             </section>
-          </Grid></Grid>
+          </Grid>
+          <Grid col={12} tablet={{col: 6}}>
+            <DownloadPacket />
+          </Grid>
+        </Grid>
       </J40MainGridContainer>
 
       <J40MainGridContainer fullWidth={true}>