From d1511287b84e7eb1e9c7144b46ee84ebfeb50ff9 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Thu, 14 Oct 2021 13:49:16 -0700 Subject: [PATCH] Updates intl file with latest copy (#795) * Extract 404 page copy to intl * Move all copy to data copy folder and add tests - Add test:intl-extraction script - Fix certain defaultMessages not appearing - update snapshot --- client/package.json | 3 +- .../src/components/DownloadPacket/index.tsx | 15 ++--- .../src/components/territoryFocusControl.tsx | 66 +++---------------- client/src/data/copy/404.tsx | 34 ++++++++++ client/src/data/copy/explore.tsx | 60 ++++++++++++++++- client/src/data/copy/methodology.tsx | 57 +++++++++------- client/src/intl/en.json | 16 +++++ client/src/intl/testIntlExtraction.js | 29 ++++++++ client/src/pages/404.tsx | 46 ++----------- .../__snapshots__/methodology.test.tsx.snap | 3 +- client/src/pages/cejst.tsx | 10 +-- 11 files changed, 199 insertions(+), 140 deletions(-) create mode 100644 client/src/data/copy/404.tsx create mode 100644 client/src/intl/testIntlExtraction.js diff --git a/client/package.json b/client/package.json index 72df1c79..b8587e08 100644 --- a/client/package.json +++ b/client/package.json @@ -25,7 +25,8 @@ "lint": "eslint './src/**/*.{ts,tsx}' --ignore-pattern node_modules/ --ignore-pattern public --ignore-pattern *scss.d.ts", "lint:fix": "npm run lint -- --quiet --fix", "intl:extract": "formatjs extract 'src/**/*.tsx' --out-file src/intl/en.json", - "intl:compile-en": "formatjs compile src/intl/en.json --ast --out-file compiled-lang/en.json" + "intl:compile-en": "formatjs compile src/intl/en.json --ast --out-file compiled-lang/en.json", + "test:intl-extraction": "node src/intl/testIntlExtraction" }, "devDependencies": { "@formatjs/cli": "^4.2.15", diff --git a/client/src/components/DownloadPacket/index.tsx b/client/src/components/DownloadPacket/index.tsx index 369fdc6c..8ca03a0e 100644 --- a/client/src/components/DownloadPacket/index.tsx +++ b/client/src/components/DownloadPacket/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import {Button, Grid} from '@trussworks/react-uswds'; -import {useIntl} from 'gatsby-plugin-intl'; import * as styles from './downloadPacket.module.scss'; import * as METHODOLOGY_COPY from '../../data/copy/methodology'; @@ -9,29 +8,29 @@ import * as METHODOLOGY_COPY from '../../data/copy/methodology'; import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg'; const DownloadPacket = () => { - const intl = useIntl(); - return (
- {intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE)} + {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE}
- {intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION)} + {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION} {' '} - {intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED)} + {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
diff --git a/client/src/components/territoryFocusControl.tsx b/client/src/components/territoryFocusControl.tsx index 8a5e7ea8..393462a3 100644 --- a/client/src/components/territoryFocusControl.tsx +++ b/client/src/components/territoryFocusControl.tsx @@ -1,7 +1,9 @@ import {useIntl} from 'gatsby-plugin-intl'; import React, {MouseEventHandler} from 'react'; import {_useMapControl as useMapControl} from 'react-map-gl'; + import * as styles from './territoryFocusControl.module.scss'; +import * as EXPLORE_COPY from '../data/copy/explore'; interface ITerritoryFocusControl { onClickTerritoryFocusButton: MouseEventHandler; @@ -17,68 +19,20 @@ const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusCon const territories = [ { - short: intl.formatMessage( - { - id: 'map.territoryFocus.lower48.short', - defaultMessage: '48', - description: 'The abbreviated name indicating the bounds of the Lower 48 states', - }, - ), - long: intl.formatMessage( - { - id: 'map.territoryFocus.lower48.long', - defaultMessage: 'Lower 48', - description: 'The longer name indicating the bounds of the Lower 48 states', - }, - ), + short: intl.formatMessage(EXPLORE_COPY.MAP.LOWER48_SHORT), + long: intl.formatMessage(EXPLORE_COPY.MAP.LOWER48_LONG), }, { - short: intl.formatMessage( - { - id: 'map.territoryFocus.alaska.short', - defaultMessage: 'AK', - description: 'The abbreviated indicating the bounds of Alaska', - }, - ), - long: intl.formatMessage( - { - id: 'map.territoryFocus.alaska.long', - defaultMessage: 'Alaska', - description: 'The full name indicating the bounds of Alaska', - }, - ), + short: intl.formatMessage(EXPLORE_COPY.MAP.ALASKA_SHORT), + long: intl.formatMessage(EXPLORE_COPY.MAP.ALASKA_LONG), }, { - short: intl.formatMessage( - { - id: 'map.territoryFocus.hawaii.short', - defaultMessage: 'HI', - description: 'The abbreviated name indicating the bounds of Hawaii', - }, - ), - long: intl.formatMessage( - { - id: 'map.territoryFocus.hawaii.long', - defaultMessage: 'Hawaii', - description: 'The longer name indicating the bounds of Hawaii', - }, - ), + short: intl.formatMessage(EXPLORE_COPY.MAP.HAWAII_SHORT), + long: intl.formatMessage(EXPLORE_COPY.MAP.HAWAII_LONG), }, { - short: intl.formatMessage( - { - id: 'map.territoryFocus.puerto_rico.short', - defaultMessage: 'PR', - description: 'The abbreviated name indicating the bounds of Puerto Rico', - }, - ), - long: intl.formatMessage( - { - id: 'map.territoryFocus.puerto_rico.long', - defaultMessage: 'Puerto Rico', - description: 'The full name indicating the bounds of Puerto Rico', - }, - ), + short: intl.formatMessage(EXPLORE_COPY.MAP.PR_SHORT), + long: intl.formatMessage(EXPLORE_COPY.MAP.PR_LONG), }, ]; // the offset for this array should map the territories variable diff --git a/client/src/data/copy/404.tsx b/client/src/data/copy/404.tsx new file mode 100644 index 00000000..5d33310f --- /dev/null +++ b/client/src/data/copy/404.tsx @@ -0,0 +1,34 @@ +import {defineMessages} from 'react-intl'; + +export const PAGE = defineMessages({ + TITLE: { + id: 'pageNotFound.title.text', + defaultMessage: 'Page not found', + description: 'page not found title text', + }, + HEADING: { + id: 'pageNotFound.heading.text', + defaultMessage: 'Page not found', + description: 'page not found heading text', + }, + APOLOGY: { + id: 'pageNotFound.apology.text', + defaultMessage: 'Sorry', + description: 'page not found apology text', + }, + APOLOGY_INFO: { + id: 'pageNotFound.apology.description.text', + defaultMessage: 'we couldn’t find what you were looking for.', + description: 'page not found apology description text', + }, + GUIDANCE: { + id: 'pageNotFound.Guidance.text', + defaultMessage: 'Try creating a page in', + description: 'page not found guidance text', + }, + LINK_HOME: { + id: 'pageNotFound.link.to.go.home.text', + defaultMessage: 'Go home', + description: 'page not found link to go home text', + }, +}); diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index 5a1c8d23..17afe24c 100644 --- a/client/src/data/copy/explore.tsx +++ b/client/src/data/copy/explore.tsx @@ -19,6 +19,21 @@ export const PAGE_INTRO = defineMessages({ }, }); +export const PAGE_DESCRIPTION = Data & methodology, + }} +/>; + export const LEGEND = defineMessages({ PRIORITY_LABEL: { id: 'legend.info.priority.label', @@ -41,6 +56,46 @@ export const MAP = defineMessages({ defaultMessage: 'Zoom in to the state or regional level to see prioritized communities on the map.', description: 'zoom warning on map', }, + LOWER48_SHORT: { + id: 'map.territoryFocus.lower48.short', + defaultMessage: '48', + description: 'The abbreviated name indicating the bounds of the Lower 48 states', + }, + LOWER48_LONG: { + id: 'map.territoryFocus.lower48.long', + defaultMessage: 'Lower 48', + description: 'The longer name indicating the bounds of the Lower 48 states', + }, + ALASKA_SHORT: { + id: 'map.territoryFocus.alaska.short', + defaultMessage: 'AK', + description: 'The abbreviated indicating the bounds of Alaska', + }, + ALASKA_LONG: { + id: 'map.territoryFocus.alaska.long', + defaultMessage: 'Alaska', + description: 'The full name indicating the bounds of Alaska', + }, + HAWAII_SHORT: { + id: 'map.territoryFocus.hawaii.short', + defaultMessage: 'HI', + description: 'The abbreviated name indicating the bounds of Hawaii', + }, + HAWAII_LONG: { + id: 'map.territoryFocus.hawaii.long', + defaultMessage: 'Hawaii', + description: 'The longer name indicating the bounds of Hawaii', + }, + PR_SHORT: { + id: 'map.territoryFocus.puerto_rico.short', + defaultMessage: 'PR', + description: 'The abbreviated name indicating the bounds of Puerto Rico', + }, + PR_LONG: { + id: 'map.territoryFocus.puerto_rico.long', + defaultMessage: 'Puerto Rico', + description: 'The full name indicating the bounds of Puerto Rico', + }, }); // Side Panel copy @@ -310,7 +365,10 @@ export const DOWNLOAD_DRAFT = { PARAGRAPH_2: , }; diff --git a/client/src/data/copy/methodology.tsx b/client/src/data/copy/methodology.tsx index 0a3f722a..cab13c63 100644 --- a/client/src/data/copy/methodology.tsx +++ b/client/src/data/copy/methodology.tsx @@ -33,30 +33,39 @@ export const DOWNLOAD_ZIP_URL = [ process.env.GATSBY_SCORE_DOWNLOAD_FILE_PATH, ].join('/'); -export const DOWNLOAD_PACKAGE = defineMessages({ - TITLE: { - id: 'downloadPacket.header.text', - defaultMessage: `Draft communities list v${VERSION_NUMBER} (${DOWNLOAD_FILE_SIZE})`, - description: 'download packet header text', - }, - DESCRIPTION: { - id: 'downloadPacket.info.text', - defaultMessage: `The package includes draft v${VERSION_NUMBER} `+ - ` of the list of communities of focus (.csv and .xlsx) ` + - ` and information about how to use the list (.pdf).`, - description: 'download packet info text', - }, - LAST_UPDATED: { - id: 'downloadPacket.info.last.updated', - defaultMessage: `Last updated: ${DOWNLOAD_LAST_UPDATED} `, - description: 'download packet info last updated', - }, - BUTTON_TEXT: { - id: 'downloadPacket.button.text', - defaultMessage: 'Download package', - description: 'download packet button text', - }, -}); +export const DOWNLOAD_PACKAGE = { + TITLE: , + DESCRIPTION: , + LAST_UPDATED: , + BUTTON_TEXT: , +}; // Dataset section diff --git a/client/src/intl/en.json b/client/src/intl/en.json index cbed96a9..02a6d3e2 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -244,6 +244,7 @@ "description": "Download the draft list of communities of focus and datasets used." }, "download.draft.ptag.2": { + "defaultMessage": "ZIP file will contain one .xlsx, one .csv, and one .pdf ({downloadFileSize}).", "description": "Download the draft list of communities of focus and datasets used." }, "downloadPacket.button.text": { @@ -251,18 +252,25 @@ "description": "download packet button text" }, "downloadPacket.header.text": { + "defaultMessage": "Draft communities list v{versionNumber} ({downloadFileSize})", "description": "download packet header text" }, "downloadPacket.info.last.updated": { + "defaultMessage": "Last updated: {downloadLastUpdated}", "description": "download packet info last updated" }, "downloadPacket.info.text": { + "defaultMessage": "The package includes draft v{versionNumber} of the list of communities of focus (.csv and .xlsx) and information about how to use the list (.pdf).", "description": "download packet info text" }, "exploreTool.heading.text": { "defaultMessage": "Explore the tool", "description": "explore the tool heading text" }, + "exploreTool.page.description": { + "defaultMessage": "Zoom into the map to see communities of focus that can help Federal agencies identify disadvantaged communities and to provide socioeconomic, environmental, and climate information and data. Learn more about the methodology and datasets that were used to determine these communities of focus on the {methodologyLink} page.", + "description": "page description" + }, "exploreTool.title.text": { "defaultMessage": "Explore the tool", "description": "explore the tool title text" @@ -283,6 +291,10 @@ "defaultMessage": "Footer navigation", "description": "aria-label text for whole footer" }, + "footer.contactheader": { + "defaultMessage": "Contact", + "description": "Footer column header" + }, "footer.findcontactlink": { "defaultMessage": "Find a contact at USA.gov", "description": "Footer find contact link text" @@ -343,6 +355,10 @@ "defaultMessage": "How to get started", "description": "sub heading of page" }, + "index.heading.about.us": { + "defaultMessage": "About us", + "description": "main heading for about page" + }, "index.heading.justice40": { "defaultMessage": "The Justice40 Initiative", "description": "heading for about justice 40" diff --git a/client/src/intl/testIntlExtraction.js b/client/src/intl/testIntlExtraction.js new file mode 100644 index 00000000..e1a938bb --- /dev/null +++ b/client/src/intl/testIntlExtraction.js @@ -0,0 +1,29 @@ +const enJson = require('./en.json'); +const assert = require('assert'); + +// This file will allow us to test the en.json file and see if any entries are missing a default message. +// 1. Run intl:extract by npm run intl:extract +// 2. Navigate to client folder and in the command line +// 3. npm run test:intl-extraction +// 4. If there is no errors, then everything looks good! +// 5. If there are errors, set debug to true and re-run. + +// Todo: Have this run anytime any copy changes occur + +const debug = false; +if (debug) console.log('Total number of entries in en.json file: ', Object.entries(enJson).length); + +let defaultCount = 0; +const noDefault = []; +Object.entries(enJson).forEach((msg) => msg[1].defaultMessage ? defaultCount++ : noDefault.push(msg[0])); +if (debug) console.log('Total number of defaultMessages in en.json file: ', defaultCount); + +noDefault.forEach((msg) => console.log('Entries missing defaultMessage: ', msg)); + +let description = 0; +Object.entries(enJson).forEach((msg) => msg[1].description ? description++ : null); +if (debug) console.log('Total number of descriptions in en.json file: ', description); + +// Assertions will fire on errors: +assert(Object.entries(enJson).length === defaultCount); +assert(Object.entries(enJson).length === description); diff --git a/client/src/pages/404.tsx b/client/src/pages/404.tsx index 96efbb90..b710b8ec 100644 --- a/client/src/pages/404.tsx +++ b/client/src/pages/404.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {defineMessages} from 'react-intl'; import {Link} from 'gatsby-plugin-intl'; import {useIntl} from 'gatsby-plugin-intl'; import {Grid} from '@trussworks/react-uswds'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; +import * as PAGE_NOT_FOUND_COPY from '../data/copy/404'; const codeStyles = { color: '#8A6534', @@ -22,62 +22,30 @@ interface I404PageProps { // markup const NotFoundPage =({location}: I404PageProps) => { const intl = useIntl(); - const messages = defineMessages({ - pageNotFoundTitle: { - id: 'pageNotFound.title.text', - defaultMessage: 'Page not found', - description: 'page not found title text', - }, - pageNotFoundHeading: { - id: 'pageNotFound.heading.text', - defaultMessage: 'Page not found', - description: 'page not found heading text', - }, - pageNotFoundApology: { - id: 'pageNotFound.apology.text', - defaultMessage: 'Sorry', - description: 'page not found apology text', - }, - pageNotFoundApologyDescription: { - id: 'pageNotFound.apology.description.text', - defaultMessage: 'we couldn’t find what you were looking for.', - description: 'page not found apology description text', - }, - pageNotFoundGuidance: { - id: 'pageNotFound.Guidance.text', - defaultMessage: 'Try creating a page in', - description: 'page not found guidance text', - }, - pageNotFoundLinkToGoHome: { - id: 'pageNotFound.link.to.go.home.text', - defaultMessage: 'Go home', - description: 'page not found link to go home text', - }, - }); return ( - + -

{intl.formatMessage(messages.pageNotFoundHeading)}

+

{intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.HEADING)}

- {intl.formatMessage(messages.pageNotFoundApology)} + {intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.APOLOGY)} {' '} 😔 {' '} - {intl.formatMessage(messages.pageNotFoundApologyDescription)} + {intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.APOLOGY_INFO)}

