mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-28 14:01:16 -07:00
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:
parent
0316906a69
commit
33c3288160
10 changed files with 195 additions and 24 deletions
|
@ -1,5 +1,6 @@
|
||||||
{
|
{
|
||||||
"baseUrl": "http://localhost:8000/",
|
"baseUrl": "http://localhost:8000/",
|
||||||
"integrationFolder": "cypress/e2e",
|
"integrationFolder": "cypress/e2e",
|
||||||
"chromeWebSecurity": false
|
"chromeWebSecurity": false,
|
||||||
|
"trashAssetsBeforeRuns": true
|
||||||
}
|
}
|
||||||
|
|
20
client/cypress/e2e/downloadPacket.spec.js
Normal file
20
client/cypress/e2e/downloadPacket.spec.js
Normal 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');
|
||||||
|
});
|
||||||
|
});
|
59
client/src/components/downloadPacket.module.scss
Normal file
59
client/src/components/downloadPacket.module.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
19
client/src/components/downloadPacket.module.scss.d.ts
vendored
Normal file
19
client/src/components/downloadPacket.module.scss.d.ts
vendored
Normal 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;
|
10
client/src/components/downloadPacket.test.tsx
Normal file
10
client/src/components/downloadPacket.test.tsx
Normal 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});
|
||||||
|
});
|
||||||
|
|
32
client/src/components/downloadPacket.tsx
Normal file
32
client/src/components/downloadPacket.tsx
Normal 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;
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
1
client/src/pages/cejst.module.scss.d.ts
vendored
1
client/src/pages/cejst.module.scss.d.ts
vendored
|
@ -1,6 +1,7 @@
|
||||||
declare namespace CejstModuleScssNamespace {
|
declare namespace CejstModuleScssNamespace {
|
||||||
export interface ICejstModuleScss {
|
export interface ICejstModuleScss {
|
||||||
disclaimer: string;
|
disclaimer: string;
|
||||||
|
textBox: string;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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-' +
|
|
||||||
'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
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={'./methodology'}>
|
||||||
|
Methodology
|
||||||
|
</a>
|
||||||
|
|
||||||
|
page.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<DownloadPacket />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<h2>Explore the Tool</h2>
|
<h2>Explore the Tool</h2>
|
||||||
<MapWrapper/>
|
<MapWrapper />
|
||||||
<MapLegend />
|
<MapLegend />
|
||||||
<HowYouCanHelp />
|
<HowYouCanHelp />
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue