mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-29 01:31:40 -07:00
Update download box to include shapefile downloads
- refator download packet scss - add shapefile URL to .env files - update tests - index forwarding pattern - update snapshots
This commit is contained in:
Vim USDS
parent
5cb265a93c
commit
8162226cdc
11 changed files with 332 additions and 107 deletions
76
client/src/components/DownloadPacket/DownloadPacket.tsx
Normal file
76
client/src/components/DownloadPacket/DownloadPacket.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import React from 'react';
|
||||
import {Button, Grid, Tag} from '@trussworks/react-uswds';
|
||||
|
||||
import * as styles from './downloadPacket.module.scss';
|
||||
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||
|
||||
// @ts-ignore
|
||||
import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
|
||||
|
||||
const DownloadPacket = () => {
|
||||
return (
|
||||
<Grid>
|
||||
<div className={styles.downloadBoxContainer}>
|
||||
<div className={styles.downloadBox}>
|
||||
<div className={styles.downloadBoxTextBox}>
|
||||
|
||||
{/* Download box title */}
|
||||
<div className={styles.downloadBoxTitle}>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE}
|
||||
</div>
|
||||
|
||||
{/* Download box description 1 */}
|
||||
<div className={styles.dataSourceText}>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION1}
|
||||
{' '}
|
||||
<span>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Download box button 1 */}
|
||||
<div className={styles.dataSourceButtonContainer}>
|
||||
<a data-cy={'download-link'} download href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
|
||||
<Button className={styles.downloadBoxButton} type="button">
|
||||
<div>
|
||||
<img src={downloadIcon} alt={'download icon for download package'}/>
|
||||
</div>
|
||||
<div className={styles.dataSourceButtonText}>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT1}
|
||||
</div>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Download box description 2 */}
|
||||
<div className={styles.shapeFileText}>
|
||||
<Tag className={styles.newtag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION2}
|
||||
{' '}
|
||||
<span>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Download box button 2 */}
|
||||
<div className={styles.shapefileButtonContainer}>
|
||||
<a data-cy={'shapefile-link'} download href={METHODOLOGY_COPY.DOWNLOAD_SHAPEFILE_URL}>
|
||||
<Button className={styles.downloadBoxButton} type="button">
|
||||
<div>
|
||||
<img src={downloadIcon} alt={'download icon for download package'}/>
|
||||
</div>
|
||||
<div className={styles.shapeFileButtonText}>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT2}
|
||||
</div>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default DownloadPacket;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`download packet component defined checks if component renders 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class=""
|
||||
data-testid="grid"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
Files available for download
|
||||
</div>
|
||||
<div>
|
||||
Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped).
|
||||
<span>
|
||||
Last updated: 04/06/22
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
data-cy="download-link"
|
||||
download=""
|
||||
href="//"
|
||||
>
|
||||
<button
|
||||
class="usa-button"
|
||||
data-testid="button"
|
||||
type="button"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
alt="download icon for download package"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Download data sources
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
class="usa-tag"
|
||||
data-testid="tag"
|
||||
>
|
||||
NEW
|
||||
</span>
|
||||
Download the shapefiles, along with a codebook (.cpg, .dbf, .prj, .shp and .shx, 740MB unzipped).
|
||||
<span>
|
||||
Last updated: 04/06/22
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
data-cy="shapefile-link"
|
||||
download=""
|
||||
href="//"
|
||||
>
|
||||
<button
|
||||
class="usa-button"
|
||||
data-testid="button"
|
||||
type="button"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
alt="download icon for download package"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Download shapefiles
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
@ -1,7 +1,35 @@
|
|||
@use '../../styles/design-system.scss' as *;
|
||||
|
||||
.downloadBoxContainer {
|
||||
@mixin baseButtonContainerStyles {
|
||||
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%);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin baseTextStyle {
|
||||
@include typeset('sans', 'xs', 3);
|
||||
@include u-margin-top(2);
|
||||
@include u-margin-bottom(2);
|
||||
|
||||
span {
|
||||
font-style: italic;
|
||||
}
|
||||
};
|
||||
|
||||
@mixin baseButtonTextStyle {
|
||||
padding-top: 4px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.downloadBoxContainer {
|
||||
color: whitesmoke;
|
||||
margin: auto;
|
||||
@include u-margin-top(2.5);
|
||||
|
|
@ -19,44 +47,47 @@
|
|||
.downloadBoxTitle {
|
||||
@include typeset('sans', 'xs', 3);
|
||||
@include u-text('semibold');
|
||||
@include u-margin-bottom(2);
|
||||
}
|
||||
|
||||
.downloadBoxText {
|
||||
@include typeset('sans', 'xs', 3);
|
||||
@include u-margin-bottom(4);
|
||||
|
||||
span {
|
||||
font-style: italic;
|
||||
// Data source text
|
||||
.dataSourceText {
|
||||
@include baseTextStyle();
|
||||
}
|
||||
// Data source button
|
||||
.dataSourceButtonContainer {
|
||||
@include baseButtonContainerStyles();
|
||||
|
||||
.dataSourceButtonText {
|
||||
@include baseButtonTextStyle();
|
||||
}
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
|
||||
// Shapefile text
|
||||
.shapeFileText {
|
||||
@include baseTextStyle();
|
||||
@include u-margin-top(7);
|
||||
}
|
||||
// Shapefile button
|
||||
.shapefileButtonContainer{
|
||||
@include baseButtonContainerStyles();
|
||||
|
||||
.downloadBoxButton{
|
||||
@include u-bg('white');
|
||||
@include u-color('blue-80v');
|
||||
display: flex;
|
||||
|
||||
.downloadPacketText {
|
||||
padding-top: 4px;
|
||||
padding-left: 5px;
|
||||
.shapeFileButtonText {
|
||||
@include baseButtonTextStyle();
|
||||
@include u-margin-right(3);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.downloadBoxButton{
|
||||
@include u-bg('white');
|
||||
@include u-color('blue-80v');
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.newtag {
|
||||
@include u-text("blue-70v");
|
||||
@include u-bg("yellow-20v");
|
||||
}
|
||||
|
|
@ -4,10 +4,14 @@ declare namespace DownloadPacketModuleScssNamespace {
|
|||
downloadBox: string;
|
||||
downloadBoxTextBox: string;
|
||||
downloadBoxTitle: string;
|
||||
downloadBoxText: string;
|
||||
downloadBoxButtonContainer: string;
|
||||
dataSourceText: string;
|
||||
dataSourceButtonContainer: string;
|
||||
shapefileButtonContainer: string;
|
||||
downloadBoxButton: string;
|
||||
downloadPacketText: string;
|
||||
dataSourceButtonText: string;
|
||||
shapeFileText: string;
|
||||
shapeFileButtonText: string;
|
||||
newtag: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import * as React from 'react';
|
||||
import {render, screen} from '@testing-library/react';
|
||||
import {render} from '@testing-library/react';
|
||||
import {LocalizedComponent} from '../../test/testHelpers';
|
||||
import DownloadPacket from '.';
|
||||
import DownloadPacket from './DownloadPacket';
|
||||
|
||||
test('download packet component defined', () => {
|
||||
render(
|
||||
describe('download packet component defined', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<DownloadPacket />
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
screen.getByRole('button', {name: /download package/i});
|
||||
it('checks if component renders', () => {
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,45 +1,3 @@
|
|||
import React from 'react';
|
||||
import {Button, Grid} from '@trussworks/react-uswds';
|
||||
|
||||
import * as styles from './downloadPacket.module.scss';
|
||||
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||
|
||||
// @ts-ignore
|
||||
import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
|
||||
|
||||
const DownloadPacket = () => {
|
||||
return (
|
||||
<Grid>
|
||||
<div className={styles.downloadBoxContainer}>
|
||||
<div className={styles.downloadBox}>
|
||||
<div className={styles.downloadBoxTextBox}>
|
||||
<div className={styles.downloadBoxTitle}>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE}
|
||||
</div>
|
||||
<div className={styles.downloadBoxText}>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION}
|
||||
{' '}
|
||||
<span>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.downloadBoxButtonContainer}>
|
||||
<a data-cy={'download-link'} download href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
|
||||
<Button className={styles.downloadBoxButton} type="button">
|
||||
<div>
|
||||
<img src={downloadIcon} alt={'download icon for download package'}/>
|
||||
</div>
|
||||
<div className={styles.downloadPacketText}>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT}
|
||||
</div>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
import DownloadPacket from './DownloadPacket';
|
||||
|
||||
export default DownloadPacket;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue