mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-18 01:31:40 -07:00
Update Download sidebar, add new alert (#1587)
* Update Download sidebar, add new alert - Fixes #1567 - Cleaned up styles related to buttons. - Refactored buttons a little to make easier to maintain. - Updated test snapshots/translation files * Fixes * More text fixes
This commit is contained in:
TomNUSDS
GitHub
parent
5b5d6051a8
commit
6ab7d76fdb
17 changed files with 525 additions and 124 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, {FC} from 'react';
|
||||
import {Button, Grid, Tag} from '@trussworks/react-uswds';
|
||||
|
||||
import * as styles from './downloadPacket.module.scss';
|
||||
|
|
@ -8,6 +8,24 @@ import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
|||
import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
|
||||
|
||||
const DownloadPacket = () => {
|
||||
// inline components to make build layout below more readable
|
||||
const UpdateTag = () => <div className={styles.tagContainer}><Tag
|
||||
className={styles.updateTag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.UPDATED_TAG}</Tag></div>;
|
||||
|
||||
const NewTag = () => <div className={styles.tagContainer}>
|
||||
<Tag className={styles.newTag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag></div>;
|
||||
|
||||
const DownloadButton: FC = ({children}) =>
|
||||
<Button className={styles.downloadBoxButton} type="button">
|
||||
<span className={styles.downloadButtonIconSpan}>
|
||||
<img src={downloadIcon} className={styles.downloadButtonIcon}
|
||||
alt={'download icon for download package'} />
|
||||
</span>
|
||||
<span className={styles.downloadButtonText} >
|
||||
{children}
|
||||
</span>
|
||||
</Button>;
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
<div className={styles.downloadBoxContainer}>
|
||||
|
|
@ -20,23 +38,17 @@ const DownloadPacket = () => {
|
|||
</div>
|
||||
|
||||
{/* Download box description 1 */}
|
||||
<div className={styles.dataSourceText}>
|
||||
<div className={styles.downloadSourceText}>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION1}
|
||||
</div>
|
||||
|
||||
{/* Download box button 1 */}
|
||||
<div className={styles.dataSourceButtonContainer}>
|
||||
<div className={styles.downloadButtonContainer}>
|
||||
<UpdateTag/>
|
||||
<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>
|
||||
<DownloadButton>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT1}</DownloadButton>
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.lastUpdated}>
|
||||
|
|
@ -45,21 +57,12 @@ const DownloadPacket = () => {
|
|||
|
||||
|
||||
{/* Download box button 2 */}
|
||||
<div className={styles.shapefileButtonContainer}>
|
||||
<div className={styles.newTagContainer}>
|
||||
<Tag className={styles.newtag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag>
|
||||
</div>
|
||||
<div className={styles.downloadButtonContainer}>
|
||||
<UpdateTag/>
|
||||
<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>
|
||||
<DownloadButton>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT2}</DownloadButton>
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.lastUpdated}>
|
||||
|
|
@ -67,30 +70,20 @@ const DownloadPacket = () => {
|
|||
</div>
|
||||
|
||||
{/* Download box button 3 */}
|
||||
<div className={styles.shapefileButtonContainer}>
|
||||
<div className={styles.newTagContainer}>
|
||||
<Tag className={styles.newtag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag>
|
||||
</div>
|
||||
<div className={styles.downloadButtonContainer}>
|
||||
<NewTag/>
|
||||
{/* target and rel required since PDFs open in browser and don't download */}
|
||||
<a data-cy={'shapefile-link'}
|
||||
<a data-cy={'tsd-link'}
|
||||
download
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
href={METHODOLOGY_COPY.DOWNLOAD_TSD_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_TEXT3}
|
||||
</div>
|
||||
</Button>
|
||||
<DownloadButton>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT3}</DownloadButton>
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.lastUpdated}>
|
||||
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TSD_LAST_UPDATED}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,33 @@ exports[`download packet component defined checks if component renders 1`] = `
|
|||
<div>
|
||||
<div>
|
||||
<div>
|
||||
Files available for download
|
||||
<span>
|
||||
NEW
|
||||
</span>
|
||||
files available for download
|
||||
</div>
|
||||
<div>
|
||||
Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped), the shapefile, along with a codebook (.zip, 742MB unzipped) or the technical support document (.pdf, 913kB).
|
||||
Download the data sources used in the CEJST (.csv, .xlxs,
|
||||
<span>
|
||||
.pdf
|
||||
</span>
|
||||
that describes how to use the list, and a codebook, 53MB unzipped), the shapefile, along with a
|
||||
<span>
|
||||
codebook
|
||||
</span>
|
||||
(.zip, 742MB unzipped) or the technical support document (.pdf, 2.5MB unzipped).
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span
|
||||
class="usa-tag"
|
||||
data-testid="tag"
|
||||
>
|
||||
<strong>
|
||||
Updated
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
data-cy="download-link"
|
||||
download=""
|
||||
|
|
@ -26,20 +47,20 @@ exports[`download packet component defined checks if component renders 1`] = `
|
|||
data-testid="button"
|
||||
type="button"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
<img
|
||||
alt="download icon for download package"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
</span>
|
||||
<span>
|
||||
Download data sources
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
Last updated: 04/06/22
|
||||
Last updated: 04/26/22
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
|
|
@ -48,7 +69,7 @@ exports[`download packet component defined checks if component renders 1`] = `
|
|||
data-testid="tag"
|
||||
>
|
||||
<strong>
|
||||
NEW
|
||||
Updated
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -62,20 +83,20 @@ exports[`download packet component defined checks if component renders 1`] = `
|
|||
data-testid="button"
|
||||
type="button"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
<img
|
||||
alt="download icon for download package"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
</span>
|
||||
<span>
|
||||
Download shapefile
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
Last updated: 04/06/22
|
||||
Last updated: 04/26/22
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
|
|
@ -89,7 +110,7 @@ exports[`download packet component defined checks if component renders 1`] = `
|
|||
</span>
|
||||
</div>
|
||||
<a
|
||||
data-cy="shapefile-link"
|
||||
data-cy="tsd-link"
|
||||
download=""
|
||||
href="//"
|
||||
rel="noreferrer"
|
||||
|
|
@ -100,15 +121,15 @@ exports[`download packet component defined checks if component renders 1`] = `
|
|||
data-testid="button"
|
||||
type="button"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
<img
|
||||
alt="download icon for download package"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
</span>
|
||||
<span>
|
||||
Download technical support document
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
@include typeset('sans', 'xs', 3);
|
||||
@include u-margin-top(2);
|
||||
@include u-margin-bottom(2);
|
||||
|
||||
|
||||
};
|
||||
|
||||
@mixin baseButtonTextStyle {
|
||||
|
|
@ -41,15 +41,14 @@
|
|||
padding: 25px 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
.downloadBoxTitle {
|
||||
@include typeset('sans', 'xs', 3);
|
||||
@include u-text('semibold');
|
||||
}
|
||||
|
||||
// Data source text
|
||||
.dataSourceText {
|
||||
@include baseTextStyle();
|
||||
|
||||
.downloadSourceText {
|
||||
@include u-margin-top(2);
|
||||
}
|
||||
|
||||
// Last updated
|
||||
|
|
@ -59,49 +58,57 @@
|
|||
@include u-margin-top(1);
|
||||
}
|
||||
|
||||
// Data source button
|
||||
.dataSourceButtonContainer {
|
||||
@include baseButtonContainerStyles();
|
||||
|
||||
.dataSourceButtonText {
|
||||
@include baseButtonTextStyle();
|
||||
}
|
||||
}
|
||||
|
||||
// Shapefile text
|
||||
.shapeFileText {
|
||||
@include baseTextStyle();
|
||||
@include u-margin-top(7);
|
||||
}
|
||||
// Shapefile button
|
||||
.shapefileButtonContainer{
|
||||
// Data source button (scoped)
|
||||
.downloadButtonContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include baseButtonContainerStyles();
|
||||
text-align: center;
|
||||
|
||||
.shapeFileButtonText {
|
||||
.downloadButtonText {
|
||||
@include baseButtonTextStyle();
|
||||
@include u-margin-right(3);
|
||||
@include u-margin-right(1);
|
||||
}
|
||||
|
||||
.downloadButtonIconSpan {
|
||||
display: contents;
|
||||
max-width: 1.5em;
|
||||
}
|
||||
|
||||
.downloadButtonIcon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.downloadBoxButton{
|
||||
.downloadBoxButton {
|
||||
@include u-bg('white');
|
||||
@include u-color('blue-80v');
|
||||
display: flex;
|
||||
width: 16em;
|
||||
}
|
||||
|
||||
.newTagContainer {
|
||||
.tagContainer {
|
||||
align-self: end;
|
||||
@include u-margin-bottom(-1);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.newtag {
|
||||
@include u-text("blue-70v");
|
||||
@include u-bg("yellow-20v");
|
||||
.newTag {
|
||||
@include u-text('bold');
|
||||
@include u-text("blue-80v");
|
||||
@include u-bg("gold-20v");
|
||||
}
|
||||
|
||||
.updateTag {
|
||||
@include u-text('bold');
|
||||
@include u-text("blue-80v");
|
||||
@include u-bg("gray-10");
|
||||
}
|
||||
|
||||
.newCalloutFontColor {
|
||||
@include u-text("gold-20v");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,15 +4,16 @@ declare namespace DownloadPacketModuleScssNamespace {
|
|||
downloadBox: string;
|
||||
downloadBoxTextBox: string;
|
||||
downloadBoxTitle: string;
|
||||
dataSourceText: string;
|
||||
dataSourceButtonContainer: string;
|
||||
shapefileButtonContainer: string;
|
||||
downloadSourceText: string;
|
||||
downloadButtonContainer: string;
|
||||
downloadBoxButton: string;
|
||||
dataSourceButtonText: string;
|
||||
shapeFileText: string;
|
||||
shapeFileButtonText: string;
|
||||
newTagContainer: string;
|
||||
newtag: string;
|
||||
downloadButtonText: string;
|
||||
downloadButtonIconSpan: string;
|
||||
downloadButtonIcon: string;
|
||||
tagContainer: string;
|
||||
newTag: string;
|
||||
updateTag: string;
|
||||
newCalloutFontColor: string;
|
||||
lastUpdated:string;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -233,6 +233,13 @@ const J40Header = () => {
|
|||
|
||||
{/* Alert */}
|
||||
{isAlertValid && <J40MainGridContainer>
|
||||
<Alert
|
||||
className={styles.alert}
|
||||
type="info"
|
||||
heading={intl.formatMessage(COMMON_COPY.ALERTS.ALERT_2_TITLE.TITLE)}>
|
||||
{COMMON_COPY.ALERTS.ALERT_2_DESCRIPTION}
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
className={styles.alert}
|
||||
type="info"
|
||||
|
|
|
|||
|
|
@ -305,6 +305,35 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
|
|||
class="grid-container-desktop-lg"
|
||||
data-testid="gridContainer"
|
||||
>
|
||||
<div
|
||||
class="usa-alert usa-alert--info"
|
||||
data-testid="alert"
|
||||
>
|
||||
<div
|
||||
class="usa-alert__body"
|
||||
>
|
||||
<h4
|
||||
class="usa-alert__heading"
|
||||
>
|
||||
Additional documentation now available
|
||||
</h4>
|
||||
<p
|
||||
class="usa-alert__text"
|
||||
>
|
||||
Download new technical support and other documentation and
|
||||
<a
|
||||
class="usa-link usa-link--external"
|
||||
data-cy=""
|
||||
href="mailto:Screeningtool-Support@omb.eop.gov"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
send feedback
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="usa-alert usa-alert--info"
|
||||
data-testid="alert"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue