Re-order nav links, update download box to include shapefiles, squish pages (#1538)

* Re-order nav links, update download box to include shapefiles, squishy pages (#1536)

* Add dropdown to navigation links

- add download page
- move main pages tests to their own folder
- add download and public eng snapshot test
- remove public engagement button on each page
- swap index with cejst
- update cypress ENDPOINTS
- upate gatsby-config sitemap
- update snapshots
- cypress tests are failing

* Make all page endpoints constants

- fix all cypress tests
- refactor all test to use LegacyTests/constants/PAGES_ENDPOINTS
- gatsby-config to use PAGES_ENDPOINTS
- remove ScoreStepList component
- update J40Header to use constants.PAGES_ENDPOINTS
- update snapshots
- there are 3 locations to update PAGES_ENDPOINTS, namely

1. LegacyTests/constants.tsx
2. constants.tsx
3. gatsby-config

* Add two placeholder pages

- FAQs
- TSD

* remove dropdown from navigation menu

- remove dropdown from gherkin tests
- update snapshots

* Add back public engagement button to all pages

- add send button in area detail alt tag to i18n
- modify public engagement button to have same CSS as send feedback button
- update snapshots

* Update download box to include shapefile downloads

- refator download packet scss
- add shapefile URL to .env files
- update tests
- index forwarding pattern
- update snapshots

* Add FAQ link to About page

* Update footer

- add PEC
- add RFI
- add github link

* Update the staging link URL and title

* Update download Box to match design sync

- update FAQ link copy

* Add comment for reason of commented code

client/src/data/constants.tsx

@@ -4,6 +4,18 @@ import {isMobile as isMobileReactDeviceDetect} from 'react-device-detect';
 
 export const isMobile = isMobileReactDeviceDetect;
 
+// Pages URL
+export const PAGES_ENDPOINTS = {
+  EXPLORE: '/',
+  METHODOLOGY: '/methodology',
+  DOWNLOADS: '/downloads',
+  TSD: '/technical-support-document',
+  ABOUT: '/about',
+  FAQS: '/frequently-asked-questions',
+  PUBLIC_ENG: '/public-engagement',
+  CONTACT: '/contact',
+};
+
 // Performance markers
 export const PERFORMANCE_MARKER_MAP_IDLE = 'MAP_IDLE';
 

client/src/data/copy/404.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import {defineMessages} from 'react-intl';
-import {FormattedMessage, Link} from 'gatsby-plugin-intl';
+import {FormattedMessage} from 'gatsby-plugin-intl';
+import {linkFn} from './common';
+import {PAGES_ENDPOINTS} from '../constants';
 
 export const PAGE = defineMessages({
   TITLE: {
@@ -24,11 +26,10 @@ export const ERROR_MSG =
 <FormattedMessage
   id={'pageNotFound.apology.text'}
   defaultMessage={`
-    Sorry, the page you were looking for was not found. Click {home} to go home.
+    Sorry, the page you were looking for was not found. Click <link1>home</link1> to go home.
     `}
-  description={'page description'}
+  description={'main error message'}
   values={{
-    home: <Link to={'/'}>here</Link>,
-    homeEs: <Link to={'/methodology'}>aqui</Link>,
+    link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
   }}
 />;

client/src/data/copy/about.tsx

@@ -5,6 +5,7 @@ import {FormattedMessage} from 'gatsby-plugin-intl';
 import {italicFn, linkFn} from './common';
 
 export const EXEC_ORDER_LINK = 'https://www.federalregister.gov/documents/2021/02/01/2021-02177/tackling-the-climate-crisis-at-home-and-abroad#:~:text=Sec.%20223.%20Justice40,40-percent%20goal.';
+export const FAQS_LINK = 'https://www.whitehouse.gov/wp-content/uploads/2022/02/CEQ-CEJST-QandA.pdf';
 
 export const PAGE = defineMessages({
   TILE: {
@@ -45,6 +46,12 @@ export const PAGE = defineMessages({
     `,
     description: 'Navigate to the About page. This is the third heading description',
   },
+  HEADING_3: {
+    id: 'about.page.sub.header.3.text',
+    defaultMessage: 'Still have questions?',
+    description: 'Navigate to the About page. This is the fourth heading',
+  },
+
 });
 
 export const HEADING_1 = {
@@ -66,6 +73,18 @@ export const HEADING_1 = {
     }}
   />,
 };
+export const HEADING_3 = {
+  DESCRIPTION_1:
+  <FormattedMessage
+    id={'about.page.sub.header.3.text.1'}
+    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={{
+      link1: linkFn(FAQS_LINK, false, true),
+    }}
+  />,
+};
 
 export const HEADING_2 = {
   DESCRIPTION_2:

client/src/data/copy/common.tsx

@@ -17,6 +17,7 @@ export const simpleLink = (href:string) => (str:string) => <a href={href}>{str}<
 // eslint-disable-next-line max-len
 export const linkFn = (to:string, isInternal:boolean, isOpenNewTab:boolean) => (str:string) => <LinkTypeWrapper linkText={str} internal={isInternal} url={to} openUrlNewTab={isOpenNewTab}/>;
 
+export const RFI_LINK = `https://www.federalregister.gov/d/2022-03920`;
 
 export const FEEDBACK_EMAIL = 'Screeningtool-Support@omb.eop.gov';
 
@@ -89,6 +90,26 @@ export const HEADER = defineMessages({
     defaultMessage: 'Contact',
     description: 'Navigate to the about page. This is Header navigate item to the Contact page',
   },
+  DOWNLOADS: {
+    id: 'common.pages.header.downloads',
+    defaultMessage: 'Downloads',
+    description: 'Navigate to the about page. This is Header navigate item to the downloads page',
+  },
+  FAQs: {
+    id: 'common.pages.header.faqs',
+    defaultMessage: 'Frequently asked questions',
+    description: 'Navigate to the about page. This is Header navigate item to the faqs page',
+  },
+  PUBLIC_ENG: {
+    id: 'common.pages.header.public.eng',
+    defaultMessage: 'Engagement calendar',
+    description: 'Navigate to the about page. This is Header navigate item to the public eng page',
+  },
+  TSD: {
+    id: 'common.pages.header.tsd',
+    defaultMessage: 'Technical Support Document',
+    description: 'Navigate to the about page. This is Header navigate item to the technical support document page',
+  },
 });
 
 // Footer
@@ -108,6 +129,21 @@ export const FOOTER = defineMessages({
     defaultMessage: 'More information',
     description: 'Navigate to the about page. This is Footer column header',
   },
+  ENG_CAL: {
+    id: 'common.pages.footer.eng.cal.text',
+    defaultMessage: 'Engagement calender',
+    description: 'Navigate to the about page. This is Footer eng.cal.gov link text',
+  },
+  RFI: {
+    id: 'common.pages.footer.rfi.text',
+    defaultMessage: 'Request for Infomation',
+    description: 'Navigate to the about page. This is Footer rfi link text',
+  },
+  RFI_LINK: {
+    id: 'common.pages.footer.rfi.link',
+    defaultMessage: RFI_LINK,
+    description: 'Navigate to the about page. This is Footer rfi link',
+  },
   WHITEHOUSE: {
     id: 'common.pages.footer.whitehouse.text',
     defaultMessage: 'Whitehouse.gov',
@@ -138,11 +174,6 @@ export const FOOTER = defineMessages({
     defaultMessage: 'Whitehouse logo',
     description: 'Navigate to the about page. This is Footer Whitehouse logo alt text',
   },
-  QUESTIONS: {
-    id: 'common.pages.footer.questionsheader',
-    defaultMessage: 'Have a question about government services?',
-    description: 'Navigate to the about page. This is Footer column header',
-  },
   FIND_CONTACT: {
     id: 'common.pages.footer.findcontact',
     defaultMessage: 'Find a contact at USA.gov',
@@ -153,6 +184,21 @@ export const FOOTER = defineMessages({
     defaultMessage: 'https://www.usa.gov/',
     description: 'Navigate to the about page. This is Footer find contact link text',
   },
+  CONTRIBUTE: {
+    id: 'common.pages.footer.contribute.header',
+    defaultMessage: 'Want to contribute?',
+    description: 'Navigate to the about page. This is third Footer column header',
+  },
+  GITHUB_LINK_TEXT: {
+    id: 'common.pages.footer.github.link.text',
+    defaultMessage: 'Check out the code on GitHub',
+    description: 'Navigate to the about page. This is Footer github link text',
+  },
+  GITHUB_LINK: {
+    id: 'common.pages.footer.findcontact.link',
+    defaultMessage: 'https://github.com/usds/justice40-tool',
+    description: 'Navigate to the about page. This is Footer find contact link text',
+  },
   CONTACT: {
     id: 'common.pages.footer.contactheader',
     defaultMessage: 'Contact',

client/src/data/copy/contact.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import {defineMessages} from 'react-intl';
 import {FormattedMessage} from 'gatsby-plugin-intl';
 import * as COMMON_COPY from './common';
+import {PAGES_ENDPOINTS} from '../constants';
+
 
 export const PAGE_INTRO = defineMessages({
   PAGE_TILE: {
@@ -45,7 +47,7 @@ export const RFI_BOX_BODY = <FormattedMessage
   defaultMessage={`During the beta period, comments may be submitted on the Climate and Economic Justice Screening Tool via CEQ’s Request for Information available on <link1>federalregister.gov</link1>.`}
   description={'Navigate to the contact page, this is the body of the request for information box'}
   values={{
-    link1: COMMON_COPY.linkFn(`https://www.federalregister.gov/d/2022-03920`, false, true),
+    link1: COMMON_COPY.linkFn(COMMON_COPY.RFI_LINK, false, true),
   }}
 />;
 
@@ -63,7 +65,7 @@ export const CENSUS_TRACT_FEEDBACK = {
     `}
     description={'Navigate to the contact page, this is the census tract feedback section'}
     values={{
-      link1: COMMON_COPY.linkFn('/cejst', true, false),
+      link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.EXPLORE, true, false),
     }}
   />,
   PARAGRAPH2: <FormattedMessage

client/src/data/copy/downloads.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable max-len */
+import React from 'react';
+import {defineMessages} from 'react-intl';
+import {FormattedMessage, FormattedNumber} from 'gatsby-plugin-intl';
+import {simpleLink} from './common';
+
+export const PAGE_INTRO = defineMessages({
+  PAGE_TILE: {
+    id: 'downloads.page.title.text',
+    defaultMessage: 'Downloads',
+    description: 'Navigate to the the Downloads page, this will be the page title text',
+  },
+  PAGE_HEADING1: {
+    id: 'downloads.page.heading1.text',
+    defaultMessage: 'Downloads',
+    description: 'Navigate to the the Downloads page, this will be the page heading1 text',
+  },
+  PAGE_HEADING2: {
+    id: 'downloads.page.heading2.text',
+    defaultMessage: 'File formats',
+    description: 'Navigate to the the Downloads page, this will be the page heading2 text',
+  },
+  PAGE_DESCRIPTION1: {
+    id: 'downloads.page.heading1.text',
+    defaultMessage: 'The dataset used in the tool, along with a data dictionary and information about how to use the list of communities (.pdf) are available in the following file formats:',
+    description: 'Navigate to the the Downloads page, this will be the page heading1 text',
+  },
+});
+
+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"
+      />,
+    }}
+  />,
+};

client/src/data/copy/explore.tsx

@@ -7,6 +7,7 @@ import {FormattedDate, FormattedMessage, FormattedNumber} from 'gatsby-plugin-in
 import * as COMMON_COPY from './common';
 import * as METHODOLOGY_COPY from './methodology';
 import {simpleLink, linkFn} from './common';
+import {PAGES_ENDPOINTS} from '../constants';
 
 export const PAGE_INTRO = defineMessages({
   PAGE_TILE: {
@@ -31,7 +32,7 @@ export const PAGE_DESCRIPTION = <FormattedMessage
     `}
   description={'On the explore the tool page, the description of the page'}
   values={{
-    link1: linkFn('/methodology', true, false),
+    link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
   }}
 />;
 
@@ -289,6 +290,13 @@ export const COMMUNITY = {
       defaultMessage={ 'Send feedback'}
       description={`Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show link to send feedback`}
     />,
+    IMG_ICON: defineMessages({
+      ALT_TAG: {
+        id: 'explore.tool.page.side.panel.send.feedback.alt.img',
+        defaultMessage: 'Send feedback',
+        description: `Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show a send feedback icon, this is the images alt tag`,
+      },
+    }),
   },
 };
 
@@ -795,7 +803,7 @@ export const NOTE_ON_TERRITORIES = {
     `}
     description={`Navigate to the explore the tool page. Under the map, you will see territories paragraph 1`}
     values={{
-      link1: linkFn('/methodology', true, false),
+      link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
     }}
   />,
   PARA_2: <FormattedMessage
@@ -849,7 +857,7 @@ export const NOTE_ON_TRIBAL_NATIONS = {
     `}
     description={`Navigate to the explore the tool page. Under the map, you will see tribal nations paragraph 1`}
     values={{
-      link1: linkFn('/methodology', true, false),
+      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),
@@ -870,7 +878,7 @@ export const HOW_YOU_CAN_HELP_LIST_ITEMS = {
     `}
     defaultMessage={`View the <link1>Methodology & data</link1> page and send feedback.`}
     values={{
-      link1: linkFn('/methodology', true, false),
+      link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
     }}
   />,
   LIST_ITEM_2: <FormattedMessage

client/src/data/copy/faqs.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+import {defineMessages} from 'react-intl';
+
+
+export const PAGE_INTRO = defineMessages({
+  PAGE_TILE: {
+    id: 'faqs.page.title.text',
+    defaultMessage: 'Frequently asked questions',
+    description: 'Navigate to the the FAQs page, this will be the page title text',
+  },
+  COMING_SOON: {
+    id: 'faqs.page.coming.soon.text',
+    defaultMessage: 'Coming Soon!',
+    description: 'Navigate to the the FAQs page, this will be the page coming soon text',
+  },
+});

client/src/data/copy/methodology.tsx

@@ -73,7 +73,8 @@ export const FORMULA = {
 
 // Download Package
 export const DOWNLOAD_FILE_SIZE = 52;
-export const DOWNLOAD_LAST_UPDATED = 1645180697000;
+export const DOWNLOAD_SHAPE_FILE_SIZE = 742;
+export const DOWNLOAD_LAST_UPDATED = 1649287951000;
 export const VERSION_NUMBER = 0.1;
 
 export const DOWNLOAD_ZIP_URL = [
@@ -82,30 +83,35 @@ export const DOWNLOAD_ZIP_URL = [
   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('/');
+
 export const DOWNLOAD_PACKAGE = {
   TITLE: <FormattedMessage
     id={'methodology.page.downloadPacket.header.text'}
-    defaultMessage={`Draft communities list v{version} ({downloadFileSize} unzipped)`}
+    defaultMessage={`Files available for download`}
     description={'Navigate to the methodology page. This is the download packet header text'}
+  />,
+  DESCRIPTION1: <FormattedMessage
+    id={ 'methodology.page.downloadPacket.info.text1'}
+    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= {{
-      version: <FormattedNumber value={VERSION_NUMBER}/>,
       downloadFileSize: <FormattedNumber
         value={DOWNLOAD_FILE_SIZE}
         style="unit"
         unit="megabyte"
         unitDisplay="narrow"
       />,
-    }}
-  />,
-  DESCRIPTION: <FormattedMessage
-    id={ 'methodology.page.downloadPacket.info.text'}
-    defaultMessage= {`
-      The download package includes draft v{version} of the list of disadvantaged communities
-      (.csv and .xlsx).
-    `}
-    description= {'Navigate to the methodology page. This is the download packet info text'}
-    values= {{
-      version: <FormattedNumber value={VERSION_NUMBER}/>,
+      shapefileSize: <FormattedNumber
+        value={DOWNLOAD_SHAPE_FILE_SIZE}
+        style="unit"
+        unit="megabyte"
+        unitDisplay="narrow"
+      />,
     }}
   />,
   LAST_UPDATED: <FormattedMessage
@@ -121,11 +127,24 @@ export const DOWNLOAD_PACKAGE = {
       />,
     }}
   />,
-  BUTTON_TEXT: <FormattedMessage
-    id={ 'methodology.page.downloadPacket.button.text'}
-    defaultMessage= {'Download package'}
+  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'}
+  />,
+  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,
+    }}
+  />,
 };
 
 export const CATEGORY= {

client/src/data/copy/publicEngage.tsx

@@ -90,7 +90,7 @@ export const PUBLIC_ENG_VIDEO = defineMessages({
 export const PUBLIC_ENG_BUTTON = defineMessages({
   LABEL: {
     id: 'public.eng.page.button.label',
-    defaultMessage: `Public Engagement`,
+    defaultMessage: `Public engagement`,
     description: 'Navigate to the the public engagement page, this will be the public engagement button label',
   },
   TAG_LABEL: {
@@ -98,6 +98,11 @@ export const PUBLIC_ENG_BUTTON = defineMessages({
     defaultMessage: `UPDATED`,
     description: 'Navigate to the the public engagement page, this will be the public engagement tag label',
   },
+  IMG_ICON_ALT_TAG: {
+    id: 'public.eng.page.button.img.alt.tag',
+    defaultMessage: `an icon that represents a calendar`,
+    description: 'Navigate to the the public engagement page, this will be the public engagement button icon alt tag text',
+  },
 });
 
 export const EVENT_TYPES = {

client/src/data/copy/tsd.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+import {defineMessages} from 'react-intl';
+
+
+export const PAGE_INTRO = defineMessages({
+  PAGE_TILE: {
+    id: 'technical.support.doc.page.title.text',
+    defaultMessage: 'Technical Support Document',
+    description: 'Navigate to the the Technical Support Doc page, this will be the page title text',
+  },
+  COMING_SOON: {
+    id: 'technical.support.doc.page.coming.soon.text',
+    defaultMessage: 'Coming Soon!',
+    description: 'Navigate to the the Technical Support Doc page, this will be the page coming soon text',
+  },
+});