publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-24 10:34:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update download Box to match design sync

Browse source 
- update FAQ link copy
This commit is contained in:
Vim USDS 2022-04-06 17:54:52 -07:00
parent 87372126ab
commit 73c2508a2d
9 changed files with 77 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
client/src/components/DownloadPacket/DownloadPacket.tsx
View file

@ -22,10 +22,6 @@ const DownloadPacket = () => {
{/* Download box description 1 */} {/* Download box description 1 */}
<div className={styles.dataSourceText}> <div className={styles.dataSourceText}>
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION1} {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION1}
{' '}
<span>
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
</span>
</div> </div>
{/* Download box button 1 */} {/* Download box button 1 */}
@ -41,19 +37,16 @@ const DownloadPacket = () => {
</Button> </Button>
</a> </a>
</div> </div>
<div className={styles.lastUpdated}>
{/* 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} {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
</span>
</div> </div>
{/* Download box button 2 */} {/* Download box button 2 */}
<div className={styles.shapefileButtonContainer}> <div className={styles.shapefileButtonContainer}>
<div className={styles.newTagContainer}>
<Tag className={styles.newtag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag>
</div>
<a data-cy={'shapefile-link'} download href={METHODOLOGY_COPY.DOWNLOAD_SHAPEFILE_URL}> <a data-cy={'shapefile-link'} download href={METHODOLOGY_COPY.DOWNLOAD_SHAPEFILE_URL}>
<Button className={styles.downloadBoxButton} type="button"> <Button className={styles.downloadBoxButton} type="button">
<div> <div>
@ -65,6 +58,10 @@ const DownloadPacket = () => {
</Button> </Button>
</a> </a>
</div> </div>
<div className={styles.lastUpdated}>
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
</div>
</div> </div>
</div> </div>

21
client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap
View file

@ -13,10 +13,7 @@ exports[`download packet component defined checks if component renders 1`] = `
Files available for download Files available for download
</div> </div>
<div> <div>
Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped). Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped) or the shapefile, along with a codebook (.zip, 742MB unzipped).
<span>
Last updated: 04/06/22
</span>
</div> </div>
<div> <div>
<a <a
@ -41,19 +38,20 @@ exports[`download packet component defined checks if component renders 1`] = `
</button> </button>
</a> </a>
</div> </div>
<div>
Last updated: 04/06/22
</div>
<div>
<div> <div>
<span <span
class="usa-tag" class="usa-tag"
data-testid="tag" data-testid="tag"
> >
<strong>
NEW NEW
</span> </strong>
Download the shapefiles, along with a codebook (.cpg, .dbf, .prj, .shp and .shx, 740MB unzipped).
<span>
Last updated: 04/06/22
</span> </span>
</div> </div>
<div>
<a <a
data-cy="shapefile-link" data-cy="shapefile-link"
download="" download=""
@ -71,11 +69,14 @@ exports[`download packet component defined checks if component renders 1`] = `
/> />
</div> </div>
<div> <div>
Download shapefiles Download shapefile
</div> </div>
</button> </button>
</a> </a>
</div> </div>
<div>
Last updated: 04/06/22
</div>
</div> </div>
</div> </div>
</div> </div>

20
client/src/components/DownloadPacket/downloadPacket.module.scss
View file

@ -2,6 +2,7 @@
@mixin baseButtonContainerStyles { @mixin baseButtonContainerStyles {
align-self: center; align-self: center;
@include u-margin-top(2);
a { a {
text-decoration: none; text-decoration: none;
@ -19,9 +20,6 @@
@include u-margin-top(2); @include u-margin-top(2);
@include u-margin-bottom(2); @include u-margin-bottom(2);
span {
font-style: italic;
}
}; };
@mixin baseButtonTextStyle { @mixin baseButtonTextStyle {
@ -53,6 +51,14 @@
.dataSourceText { .dataSourceText {
@include baseTextStyle(); @include baseTextStyle();
} }
// Last updated
.lastUpdated {
font-style: italic;
align-self: center;
@include u-margin-top(1);
}
// Data source button // Data source button
.dataSourceButtonContainer { .dataSourceButtonContainer {
@include baseButtonContainerStyles(); @include baseButtonContainerStyles();
@ -69,6 +75,8 @@
} }
// Shapefile button // Shapefile button
.shapefileButtonContainer{ .shapefileButtonContainer{
display: flex;
flex-direction: column;
@include baseButtonContainerStyles(); @include baseButtonContainerStyles();
.shapeFileButtonText { .shapeFileButtonText {
@ -87,6 +95,12 @@
display: flex; display: flex;
} }
.newTagContainer {
align-self: end;
@include u-margin-bottom(-1);
z-index: 2;
}
.newtag { .newtag {
@include u-text("blue-70v"); @include u-text("blue-70v");
@include u-bg("yellow-20v"); @include u-bg("yellow-20v");

2
client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts vendored
View file

@ -11,7 +11,9 @@ declare namespace DownloadPacketModuleScssNamespace {
dataSourceButtonText: string; dataSourceButtonText: string;
shapeFileText: string; shapeFileText: string;
shapeFileButtonText: string; shapeFileButtonText: string;
newTagContainer: string;
newtag: string; newtag: string;
lastUpdated:string;
} }
} }

2
client/src/data/copy/about.tsx
View file

@ -77,7 +77,7 @@ export const HEADING_3 = {
DESCRIPTION_1: DESCRIPTION_1:
<FormattedMessage <FormattedMessage
id={'about.page.sub.header.3.text.1'} id={'about.page.sub.header.3.text.1'}
defaultMessage={`Please navigate to to our <link1>frequently asked questions</link1> to find the answers you are looking for. defaultMessage={`Find answers on the Climate and Economic Justice Screening Tool's <link1>Frequently Asked Questions</link1>.
`} `}
description={'Navigate to the About page. This is the second heading description'} description={'Navigate to the About page. This is the second heading description'}
values={{ values={{

18
client/src/data/copy/methodology.tsx
View file

@ -73,7 +73,7 @@ export const FORMULA = {
// Download Package // Download Package
export const DOWNLOAD_FILE_SIZE = 52; export const DOWNLOAD_FILE_SIZE = 52;
export const DOWNLOAD_SHAPE_FILE_SIZE = 740; export const DOWNLOAD_SHAPE_FILE_SIZE = 742;
export const DOWNLOAD_LAST_UPDATED = 1649287951000; export const DOWNLOAD_LAST_UPDATED = 1649287951000;
export const VERSION_NUMBER = 0.1; export const VERSION_NUMBER = 0.1;
@ -97,7 +97,7 @@ export const DOWNLOAD_PACKAGE = {
/>, />,
DESCRIPTION1: <FormattedMessage DESCRIPTION1: <FormattedMessage
id={ 'methodology.page.downloadPacket.info.text1'} id={ 'methodology.page.downloadPacket.info.text1'}
defaultMessage= {`Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped).`} defaultMessage= {`Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped) or the shapefile, along with a codebook (.zip, {shapefileSize} unzipped).`}
description= {'Navigate to the methodology page. This is the download packet info text'} description= {'Navigate to the methodology page. This is the download packet info text'}
values= {{ values= {{
downloadFileSize: <FormattedNumber downloadFileSize: <FormattedNumber
@ -106,13 +106,6 @@ export const DOWNLOAD_PACKAGE = {
unit="megabyte" unit="megabyte"
unitDisplay="narrow" unitDisplay="narrow"
/>, />,
}}
/>,
DESCRIPTION2: <FormattedMessage
id={ 'methodology.page.downloadPacket.info.text2'}
defaultMessage= {`Download the shapefiles, along with a codebook (.cpg, .dbf, .prj, .shp and .shx, {shapefileSize} unzipped).`}
description= {'Navigate to the methodology page. This is the shapefile info text'}
values= {{
shapefileSize: <FormattedNumber shapefileSize: <FormattedNumber
value={DOWNLOAD_SHAPE_FILE_SIZE} value={DOWNLOAD_SHAPE_FILE_SIZE}
style="unit" style="unit"
@ -141,13 +134,16 @@ export const DOWNLOAD_PACKAGE = {
/>, />,
BUTTON_TEXT2: <FormattedMessage BUTTON_TEXT2: <FormattedMessage
id={ 'methodology.page.downloadPacket.button2.text'} id={ 'methodology.page.downloadPacket.button2.text'}
defaultMessage= {'Download shapefiles'} defaultMessage= {'Download shapefile'}
description= {'Navigate to the methodology page. This is the download shapefiles text'} description= {'Navigate to the methodology page. This is the download shapefiles text'}
/>, />,
NEW_TAG: <FormattedMessage NEW_TAG: <FormattedMessage
id={ 'methodology.page.downloadPacket.new.tag.text'} id={ 'methodology.page.downloadPacket.new.tag.text'}
defaultMessage= {'NEW'} defaultMessage= {`<boldtag>NEW</boldtag>`}
description= {'Navigate to the methodology page. This is the new tag text'} description= {'Navigate to the methodology page. This is the new tag text'}
values={{
boldtag: boldFn,
}}
/>, />,
}; };

12
client/src/intl/en.json
View file

@ -84,7 +84,7 @@
"description": "Navigate to the About page. This is the fourth heading" "description": "Navigate to the About page. This is the fourth heading"
}, },
"about.page.sub.header.3.text.1": { "about.page.sub.header.3.text.1": {
"defaultMessage": "Please navigate to to our <link1>frequently asked questions</link1> to find the answers you are looking for.", "defaultMessage": "Find answers on the Climate and Economic Justice Screening Tool's <link1>Frequently Asked Questions</link1>.",
"description": "Navigate to the About page. This is the second heading description" "description": "Navigate to the About page. This is the second heading description"
}, },
"about.page.title.text": { "about.page.title.text": {
@ -1187,7 +1187,7 @@
"description": "Navigate to the methodology page. This is the download packet button text" "description": "Navigate to the methodology page. This is the download packet button text"
}, },
"methodology.page.downloadPacket.button2.text": { "methodology.page.downloadPacket.button2.text": {
"defaultMessage": "Download shapefiles", "defaultMessage": "Download shapefile",
"description": "Navigate to the methodology page. This is the download shapefiles text" "description": "Navigate to the methodology page. This is the download shapefiles text"
}, },
"methodology.page.downloadPacket.header.text": { "methodology.page.downloadPacket.header.text": {
@ -1199,15 +1199,11 @@
"description": "Navigate to the methodology page. This is the download packet info last updated" "description": "Navigate to the methodology page. This is the download packet info last updated"
}, },
"methodology.page.downloadPacket.info.text1": { "methodology.page.downloadPacket.info.text1": {
"defaultMessage": "Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped).", "defaultMessage": "Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped) or the shapefile, along with a codebook (.zip, {shapefileSize} unzipped).",
"description": "Navigate to the methodology page. This is the download packet info text" "description": "Navigate to the methodology page. This is the download packet info text"
}, },
"methodology.page.downloadPacket.info.text2": {
"defaultMessage": "Download the shapefiles, along with a codebook (.cpg, .dbf, .prj, .shp and .shx, {shapefileSize} unzipped).",
"description": "Navigate to the methodology page. This is the shapefile info text"
},
"methodology.page.downloadPacket.new.tag.text": { "methodology.page.downloadPacket.new.tag.text": {
"defaultMessage": "NEW", "defaultMessage": "<boldtag>NEW</boldtag>",
"description": "Navigate to the methodology page. This is the new tag text" "description": "Navigate to the methodology page. This is the new tag text"
}, },
"methodology.page.formula.first": { "methodology.page.formula.first": {

6
client/src/pages/tests/__snapshots__/about.test.tsx.snap
View file

@ -512,7 +512,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
Still have questions? Still have questions?
</h2> </h2>
<p> <p>
Please navigate to to our Find answers on the Climate and Economic Justice Screening Tool's
<a <a
class="usa-link usa-link--external" class="usa-link usa-link--external"
data-cy="" data-cy=""
@ -520,9 +520,9 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
> >
frequently asked questions Frequently Asked Questions
</a> </a>
to find the answers you are looking for. .
</p> </p>
</div> </div>

21
client/src/pages/tests/__snapshots__/methodology.test.tsx.snap
View file

@ -417,10 +417,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
Files available for download Files available for download
</div> </div>
<div> <div>
Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped). Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped) or the shapefile, along with a codebook (.zip, 742MB unzipped).
<span>
Last updated: 04/06/22
</span>
</div> </div>
<div> <div>
<a <a
@ -445,19 +442,20 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</button> </button>
</a> </a>
</div> </div>
<div>
Last updated: 04/06/22
</div>
<div>
<div> <div>
<span <span
class="usa-tag" class="usa-tag"
data-testid="tag" data-testid="tag"
> >
<strong>
NEW NEW
</span> </strong>
Download the shapefiles, along with a codebook (.cpg, .dbf, .prj, .shp and .shx, 740MB unzipped).
<span>
Last updated: 04/06/22
</span> </span>
</div> </div>
<div>
<a <a
data-cy="shapefile-link" data-cy="shapefile-link"
download="" download=""
@ -475,11 +473,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
/> />
</div> </div>
<div> <div>
Download shapefiles Download shapefile
</div> </div>
</button> </button>
</a> </a>
</div> </div>
<div>
Last updated: 04/06/22
</div>
</div> </div>
</div> </div>
</div> </div>