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/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;
+          }
+        }
+
+      }
+    }
+  }

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;

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

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;