{process.env.NODE_ENV === 'development' ? (

- {intl.formatMessage(messages.pageNotFoundGuidance)} + {intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.GUIDANCE)} src/pages/.

) : null} @@ -85,7 +53,7 @@ const NotFoundPage =({location}: I404PageProps) => {

- {intl.formatMessage(messages.pageNotFoundLinkToGoHome)}. + {intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.LINK_HOME)}.

diff --git a/client/src/pages/__snapshots__/methodology.test.tsx.snap b/client/src/pages/__snapshots__/methodology.test.tsx.snap index 4c420351..4fa8c7dc 100644 --- a/client/src/pages/__snapshots__/methodology.test.tsx.snap +++ b/client/src/pages/__snapshots__/methodology.test.tsx.snap @@ -316,7 +316,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis Draft communities list v0.1 (111MB)
- The package includes draft v0.1 of the list of communities of focus (.csv and .xlsx) and information about how to use the list (.pdf). + The package includes draft v0.1 of the list of communities of focus (.csv and .xlsx) and information about how to use the list (.pdf). Last updated: 10/01/21 @@ -336,7 +336,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis alt="download icon for download package" src="test-file-stub" /> -
Download package diff --git a/client/src/pages/cejst.tsx b/client/src/pages/cejst.tsx index f7813163..d9f4308e 100644 --- a/client/src/pages/cejst.tsx +++ b/client/src/pages/cejst.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import {Link} from 'gatsby-plugin-intl'; import {useIntl} from 'gatsby-plugin-intl'; import {Grid} from '@trussworks/react-uswds'; @@ -33,14 +32,7 @@ const CEJSTPage = ({location}: IMapPageProps) => {

- Zoom into the map to see communities of focus that can help Federal agencies - identify disadvantaged communities and to provide socioeconomic, - environmental, and climate information and data. Learn more about the methodology - and datasets that were used to determine these communities of focus on the - {` `} - Data & methodology - {` `} - page. + {EXPLORE_COPY.PAGE_DESCRIPTION}