add tutorial links (#2223)

client/src/data/copy/about.tsx

@@ -14,6 +14,10 @@ export const EJSCREEN = 'https://www.epa.gov/ejscreen/how-does-epa-use-ejscreen'
 
 export const CEJST_INSTRUCT = `https://static-data-screeningtool.geoplatform.gov/data-versions/1.0/data/score/downloadable/CEQ-CEJST-Instructions.pdf`;
 export const CEJST_MEMO = `https://www.whitehouse.gov/wp-content/uploads/2023/01/M-23-09_Signed_CEQ_CPO.pdf`;
+
+export const USE_MAP_TUTORIAL_LINK = `https://static-data-screeningtool.geoplatform.gov/data-versions/1.0/data/score/downloadable/Using-the-CEJST-Tutorial.pdf`;
+export const USE_DATA_TUTORIAL_LINK = `https://static-data-screeningtool.geoplatform.gov/data-versions/1.0/data/score/downloadable/Using-the-CEJST-Spreadsheet-Tutorial.pdf`;
+
 export const PAGE = defineMessages({
   TITLE: {
     id: 'about.page.title.text',
@@ -131,6 +135,21 @@ export const CONTENT = {
       link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
     }}
   />,
+
+  USE_MAP_TUTORIAL: <FormattedMessage
+    id={'about.page.use.map.tutorial'}
+    defaultMessage={`
+      Download the CEJST tutorial (.pdf 9.6 MB)
+    `}
+    description={'Navigate to the About page. This the link to download the how to use map tutorial'}
+  />,
+  USE_DATA_TUTORIAL: <FormattedMessage
+    id={'about.page.use.map.tutorial'}
+    defaultMessage={`
+    Download the spreadsheet tutorial (.pdf 5.4 MB)
+    `}
+    description={'Navigate to the About page. This the link to download the how to use map tutorial'}
+  />,
 };
 
 export const GITHUB_LINK = 'https://github.com/usds/justice40-tool';

client/src/intl/en.json

@@ -115,6 +115,10 @@
     "defaultMessage": "Zoom in and select any census tract to see if it is considered disadvantaged.",
     "description": "Navigate to the About page. This is the paragraph of Using the map"
   },
+  "about.page.use.map.tutorial": {
+    "defaultMessage": "Download the spreadsheet tutorial (.pdf 5.4 MB)",
+    "description": "Navigate to the About page. This the link to download the how to use map tutorial"
+  },
   "common.pages.alerts.additional_docs_available.description": {
     "defaultMessage": "Download new <link1>technical support</link1> and other documentation and <link2>send feedback</link2>.",
     "description": "Alert title that appears at the top of pages."

client/src/pages/about.tsx

@@ -26,6 +26,7 @@ import commentIcon from // @ts-ignore
 
 import githubIcon from // @ts-ignore
   '/node_modules/uswds/dist/img/usa-icons/github.svg';
+import {USE_DATA_TUTORIAL_LINK, USE_MAP_TUTORIAL_LINK} from '../data/copy/about';
 
 interface IAboutPageProps {
   location: Location;
@@ -117,7 +118,11 @@ const AboutPage = ({location}: IAboutPageProps) => {
             <AboutCard
               size={'small'}
               imgSrc={accountBalanceIcon}
-              header={intl.formatMessage(ABOUT_COPY.HOW_TO_USE_TOOL.USE_MAP_HEADING)}>
+              header={intl.formatMessage(ABOUT_COPY.HOW_TO_USE_TOOL.USE_MAP_HEADING)}
+              linkText={ABOUT_COPY.CONTENT.USE_MAP_TUTORIAL}
+              url={USE_MAP_TUTORIAL_LINK}
+              openUrlNewTab={true}
+              internal={false}>
               <p>
                 {intl.formatMessage(ABOUT_COPY.HOW_TO_USE_TOOL.USE_MAP_PARA)}
               </p>
@@ -126,7 +131,11 @@ const AboutPage = ({location}: IAboutPageProps) => {
             <AboutCard
               size={'small'}
               imgSrc={groupsIcon}
-              header={intl.formatMessage(ABOUT_COPY.HOW_TO_USE_TOOL.USE_DATA_HEADING)}>
+              header={intl.formatMessage(ABOUT_COPY.HOW_TO_USE_TOOL.USE_DATA_HEADING)}
+              linkText={ABOUT_COPY.CONTENT.USE_DATA_TUTORIAL}
+              url={USE_DATA_TUTORIAL_LINK}
+              openUrlNewTab={true}
+              internal={false}>
               <p>
                 {ABOUT_COPY.CONTENT.USE_DATA_PARA}
               </p>

client/src/pages/tests/__snapshots__/about.test.tsx.snap

@@ -573,7 +573,19 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   </p>
                   <div
                     class="j40-aboutcard-sm-link"
-                  />
+                  >
+                    <a
+                      class="usa-link usa-link--external"
+                      data-cy=""
+                      href="https://static-data-screeningtool.geoplatform.gov/data-versions/1.0/data/score/downloadable/Using-the-CEJST-Tutorial.pdf"
+                      rel="noreferrer"
+                      target="_blank"
+                    >
+                      
+      Download the CEJST tutorial (.pdf 9.6 MB)
+    
+                    </a>
+                  </div>
                 </div>
               </div>
               <div
@@ -628,7 +640,19 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   </p>
                   <div
                     class="j40-aboutcard-sm-link"
-                  />
+                  >
+                    <a
+                      class="usa-link usa-link--external"
+                      data-cy=""
+                      href="https://static-data-screeningtool.geoplatform.gov/data-versions/1.0/data/score/downloadable/Using-the-CEJST-Spreadsheet-Tutorial.pdf"
+                      rel="noreferrer"
+                      target="_blank"
+                    >
+                      
+    Download the spreadsheet tutorial (.pdf 5.4 MB)
+    
+                    </a>
+                  </div>
                 </div>
               </div>
               <div