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

@@ -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",

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 (
     <Grid>
       <div className={styles.downloadBoxContainer}>
         <div className={styles.downloadBox}>
           <div className={styles.downloadBoxTextBox}>
             <div className={styles.downloadBoxTitle}>
-              {intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE)}
+              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE}
             </div>
             <div className={styles.downloadBoxText}>
-              {intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION)}
+              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION}
               {' '}
               <span>
-                {intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED)}
+                {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
               </span>
             </div>
             <div className={styles.downloadBoxButtonContainer}>
               <a data-cy={'download-link'} href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
                 <Button className={styles.downloadBoxButton} type="button">
-                  <div><img src={downloadIcon} alt={'download icon for download package'}/> </div>
+                  <div>
+                    <img src={downloadIcon} alt={'download icon for download package'}/>
+                  </div>
                   <div className={styles.downloadPacketText}>
-                    {intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT)}
+                    {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT}
                   </div>
                 </Button>
               </a>

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<HTMLButtonElement>;
@@ -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

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',
+  },
+});

client/src/data/copy/explore.tsx

@@ -19,6 +19,21 @@ export const PAGE_INTRO = defineMessages({
   },
 });
 
+export const PAGE_DESCRIPTION = <FormattedMessage
+  id={'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'}
+  values={{
+    methodologyLink: <Link to={'/methodology'}>Data & methodology</Link>,
+  }}
+/>;
+
 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: <FormattedMessage
     id={'download.draft.ptag.2'}
     description={'Download the draft list of communities of focus and datasets used.'}
-    defaultMessage={`ZIP file will contain one .xlsx, one .csv, and one .pdf (${METHODOLOGY_COPY.DOWNLOAD_FILE_SIZE}).`}
+    defaultMessage={`ZIP file will contain one .xlsx, one .csv, and one .pdf ({downloadFileSize}).`}
+    values={{
+      downloadFileSize: METHODOLOGY_COPY.DOWNLOAD_FILE_SIZE,
+    }}
   />,
 };
 

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: <FormattedMessage
+    id={'downloadPacket.header.text'}
+    defaultMessage={ `Draft communities list v{versionNumber} ({downloadFileSize})`}
+    description={'download packet header text'}
+    values= {{
+      versionNumber: VERSION_NUMBER,
+      downloadFileSize: DOWNLOAD_FILE_SIZE,
+    }}
+  />,
+  DESCRIPTION: <FormattedMessage
+    id={ 'downloadPacket.info.text'}
+    // eslint-disable-next-line max-len
+    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'}
+    values= {{
+      versionNumber: VERSION_NUMBER,
+    }}
+  />,
+  LAST_UPDATED: <FormattedMessage
+    id={ 'downloadPacket.info.last.updated'}
+    defaultMessage= {`Last updated: {downloadLastUpdated} `}
+    description= {'download packet info last updated'}
+    values= {{
+      downloadLastUpdated: DOWNLOAD_LAST_UPDATED,
+    }}
+  />,
+  BUTTON_TEXT: <FormattedMessage
+    id={ 'downloadPacket.button.text'}
+    defaultMessage= {'Download package'}
+    description= {'download packet button text'}
+  />,
+};
 
 
 // Dataset section

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"

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);

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 (
-    <Layout location={location} title={intl.formatMessage(messages.pageNotFoundTitle)}>
+    <Layout location={location} title={intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.TITLE)}>
       <J40MainGridContainer>
 
         <Grid row>
-          <h1>{intl.formatMessage(messages.pageNotFoundHeading)}</h1>
+          <h1>{intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.HEADING)}</h1>
         </Grid>
 
         <Grid row>
           <p>
-            {intl.formatMessage(messages.pageNotFoundApology)}
+            {intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.APOLOGY)}
             {' '}
             <span role="img" aria-label="Pensive emoji">
             😔
             </span>{' '}
-            {intl.formatMessage(messages.pageNotFoundApologyDescription)}
+            {intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.APOLOGY_INFO)}
           </p>
         </Grid>
 
         <Grid row>
           {process.env.NODE_ENV === 'development' ? (
               <p>
-                {intl.formatMessage(messages.pageNotFoundGuidance)}
+                {intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.GUIDANCE)}
                 <code style={codeStyles}>src/pages/</code>.
               </p>
             ) : null}
@@ -85,7 +53,7 @@ const NotFoundPage =({location}: I404PageProps) => {
 
         <Grid>
           <p>
-            <Link to="/">{intl.formatMessage(messages.pageNotFoundLinkToGoHome)}</Link>.
+            <Link to="/">{intl.formatMessage(PAGE_NOT_FOUND_COPY.PAGE.LINK_HOME)}</Link>.
           </p>
         </Grid>
 

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)
                   </div>
                   <div>
-                    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). 
                     <span>
                       Last updated: 10/01/21 
                     </span>
@@ -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"
                           />
-                           
                         </div>
                         <div>
                           Download package

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) => {
         <Grid col={12} tablet={{col: 6}}>
           <section>
             <p>
-            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
-              {` `}
-              <Link to={'/methodology'}>Data & methodology</Link>
-              {` `}
-                  page.
+              {EXPLORE_COPY.PAGE_DESCRIPTION}
             </p>
           </section>
         </Grid>