Implement downloads page and May 25th timed copy changes (#1653)

* Add initial side nav

* Add Download page as a sub-page under Meth&Data

- udpate S3 file path in .envs
- remove the DownloadPacket component
- move download copy from methodology to download
- modify header to use two types of navs:
--  mobile (with sub-pages) and
-- desktop (without subpages)
- create a SubPageNav component
- add SubPagNav to Meth and Download page
- update snapshots
- add global CSS overide to remove minus sign on mobile nav link accordion as it's permanently open

* Remove the update tag above Public eng button

* Make the 3rd bullet on explore page update on 5/25

* Make the RFI box text change after 5/25/22

* Update site with RFI expired copy, remove Alerts

- add Spanish translations
- update snapshots

* Fix typo on XLS file path

* Refactor HowYouCanHelp to standard form

* Add custom download links with icons

- add new DownloadLink compnent
- add Spanish translations

* Update download file sizes

* Allow meth&data nav link to collapse on mobile
This commit is contained in:
Vim 2022-05-26 00:01:04 -04:00 committed by GitHub
commit 226017654a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
46 changed files with 966 additions and 1720 deletions

View file

@ -4,6 +4,7 @@ import React from 'react';
import {FormattedDate, FormattedMessage} from 'gatsby-plugin-intl';
import {defineMessages} from 'react-intl';
import LinkTypeWrapper from '../../components/LinkTypeWrapper';
import DownloadLink from '../../components/DownloadLink';
export interface IDefineMessage {
id: string,
@ -20,6 +21,8 @@ export interface IDefineMessage {
export const italicFn = (str:string) => <i>{str}</i>;
export const boldFn = (str:string) => <strong>{str}</strong>;
export const simpleLink = (href:string) => (str:string) => <a href={href}>{str}</a>;
// export const downloadLink = (href:string) => (str:string) => <a href={href} download>{str}</a>;
export const downloadLink = (href:string) => (str:string) => <DownloadLink href={href} linkText={str} />;
// eslint-disable-next-line max-len
export const linkFn = (to:string | IDefineMessage, isInternal:boolean, isOpenNewTab:boolean) => (str:string) => <LinkTypeWrapper linkText={str} internal={isInternal} url={to} openUrlNewTab={isOpenNewTab}/>;
@ -51,7 +54,7 @@ export const TSD = defineMessages({
// Alerts
// Expiration month is zero-based: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth
const ALERT_1_EXPIRATION_DATE= new Date(2022, 4, 25, 11, 59, 59); // May 25
export const RFI_EXPIRATION_DATE= new Date(2022, 4, 25, 11, 59, 59); // May 25
export const ALERTS = {
ALERT_1_TITLE: defineMessages({
TITLE: {
@ -60,7 +63,7 @@ export const ALERTS = {
description: 'Alert title that appears on landing page.',
},
}),
EXPIRATION_DATE: ALERT_1_EXPIRATION_DATE,
EXPIRATION_DATE: RFI_EXPIRATION_DATE,
ALERT_1_DESCRIPTION: <FormattedMessage
id={'common.pages.alerts.public_comment_period.description'}
defaultMessage={`The public comment period for <link1>sending feedback</link1> via the Request for Information has been extended to {expDate1}.`}
@ -68,7 +71,7 @@ export const ALERTS = {
values={{
link1: linkFn('https://www.federalregister.gov/documents/2022/04/25/2022-08774/climate-and-economic-justice-screening-tool-beta-version', false, true),
expDate1: <FormattedDate
value={ALERT_1_EXPIRATION_DATE}
value={RFI_EXPIRATION_DATE}
year="numeric"
month="short"
day="numeric"

View file

@ -1,10 +1,9 @@
/* eslint-disable max-len */
import React from 'react';
import {defineMessages} from 'react-intl';
import {FormattedMessage} from 'gatsby-plugin-intl';
import {FormattedDate, FormattedMessage} from 'gatsby-plugin-intl';
import * as COMMON_COPY from './common';
import {PAGES_ENDPOINTS} from '../constants';
import {FOOTER} from './common';
export const PAGE_INTRO = defineMessages({
PAGE_TILE: {
@ -49,10 +48,15 @@ export const RFI_BOX = defineMessages({
export const RFI_BOX_BODY = <FormattedMessage
id={'contact.page.request.for.info.box.body'}
defaultMessage={`During the beta period, comments may be submitted on the Climate and Economic Justice Screening Tool via CEQs Request for Information available on <link1>federalregister.gov</link1>.`}
defaultMessage={`The Request for Information on the Federal Register for the public beta period closed on {rfiExpDate}`}
description={'Navigate to the contact page, this is the body of the request for information box'}
values={{
link1: COMMON_COPY.linkFn(FOOTER.RFI_LINK.defaultMessage, false, true),
rfiExpDate: <FormattedDate
value={COMMON_COPY.RFI_EXPIRATION_DATE}
year="numeric"
month="long"
day="numeric"
/>,
}}
/>;

View file

@ -2,7 +2,7 @@
import React from 'react';
import {defineMessages} from 'react-intl';
import {FormattedMessage, FormattedNumber} from 'gatsby-plugin-intl';
import {simpleLink} from './common';
import * as COMMON_COPY from './common';
export const PAGE_INTRO = defineMessages({
PAGE_TILE: {
@ -27,53 +27,129 @@ export const PAGE_INTRO = defineMessages({
},
});
export const DOWNLOAD_LINKS = {
EXCEL: <FormattedMessage
id={'downloads.page.excel.link'}
defaultMessage={`
<link1>Excel file</link1> (.xlxs {excelFileSize} unzipped)
`}
description={'On the downloads page, the description of the excel link'}
values={{
link1: (str:string) => <a href='/about'>{str}</a>,
excelFileSize: <FormattedNumber
value={54}
style="unit"
unit="megabyte"
unitDisplay="narrow"
/>,
}}
/>,
CSV: <FormattedMessage
id={'downloads.page.csv.link'}
defaultMessage={`
<link1>CSV file </link1> (.csv {csvFileSize} unzipped)
`}
description={'On the downloads page, the description of the csv link'}
values={{
link1: simpleLink('/csv'),
csvFileSize: <FormattedNumber
value={52}
style="unit"
unit="megabyte"
unitDisplay="narrow"
/>,
}}
/>,
SHAPE: <FormattedMessage
id={'downloads.page.shape.link'}
defaultMessage={`
<link1>Shapefiles </link1> (Codebook included with geojson {shapeFileSize} unzipped)
`}
description={'On the downloads page, the description of the shapefiles link'}
values={{
link1: simpleLink('/shape'),
shapeFileSize: <FormattedNumber
value={110}
style="unit"
unit="megabyte"
unitDisplay="narrow"
/>,
}}
/>,
const getDownloadFileUrl = (filePath:string | undefined) => {
return [
process.env.GATSBY_CDN_TILES_BASE_URL,
process.env.GATSBY_DATA_PIPELINE_SCORE_PATH,
filePath,
].join('/');
};
// Define meta data on dowload files
export const DOWNLOAD_FILES = {
SCREENING_TOOL_DATA_ZIP: {
SIZE: 53.7, // MB
URL: getDownloadFileUrl(process.env.GATSBY_FILE_DL_PATH_SCREENING_TOOL_DATA_ZIP),
LAST_UPDATED: new Date('5/4/2022').getTime(),
},
COMMUNITIES_LIST_CSV: {
SIZE: 28.1, // MB
URL: getDownloadFileUrl(process.env.GATSBY_FILE_DL_PATH_COMMUNITIES_LIST_CSV),
LAST_UPDATED: new Date('5/4/2022').getTime(),
},
COMMUNITIES_LIST_XLS: {
SIZE: 24.9, // MB
URL: getDownloadFileUrl(process.env.GATSBY_FILE_DL_PATH_COMMUNITIES_LIST_XLS),
LAST_UPDATED: new Date('5/4/2022').getTime(),
},
SHAPE_FILE: {
SIZE: 741, // MB
URL: getDownloadFileUrl(process.env.GATSBY_FILE_DL_PATH_SHAPE_FILE_ZIP),
LAST_UPDATED: new Date('5/4/2022').getTime(),
},
TSD: {
SIZE: 2.5, // MB
URL: getDownloadFileUrl(process.env.GATSBY_FILE_DL_PATH_TSD_PDF),
LAST_UPDATED: new Date('5/4/2022').getTime(),
},
HOW_TO_COMMUNITIES: {
SIZE: 674, // KB
URL: getDownloadFileUrl(process.env.GATSBY_FILE_DL_PATH_HOW_TO_COMMUNITIES_PDF),
LAST_UPDATED: new Date('5/4/2022').getTime(),
},
};
// If this is not a function, it will cause a circular dependency
export const getDownloadIconAltTag = () => defineMessages({
ALT_TAG: {
id: 'downloads.page.download.icon.alt.tag',
defaultMessage: 'The icon used to indicate that the file is downloadable',
description: 'Navigate to the Downloads page, this is the icon used to indicate that the file is downloadable',
},
});
export const DOWNLOAD_LINKS = {
LINK1: <FormattedMessage
id={'download.page.download.file.1'}
defaultMessage={`
<link1>Communities list data</link1> (.xlsx {cldXlsFileSize})
`}
description={'Navigate to the download page. This is first download file link'}
values={{
link1: COMMON_COPY.downloadLink(DOWNLOAD_FILES.COMMUNITIES_LIST_XLS.URL),
cldXlsFileSize: <FormattedNumber
value={DOWNLOAD_FILES.COMMUNITIES_LIST_XLS.SIZE}
style="unit"
unit="megabyte"
unitDisplay="narrow"
/>,
}}
/>,
LINK2: <FormattedMessage
id={'download.page.download.file.2'}
defaultMessage={`<link2>Communities list data</link2> (.csv {cldCsvFileSize})`}
description={'Navigate to the download page. This is second download file link'}
values={{
link2: COMMON_COPY.downloadLink(DOWNLOAD_FILES.COMMUNITIES_LIST_CSV.URL),
cldCsvFileSize: <FormattedNumber
value={DOWNLOAD_FILES.COMMUNITIES_LIST_CSV.SIZE}
style="unit"
unit="megabyte"
unitDisplay="narrow"
/>,
}}
/>,
LINK3: <FormattedMessage
id={'download.page.download.file.3'}
defaultMessage={`<link3>Shapefile</link3> (Codebook included with geojson {shapeFileSize} unzipped)`}
description={'Navigate to the download page. This is third download file link'}
values={{
link3: COMMON_COPY.downloadLink(DOWNLOAD_FILES.SHAPE_FILE.URL),
shapeFileSize: <FormattedNumber
value={DOWNLOAD_FILES.SHAPE_FILE.SIZE}
style="unit"
unit="megabyte"
unitDisplay="narrow"
/>,
}}
/>,
LINK4: <FormattedMessage
id={'download.page.download.file.4'}
defaultMessage={`<link4>Technical support document</link4> (.pdf {tsdFileSize})`}
description={'Navigate to the download page. This is fourth download file link'}
values={{
link4: COMMON_COPY.linkFn(DOWNLOAD_FILES.TSD.URL, false, true),
tsdFileSize: <FormattedNumber
value={DOWNLOAD_FILES.TSD.SIZE}
style="unit"
unit="megabyte"
unitDisplay="narrow"
/>,
}}
/>,
LINK5: <FormattedMessage
id={'download.page.download.file.5'}
defaultMessage={`<link5>How to use the list of communities</link5> (.pdf {howToCommFileSize})`}
description={'Navigate to the download page. This is fifth download file link'}
values={{
link5: COMMON_COPY.linkFn(DOWNLOAD_FILES.HOW_TO_COMMUNITIES.URL, false, true),
howToCommFileSize: <FormattedNumber
value={DOWNLOAD_FILES.HOW_TO_COMMUNITIES.SIZE}
style="unit"
unit="kilobyte"
unitDisplay="narrow"
/>,
}}
/>,
// };
};

View file

@ -5,8 +5,8 @@ import {defineMessages} from 'react-intl';
import {FormattedDate, FormattedMessage, FormattedNumber} from 'gatsby-plugin-intl';
import * as COMMON_COPY from './common';
import * as DOWNLOADS_COPY from './downloads';
import * as METHODOLOGY_COPY from './methodology';
import {simpleLink, linkFn} from './common';
import {PAGES_ENDPOINTS} from '../constants';
export const PAGE_INTRO = defineMessages({
@ -32,7 +32,7 @@ export const PAGE_DESCRIPTION = <FormattedMessage
`}
description={'On the explore the map page, the description of the page'}
values={{
link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
}}
/>;
@ -777,15 +777,15 @@ export const DOWNLOAD_DRAFT = {
map that will download the data packet
`}
values={{
link1: simpleLink(METHODOLOGY_COPY.DOWNLOAD_ZIP_URL),
link1: COMMON_COPY.downloadLink(DOWNLOADS_COPY.DOWNLOAD_FILES.SHAPE_FILE.URL),
downloadFileSize: <FormattedNumber
value={METHODOLOGY_COPY.DOWNLOAD_FILE_SIZE}
value={DOWNLOADS_COPY.DOWNLOAD_FILES.SHAPE_FILE.SIZE}
style="unit"
unit="megabyte"
unitDisplay="narrow"
/>,
dateUpdated: <FormattedDate
value={METHODOLOGY_COPY.DOWNLOAD_ZIP_LAST_UPDATED}
value={DOWNLOADS_COPY.DOWNLOAD_FILES.SHAPE_FILE.LAST_UPDATED}
year="2-digit"
month="2-digit"
day="2-digit"
@ -809,7 +809,7 @@ export const NOTE_ON_TERRITORIES = {
`}
description={`Navigate to the explore the map page. Under the map, you will see territories paragraph 1`}
values={{
link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
}}
/>,
PARA_2: <FormattedMessage
@ -863,10 +863,10 @@ export const NOTE_ON_TRIBAL_NATIONS = {
`}
description={`Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1`}
values={{
link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
link2: linkFn(`https://www.whitehouse.gov/wp-content/uploads/2022/01/CEQ-Tribal-Consultation-Plan-04.26.2021.pdf`, false, true),
link3: linkFn(`https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/26/memorandum-on-tribal-consultation-and-strengthening-nation-to-nation-relationships/`, false, true),
link4: linkFn(`https://www.federalregister.gov/documents/2000/11/09/00-29003/consultation-and-coordination-with-indian-tribal-governments`, false, true),
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
link2: COMMON_COPY.linkFn(`https://www.whitehouse.gov/wp-content/uploads/2022/01/CEQ-Tribal-Consultation-Plan-04.26.2021.pdf`, false, true),
link3: COMMON_COPY.linkFn(`https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/26/memorandum-on-tribal-consultation-and-strengthening-nation-to-nation-relationships/`, false, true),
link4: COMMON_COPY.linkFn(`https://www.federalregister.gov/documents/2000/11/09/00-29003/consultation-and-coordination-with-indian-tribal-governments`, false, true),
}}
/>,
};
@ -884,7 +884,7 @@ export const HOW_YOU_CAN_HELP_LIST_ITEMS = {
`}
defaultMessage={`View the <link1>Methodology & data</link1> page and send feedback.`}
values={{
link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
}}
/>,
LIST_ITEM_2: <FormattedMessage
@ -892,16 +892,13 @@ export const HOW_YOU_CAN_HELP_LIST_ITEMS = {
description={`Navigate to the explore the map page. Under the map, you will see share your feedback`}
defaultMessage={`Use the map to find communities and <link1>share your feedback</link1>.`}
values={{
link1: linkFn(`mailto:${COMMON_COPY.FEEDBACK_EMAIL}`, false, true),
link1: COMMON_COPY.linkFn(`mailto:${COMMON_COPY.FEEDBACK_EMAIL}`, false, true),
}}
/>,
LIST_ITEM_3: <FormattedMessage
id={'explore.map.page.under.map.how.you.can.help.list.item.3'}
description={`Navigate to the explore the map page. Under the map, you will see share your feedback`}
defaultMessage={`Respond to our Request for Information on <link1>federalregister.gov</link1>.`}
values={{
link1: linkFn(`https://www.federalregister.gov/d/2022-03920`, false, true),
}}
description={`Navigate to the explore the map page. Under the map, you will see RFI is expired`}
defaultMessage={`The Request for Information on the Federal Register is now closed.`}
/>,
};

View file

@ -1,9 +1,10 @@
/* eslint-disable max-len */
import React from 'react';
import {defineMessages} from 'react-intl';
import {FormattedDate, FormattedMessage, FormattedNumber} from 'gatsby-plugin-intl';
import {FormattedMessage} from 'gatsby-plugin-intl';
import {boldFn, linkFn, simpleLink} from './common';
import * as styles from '../../components/DownloadPacket/downloadPacket.module.scss';
export const VERSION_NUMBER = 0.1;
export const PAGE = defineMessages({
TILE: {
@ -40,7 +41,6 @@ export const PAGE = defineMessages({
});
export const FORMULA = {
INTRO: <FormattedMessage
id={'methodology.page.formula.intro'}
@ -72,143 +72,6 @@ export const FORMULA = {
/>,
};
// Download Package
export const DOWNLOAD_FILE_SIZE = 53;
export const DOWNLOAD_SHAPE_FILE_SIZE = 742;
export const DOWNLOAD_TSD_FILE_SIZE = 2.5;
export const DOWNLOAD_ZIP_LAST_UPDATED = new Date('5/4/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;
export const DOWNLOAD_ZIP_URL = [
process.env.GATSBY_CDN_TILES_BASE_URL,
process.env.GATSBY_DATA_PIPELINE_SCORE_PATH,
process.env.GATSBY_SCORE_DOWNLOAD_FILE_PATH,
].join('/');
export const DOWNLOAD_SHAPEFILE_URL = [
process.env.GATSBY_CDN_TILES_BASE_URL,
process.env.GATSBY_DATA_PIPELINE_SCORE_PATH,
process.env.GATSBY_SHAPE_FILE_PATH,
].join('/');
// TSD = Tech Support Document
export const DOWNLOAD_TSD_URL = [
process.env.GATSBY_CDN_TILES_BASE_URL,
process.env.GATSBY_DATA_PIPELINE_SCORE_PATH,
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={`<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, .xlxs, <callout>.pdf</callout> that describes how to use the list, and a <callout>codebook</callout>, {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"
unit="megabyte"
unitDisplay="narrow"
/>,
shapefileSize: <FormattedNumber
value={DOWNLOAD_SHAPE_FILE_SIZE}
style="unit"
unit="megabyte"
unitDisplay="narrow"
/>,
tsdFileSize: <FormattedNumber
value={DOWNLOAD_TSD_FILE_SIZE}
style="unit"
unit="megabyte"
unitDisplay="narrow"
/>,
}}
/>,
ZIP_LAST_UPDATED: <FormattedMessage
id={'methodology.page.downloadPacket.info.zip.last.updated'}
defaultMessage={`Last updated: {downloadLastUpdated} `}
description={'Navigate to the methodology page. This is the download packet info last updated'}
values={{
downloadLastUpdated: <FormattedDate
value={DOWNLOAD_ZIP_LAST_UPDATED}
year="2-digit"
month="2-digit"
day="2-digit"
/>,
}}
/>,
SHAPE_LAST_UPDATED: <FormattedMessage
id={'methodology.page.downloadPacket.info.shape.last.updated'}
defaultMessage={`Last updated: {shapeLastUpdated} `}
description={'Navigate to the methodology page. This is the download packet info last updated'}
values={{
shapeLastUpdated: <FormattedDate
value={DOWNLOAD_SHAPE_LAST_UPDATED}
year="2-digit"
month="2-digit"
day="2-digit"
/>,
}}
/>,
TSD_LAST_UPDATED: <FormattedMessage
id={'methodology.page.downloadPacket.info.tsd.last.updated'}
defaultMessage={`Last updated: {tsdLastUpdated} `}
description={'Navigate to the methodology page. This is the download packet info last updated'}
values={{
tsdLastUpdated: <FormattedDate
value={DOWNLOAD_TSD_LAST_UPDATED}
year="2-digit"
month="2-digit"
day="2-digit"
/>,
}}
/>,
BUTTON_TEXT1: <FormattedMessage
id={'methodology.page.downloadPacket.button1.text'}
defaultMessage={'Download data sources'}
description={'Navigate to the methodology page. This is the download packet button text'}
/>,
BUTTON_TEXT2: <FormattedMessage
id={'methodology.page.downloadPacket.button2.text'}
defaultMessage={'Download shapefile'}
description={'Navigate to the methodology page. This is the download shapefiles text'}
/>,
BUTTON_TEXT3: <FormattedMessage
id={'methodology.page.downloadPacket.button3.text'}
defaultMessage={'Download technical support document'}
description={'Navigate to the methodology page. This is the download technical support document spreadsheet'}
/>,
NEW_TAG: <FormattedMessage
id={'methodology.page.downloadPacket.new.tag.text'}
defaultMessage={`<boldtag>NEW</boldtag>`}
description={'Navigate to the methodology page. This is the new tag text'}
values={{
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 = {
HEADING: <FormattedMessage
id={'methodology.page.indicator.categories.heading'}