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 2022-04-27 07:43:34 -07:00 committed by GitHub
parent 5b5d6051a8
commit 6ab7d76fdb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 525 additions and 124 deletions

View file

@ -207,6 +207,32 @@
"value": "About"
}
],
"common.pages.alerts.additional_docs_available.description": [
{
"type": 0,
"value": "Download new technical support and other documentation and "
},
{
"children": [
{
"type": 0,
"value": "send feedback"
}
],
"type": 8,
"value": "link2"
},
{
"type": 0,
"value": "."
}
],
"common.pages.alerts.additional_docs_available.title": [
{
"type": 0,
"value": "Additional documentation now available"
}
],
"common.pages.alerts.public_comment_period.description": [
{
"type": 0,
@ -2596,9 +2622,19 @@
}
],
"methodology.page.downloadPacket.header.text": [
{
"children": [
{
"type": 0,
"value": "Files available for download"
"value": "NEW"
}
],
"type": 8,
"value": "callout"
},
{
"type": 0,
"value": " files available for download"
}
],
"methodology.page.downloadPacket.info.shape.last.updated": [
@ -2614,7 +2650,21 @@
"methodology.page.downloadPacket.info.text1": [
{
"type": 0,
"value": "Download the data sources used in the CEJST (.csv and .xlsx, "
"value": "Download the data sources used in the CEJST (.csv, .xlxs, "
},
{
"children": [
{
"type": 0,
"value": ".pdf"
}
],
"type": 8,
"value": "callout"
},
{
"type": 0,
"value": " that describes how to use the list, and a codebook, "
},
{
"type": 1,
@ -2622,7 +2672,21 @@
},
{
"type": 0,
"value": " unzipped), the shapefile, along with a codebook (.zip, "
"value": " unzipped), the shapefile, along with a "
},
{
"children": [
{
"type": 0,
"value": "codebook"
}
],
"type": 8,
"value": "callout"
},
{
"type": 0,
"value": " (.zip, "
},
{
"type": 1,
@ -2638,7 +2702,7 @@
},
{
"type": 0,
"value": ")."
"value": " unzipped)."
}
],
"methodology.page.downloadPacket.info.tsd.last.updated": [
@ -2673,6 +2737,18 @@
"value": "boldtag"
}
],
"methodology.page.downloadPacket.updated.tag.text": [
{
"children": [
{
"type": 0,
"value": "Updated"
}
],
"type": 8,
"value": "boldtag"
}
],
"methodology.page.formula.first": [
{
"children": [

View file

@ -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>

View file

@ -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>

View file

@ -47,9 +47,8 @@
@include u-text('semibold');
}
// Data source text
.dataSourceText {
@include baseTextStyle();
.downloadSourceText {
@include u-margin-top(2);
}
// Last updated
@ -59,32 +58,28 @@
@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;
}
}
}
}
}
@ -93,15 +88,27 @@
@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");
}

View file

@ -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;
}
}

View file

@ -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"

View file

@ -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"

View file

@ -61,6 +61,22 @@ export const ALERTS = {
/>,
}}
/>,
ALERT_2_TITLE: defineMessages({
TITLE: {
id: 'common.pages.alerts.additional_docs_available.title',
defaultMessage: 'Additional documentation now available',
description: 'Alert title that appears at the top of pages.',
},
}),
ALERT_2_DESCRIPTION: <FormattedMessage
id={'common.pages.alerts.additional_docs_available.description'}
defaultMessage={`Download new technical support and other documentation and <link2>send feedback</link2>.`}
description={`Alert title that appears at the top of pages.`}
values={{
link2: linkFn(`mailto:${FEEDBACK_EMAIL}`, false, true),
}}
/>,
};
// Header

View file

