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/",
|
||||
"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 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 21px;
|
||||
margin-left: 49px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
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 {
|
||||
export interface ICejstModuleScss {
|
||||
disclaimer: string;
|
||||
textBox: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
<a
|
||||
href={'https://www.whitehouse.gov/briefing-room/' +
|
||||
'presidential-actions/2021/01/27/' +
|
||||
|
@ -29,11 +34,27 @@ 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
|
||||
|
||||
<a
|
||||
href={'./methodology'}>
|
||||
Methodology
|
||||
</a>
|
||||
|
||||
page.
|
||||
</p>
|
||||
</div>
|
||||
<DownloadPacket />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Explore the Tool</h2>
|
||||
<MapWrapper/>
|
||||
<MapWrapper />
|
||||
<MapLegend />
|
||||
<HowYouCanHelp />
|
||||
</main>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue