Adding AND in Spanish (#1628)

* Spanish work

* contact fix

* dataset translations

* Adding AND in Spanish

client/src/components/AreaDetail/AreaDetail.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable quotes */
 // External Libs:
 import React from 'react';
-import {useIntl} from 'gatsby-plugin-intl';
+import { useIntl } from 'gatsby-plugin-intl';
-import {Accordion, Button} from '@trussworks/react-uswds';
+import { Accordion, Button } from '@trussworks/react-uswds';
 
 // Components:
 import Category from '../Category';
@@ -41,7 +41,7 @@ export interface indicatorInfo {
   threshold?: number,
 }
 
-const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
+const AreaDetail = ({ properties, hash }: IAreaDetailProps) => {
   const intl = useIntl();
 
   // console.log the properties of the census that is selected:
@@ -68,7 +68,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
    * depending on which territory was selected
    */
 
-  const getWorkForceIndicatorValue = (indicatorName:string) => {
+  const getWorkForceIndicatorValue = (indicatorName: string) => {
     if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.ISLAND_AREAS) {
       if (indicatorName === 'lowMedInc') {
         return properties.hasOwnProperty(constants
@@ -120,7 +120,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
    * the boolean of workforce development indicators depending on which territory was selected
    */
 
-  const getWorkForceIndicatorIsDisadv = (indicatorName:string) => {
+  const getWorkForceIndicatorIsDisadv = (indicatorName: string) => {
     if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.ISLAND_AREAS) {
       if (indicatorName === 'lowMedInc') {
         return properties.hasOwnProperty(constants
@@ -168,7 +168,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
   };
   // Define each indicator in the side panel with constants from copy file (for intl)
   // Indicators are grouped by category
-  const expAgLoss:indicatorInfo = {
+  const expAgLoss: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_AG_LOSS),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_AG_LOSS),
     value: properties.hasOwnProperty(constants.EXP_AGRICULTURE_LOSS_PERCENTILE) ?
@@ -176,7 +176,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_AGR_LOSS] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_AGR_LOSS] : null,
   };
-  const expBldLoss:indicatorInfo = {
+  const expBldLoss: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_BLD_LOSS),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_BLD_LOSS),
     value: properties.hasOwnProperty(constants.EXP_BUILDING_LOSS_PERCENTILE) ?
@@ -184,7 +184,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_BLD_LOSS] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_BLD_LOSS] : null,
   };
-  const expPopLoss:indicatorInfo = {
+  const expPopLoss: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_POP_LOSS),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_POP_LOSS),
     value: properties.hasOwnProperty(constants.EXP_POPULATION_LOSS_PERCENTILE) ?
@@ -192,7 +192,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_POP_LOSS] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_POP_LOSS] : null,
   };
-  const lowInc:indicatorInfo = {
+  const lowInc: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_INCOME),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_INCOME),
     value: properties.hasOwnProperty(constants.POVERTY_BELOW_200_PERCENTILE) ?
@@ -201,7 +201,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
       properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] : null,
     threshold: 65,
   };
-  const higherEd:indicatorInfo = {
+  const higherEd: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_ED),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_ED),
     value: properties.hasOwnProperty(constants.NON_HIGHER_ED_PERCENTILE) ?
@@ -212,7 +212,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     threshold: 80,
   };
 
-  const energyBurden:indicatorInfo = {
+  const energyBurden: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
     value: properties.hasOwnProperty(constants.ENERGY_PERCENTILE) ?
@@ -220,7 +220,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_ENERGY_BURDEN] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_ENERGY_BURDEN] : null,
   };
-  const pm25:indicatorInfo = {
+  const pm25: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PM_2_5),
     value: properties.hasOwnProperty(constants.PM25_PERCENTILE) ?
@@ -229,7 +229,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
       properties[constants.IS_EXCEEDS_THRESH_FOR_PM25] : null,
   };
 
-  const dieselPartMatter:indicatorInfo = {
+  const dieselPartMatter: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER),
     value: properties.hasOwnProperty(constants.DIESEL_MATTER_PERCENTILE) ?
@@ -237,7 +237,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] : null,
   };
-  const trafficVolume:indicatorInfo = {
+  const trafficVolume: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME),
     value: properties.hasOwnProperty(constants.TRAFFIC_PERCENTILE) ?
@@ -246,7 +246,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
       properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] : null,
   };
 
-  const houseBurden:indicatorInfo = {
+  const houseBurden: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
     value: properties.hasOwnProperty(constants.HOUSING_BURDEN_PROPERTY_PERCENTILE) ?
@@ -254,7 +254,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] : null,
   };
-  const leadPaint:indicatorInfo = {
+  const leadPaint: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
     value: properties.hasOwnProperty(constants.LEAD_PAINT_PERCENTILE) ?
@@ -270,7 +270,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
   //   isDisadvagtaged: false, // TODO
   // };
 
-  const proxHaz:indicatorInfo = {
+  const proxHaz: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ),
     value: properties.hasOwnProperty(constants.PROXIMITY_TSDF_SITES_PERCENTILE) ?
@@ -278,7 +278,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] : null,
   };
