publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-24 02:24:20 -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

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

@ -22,10 +22,6 @@ const DownloadPacket = () => {
{/* 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 */}
@ -41,19 +37,16 @@ const DownloadPacket = () => {
</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 className={styles.lastUpdated}>
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
</div>
{/* Download box button 2 */}
<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}>
<Button className={styles.downloadBoxButton} type="button">
<div>
@ -65,6 +58,10 @@ const DownloadPacket = () => {
</Button>
</a>
</div>
<div className={styles.lastUpdated}>
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
</div>
</div>
</div>

31
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
</div>
<div>
Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped).
<span>
Last updated: 04/06/22
</span>
Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped) or the shapefile, along with a codebook (.zip, 742MB unzipped).
</div>
<div>
<a
@ -42,18 +39,19 @@ exports[`download packet component defined checks if component renders 1`] = `
</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>
Last updated: 04/06/22
</div>
<div>
<div>
<span
class="usa-tag"
data-testid="tag"
>
<strong>
NEW
</strong>
</span>
</div>
<a
data-cy="shapefile-link"
download=""
@ -71,11 +69,14 @@ exports[`download packet component defined checks if component renders 1`] = `
/>
</div>
<div>
Download shapefiles
Download shapefile
</div>
</button>
</a>
</div>
<div>
Last updated: 04/06/22
</div>
</div>
</div>
</div>

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

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

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

@ -77,7 +77,7 @@ export const HEADING_3 = {
DESCRIPTION_1:
<FormattedMessage
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'}
values={{

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

@ -73,7 +73,7 @@ export const FORMULA = {
// Download Package
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 VERSION_NUMBER = 0.1;
@ -97,7 +97,7 @@ export const DOWNLOAD_PACKAGE = {
/>,
DESCRIPTION1: <FormattedMessage
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'}
values= {{
downloadFileSize: <FormattedNumber
@ -106,13 +106,6 @@ export const DOWNLOAD_PACKAGE = {
unit="megabyte"
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
value={DOWNLOAD_SHAPE_FILE_SIZE}
style="unit"
@ -141,13 +134,16 @@ export const DOWNLOAD_PACKAGE = {
/>,
BUTTON_TEXT2: <FormattedMessage
id={ 'methodology.page.downloadPacket.button2.text'}
defaultMessage= {'Download shapefiles'}
defaultMessage= {'Download shapefile'}
description= {'Navigate to the methodology page. This is the download shapefiles text'}
/>,
NEW_TAG: <FormattedMessage
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'}
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"
},
"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"
},
"about.page.title.text": {
@ -1187,7 +1187,7 @@
"description": "Navigate to the methodology page. This is the download packet button text"
},
"methodology.page.downloadPacket.button2.text": {
"defaultMessage": "Download shapefiles",
"defaultMessage": "Download shapefile",
"description": "Navigate to the methodology page. This is the download shapefiles text"
},
"methodology.page.downloadPacket.header.text": {
@ -1199,15 +1199,11 @@
"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).",
"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"
},
"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": {
"defaultMessage": "NEW",
"defaultMessage": "<boldtag>NEW</boldtag>",
"description": "Navigate to the methodology page. This is the new tag text"
},
"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?
</h2>
<p>
Please navigate to to our
Find answers on the Climate and Economic Justice Screening Tool's
<a
class="usa-link usa-link--external"
data-cy=""
@ -520,9 +520,9 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
rel="noreferrer"
target="_blank"
>
frequently asked questions
Frequently Asked Questions
</a>
to find the answers you are looking for.
.
</p>
</div>

31
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
</div>
<div>
Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped).
<span>
Last updated: 04/06/22
</span>
Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped) or the shapefile, along with a codebook (.zip, 742MB unzipped).
</div>
<div>
<a
@ -446,18 +443,19 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</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>
Last updated: 04/06/22
</div>
<div>
<div>
<span
class="usa-tag"
data-testid="tag"
>
<strong>
NEW
</strong>
</span>
</div>
<a
data-cy="shapefile-link"
download=""
@ -475,11 +473,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
/>
</div>
<div>
Download shapefiles
Download shapefile
</div>
</button>
</a>
</div>
<div>
Last updated: 04/06/22
</div>
</div>
</div>
</div>