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/", "baseUrl": "http://localhost:8000/",
"integrationFolder": "cypress/e2e", "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 { .disclaimer {
margin-top: 24px; display: flex;
margin-bottom: 21px; flex-wrap: wrap;
margin-left: 49px; line-height: 25px;
.textBox {
flex: 2;
max-width: 700px;
}
} }

View file

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

View file

@ -3,37 +3,58 @@ import Layout from '../components/layout';
import MapWrapper from '../components/mapWrapper'; import MapWrapper from '../components/mapWrapper';
import HowYouCanHelp from '../components/HowYouCanHelp'; import HowYouCanHelp from '../components/HowYouCanHelp';
import MapLegend from '../components/mapLegend'; import MapLegend from '../components/mapLegend';
import DownloadPacket from '../components/downloadPacket';
import * as styles from './cejst.module.scss'; import * as styles from './cejst.module.scss';
interface IMapPageProps { interface IMapPageProps {
location: Location; location: Location;
} }
const CEJSTPage = ({location}: IMapPageProps) => { const CEJSTPage = ({location}: IMapPageProps) => {
// We temporarily removed MapControls, which would enable you to `setFeatures` also, for now // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now
// We will bring back later when we have interactive controls. // We will bring back later when we have interactive controls.
return ( return (
<Layout location={location}> <Layout location={location}>
<main id="main-content" role="main"> <main id="main-content" role="main">
<h2>Just Progress communities</h2>
<p className={styles.disclaimer}> <section>
Just Progress helps identify and prioritize communities across the <h2>Just Progress communities</h2>
United States and U.S. territories that have been historically <div className={styles.disclaimer}>
overburdened and underserved. These communities will receive 40% of <div className={styles.textBox}>
the benefits from investments in key areas outlined by the <p>
<a Just Progress helps identify and prioritize communities across the United States and U.S. territories
href={'https://www.whitehouse.gov/briefing-room/' + that have been historically overburdened and underserved. These communities will receive 40% of
'presidential-actions/2021/01/27/' + the benefits from investments in key areas outlined by the
'executive-order-on-tackling-the-climate-' + &nbsp;
'crisis-at-home-and-abroad/'} <a
target={'_blank'} href={'https://www.whitehouse.gov/briefing-room/' +
rel={'noreferrer'}> 'presidential-actions/2021/01/27/' +
Executive Order on Tackling the Climate Crisis at Home and 'executive-order-on-tackling-the-climate-' +
Abroad</a>. 'crisis-at-home-and-abroad/'}
</p> 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> <h2>Explore the Tool</h2>
<MapWrapper/> <MapWrapper />
<MapLegend /> <MapLegend />
<HowYouCanHelp /> <HowYouCanHelp />
</main> </main>

View file

@ -28,6 +28,7 @@ $theme-font-role-heading: "sans";
// Custom SASS/CSS goes here // Custom SASS/CSS goes here
$j40-max-width: 80ex; $j40-max-width: 80ex;
$primary-color: #112f4e;
.j40-two-column { .j40-two-column {
overflow: hidden; overflow: hidden;
@ -70,7 +71,7 @@ $j40-max-width: 80ex;
.j40-header, .j40-header,
.j40-primary-nav, .j40-primary-nav,
.j40-header > li > a { .j40-header > li > a {
color: #112f4e !important; color: $primary-color !important;
z-index: 5; z-index: 5;
.usa-nav-container { .usa-nav-container {
@ -79,7 +80,7 @@ $j40-max-width: 80ex;
span { span {
// make sure the open close chevron is colored correctly // make sure the open close chevron is colored correctly
color: #112f4e; color: $primary-color;
} }
// this is the title // this is the title