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
This commit is contained in:
Vim 2021-07-15 11:01:10 -07:00 committed by GitHub
commit 33c3288160
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 195 additions and 24 deletions

View file

@ -1,5 +1,6 @@
{
"baseUrl": "http://localhost:8000/",
"integrationFolder": "cypress/e2e",
"chromeWebSecurity": false
"chromeWebSecurity": false,
"trashAssetsBeforeRuns": true
}

View file

@ -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');
});
});

View file

@ -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;
}
}
}
}
}

View file

@ -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;

View file

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

View file

@ -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;

View file

@ -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;
}
}

View file

@ -1,6 +1,7 @@
declare namespace CejstModuleScssNamespace {
export interface ICejstModuleScss {
disclaimer: string;
textBox: string;
}
}

View file

@ -3,25 +3,30 @@ 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">
<section>
<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
<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/' +
@ -29,9 +34,25 @@ const CEJSTPage = ({location}: IMapPageProps) => {
'crisis-at-home-and-abroad/'}
target={'_blank'}
rel={'noreferrer'}>
Executive Order on Tackling the Climate Crisis at Home and
Abroad</a>.
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 />
<MapLegend />

View file

@ -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