From 90908532fac8b7855787120bafa335d2741034b1 Mon Sep 17 00:00:00 2001
From: Vim <86254807+vim-usds@users.noreply.github.com>
Date: Mon, 16 May 2022 11:59:09 -0400
Subject: [PATCH] Add copy to sidepanel on unselected and correct typo on
 Traffic data (#1646)

* Add copy to sidepanel

- add copy
- add spanish copy
- update snapshots
- udpate en.json and es.json

* Fix typo on Traffic data

* Reduce sidepanel title font size to x-large
---
 .../tests/__snapshots__/datasetContainer.test.tsx.snap   | 2 +-
 .../components/SidePanelInfo/SidePanelInfo.module.scss   | 8 +++++++-
 .../SidePanelInfo/SidePanelInfo.module.scss.d.ts         | 1 +
 client/src/components/SidePanelInfo/SidePanelInfo.tsx    | 9 ++++++---
 .../__snapshots__/SidePanelInfo.test.tsx.snap            | 7 +++++++
 .../components/__snapshots__/mapInfoPanel.test.tsx.snap  | 7 +++++++
 client/src/data/copy/explore.tsx                         | 7 +++++++
 client/src/data/copy/methodology.tsx                     | 2 +-
 client/src/intl/en.json                                  | 6 +++++-
 client/src/intl/es.json                                  | 1 +
 .../pages/tests/__snapshots__/methodology.test.tsx.snap  | 2 +-
 11 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
index f764f1c9..ada07980 100644
--- a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
+++ b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
@@ -484,7 +484,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                     rel="noreferrer"
                     target="_blank"
                   >
-                    Traffic Data
+                    Traffic data
                   </a>
                    from 2017 as compiled by EPA's EJScreen
                 </li>
diff --git a/client/src/components/SidePanelInfo/SidePanelInfo.module.scss b/client/src/components/SidePanelInfo/SidePanelInfo.module.scss
index c882063d..310f212d 100644
--- a/client/src/components/SidePanelInfo/SidePanelInfo.module.scss
+++ b/client/src/components/SidePanelInfo/SidePanelInfo.module.scss
@@ -7,11 +7,17 @@
   @include u-padding-left(4);
   @include u-padding-bottom(4);
 
-  .sidePanelInfoHeading {
+  .sidePanelInfoTitle {
     @include u-padding-top(2);
     font-size: x-large;
     line-height: 1.9rem;
   }
+
+  .sidePanelInfoHeading {
+    @include u-padding-top(2);
+    font-size: x-large;
+    // line-height: 1.9rem;
+  }
   
   .sidePanelInfoIcon {
     @include u-height(5);
diff --git a/client/src/components/SidePanelInfo/SidePanelInfo.module.scss.d.ts b/client/src/components/SidePanelInfo/SidePanelInfo.module.scss.d.ts
index 4eb36998..20dcdbb5 100644
--- a/client/src/components/SidePanelInfo/SidePanelInfo.module.scss.d.ts
+++ b/client/src/components/SidePanelInfo/SidePanelInfo.module.scss.d.ts
@@ -1,6 +1,7 @@
 declare namespace MapIntroductionModuleScssNamespace {
     export interface IMapIntroductionModuleScss {
         sidePanelInfoContainer: string;
+        sidePanelInfoTitle: string;
         sidePanelInfoHeading: string;
         sidePanelInfoIcon: string;
     }
diff --git a/client/src/components/SidePanelInfo/SidePanelInfo.tsx b/client/src/components/SidePanelInfo/SidePanelInfo.tsx
index 37c3a2bd..cf43d108 100644
--- a/client/src/components/SidePanelInfo/SidePanelInfo.tsx
+++ b/client/src/components/SidePanelInfo/SidePanelInfo.tsx
@@ -13,18 +13,21 @@ import upDown from '../../images/sidePanelIcons/upDown.svg';
 import * as styles from './SidePanelInfo.module.scss';
 import * as EXPLORE_COPY from '../../data/copy/explore';
 
-const MapIntroduction = () => {
+const SidePanelInfo = () => {
   const intl = useIntl();
 
   return (
     <aside className={styles.sidePanelInfoContainer}>
 
-      <header tabIndex={0} className={styles.sidePanelInfoHeading}>
+      <header tabIndex={0} className={styles.sidePanelInfoTitle}>
         {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.TITLE)}
       </header>
       <p tabIndex={0}>
         {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA1)}
       </p>
+      <p tabIndex={0} className={styles.sidePanelInfoHeading}>
+        {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.HEADING1)}
+      </p>
       <img tabIndex={0} className={styles.sidePanelInfoIcon}
         src={puzzle}
         alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.ALT_TEXT_ICON1)}
@@ -57,4 +60,4 @@ const MapIntroduction = () => {
   );
 };
 
-export default MapIntroduction;
+export default SidePanelInfo;
diff --git a/client/src/components/SidePanelInfo/__snapshots__/SidePanelInfo.test.tsx.snap b/client/src/components/SidePanelInfo/__snapshots__/SidePanelInfo.test.tsx.snap
index 82c5df80..d4f42e92 100644
--- a/client/src/components/SidePanelInfo/__snapshots__/SidePanelInfo.test.tsx.snap
+++ b/client/src/components/SidePanelInfo/__snapshots__/SidePanelInfo.test.tsx.snap
@@ -14,6 +14,13 @@ exports[`rendering of the component expects the render to match snapshot 1`] = `
       
       This tool identifies communities that are marginalized, underserved, and overburdened by pollution. These communities are located in census tracts that are at or above the thresholds in one or more of eight categories of criteria.
     
+    </p>
+    <p
+      tabindex="0"
+    >
+      
+      Zoom in or search and select to see data about any census tract of interest
+    
     </p>
     <img
       alt="
diff --git a/client/src/components/__snapshots__/mapInfoPanel.test.tsx.snap b/client/src/components/__snapshots__/mapInfoPanel.test.tsx.snap
index b693f69e..e86444d4 100644
--- a/client/src/components/__snapshots__/mapInfoPanel.test.tsx.snap
+++ b/client/src/components/__snapshots__/mapInfoPanel.test.tsx.snap
@@ -19,6 +19,13 @@ exports[`simulate app starting up, no click on map should match the snapshot of
         
       This tool identifies communities that are marginalized, underserved, and overburdened by pollution. These communities are located in census tracts that are at or above the thresholds in one or more of eight categories of criteria.
     
+      </p>
+      <p
+        tabindex="0"
+      >
+        
+      Zoom in or search and select to see data about any census tract of interest
+    
       </p>
       <img
         alt="
diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx
index 0113f55d..ba677848 100644
--- a/client/src/data/copy/explore.tsx
+++ b/client/src/data/copy/explore.tsx
@@ -170,6 +170,13 @@ export const SIDE_PANEL_INITIAL_STATE = defineMessages({
     `,
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Things to know, this is the first paragraph of this side panel`,
   },
+  HEADING1: {
+    id: 'explore.map.page.side.panel.info.heading1',
+    defaultMessage: `
+      Zoom in or search and select to see data about any census tract of interest
+    `,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Things to know, this is the first paragraph of this side panel`,
+  },
   PARA2: {
     id: 'explore.map.page.side.panel.info.para2',
     defaultMessage: `
diff --git a/client/src/data/copy/methodology.tsx b/client/src/data/copy/methodology.tsx
index 57284cb4..5184fa20 100644
--- a/client/src/data/copy/methodology.tsx
+++ b/client/src/data/copy/methodology.tsx
@@ -608,7 +608,7 @@ export const SOURCE_LINKS = {
   />,
   DOT_EPA: <FormattedMessage
     id={'methodology.page.category.source.dot.epa.link'}
-    defaultMessage={`<link1>Traffic Data</link1> from {date17} as compiled by EPA's EJScreen`}
+    defaultMessage={`<link1>Traffic data</link1> from {date17} as compiled by EPA's EJScreen`}
     description={'Navigate to the Methodology page. This is the source link for DOT EPA'}
     values={{
       link1: linkFn('https://www.epa.gov/ejscreen/technical-documentation-ejscreen', false, true),
diff --git a/client/src/intl/en.json b/client/src/intl/en.json
index 4f20e3b1..8f834d31 100644
--- a/client/src/intl/en.json
+++ b/client/src/intl/en.json
@@ -727,6 +727,10 @@
     "defaultMessage": "An icon that has an up arrow and a down arrow",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Things to know, this is the forth icon in this side panel"
   },
+  "explore.map.page.side.panel.info.heading1": {
+    "defaultMessage": "Zoom in or search and select to see data about any census tract of interest",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Things to know, this is the first paragraph of this side panel"
+  },
   "explore.map.page.side.panel.info.para1": {
     "defaultMessage": "This tool identifies communities that are marginalized, underserved, and overburdened by pollution. These communities are located in census tracts that are at or above the thresholds in one or more of eight categories of criteria.",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Things to know, this is the first paragraph of this side panel"
@@ -1020,7 +1024,7 @@
     "description": "Navigate to the Methodology page. This is the source link for DOE FEMA"
   },
   "methodology.page.category.source.dot.epa.link": {
-    "defaultMessage": "<link1>Traffic Data</link1> from {date17} as compiled by EPA's EJScreen",
+    "defaultMessage": "<link1>Traffic data</link1> from {date17} as compiled by EPA's EJScreen",
     "description": "Navigate to the Methodology page. This is the source link for DOT EPA"
   },
   "methodology.page.category.source.epa.cerclis.link": {
diff --git a/client/src/intl/es.json b/client/src/intl/es.json
index a13301e8..62e0ec8c 100644
--- a/client/src/intl/es.json
+++ b/client/src/intl/es.json
@@ -183,6 +183,7 @@
     "explore.map.page.side.panel.info.alt.text.icon2": "Un icono que representa una curva de campana o distribución de Gauss",
     "explore.map.page.side.panel.info.alt.text.icon3": "An icon that depicts a part of pie chart being removed",
     "explore.map.page.side.panel.info.alt.text.icon4": "Un icono que tiene una flecha hacia arriba y una flecha hacia abajo",
+    "explore.map.page.side.panel.info.heading1": "Haga zoom o busque y seleccione para ver datos sobre cualquier tramo censal de interés",
     "explore.map.page.side.panel.info.para1": "Esta herramienta identifica las comunidades marginadas, desatendidas y abrumadas por la contaminación. Esas comunidades se encuentran en grupos de bloques del censo que están en el umbral o por encima del umbral en una o más de las ocho categorías de criterios.",
     "explore.map.page.side.panel.info.para2": "La herramienta usa grupos de bloques del censo que representan unas 4,000 personas, la cual es la unidad geográfica más pequeña para la que se pueden mostrar datos coherentes en la herramienta.",
     "explore.map.page.side.panel.info.para3": "La herramienta clasifica cada grupo de bloques del censo por medio de percentiles que muestran la cantidad de carga que cada grupo de bloques experimenta con respecto a los demás grupos de bloques del censo para cada criterio.",
diff --git a/client/src/pages/tests/__snapshots__/methodology.test.tsx.snap b/client/src/pages/tests/__snapshots__/methodology.test.tsx.snap
index c9c08760..c154b4d2 100644
--- a/client/src/pages/tests/__snapshots__/methodology.test.tsx.snap
+++ b/client/src/pages/tests/__snapshots__/methodology.test.tsx.snap
@@ -1592,7 +1592,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       rel="noreferrer"
                       target="_blank"
                     >
-                      Traffic Data
+                      Traffic data
                     </a>
                      from 2017 as compiled by EPA's EJScreen
                   </li>