diff --git a/client/compiled-lang/en.json b/client/compiled-lang/en.json index f9f50bff..6827d07b 100644 --- a/client/compiled-lang/en.json +++ b/client/compiled-lang/en.json @@ -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": "NEW" + } + ], + "type": 8, + "value": "callout" + }, { "type": 0, - "value": "Files available for download" + "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": [ diff --git a/client/src/components/DownloadPacket/DownloadPacket.tsx b/client/src/components/DownloadPacket/DownloadPacket.tsx index d37716ea..ca010367 100644 --- a/client/src/components/DownloadPacket/DownloadPacket.tsx +++ b/client/src/components/DownloadPacket/DownloadPacket.tsx @@ -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 = () =>
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.UPDATED_TAG}
; + + const NewTag = () =>
+ {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}
; + + const DownloadButton: FC = ({children}) => + ; + return (
@@ -20,23 +38,17 @@ const DownloadPacket = () => {
{/* Download box description 1 */} -
+
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION1}
{/* Download box button 1 */} -
+
+ - + {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT1}
@@ -45,21 +57,12 @@ const DownloadPacket = () => { {/* Download box button 2 */} -
-
- {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG} -
+
@@ -67,30 +70,20 @@ const DownloadPacket = () => {
{/* Download box button 3 */} -
-
- {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG} -
+
+ {/* target and rel required since PDFs open in browser and don't download */} - - + {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT3}
{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TSD_LAST_UPDATED}
-
diff --git a/client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap b/client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap index 0228a88b..3265147d 100644 --- a/client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap +++ b/client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap @@ -10,12 +10,33 @@ exports[`download packet component defined checks if component renders 1`] = `
- Files available for download + + NEW + + files available for download
- 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, + + .pdf + + that describes how to use the list, and a codebook, 53MB unzipped), the shapefile, along with a + + codebook + + (.zip, 742MB unzipped) or the technical support document (.pdf, 2.5MB unzipped).
- Last updated: 04/06/22 + Last updated: 04/26/22
@@ -48,7 +69,7 @@ exports[`download packet component defined checks if component renders 1`] = ` data-testid="tag" > - NEW + Updated
@@ -62,20 +83,20 @@ exports[`download packet component defined checks if component renders 1`] = ` data-testid="button" type="button" > -
+ download icon for download package -
-
+ + Download shapefile -
+
- Last updated: 04/06/22 + Last updated: 04/26/22
@@ -89,7 +110,7 @@ exports[`download packet component defined checks if component renders 1`] = `
-
+ download icon for download package -
-
+ + Download technical support document -
+
diff --git a/client/src/components/DownloadPacket/downloadPacket.module.scss b/client/src/components/DownloadPacket/downloadPacket.module.scss index 74770b8d..54df5440 100644 --- a/client/src/components/DownloadPacket/downloadPacket.module.scss +++ b/client/src/components/DownloadPacket/downloadPacket.module.scss @@ -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"); } diff --git a/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts b/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts index da10a178..4246152f 100644 --- a/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts +++ b/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts @@ -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; } } diff --git a/client/src/components/J40Header/J40Header.tsx b/client/src/components/J40Header/J40Header.tsx index 85f66041..064b4faf 100644 --- a/client/src/components/J40Header/J40Header.tsx +++ b/client/src/components/J40Header/J40Header.tsx @@ -233,6 +233,13 @@ const J40Header = () => { {/* Alert */} {isAlertValid && + + {COMMON_COPY.ALERTS.ALERT_2_DESCRIPTION} + + +
+
+

+ Additional documentation now available +

+

+ Download new technical support and other documentation and + + send feedback + + . +

+
+
, }} />, + + 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: send feedback.`} + description={`Alert title that appears at the top of pages.`} + values={{ + link2: linkFn(`mailto:${FEEDBACK_EMAIL}`, false, true), + }} + />, }; // Header diff --git a/client/src/data/copy/methodology.tsx b/client/src/data/copy/methodology.tsx index 1695ac6a..f6259f2f 100644 --- a/client/src/data/copy/methodology.tsx +++ b/client/src/data/copy/methodology.tsx @@ -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) => {str}; + export const DOWNLOAD_PACKAGE = { TITLE: NEW files available for download`} description={'Navigate to the methodology page. This is the download packet header text'} + values= {{ + callout: newCalloutFontColorFn, + }} />, DESCRIPTION1: .pdf that describes how to use the list, and a codebook, {downloadFileSize} unzipped), the shapefile, along with a codebook (.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: , }} @@ -192,6 +199,14 @@ export const DOWNLOAD_PACKAGE = { boldtag: boldFn, }} />, + UPDATED_TAG: Updated`} + description= {'Navigate to the methodology page. This is the update callout tag text that overlaps the button'} + values={{ + boldtag: boldFn, + }} + />, }; export const CATEGORY= { diff --git a/client/src/intl/en.json b/client/src/intl/en.json index fbef6c4b..23068742 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -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 send feedback.", + "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 sending feedback 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": "NEW 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, .pdf that describes how to use the list, and a codebook, {downloadFileSize} unzipped), the shapefile, along with a codebook (.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": "NEW", "description": "Navigate to the methodology page. This is the new tag text" }, + "methodology.page.downloadPacket.updated.tag.text": { + "defaultMessage": "Updated", + "description": "Navigate to the methodology page. This is the update callout tag text that overlaps the button" + }, "methodology.page.formula.first": { "defaultMessage": "IF 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" diff --git a/client/src/pages/tests/__snapshots__/about.test.tsx.snap b/client/src/pages/tests/__snapshots__/about.test.tsx.snap index 296b42b9..8a889f87 100644 --- a/client/src/pages/tests/__snapshots__/about.test.tsx.snap +++ b/client/src/pages/tests/__snapshots__/about.test.tsx.snap @@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis class="grid-container-desktop-lg" data-testid="gridContainer" > +
+
+

+ Additional documentation now available +

+

+ Download new technical support and other documentation and + + send feedback + + . +

+
+
+
+
+

+ Additional documentation now available +

+

+ Download new technical support and other documentation and + + send feedback + + . +

+
+
+
+
+

+ Additional documentation now available +

+

+ Download new technical support and other documentation and + + send feedback + + . +

+
+
+
+
+

+ Additional documentation now available +

+

+ Download new technical support and other documentation and + + send feedback + + . +

+
+
+
+
+

+ Additional documentation now available +

+

+ Download new technical support and other documentation and + + send feedback + + . +

+
+
- Files available for download + + NEW + + files available for download
- 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, + + .pdf + + that describes how to use the list, and a codebook, 53MB unzipped), the shapefile, along with a + + codebook + + (.zip, 742MB unzipped) or the technical support document (.pdf, 2.5MB unzipped).
- Last updated: 04/06/22 + Last updated: 04/26/22
@@ -485,7 +535,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis data-testid="tag" > - NEW + Updated
@@ -499,20 +549,20 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis data-testid="button" type="button" > -
+ download icon for download package -
-
+ + Download shapefile -
+
- Last updated: 04/06/22 + Last updated: 04/26/22
@@ -526,7 +576,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
-
+ download icon for download package -
-
+ + Download technical support document -
+
diff --git a/client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap b/client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap index 14676ae3..d1dd87bb 100644 --- a/client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap +++ b/client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap @@ -305,6 +305,35 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis class="grid-container-desktop-lg" data-testid="gridContainer" > +
+
+

+ Additional documentation now available +

+

+ Download new technical support and other documentation and + + send feedback + + . +

+
+
+
+
+

+ Additional documentation now available +

+

+ Download new technical support and other documentation and + + send feedback + + . +

+
+