-  const proxNPL:indicatorInfo = {
+  const proxNPL: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL),
     value: properties.hasOwnProperty(constants.PROXIMITY_NPL_SITES_PERCENTILE) ?
@@ -286,7 +286,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] : null,
   };
-  const proxRMP:indicatorInfo = {
+  const proxRMP: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP),
     value: properties.hasOwnProperty(constants.PROXIMITY_RMP_SITES_PERCENTILE) ?
@@ -295,7 +295,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
       properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] : null,
   };
 
-  const wasteWater:indicatorInfo = {
+  const wasteWater: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER),
     value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ?
@@ -304,7 +304,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
       properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] : null,
   };
 
-  const asthma:indicatorInfo = {
+  const asthma: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
     value: properties.hasOwnProperty(constants.ASTHMA_PERCENTILE) ?
@@ -312,7 +312,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_ASTHMA] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_ASTHMA] : null,
   };
-  const diabetes:indicatorInfo = {
+  const diabetes: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
     value: properties.hasOwnProperty(constants.DIABETES_PERCENTILE) ?
@@ -320,7 +320,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIABETES] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_DIABETES] : null,
   };
-  const heartDisease:indicatorInfo = {
+  const heartDisease: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HEART_DISEASE),
     value: properties.hasOwnProperty(constants.HEART_PERCENTILE) ?
@@ -328,7 +328,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HEART_DISEASE] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_HEART_DISEASE] : null,
   };
-  const lifeExpect:indicatorInfo = {
+  const lifeExpect: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_LIFE_EXPECT),
     value: properties.hasOwnProperty(constants.LIFE_PERCENTILE) ?
@@ -337,7 +337,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
       properties[constants.IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP] : null,
   };
 
-  const lingIso:indicatorInfo = {
+  const lingIso: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LING_ISO),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LING_ISO),
     value: properties.hasOwnProperty(constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE) ?
@@ -345,25 +345,25 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LINGUISITIC_ISO] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_LINGUISITIC_ISO] : null,
   };
-  const lowMedInc:indicatorInfo = {
+  const lowMedInc: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_MED_INC),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_MED_INCOME),
     value: getWorkForceIndicatorValue('lowMedInc'),
     isDisadvagtaged: getWorkForceIndicatorIsDisadv('lowMedInc'),
   };
-  const unemploy:indicatorInfo = {
+  const unemploy: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.UNEMPLOY),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.UNEMPLOY),
     value: getWorkForceIndicatorValue('unemploy'),
     isDisadvagtaged: getWorkForceIndicatorIsDisadv('unemploy'),
   };
-  const poverty:indicatorInfo = {
+  const poverty: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY),
     value: getWorkForceIndicatorValue('poverty'),
     isDisadvagtaged: getWorkForceIndicatorIsDisadv('poverty'),
   };
-  const highSchool:indicatorInfo = {
+  const highSchool: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_SCL),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_SKL),
     value: getWorkForceIndicatorValue('highSchool'),
@@ -500,7 +500,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
   // component to render the actual Indicator
   const categoryItems = categories.map((category) => ({
     id: category.id,
-    title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged}/>,
+    title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged} />,
     content: (
       <>
         {/* Exceeds one or more burdens */}
@@ -510,12 +510,14 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
         />
 
         {/* indicators */}
-        {category.indicators.map((indicator:any, index:number) => {
+        {category.indicators.map((indicator: any, index: number) => {
-          return <Indicator key={`ind${index}`} indicator={indicator}/>;
+          return <Indicator key={`ind${index}`} indicator={indicator} />;
         })}
 
         {/* AND */}
-        <div className={styles.categorySpacer}>AND</div>
+        <div className={styles.categorySpacer}>
+          {EXPLORE_COPY.SIDE_PANEL_SPACERS.AND}
+        </div>
 
         {/* Exceeds both socioeconomic burdens */}
         <ExceedBurden
@@ -524,8 +526,8 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
         />
 
         {/* socio-economic indicators */}
-        {category.socioEcIndicators.map((indicator:any, index:number) => {
+        {category.socioEcIndicators.map((indicator: any, index: number) => {
-          return <Indicator key={`ind${index}`} indicator={indicator}/>;
+          return <Indicator key={`ind${index}`} indicator={indicator} />;
         })}
 
       </>
@@ -585,7 +587,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
           {isCommunityFocus ?
             <>
               <h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
-              <DisadvantageDot isDisadvantaged={isCommunityFocus}/>
+              <DisadvantageDot isDisadvantaged={isCommunityFocus} />
             </> :
             <h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
           }
@@ -630,7 +632,7 @@ const AreaDetail = ({properties, hash}:IAreaDetailProps) => {
       </div>
 
       {/* All category accordions in this component */}
-      <Accordion multiselectable={true} items={categoryItems}/>
+      <Accordion multiselectable={true} items={categoryItems} />
 
     </aside>
   );