@ -3,6 +3,7 @@ import React from 'react';
import {defineMessages} from 'react-intl';
import {FormattedDate, FormattedMessage, FormattedNumber} from 'gatsby-plugin-intl';
import {boldFn, linkFn, simpleLink} from './common';
import * as styles from '../../components/DownloadPacket/downloadPacket.module.scss';
export const PAGE = defineMessages({
TILE: {
@ -72,11 +73,11 @@ export const FORMULA = {
};
// Download Package
export const DOWNLOAD_FILE_SIZE = 52;
export const DOWNLOAD_FILE_SIZE = 53;
export const DOWNLOAD_SHAPE_FILE_SIZE = 742;
export const DOWNLOAD_TSD_FILE_SIZE = 913; // in KB
export const DOWNLOAD_ZIP_LAST_UPDATED = new Date('4/6/2022').getTime();
export const DOWNLOAD_SHAPE_LAST_UPDATED = new Date('4/6/2022').getTime();
export const DOWNLOAD_TSD_FILE_SIZE = 2.5;
export const DOWNLOAD_ZIP_LAST_UPDATED = new Date('4/26/2022').getTime();
export const DOWNLOAD_SHAPE_LAST_UPDATED = new Date('4/26/2022').getTime();
export const DOWNLOAD_TSD_LAST_UPDATED = new Date('4/19/2022').getTime();
export const VERSION_NUMBER = 0.1;
@ -99,17 +100,23 @@ export const DOWNLOAD_TSD_URL = [
process.env.GATSBY_TSD_DOWNLOAD_FILE_PATH,
].join('/');
const newCalloutFontColorFn = (str:string) => <span className={styles.newCalloutFontColor}>{str}</span>;
export const DOWNLOAD_PACKAGE = {
TITLE: <FormattedMessage
id={'methodology.page.downloadPacket.header.text'}
defaultMessage={`Files available for download`}
defaultMessage={`<callout>NEW</callout> files available for download`}
description={'Navigate to the methodology page. This is the download packet header text'}
values= {{
callout: newCalloutFontColorFn,
}}
/>,
DESCRIPTION1: <FormattedMessage
id={ 'methodology.page.downloadPacket.info.text1'}
defaultMessage= {`Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped), the shapefile, along with a codebook (.zip, {shapefileSize} unzipped) or the technical support document (.pdf, {tsdFileSize}).`}
defaultMessage= {`Download the data sources used in the CEJST (.csv, .xlxs, <callout>.pdf</callout> that describes how to use the list, and a codebook, {downloadFileSize} unzipped), the shapefile, along with a <callout>codebook</callout> (.zip, {shapefileSize} unzipped) or the technical support document (.pdf, {tsdFileSize} unzipped).`}
description= {'Navigate to the methodology page. This is the download packet info text'}
values= {{
callout: newCalloutFontColorFn,
downloadFileSize: <FormattedNumber
value={DOWNLOAD_FILE_SIZE}
style="unit"
@ -125,7 +132,7 @@ export const DOWNLOAD_PACKAGE = {
tsdFileSize: <FormattedNumber
value={DOWNLOAD_TSD_FILE_SIZE}
style="unit"
unit="kilobyte"
unit="megabyte"
unitDisplay="narrow"
/>,
}}
@ -192,6 +199,14 @@ export const DOWNLOAD_PACKAGE = {
boldtag: boldFn,
}}
/>,
UPDATED_TAG: <FormattedMessage
id={ 'methodology.page.downloadPacket.updated.tag.text'}
defaultMessage= {`<boldtag>Updated</boldtag>`}
description= {'Navigate to the methodology page. This is the update callout tag text that overlaps the button'}
values={{
boldtag: boldFn,
}}
/>,
};
export const CATEGORY= {

View file

@ -91,6 +91,14 @@
"defaultMessage": "About",
"description": "Navigate to the About page. This is the about page title text"
},
"common.pages.alerts.additional_docs_available.description": {
"defaultMessage": "Download new technical support and other documentation and <link2>send feedback</link2>.",
"description": "Alert title that appears at the top of pages."
},
"common.pages.alerts.additional_docs_available.title": {
"defaultMessage": "Additional documentation now available",
"description": "Alert title that appears at the top of pages."
},
"common.pages.alerts.public_comment_period.description": {
"defaultMessage": "The public comment period for <link1>sending feedback</link1> has been extended to {expDate1}.",
"description": "Alert body that appears on landing page."
@ -1212,7 +1220,7 @@
"description": "Navigate to the methodology page. This is the download technical support document spreadsheet"
},
"methodology.page.downloadPacket.header.text": {
"defaultMessage": "Files available for download",
"defaultMessage": "<callout>NEW</callout> files available for download",
"description": "Navigate to the methodology page. This is the download packet header text"
},
"methodology.page.downloadPacket.info.shape.last.updated": {
@ -1220,7 +1228,7 @@
"description": "Navigate to the methodology page. This is the download packet info last updated"
},
"methodology.page.downloadPacket.info.text1": {
"defaultMessage": "Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped), the shapefile, along with a codebook (.zip, {shapefileSize} unzipped) or the technical support document (.pdf, {tsdFileSize}).",
"defaultMessage": "Download the data sources used in the CEJST (.csv, .xlxs, <callout>.pdf</callout> that describes how to use the list, and a codebook, {downloadFileSize} unzipped), the shapefile, along with a <callout>codebook</callout> (.zip, {shapefileSize} unzipped) or the technical support document (.pdf, {tsdFileSize} unzipped).",
"description": "Navigate to the methodology page. This is the download packet info text"
},
"methodology.page.downloadPacket.info.tsd.last.updated": {
@ -1235,6 +1243,10 @@
"defaultMessage": "<boldtag>NEW</boldtag>",
"description": "Navigate to the methodology page. This is the new tag text"
},
"methodology.page.downloadPacket.updated.tag.text": {
"defaultMessage": "<boldtag>Updated</boldtag>",
"description": "Navigate to the methodology page. This is the update callout tag text that overlaps the button"
},
"methodology.page.formula.first": {
"defaultMessage": "<boldtag>IF</boldtag> the census tract is above the threshold for one or more environmental or climate indicators",
"description": "Navigate to the methodology page. This is the first part of the formula used in the methodology"

View file

@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
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"

View file

@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
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"

View file

@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
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"

View file

@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
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"

View file

@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
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"
@ -447,12 +476,33 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<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=""
@ -463,20 +513,20 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
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>
@ -485,7 +535,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
data-testid="tag"
>
<strong>
NEW
Updated
</strong>
</span>
</div>
@ -499,20 +549,20 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
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>
@ -526,7 +576,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</span>
</div>
<a
data-cy="shapefile-link"
data-cy="tsd-link"
download=""
href="//"
rel="noreferrer"
@ -537,15 +587,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
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>

View file

@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
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"

View file

@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
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"