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

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>

client/src/components/SidePanelInfo/SidePanelInfo.module.scss

@@ -7,12 +7,18 @@
   @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);
     @include u-margin-top(4);

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

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;

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="

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="

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: `

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

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": {

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

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>