diff --git a/client/cypress/e2e/downloadPacket.spec.js b/client/cypress/e2e/downloadPacket.spec.js index 2873ad67..790c97fb 100644 --- a/client/cypress/e2e/downloadPacket.spec.js +++ b/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'); }); }); diff --git a/client/src/components/downloadPacket.module.scss b/client/src/components/DownloadPacket/downloadPacket.module.scss similarity index 90% rename from client/src/components/downloadPacket.module.scss rename to client/src/components/DownloadPacket/downloadPacket.module.scss index 3e61ef94..514c05c5 100644 --- a/client/src/components/downloadPacket.module.scss +++ b/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; diff --git a/client/src/components/downloadPacket.module.scss.d.ts b/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts similarity index 100% rename from client/src/components/downloadPacket.module.scss.d.ts rename to client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts diff --git a/client/src/components/downloadPacket.test.tsx b/client/src/components/DownloadPacket/downloadPacket.test.tsx similarity index 51% rename from client/src/components/downloadPacket.test.tsx rename to client/src/components/DownloadPacket/downloadPacket.test.tsx index fab50aa8..36f3dcf0 100644 --- a/client/src/components/downloadPacket.test.tsx +++ b/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(); + render( + + + , + ); screen.getByRole('button', {name: /download packet/i}); }); diff --git a/client/src/components/DownloadPacket/index.tsx b/client/src/components/DownloadPacket/index.tsx new file mode 100644 index 00000000..d7ea3b69 --- /dev/null +++ b/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 ( + +
+
+
+
{intl.formatMessage(messages.downloadPacketHeader)}
+
+ {intl.formatMessage(messages.downloadPacketInfo)} +
+ +
+
+
+
+ ); +}; + +export default DownloadPacket; diff --git a/client/src/components/downloadPacket.tsx b/client/src/components/downloadPacket.tsx deleted file mode 100644 index 74746ffa..00000000 --- a/client/src/components/downloadPacket.tsx +++ /dev/null @@ -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 ( -
-
-
-
Just Progress Packet
-
This downloadable packet includes the list of Just Progress - prioritized communities (30,021 census block groups) and 18 datasets. -
-
- - - -
-
-
-
- ); -}; - -export default DownloadPacket; diff --git a/client/src/pages/methodology.tsx b/client/src/pages/methodology.tsx index 000e1e1f..947d09e3 100644 --- a/client/src/pages/methodology.tsx +++ b/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 ( @@ -21,37 +48,22 @@ const IndexPage = ({location}: MethodPageProps) => { - - +

{intl.formatMessage(messages.methodologyPageHeader)}

+ +
-

Methodology

- 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)}

- The various inputs into the Just Progress Index are averaged into - 2 categories: Pollution Burden and Demographics. -

-

- Pollution Burden: health risks arising from proximity and - potential exposures to pollution and other adverse environmental - conditions -

-

- Demographics: sensitive populations and socioeconomic factors that - make a community more vulnerable -

-

- Pollution Burden average x Demographics average = Just Progress - Index + {intl.formatMessage(messages.methodologyPagep2)}

-
+
+ + + +