From 33c3288160f9fe022bf92a8d5816ee548878ce12 Mon Sep 17 00:00:00 2001
From: Vim <86254807+vim-usds@users.noreply.github.com>
Date: Thu, 15 Jul 2021 11:01:10 -0700
Subject: [PATCH] Allows the user to download CBG list (#318)

* adds initial download CBG box

* componentize download packet, adds e2e tests

* changes download file url in test to smaller size

* improve testing functions

* removes underline, colors icon

* replace csv with zip for safari security issue
---
 client/cypress.json                           |  3 +-
 client/cypress/e2e/downloadPacket.spec.js     | 20 +++++++
 .../src/components/downloadPacket.module.scss | 59 +++++++++++++++++++
 .../downloadPacket.module.scss.d.ts           | 19 ++++++
 client/src/components/downloadPacket.test.tsx | 10 ++++
 client/src/components/downloadPacket.tsx      | 32 ++++++++++
 client/src/pages/cejst.module.scss            | 13 +++-
 client/src/pages/cejst.module.scss.d.ts       |  1 +
 client/src/pages/cejst.tsx                    | 57 ++++++++++++------
 client/src/styles/global.scss                 |  5 +-
 10 files changed, 195 insertions(+), 24 deletions(-)
 create mode 100644 client/cypress/e2e/downloadPacket.spec.js
 create mode 100644 client/src/components/downloadPacket.module.scss
 create mode 100644 client/src/components/downloadPacket.module.scss.d.ts
 create mode 100644 client/src/components/downloadPacket.test.tsx
 create mode 100644 client/src/components/downloadPacket.tsx

diff --git a/client/cypress.json b/client/cypress.json
index ecd5a8f2..d5d7a1c8 100644
--- a/client/cypress.json
+++ b/client/cypress.json
@@ -1,5 +1,6 @@
 {
   "baseUrl": "http://localhost:8000/",
   "integrationFolder": "cypress/e2e",
-  "chromeWebSecurity": false
+  "chromeWebSecurity": false,
+  "trashAssetsBeforeRuns": true
 }
diff --git a/client/cypress/e2e/downloadPacket.spec.js b/client/cypress/e2e/downloadPacket.spec.js
new file mode 100644
index 00000000..9c3182ea
--- /dev/null
+++ b/client/cypress/e2e/downloadPacket.spec.js
@@ -0,0 +1,20 @@
+// / <reference types="Cypress" />
+
+describe('Census Block Group download', () => {
+  it('validate file download', () => {
+    cy.visit('localhost:8000/en/cejst');
+    cy.get('#download-link').invoke('attr', 'target', '_blank');
+    cy.intercept('https://justice40-data.s3.amazonaws.com/Score/usa.zip',
+        {
+          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/usa.csv`).should('exist');
+  });
+});
diff --git a/client/src/components/downloadPacket.module.scss b/client/src/components/downloadPacket.module.scss
new file mode 100644
index 00000000..3e61ef94
--- /dev/null
+++ b/client/src/components/downloadPacket.module.scss
@@ -0,0 +1,59 @@
+$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;
+        
+        .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;
+          }
+        }
+
+      }
+    }
+  }
\ No newline at end of file
diff --git a/client/src/components/downloadPacket.module.scss.d.ts b/client/src/components/downloadPacket.module.scss.d.ts
new file mode 100644
index 00000000..df634604
--- /dev/null
+++ b/client/src/components/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;
diff --git a/client/src/components/downloadPacket.test.tsx b/client/src/components/downloadPacket.test.tsx
new file mode 100644
index 00000000..fab50aa8
--- /dev/null
+++ b/client/src/components/downloadPacket.test.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import DownloadPacket from './downloadPacket';
+
+test('download packet component defined', () => {
+  render(<DownloadPacket />);
+
+  screen.getByRole('button', {name: /download packet/i});
+});
+
diff --git a/client/src/components/downloadPacket.tsx b/client/src/components/downloadPacket.tsx
new file mode 100644
index 00000000..a9c72da9
--- /dev/null
+++ b/client/src/components/downloadPacket.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {Button} from '@trussworks/react-uswds';
+import * as styles from './downloadPacket.module.scss';
+// @ts-ignore
+import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
+
+export const cbgFileURL = 'https://justice40-data.s3.amazonaws.com/Score/usa.zip';
+
+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={cbgFileURL}>
+              <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;
diff --git a/client/src/pages/cejst.module.scss b/client/src/pages/cejst.module.scss
index 4d7519fa..38f5c345 100644
--- a/client/src/pages/cejst.module.scss
+++ b/client/src/pages/cejst.module.scss
@@ -1,5 +1,12 @@
+$primary-color: #112f4e;
+
 .disclaimer {
-  margin-top: 24px;
-  margin-bottom: 21px;
-  margin-left: 49px;
+  display: flex;
+  flex-wrap: wrap;
+  line-height: 25px;
+
+  .textBox {
+    flex: 2;
+    max-width: 700px;
+  }
 }
diff --git a/client/src/pages/cejst.module.scss.d.ts b/client/src/pages/cejst.module.scss.d.ts
index 9fa8ab82..dd5594e2 100644
--- a/client/src/pages/cejst.module.scss.d.ts
+++ b/client/src/pages/cejst.module.scss.d.ts
@@ -1,6 +1,7 @@
 declare namespace CejstModuleScssNamespace {
   export interface ICejstModuleScss {
     disclaimer: string;
+    textBox: string;
   }
 }
 
diff --git a/client/src/pages/cejst.tsx b/client/src/pages/cejst.tsx
index 2e7e5f2d..5f2136f5 100644
--- a/client/src/pages/cejst.tsx
+++ b/client/src/pages/cejst.tsx
@@ -3,37 +3,58 @@ import Layout from '../components/layout';
 import MapWrapper from '../components/mapWrapper';
 import HowYouCanHelp from '../components/HowYouCanHelp';
 import MapLegend from '../components/mapLegend';
+import DownloadPacket from '../components/downloadPacket';
 import * as styles from './cejst.module.scss';
 
-
 interface IMapPageProps {
   location: Location;
 }
 
+
 const CEJSTPage = ({location}: IMapPageProps) => {
   // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now
   //   We will bring back later when we have interactive controls.
   return (
     <Layout location={location}>
       <main id="main-content" role="main">
-        <h2>Just Progress communities</h2>
-        <p className={styles.disclaimer}>
-          Just Progress helps identify and prioritize communities across the
-          United States and U.S. territories that have been historically
-          overburdened and underserved. These communities will receive 40% of
-          the benefits from investments in key areas outlined by the
-          <a
-            href={'https://www.whitehouse.gov/briefing-room/' +
-            'presidential-actions/2021/01/27/' +
-            'executive-order-on-tackling-the-climate-' +
-            'crisis-at-home-and-abroad/'}
-            target={'_blank'}
-            rel={'noreferrer'}>
-            Executive Order on Tackling the Climate Crisis at Home and
-            Abroad</a>.
-        </p>
+
+        <section>
+          <h2>Just Progress communities</h2>
+          <div className={styles.disclaimer}>
+            <div className={styles.textBox}>
+              <p>
+                Just Progress helps identify and prioritize communities across the United States and U.S. territories
+                that have been historically overburdened and underserved. These communities will receive 40% of
+                the benefits from investments in key areas outlined by the
+                &nbsp;
+                <a
+                  href={'https://www.whitehouse.gov/briefing-room/' +
+                    'presidential-actions/2021/01/27/' +
+                    'executive-order-on-tackling-the-climate-' +
+                    'crisis-at-home-and-abroad/'}
+                  target={'_blank'}
+                  rel={'noreferrer'}>
+                  Executive Order on Tackling the Climate Crisis at Home and Abroad
+                </a>.
+              </p>
+              <p>
+                Download the Just Progress packet or explore the map below to see the list of prioritized communites. To
+                learn more about how these communities were prioritized check out the
+                &nbsp;
+                <a
+                  href={'./methodology'}>
+                  Methodology
+                </a>
+                &nbsp;
+                page.
+              </p>
+            </div>
+            <DownloadPacket />
+          </div>
+        </section>
+
         <h2>Explore the Tool</h2>
-        <MapWrapper/>
+        <MapWrapper />
         <MapLegend />
         <HowYouCanHelp />
       </main>
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index 879fd2b9..30344849 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -28,6 +28,7 @@ $theme-font-role-heading: "sans";
 
 // Custom SASS/CSS goes here
 $j40-max-width: 80ex;
+$primary-color: #112f4e;
 
 .j40-two-column {
   overflow: hidden;
@@ -70,7 +71,7 @@ $j40-max-width: 80ex;
 .j40-header,
 .j40-primary-nav,
 .j40-header > li > a {
-  color: #112f4e !important;
+  color: $primary-color !important;
   z-index: 5;
 
   .usa-nav-container {
@@ -79,7 +80,7 @@ $j40-max-width: 80ex;
 
   span {
     // make sure the open close chevron is colored correctly
-    color: #112f4e;
+    color: $primary-color;
   }
 
   // this is the title