1.0 side panel indicator designs (#1896)

* Remove up/down arrows from indicators

* update style of side panel categories if supported

- if the browser has ":has" support, the new category styles will be applied
- if not, the older style will remain in place

* update snapshots

* update styling for indicator values

- refactor disadvantaged blue dot to utils.scss

* remove missing icon and reduce subtext font size

* Remove un-needed import in test file

* Update category, indicator copy

* Update copy indicator desc and titles

* update side panel styling for 1.0

* Update methodology version / styling

client/src/components/AreaDetail/AreaDetail.tsx

@@ -8,7 +8,6 @@ import {Accordion, Button} from '@trussworks/react-uswds';
 import Category from '../Category';
 import TractDemographics from '../TractDemographics';
 import DisadvantageDot from '../DisadvantageDot';
-import ExceedBurden from '../ExceedBurden';
 import Indicator from '../Indicator';
 import TractInfo from '../TractInfo';
 
@@ -315,9 +314,9 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
 
 
   // Energy category
-  const energyBurden: indicatorInfo = {
+  const energyCost: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_COST),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_COST),
     type: 'percentile',
     value: properties.hasOwnProperty(constants.ENERGY_PERCENTILE) ?
       properties[constants.ENERGY_PERCENTILE] : null,
@@ -334,153 +333,6 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
       properties[constants.IS_EXCEEDS_THRESH_FOR_PM25] : null,
   };
 
-  // Transit category
-  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),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.DIESEL_MATTER_PERCENTILE) ?
-      properties[constants.DIESEL_MATTER_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] ?
-      properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] : null,
-  };
-  const barrierTransport: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.BARRIER_TRANS),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.BARRIER_TRANS),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.TRAVEL_DISADV_PERCENTILE) ?
-      properties[constants.TRAVEL_DISADV_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_TRAVEL_DISADV] ?
-      properties[constants.IS_EXCEEDS_THRESH_TRAVEL_DISADV] : null,
-  };
-  const trafficVolume: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.TRAFFIC_PERCENTILE) ?
-      properties[constants.TRAFFIC_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] ?
-      properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] : null,
-  };
-
-  // Housing category
-  const historicUnderinvest: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIST_UNDERINVEST),
-    type: 'boolean',
-    value: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) ?
-      (properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] ===
-        constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false) :
-      null,
-    isDisadvagtaged: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) &&
-    properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] ===
-    constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false,
-  };
-  const houseBurden: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.HOUSING_BURDEN_PROPERTY_PERCENTILE) ?
-      properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] ?
-      properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] : null,
-  };
-  const lackGreenSpace: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_GREEN_SPACE),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_GREEN_SPACE),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.IMPERVIOUS_PERCENTILE) ?
-      properties[constants.IMPERVIOUS_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_IMPERVIOUS] ?
-      properties[constants.IS_EXCEEDS_THRESH_IMPERVIOUS] : null,
-  };
-  const lackPlumbing: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_PLUMBING),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_PLUMBING),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.KITCHEN_PLUMB_PERCENTILE) ?
-      properties[constants.KITCHEN_PLUMB_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_KITCHEN_PLUMB] ?
-      properties[constants.IS_EXCEEDS_THRESH_KITCHEN_PLUMB] : null,
-  };
-  const leadPaint: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.LEAD_PAINT_PERCENTILE) ?
-      properties[constants.LEAD_PAINT_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] ?
-      properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] : null,
-  };
-
-  // Pollution categeory
-  const abandonMines: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ABANDON_MINES),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ABANDON_MINES),
-    type: 'boolean',
-    value: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ?
-      properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null,
-    isDisadvagtaged: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ?
-    properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null,
-  };
-  const formerDefSites: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FORMER_DEF_SITES),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FORMER_DEF_SITES),
-    type: 'boolean',
-    value: properties.hasOwnProperty(constants.FORMER_DEF_SITES_RAW_VALUE) ?
-      (properties[constants.FORMER_DEF_SITES_RAW_VALUE] === constants.FUDS_RAW_YES ? true : false) :
-      null,
-    isDisadvagtaged: properties.hasOwnProperty(constants.FORMER_DEF_SITES_EXCEEDS_THRESH) ?
-    properties[constants.FORMER_DEF_SITES_EXCEEDS_THRESH] : null,
-  };
-  const proxHaz: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.PROXIMITY_TSDF_SITES_PERCENTILE) ?
-      properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] ?
-      properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] : null,
-  };
-  const proxNPL: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.PROXIMITY_NPL_SITES_PERCENTILE) ?
-      properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] ?
-      properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] : null,
-  };
-  const proxRMP: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.PROXIMITY_RMP_SITES_PERCENTILE) ?
-      properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] ?
-      properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] : null,
-  };
-
-  // Water category
-  const leakyTanks: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAKY_TANKS),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAKY_TANKS),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.LEAKY_UNDER_PERCENTILE) ?
-      properties[constants.LEAKY_UNDER_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_LEAKY_UNDER] ?
-      properties[constants.IS_EXCEEDS_THRESH_LEAKY_UNDER] : null,
-  };
-  const wasteWater: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER),
-    type: 'percentile',
-    value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ?
-      properties[constants.WASTEWATER_PERCENTILE] : null,
-    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] ?
-      properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] : null,
-  };
-
   // Health category
   const asthma: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
@@ -519,6 +371,157 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
       properties[constants.IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP] : null,
   };
 
+
+  // Housing category
+  const historicUnderinvest: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIST_UNDERINVEST),
+    type: 'boolean',
+    value: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) ?
+      (properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] ===
+        constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false) : null,
+    isDisadvagtaged: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) &&
+      properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] ===
+        constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false,
+  };
+  const houseCost: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_COST),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_COST),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.HOUSING_BURDEN_PROPERTY_PERCENTILE) ?
+      properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] ?
+      properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] : null,
+  };
+  const lackGreenSpace: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_GREEN_SPACE),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_GREEN_SPACE),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.IMPERVIOUS_PERCENTILE) ?
+      properties[constants.IMPERVIOUS_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_IMPERVIOUS] ?
+      properties[constants.IS_EXCEEDS_THRESH_IMPERVIOUS] : null,
+  };
+  const lackPlumbing: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_PLUMBING),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_PLUMBING),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.KITCHEN_PLUMB_PERCENTILE) ?
+      properties[constants.KITCHEN_PLUMB_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_KITCHEN_PLUMB] ?
+      properties[constants.IS_EXCEEDS_THRESH_KITCHEN_PLUMB] : null,
+  };
+  const leadPaint: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.LEAD_PAINT_PERCENTILE) ?
+      properties[constants.LEAD_PAINT_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] ?
+      properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] : null,
+  };
+
+
+  // Pollution categeory
+  const abandonMines: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ABANDON_MINES),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ABANDON_MINES),
+    type: 'boolean',
+    value: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ?
+      properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null,
+    isDisadvagtaged: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ?
+    properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null,
+  };
+  const formerDefSites: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FORMER_DEF_SITES),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FORMER_DEF_SITES),
+    type: 'boolean',
+    value: properties.hasOwnProperty(constants.FORMER_DEF_SITES_RAW_VALUE) ?
+      (properties[constants.FORMER_DEF_SITES_RAW_VALUE] === constants.FUDS_RAW_YES ? true : false) :
+      null,
+    isDisadvagtaged: properties.hasOwnProperty(constants.FORMER_DEF_SITES_EXCEEDS_THRESH) ?
+    properties[constants.FORMER_DEF_SITES_EXCEEDS_THRESH] : null,
+  };
+  const proxHaz: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.PROXIMITY_TSDF_SITES_PERCENTILE) ?
+      properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] ?
+      properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] : null,
+  };
+  const proxRMP: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.PROXIMITY_RMP_SITES_PERCENTILE) ?
+      properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] ?
+      properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] : null,
+  };
+  const proxNPL: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.PROXIMITY_NPL_SITES_PERCENTILE) ?
+      properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] ?
+      properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] : null,
+  };
+
+
+  // Transpotation category
+  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),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.DIESEL_MATTER_PERCENTILE) ?
+      properties[constants.DIESEL_MATTER_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] ?
+      properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] : null,
+  };
+  const barrierTransport: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.BARRIER_TRANS),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.BARRIER_TRANS),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.TRAVEL_DISADV_PERCENTILE) ?
+      properties[constants.TRAVEL_DISADV_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_TRAVEL_DISADV] ?
+      properties[constants.IS_EXCEEDS_THRESH_TRAVEL_DISADV] : null,
+  };
+  const trafficVolume: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.TRAFFIC_PERCENTILE) ?
+      properties[constants.TRAFFIC_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] ?
+      properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] : null,
+  };
+
+
+  // Water category
+  const leakyTanks: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAKY_TANKS),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAKY_TANKS),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.LEAKY_UNDER_PERCENTILE) ?
+      properties[constants.LEAKY_UNDER_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_LEAKY_UNDER] ?
+      properties[constants.IS_EXCEEDS_THRESH_LEAKY_UNDER] : null,
+  };
+  const wasteWater: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER),
+    type: 'percentile',
+    value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ?
+      properties[constants.WASTEWATER_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] ?
+      properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] : null,
+  };
+
+
   // Workforce dev category
   const lingIso: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LING_ISO),
@@ -601,7 +604,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
     {
       id: 'clean-energy',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_ENERGY),
-      indicators: [energyBurden, pm25],
+      indicators: [energyCost, pm25],
       socioEcIndicators: [lowInc],
       isDisadvagtaged: properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED] ?
         properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED] : null,
@@ -611,21 +614,21 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
         properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null,
     },
     {
-      id: 'clean-transport',
+      id: 'health-burdens',
-      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT),
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN),
-      indicators: [dieselPartMatter, barrierTransport, trafficVolume],
+      indicators: [asthma, diabetes, heartDisease, lifeExpect],
       socioEcIndicators: [lowInc],
-      isDisadvagtaged: properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED] ?
+      isDisadvagtaged: properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED] ?
-        properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED] : null,
+        properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED] : null,
-      isExceed1MoreBurden: properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS] ?
+      isExceed1MoreBurden: properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS] ?
-        properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS] : null,
+        properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS] : null,
       isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] ?
         properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null,
     },
     {
       id: 'sustain-house',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.SUSTAIN_HOUSE),
-      indicators: [historicUnderinvest, houseBurden, lackGreenSpace, lackPlumbing, leadPaint],
+      indicators: [historicUnderinvest, houseCost, lackGreenSpace, lackPlumbing, leadPaint],
       socioEcIndicators: [lowInc],
       isDisadvagtaged: properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED] ?
         properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED] : null,
@@ -646,6 +649,18 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
       isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] ?
         properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null,
     },
+    {
+      id: 'clean-transport',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT),
+      indicators: [dieselPartMatter, barrierTransport, trafficVolume],
+      socioEcIndicators: [lowInc],
+      isDisadvagtaged: properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED] ?
+        properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED] : null,
+      isExceed1MoreBurden: properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS] ?
+        properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS] : null,
+      isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] ?
+        properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null,
+    },
     {
       id: 'clean-water',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
@@ -658,18 +673,6 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
       isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] ?
         properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null,
     },
-    {
-      id: 'health-burdens',
-      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN),
-      indicators: [asthma, diabetes, heartDisease, lifeExpect],
-      socioEcIndicators: [lowInc],
-      isDisadvagtaged: properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED] ?
-        properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED] : null,
-      isExceed1MoreBurden: properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS] ?
-        properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS] : null,
-      isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] ?
-        properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null,
-    },
     {
       id: 'work-dev',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
@@ -710,7 +713,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
 
     // eslint-disable-next-line max-len
     categories = categories.filter((category) => category.id === 'work-dev' || category.id === 'clean-energy' || category.id === 'leg-pollute' || category.id === 'sustain-house');
-    categories[1].indicators = [houseBurden];
+    categories[1].indicators = [houseCost];
     categories[3].indicators = [lowMedInc, unemploy, poverty];
   }
 
@@ -741,12 +744,6 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
     title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged} />,
     content: (
       <>
-        {/* Exceeds one or more burdens */}
-        <ExceedBurden
-          text={EXPLORE_COPY.SIDE_PANEL_SPACERS.EXCEED_ONE_OR_MORE}
-          isBurdened={category.isExceed1MoreBurden}
-        />
-
         {/* Indicators - filters then map */}
         {category.indicators
             .filter(indicatorFilter(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST))

client/src/components/AreaDetail/areaDetail.module.scss

@@ -10,7 +10,7 @@ $sidePanelLabelFontColor: #171716;
 }
 
 .versionInfo {
-  padding: .5rem 1rem .5rem 1.2rem;
+  padding: 2rem 1rem 2rem 1.2rem;
   text-align: center;
   font-size: medium;
   color: #A0A3A3;
@@ -113,14 +113,11 @@ $sidePanelLabelFontColor: #171716;
 }
 
 .categorySpacer {
-  @include u-bg('gray-cool-3');
-
   @include typeset('sans', '2xs', 2);
   @include u-text('bold'); 
 
-  margin: 0 -20px 1rem -20px;
+  margin-left: -20px;
-  @include u-padding-top(2);
+  @include u-padding-top(1);
-  @include u-padding-bottom(2);
+  @include u-padding-bottom(1);
   @include u-padding-left(2.5);
-  
 }

client/src/components/Category/Category.module.scss

@@ -7,4 +7,13 @@
     .category {
         flex-basis: 80%;
     }
-}
+}
+
+.disCategoryContainer {
+    display: flex;
+    justify-content: space-between;
+
+    .category {
+        flex-basis: 80%;
+    }
+}

client/src/components/Category/Category.module.scss.d.ts

@@ -2,7 +2,7 @@ declare namespace CategoryNamespace {
     export interface ICategoryScss {
         categoryContainer: string;
         category:string;
-        disadvantageDot: string;
+        disCategoryContainer: string;
     }
   }
 

client/src/components/Category/Category.tsx

@@ -8,8 +8,32 @@ interface ICategory {
     isDisadvantaged: boolean | null;
 }
 
+/**
+ * This component controls the Categories on the side panel.
+ *
+ * The category will be styled differently differently depending on
+ * if the category is disadvantaged or not. The JSX in the return
+ * statement is identical however in the global CSS file, we
+ * override the disadvantaged case with a psuedo-selector (:has) that
+ * is new. In order to fallback gracefully for browsers that do
+ * not yet support the ":has" psuedo selector, this redundant JSX
+ * will allow the disadvantaged case show the older category styling
+ * while browsers that do support the ":has" psuedo selector will
+ * render the newer category style.
+ *
+ * @param {string} name
+ * @param {boolean} isDisadvagtaged
+ * @return {JSX.Element}
+ */
 const Category = ({name, isDisadvantaged}:ICategory) => {
-  return (
+  return isDisadvantaged ? (
+    <div className={styles.disCategoryContainer}>
+      <div className={styles.category}>
+        {name}
+      </div>
+      <DisadvantageDot isDisadvantaged={isDisadvantaged}/>
+    </div>
+  ) : (
     <div className={styles.categoryContainer}>
       <div className={styles.category}>
         {name}
@@ -18,5 +42,4 @@ const Category = ({name, isDisadvantaged}:ICategory) => {
     </div>
   );
 };
-
 export default Category;

client/src/components/DisadvantageDot/DisadvantageDot.module.scss

@@ -1,4 +1,5 @@
 @use '../../styles/design-system.scss' as *;
+@import "../utils.scss";
 
 .disadvantagedDotSmall {
     @include u-circle('105');
@@ -12,7 +13,7 @@
     @include u-circle(4);
     margin: 2.3rem 1.5rem 2rem 0;
     // opacity: .6;
-    border: 3px solid #1A4480;
+    border: 3px solid $disadvantagedDotColor;
     
     //Maintain aspect ratio as screen width decreases
     flex: 1 0 2rem;

client/src/components/Indicator/Indicator.module.scss

@@ -1,6 +1,11 @@
 @use '../../styles/design-system.scss' as *;
 @import "../utils.scss";
 
+@mixin indicatorPadding {
+  @include u-padding-left("05");
+  @include u-padding-right("05");
+}
+
 @mixin indicator {
   display: flex;
   flex-direction: column;
@@ -19,12 +24,11 @@
     }
     
     .indicatorName {
-      // flex: 0 1 77%;
+      flex-basis: 55%;
-      flex-basis: 60%;
       display: flex;
       flex-direction: column;
       @include typeset('sans', '2xs', 2);
-      @include u-text('medium'); 
+      @include u-text('bold'); 
       
       .indicatorDesc {
         @include typeset('sans', '3xs', 2); 
@@ -40,14 +44,23 @@
     .indicatorValueCol {
       display: flex;
       flex-direction: column;
+      @include typeset('sans', '2xs', 2);
+      @include u-text('bold'); 
+      width: 40%;
 
       .indicatorValueRow {
         display: flex;
         align-self: end;
 
         .indicatorValue {
-          margin-left: 2.2rem;
+          @include indicatorPadding();
-        } 
+        }
+        
+        .disIndicatorValue {
+          @include indicatorPadding();
+          color: white;
+          background-color: $disadvantagedDotColor;
+        }
 
         .indicatorArrow {
           margin-bottom: -.375rem;
@@ -59,18 +72,18 @@
 
           }
           .unavailable {
-            opacity: .2;
+            opacity: .6;
           }
         }
       }
       
       .indicatorValueSubText{
-        display: flex;
+        // display: flex;
-        flex-direction: column;
+        // flex-direction: column;
-        align-self: flex-end;
+        // align-self: flex-start;
         text-align: right;
-        @include u-width(8);
+        // @include u-width(8);
-        @include typeset('sans', '3xs', 2);
+        @include typeset('sans', 'micro', 2);
         @include u-text('thin'); 
       }
     }
@@ -81,31 +94,5 @@
 //Indicator box styles
 .indicatorBoxMain {
   @include indicator;
+  @include u-color('gray-warm-90');
 }
-
-.disadvantagedIndicator {
-  @include indicator;
-  @include u-bg('blue-warm-10');
-
-  // A darker bg color:
-  // background-color: #D2DAE3;
-
-  // Add a border
-  // border: 1px solid #1A4480;
-
-  margin: 0 -20px 1px -20px;
-  @include u-padding-left(2.5);
-  @include u-padding-right(2.5);
-
-
-  // Overwrite indicator mixin with bolder fonts for disadv. indicator 
-  .indicatorRow {
-    .indicatorName {
-      @include u-text('bold'); 
-      
-      .indicatorDesc {
-        @include u-text('normal'); 
-      }
-    }
-  }
-}

client/src/components/Indicator/Indicator.module.scss.d.ts

@@ -7,6 +7,7 @@ declare namespace IndicatorNamespace {
       indicatorValueCol:string;
       indicatorValueRow:string;
       indicatorValue:string;
+      disIndicatorValue:string;
       indicatorSuperscript:string;
       indicatorArrow:string;
       unavailable:string;

client/src/components/Indicator/Indicator.test.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import {render, screen} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import {LocalizedComponent} from '../../test/testHelpers';
-import Indicator, {IndicatorValueIcon, IndicatorValueSubText, IndicatorValue} from './Indicator';
+import Indicator, {IndicatorValueSubText, IndicatorValue} from './Indicator';
 import {indicatorInfo} from '../AreaDetail/AreaDetail';
 
-import * as EXPLORE_COPY from '../../data/copy/explore';
-
 describe('rendering of the Indicator', () => {
   it('checks if component renders', () => {
     const highSchool:indicatorInfo = {
@@ -46,76 +44,19 @@ describe('rendering of the Indicator', () => {
   });
 });
 
-describe('test rendering of Indicator value icons', () => {
+// describe('test rendering of Indicator value icons', () => {
-  it('renders the up arrow when value is above threshold', () => {
+//   it('renders the unavailable icon when the value is null', () => {
-    const {asFragment} = render(
+//     const {asFragment} = render(
-        <LocalizedComponent>
+//         <LocalizedComponent>
-          <IndicatorValueIcon
+//           <IndicatorValueIcon
-            type='percent'
+//             value={null}
-            value={90}
+//           />
-            isAboveThresh={true}
+//         </LocalizedComponent>,
-          />
+//     );
-        </LocalizedComponent>,
+//     expect(asFragment()).toMatchSnapshot();
-    );
+//     screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage);
-    expect(asFragment()).toMatchSnapshot();
+//   });
-    screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_UP.defaultMessage);
+// });
-  });
-  it('renders the down arrow when the value is above the threshold', () => {
-    const {asFragment} = render(
-        <LocalizedComponent>
-          <IndicatorValueIcon
-            type='percentile'
-            value={13}
-            isAboveThresh={false}
-          />
-        </LocalizedComponent>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN.defaultMessage);
-  });
-
-  it('renders the down arrow when the value is zero', () => {
-    const {asFragment} = render(
-        <LocalizedComponent>
-          <IndicatorValueIcon
-            type='percentile'
-            value={0}
-            isAboveThresh={false}
-          />
-        </LocalizedComponent>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN.defaultMessage);
-  });
-
-  it('renders the unavailable icon when the value is a boolean null', () => {
-    const {asFragment} = render(
-        <LocalizedComponent>
-          <IndicatorValueIcon
-            type='boolean'
-            value={null}
-            isAboveThresh={false}
-          />
-        </LocalizedComponent>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage);
-  });
-
-  it('renders the unavailable icon when the value is a percentile null', () => {
-    const {asFragment} = render(
-        <LocalizedComponent>
-          <IndicatorValueIcon
-            type='percentile'
-            value={null}
-            isAboveThresh={false}
-          />
-        </LocalizedComponent>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage);
-  });
-});
 
 describe('test rendering of Indicator value sub-text', () => {
   it('renders the "above 90 percentile"', () => {

client/src/components/Indicator/Indicator.tsx

@@ -8,20 +8,14 @@ import * as constants from '../../data/constants';
 import * as EXPLORE_COPY from '../../data/copy/explore';
 
 // @ts-ignore
-import downArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_downward.svg';
+// import unAvailable from '/node_modules/uswds/dist/img/usa-icons/error_outline.svg';
-// @ts-ignore
-import upArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_upward.svg';
-// @ts-ignore
-import unAvailable from '/node_modules/uswds/dist/img/usa-icons/do_not_disturb.svg';
 
 interface IIndicator {
   indicator: indicatorInfo,
 }
 
 interface IIndicatorValueIcon {
-  type: indicatorType,
   value: number | null,
-  isAboveThresh: boolean,
 };
 
 interface IIndicatorValueSubText {
@@ -37,31 +31,18 @@ interface IIndicatorValue {
 }
 
 /**
- * This component will determine what indicator's icon should be (arrowUp, arrowDown or unavailable) and
+ * This component will determine what indicator's icon should be. ATM there are no icons to show, however
- * return the appropriate JSX.
+ * this may change and so leaving a place holder function here for easy change in the future
  *
- * @param {number | null} props
+ * @param {number | null} value
  * @return {JSX.Element}
  */
-export const IndicatorValueIcon = ({type, value, isAboveThresh}: IIndicatorValueIcon) => {
+export const IndicatorValueIcon = ({value}: IIndicatorValueIcon) => {
-  const intl = useIntl();
+  return value === null ? <></> : <></>;
-
+  // <img className={styles.unavailable}
-  if (value == null) {
+  //   src={unAvailable}
-    return <img className={styles.unavailable}
+  //   alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)}
-      src={unAvailable}
+  // />
-      alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)}
-    />;
-  } else if (type === 'percent' || type === 'percentile') {
-    return isAboveThresh ?
-      <img
-        src={upArrow}
-        alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_UP)}
-      /> :
-      <img
-        src={downArrow}
-        alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN)}
-      />;
-  } else return <></>;
 };
 
 /**
@@ -155,7 +136,7 @@ export const superscriptOrdinal = (indicatorValueWithSuffix:string) => {
 export const IndicatorValue = ({type, displayStat}:IIndicatorValue) => {
   const intl = useIntl();
 
-  if (displayStat === null) return <React.Fragment></React.Fragment>;
+  if (displayStat === null) return <>{constants.MISSING_DATA_STRING}</>;
 
   if (type === 'percent' || type === 'percentile') {
     // In this case we will show no value and an icon only
@@ -228,7 +209,7 @@ const Indicator = ({indicator}:IIndicator) => {
 
   return (
     <li
-      className={indicator.isDisadvagtaged ? styles.disadvantagedIndicator : styles.indicatorBoxMain}
+      className={styles.indicatorBoxMain}
       data-cy={'indicatorBox'}
       data-testid='indicator-box'>
       <div className={styles.indicatorRow}>
@@ -246,7 +227,9 @@ const Indicator = ({indicator}:IIndicator) => {
           <div className={styles.indicatorValueRow}>
 
             {/* Indicator value */}
-            <div className={styles.indicatorValue}>
+            <div className={indicator.isDisadvagtaged ?
+              styles.disIndicatorValue : styles.indicatorValue}
+            >
               <IndicatorValue
                 type={indicator.type}
                 displayStat={displayStat}
@@ -256,9 +239,7 @@ const Indicator = ({indicator}:IIndicator) => {
             {/* Indicator icon - up arrow, down arrow, or unavailable */}
             <div className={styles.indicatorArrow}>
               <IndicatorValueIcon
-                type={indicator.type}
                 value={displayStat}
-                isAboveThresh={isAboveThresh}
               />
             </div>
           </div>

client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap

@@ -20,12 +20,7 @@ exports[`rendering of the Indicator checks if component renders 1`] = `
               97%
             </span>
           </div>
-          <div>
+          <div />
-            <img
-              alt="an icon for the up arrow"
-              src="test-file-stub"
-            />
-          </div>
         </div>
         <div>
           <div>
@@ -62,12 +57,7 @@ exports[`rendering of the Indicator checks if the flooring function works 1`] =
               42%
             </span>
           </div>
-          <div>
+          <div />
-            <img
-              alt="an icon for the up arrow"
-              src="test-file-stub"
-            />
-          </div>
         </div>
         <div>
           <div>
@@ -99,13 +89,10 @@ exports[`renders value correctly for Former defense sites checks if it renders n
       </div>
       <div>
         <div>
-          <div />
           <div>
-            <img
+            --
-              alt="an icon to represent data is unavailable"
-              src="test-file-stub"
-            />
           </div>
+          <div />
         </div>
         <div>
           <div>
@@ -187,13 +174,10 @@ exports[`renders value correctly for abandoned land mines checks if it renders n
       </div>
       <div>
         <div>
-          <div />
           <div>
-            <img
+            --
-              alt="an icon to represent data is unavailable"
-              src="test-file-stub"
-            />
           </div>
+          <div />
         </div>
         <div>
           <div>
@@ -275,13 +259,10 @@ exports[`renders value correctly for historic underinvest. checks if it renders
       </div>
       <div>
         <div>
-          <div />
           <div>
-            <img
+            --
-              alt="an icon to represent data is unavailable"
-              src="test-file-stub"
-            />
           </div>
+          <div />
         </div>
         <div>
           <div>
@@ -348,51 +329,6 @@ exports[`renders value correctly for historic underinvest. checks if it renders
 </DocumentFragment>
 `;
 
-exports[`test rendering of Indicator value icons renders the down arrow when the value is above the threshold 1`] = `
-<DocumentFragment>
-  <img
-    alt="an icon for the down arrow"
-    src="test-file-stub"
-  />
-</DocumentFragment>
-`;
-
-exports[`test rendering of Indicator value icons renders the down arrow when the value is zero 1`] = `
-<DocumentFragment>
-  <img
-    alt="an icon for the down arrow"
-    src="test-file-stub"
-  />
-</DocumentFragment>
-`;
-
-exports[`test rendering of Indicator value icons renders the unavailable icon when the value is a boolean null 1`] = `
-<DocumentFragment>
-  <img
-    alt="an icon to represent data is unavailable"
-    src="test-file-stub"
-  />
-</DocumentFragment>
-`;
-
-exports[`test rendering of Indicator value icons renders the unavailable icon when the value is a percentile null 1`] = `
-<DocumentFragment>
-  <img
-    alt="an icon to represent data is unavailable"
-    src="test-file-stub"
-  />
-</DocumentFragment>
-`;
-
-exports[`test rendering of Indicator value icons renders the up arrow when value is above threshold 1`] = `
-<DocumentFragment>
-  <img
-    alt="an icon for the up arrow"
-    src="test-file-stub"
-  />
-</DocumentFragment>
-`;
-
 exports[`test rendering of Indicator value sub-text renders missing data  1`] = `
 <DocumentFragment>
   <div>
@@ -429,7 +365,11 @@ exports[`test rendering of Indicator value sub-text renders the "below 90 percen
 </DocumentFragment>
 `;
 
-exports[`test that the unit suffix renders correctly renders correctly when the value is a null 1`] = `<DocumentFragment />`;
+exports[`test that the unit suffix renders correctly renders correctly when the value is a null 1`] = `
+<DocumentFragment>
+  --
+</DocumentFragment>
+`;
 
 exports[`test that the unit suffix renders correctly renders correctly when the value is a percent 1`] = `
 <DocumentFragment>

client/src/components/utils.scss

@@ -6,10 +6,10 @@
 */
 
 //Styles associated with the side panel
-$sidePanelBorderColor: #f2f2f2;
+$sidePanelBorderColor: #F2F2F2;
 $sidePanelBorder: 2px solid $sidePanelBorderColor;
-$mobileBreakpoint: 400px;
+$mobileBreakpoint: 400px; // Todo replace with USWDS breakpoint
-$featureSelectBorderColor: #00bde3;
+$disadvantagedDotColor: #1A4480;
 $additionalCardsBGColor: #FAFAFA;
 $sidePanelLabelFontColor: #171716;
 
@@ -21,6 +21,6 @@ $sidePanelLabelFontColor: #171716;
   
 
 //Styles with Dataset container
-$datasetContainerColor: #eef6fb;
+$datasetContainerColor: #EEF6FB;
-$headingFontColor: #122e51;
+$headingFontColor: #122E51;
-$j40AlertWarningColor: #faf3d1;
+$j40AlertWarningColor: #FAF3D1;

client/src/data/constants.tsx

@@ -25,6 +25,8 @@ export type J40Properties = { [key: string]: any };
 
 // ****** SIDE PANEL BACKEND SIGNALS ***********
 
+export const MISSING_DATA_STRING = '--';
+
 // Tribal signals
 export const TRIBAL_ID = 'tribalId';
 export const LAND_AREA_NAME = 'landAreaName';

client/src/data/copy/explore.tsx

@@ -293,7 +293,13 @@ export const SIDE_PANEL_VERION = {
     defaultMessage={ 'Methodology version {version}'}
     description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the methodology version number`}
     values= {{
-      version: <FormattedNumber value={METHODOLOGY_COPY.VERSION_NUMBER}/>,
+      /**
+       * FormattedNumber currently renders 1.0 as 1. When the version number has a decimal point add back the
+       * Formatted Message component. Using toFixed will render the desire, however it returns a string which
+       * is unacceptable by the value prop of FormattedNumber.
+       */
+      // version: <FormattedNumber value={METHODOLOGY_COPY.VERSION_NUMBER} style="decimal"/>,
+      version: METHODOLOGY_COPY.VERSION_NUMBER,
     }}
   />,
 };
@@ -495,20 +501,20 @@ export const SIDE_PANEL_CATEGORY = defineMessages({
   },
   CLEAN_ENERGY: {
     id: 'explore.map.page.side.panel.indicator.title.clean.energy',
-    defaultMessage: 'Clean energy and energy efficiency',
+    defaultMessage: 'Energy',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Clean, efficient energy title
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Energy title
 `,
   },
-  CLEAN_TRANSPORT: {
+  HEALTH_BURDEN: {
-    id: 'explore.map.page.side.panel.indicator.title.clean.transport',
+    id: 'explore.map.page.side.panel.indicator.title.health.burden',
-    defaultMessage: 'Clean transit',
+    defaultMessage: 'Health',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Clean transportation title
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Healt title
 `,
   },
   SUSTAIN_HOUSE: {
     id: 'explore.map.page.side.panel.indicator.title.sustain.house',
-    defaultMessage: 'Sustainable housing',
+    defaultMessage: 'Housing',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Sustainable housing title
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing title
 `,
   },
   LEG_POLLUTE: {
@@ -517,16 +523,16 @@ export const SIDE_PANEL_CATEGORY = defineMessages({
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Legacy pollution title
 `,
   },
-  CLEAN_WATER: {
+  CLEAN_TRANSPORT: {
-    id: 'explore.map.page.side.panel.indicator.title.clean.water',
+    id: 'explore.map.page.side.panel.indicator.title.clean.transport',
-    defaultMessage: 'Clean water and wastewater infrastructure',
+    defaultMessage: 'Transportation',
-    description: `Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show Clean water and waste title
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Transportation title
 `,
   },
-  HEALTH_BURDEN: {
+  CLEAN_WATER: {
-    id: 'explore.map.page.side.panel.indicator.title.health.burden',
+    id: 'explore.map.page.side.panel.indicator.title.clean.water',
-    defaultMessage: 'Health burdens',
+    defaultMessage: 'Water',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Health burdens title
+    description: `Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show Water title
 `,
   },
   WORK_DEV: {
@@ -544,6 +550,7 @@ export const SIDE_PANEL_CATEGORY = defineMessages({
 });
 
 export const SIDE_PANEL_INDICATORS = defineMessages({
+  // Climate Change
   EXP_AG_LOSS: {
     id: 'explore.map.page.side.panel.indicator.exp.ag.loss',
     defaultMessage: 'Expected agriculture loss rate',
@@ -561,12 +568,12 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
   },
   FLOODING: {
     id: 'explore.map.page.side.panel.indicator.flooding',
-    defaultMessage: 'Future flood risk',
+    defaultMessage: 'Projected flood risk',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show flood risk`,
   },
   WILDFIRE: {
     id: 'explore.map.page.side.panel.indicator.wildfire',
-    defaultMessage: 'Future wildfire risk',
+    defaultMessage: 'Projected wildfire risk',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk`,
   },
   LOW_INCOME: {
@@ -578,96 +585,20 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
     defaultMessage: 'Higher education non-enrollment',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Higher ed degree achievement rate`,
   },
-  ENERGY_BURDEN: {
+
+  // Energy
+  ENERGY_COST: {
     id: 'explore.map.page.side.panel.indicator.energyBurden',
-    defaultMessage: 'Energy burden',
+    defaultMessage: 'Energy cost',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Energy burden`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Energy cost`,
   },
   PM_2_5: {
     id: 'explore.map.page.side.panel.indicator.pm25',
     defaultMessage: 'PM2.5 in the air',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show PM2.5 in the air`,
   },
-  DIESEL_PARTICULATE_MATTER: {
+
-    id: 'explore.map.page.side.panel.indicator.dieselPartMatter',
+  // Health
-    defaultMessage: 'Diesel particulate matter exposure',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Diesel particulate matter exposure`,
-  },
-  BARRIER_TRANS: {
-    id: 'explore.map.page.side.panel.indicator.barrier.transport',
-    defaultMessage: 'Transportation barriers',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show transportation barriers`,
-  },
-  TRAFFIC_VOLUME: {
-    id: 'explore.map.page.side.panel.indicator.trafficVolume',
-    defaultMessage: 'Traffic proximity and volume',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Traffic proximity and volume`,
-  },
-  LEAD_PAINT: {
-    id: 'explore.map.page.side.panel.indicator.leadPaint',
-    defaultMessage: 'Lead paint',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Lead paint`,
-  },
-  MED_HOME_VAL: {
-    id: 'explore.map.page.side.panel.indicator.med.home.val',
-    defaultMessage: 'Median home value',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing cost burden`,
-  },
-  HIST_UNDERINVEST: {
-    id: 'explore.map.page.side.panel.indicator.historic.underinvest',
-    defaultMessage: 'Historic underinvestment',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Historic underinvestment`,
-  },
-  HOUSE_BURDEN: {
-    id: 'explore.map.page.side.panel.indicator.houseBurden',
-    defaultMessage: 'Housing cost burden',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing cost burden`,
-  },
-  LACK_GREEN_SPACE: {
-    id: 'explore.map.page.side.panel.indicator.lack.green.space',
-    defaultMessage: 'Lack of green space',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Lack of green space`,
-  },
-  LACK_PLUMBING: {
-    id: 'explore.map.page.side.panel.indicator.lack.plumbing',
-    defaultMessage: 'Lack of plumbing',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Lack of plumbing`,
-  },
-  ABANDON_MINES: {
-    id: 'explore.map.page.side.panel.indicator.abandon.mines',
-    defaultMessage: 'Abandoned mine lands',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Abandoned land mines`,
-  },
-  FORMER_DEF_SITES: {
-    id: 'explore.map.page.side.panel.indicator.former.def.sites',
-    defaultMessage: 'Formerly Used Defense Sites (FUDS)',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Formerly Used Defense Sites (FUDS)`,
-  },
-  PROX_HAZ: {
-    id: 'explore.map.page.side.panel.indicator.prox.haz',
-    defaultMessage: 'Proximity to hazardous waste facilities',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Proximity to hazardous waste facilities`,
-  },
-  PROX_NPL: {
-    id: 'explore.map.page.side.panel.indicator.prox.npl',
-    defaultMessage: 'Proximity to National Priorities List (NPL) sites',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Count of proposed or listed NPL `,
-  },
-  PROX_RMP: {
-    id: 'explore.map.page.side.panel.indicator.prox.rmp',
-    defaultMessage: 'Proximity to Risk Management Plan (RMP) facilities',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Count of proposed or listed RMP`,
-  },
-  LEAKY_TANKS: {
-    id: 'explore.map.page.side.panel.indicator.leaky.tanks',
-    defaultMessage: 'Leaking underground storage tanks',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Leaking underground storage tanks`,
-  },
-  WASTE_WATER: {
-    id: 'explore.map.page.side.panel.indicator.wasteWater',
-    defaultMessage: 'Wastewater discharge',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Wastewater discharge`,
-  },
   ASTHMA: {
     id: 'explore.map.page.side.panel.indicator.asthma',
     defaultMessage: 'Asthma',
@@ -688,31 +619,123 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
     defaultMessage: 'Low life expectancy',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Low life expectancy`,
   },
-  LOW_MED_INC: {
+
-    id: 'explore.map.page.side.panel.indicator.low.med.income',
+  // Housing
-    defaultMessage: 'Low median income',
+  HIST_UNDERINVEST: {
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Low median income`,
+    id: 'explore.map.page.side.panel.indicator.historic.underinvest',
+    defaultMessage: 'Historic underinvestment',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Historic underinvestment`,
   },
+  HOUSE_COST: {
+    id: 'explore.map.page.side.panel.indicator.house.cost',
+    defaultMessage: 'Housing cost',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing cost`,
+  },
+  LACK_GREEN_SPACE: {
+    id: 'explore.map.page.side.panel.indicator.lack.green.space',
+    defaultMessage: 'Lack of green space',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Lack of green space`,
+  },
+  LACK_PLUMBING: {
+    id: 'explore.map.page.side.panel.indicator.lack.plumbing',
+    defaultMessage: 'Lack of plumbing',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Lack of plumbing`,
+  },
+  LEAD_PAINT: {
+    id: 'explore.map.page.side.panel.indicator.leadPaint',
+    defaultMessage: 'Lead paint',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Lead paint`,
+  },
+  MED_HOME_VAL: {
+    id: 'explore.map.page.side.panel.indicator.med.home.val',
+    defaultMessage: 'Median home value',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing cost burden`,
+  },
+
+  // Legacy Pollution
+  ABANDON_MINES: {
+    id: 'explore.map.page.side.panel.indicator.abandon.mines',
+    defaultMessage: 'Abandoned mine lands',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Abandoned land mines`,
+  },
+  FORMER_DEF_SITES: {
+    id: 'explore.map.page.side.panel.indicator.former.def.sites',
+    defaultMessage: 'Formerly Used Defense Sites',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Formerly Used Defense Sites`,
+  },
+  PROX_HAZ: {
+    id: 'explore.map.page.side.panel.indicator.prox.haz',
+    defaultMessage: 'Proximity to hazardous waste facilities',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Proximity to hazardous waste facilities`,
+  },
+  PROX_RMP: {
+    id: 'explore.map.page.side.panel.indicator.prox.rmp',
+    defaultMessage: 'Proximity to Risk Management Plan facilities',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Count of proposed or listed RMP`,
+  },
+  PROX_NPL: {
+    id: 'explore.map.page.side.panel.indicator.prox.npl',
+    defaultMessage: 'Proximity to Superfund sites',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Count of proposed or listed NPL `,
+  },
+
+  // Transportation
+  DIESEL_PARTICULATE_MATTER: {
+    id: 'explore.map.page.side.panel.indicator.dieselPartMatter',
+    defaultMessage: 'Diesel particulate matter exposure',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Diesel particulate matter exposure`,
+  },
+  BARRIER_TRANS: {
+    id: 'explore.map.page.side.panel.indicator.barrier.transport',
+    defaultMessage: 'Transportation barriers',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show transportation barriers`,
+  },
+  TRAFFIC_VOLUME: {
+    id: 'explore.map.page.side.panel.indicator.trafficVolume',
+    defaultMessage: 'Traffic proximity and volume',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Traffic proximity and volume`,
+  },
+
+  // Water
+  LEAKY_TANKS: {
+    id: 'explore.map.page.side.panel.indicator.leaky.tanks',
+    defaultMessage: 'Leaking underground storage tanks',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Leaking underground storage tanks`,
+  },
+  WASTE_WATER: {
+    id: 'explore.map.page.side.panel.indicator.wasteWater',
+    defaultMessage: 'Wastewater discharge',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Wastewater discharge`,
+  },
+
+  // Workforce development
   LING_ISO: {
     id: 'explore.map.page.side.panel.indicator.ling.iso',
     defaultMessage: 'Linguistic isolation',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Linguistic isolation`,
   },
-  UNEMPLOY: {
+  LOW_MED_INC: {
-    id: 'explore.map.page.side.panel.indicator.unemploy',
+    id: 'explore.map.page.side.panel.indicator.low.med.income',
-    defaultMessage: 'Unemployment',
+    defaultMessage: 'Low median income',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Unemployment`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Low median income`,
   },
   POVERTY: {
     id: 'explore.map.page.side.panel.indicator.poverty',
     defaultMessage: 'Poverty',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Unemployment`,
   },
+  UNEMPLOY: {
+    id: 'explore.map.page.side.panel.indicator.unemploy',
+    defaultMessage: 'Unemployment',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Unemployment`,
+  },
   HIGH_SCL: {
     id: 'explore.map.page.side.panel.indicator.high.school',
-    defaultMessage: 'High school degree non-attainment',
+    defaultMessage: 'High school education',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show High school degree achievement rate`,
   },
+
+  // Testing
   ADJ: {
     id: 'explore.map.page.side.panel.indicator.adjacency',
     defaultMessage: 'Adjacency',
@@ -772,23 +795,23 @@ export const SIDE_PANEL_VALUES = {
 };
 
 export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
+  // Climate change
   EXP_AG_LOSS: {
     id: 'explore.map.page.side.panel.indicator.description.exp.ag.loss',
-    defaultMessage: 'Economic loss rate to agricultural value resulting from natural hazards each year',
+    defaultMessage: 'Economic loss to agricultural value resulting from natural hazards each year',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Economic loss rate to agriculture resulting from natural hazards
     `,
-
   },
   EXP_BLD_LOSS: {
     id: 'explore.map.page.side.panel.indicator.description.exp.bld.loss',
-    defaultMessage: 'Economic loss rate to agricultural value resulting from natural hazards each year',
+    defaultMessage: 'Economic loss to agricultural value resulting from natural hazards each year',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side 
     panel will show an indicator description of Economic loss rate to buildings resulting from natural hazards`,
   },
   EXP_POP_LOSS: {
     id: 'explore.map.page.side.panel.indicator.description.exp.pop.loss',
     defaultMessage: `
-      Rate of fatalities and injuries resulting from natural hazards each year
+      Fatalities and injuries resulting from natural hazards each year
     `,
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Economic loss rate to the population in fatalities and 
       injuries resulting from natural hazards`,
@@ -810,9 +833,9 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
   LOW_INCOME: {
     id: 'explore.map.page.side.panel.indicator.description.low.income',
     defaultMessage: `
-      Household income is less than or equal to twice the federal poverty level 
+     People in households where income is less than or equal to twice the federal poverty level, not including students enrolled in higher ed 
     `,
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Household income is less than or equal to twice the federal poverty level`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description ofPeople in households where income is less than or equal to twice the federal poverty level, not including students enrolled in higher ed`,
   },
   HIGH_ED: {
     id: 'explore.map.page.side.panel.indicator.description.high.ed',
@@ -823,71 +846,79 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Percent of the census tract's population 15 or older not 
       enrolled in college, university, or graduate school`,
   },
-  ENERGY_BURDEN: {
+
-    id: 'explore.map.page.side.panel.indicator.description.energyBurden',
+  // Energy
+  ENERGY_COST: {
+    id: 'explore.map.page.side.panel.indicator.description.energy.cost',
     defaultMessage: 'Average annual energy costs divided by household income',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Energy costs divided by household income`,
   },
   PM_2_5: {
     id: 'explore.map.page.side.panel.indicator.description.pm25',
-    defaultMessage: 'Fine inhalable particles, 2.5 micrometers or smaller',
+    defaultMessage: 'Level of inhalable particles, 2.5 micrometers or smaller',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Fine inhalable particles, 2.5 micrometers and smaller`,
   },
 
-  DIESEL_PARTICULATE_MATTER: {
+  // Health
-    id: 'explore.map.page.side.panel.indicator.description.dieselPartMatter',
+  ASTHMA: {
-    defaultMessage: 'Diesel exhaust in the air',
+    id: 'explore.map.page.side.panel.indicator.description.asthma',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Diesel exhaust in the air`,
+    defaultMessage: 'Share of people who have been told they have asthma',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of people who have been told they have asthma`,
   },
-  BARRIER_TRANS: {
+  DIABETES: {
-    id: 'explore.map.page.side.panel.indicator.description.barrierTrans',
+    id: 'explore.map.page.side.panel.indicator.description.diabetes',
-    defaultMessage: 'Cost and time spent on transportation',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Cost and time spent on transportation`,
-  },
-  TRAFFIC_VOLUME: {
-    id: 'explore.map.page.side.panel.indicator.description.trafficVolume',
-    defaultMessage: 'Count of vehicles at major roads within 500 meters',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Count of vehicles at major roads within 500 meters`,
-  },
-
-  LEAD_PAINT: {
-    id: 'explore.map.page.side.panel.indicator.description.leadPaint',
     defaultMessage: `
-      Percentile of number of homes built before 1960 that are not among the most expensive
+      Share of people ages 18 years and older who have diabetes
     `,
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Pre-1960 housing`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of people ages 18 years and older who have diabetes`,
+  },
+  HEART_DISEASE: {
+    id: 'explore.map.page.side.panel.indicator.description.heartDisease',
+    defaultMessage: `Share of people ages 18 years and older who have been told they have heart disease`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of people ages 18 years and older who have been told they have heart disease`,
+  },
+  LOW_LIFE_EXPECT: {
+    id: 'explore.map.page.side.panel.indicator.description.lifeExpect',
+    defaultMessage: 'Average number of years a person can expect to live',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Average number of years of life a person can expect to live`,
   },
-  MED_HOME_VAL: {
-    id: 'explore.map.page.side.panel.indicator.description.med.home.val',
-    defaultMessage: 'Median home value in area',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Median home value in area`,
 
-  },
+  // Housing
   HIST_UNDERINVEST: {
     id: 'explore.map.page.side.panel.indicator.description.historic.underinvestment',
     defaultMessage: 'Census tracts with historically high barriers to accessing home loans',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Low income households spending more than 30% of income housing`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Census tracts with historically high barriers to accessing home loans`,
   },
-  HOUSE_BURDEN: {
+  HOUSE_COST: {
-    id: 'explore.map.page.side.panel.indicator.description.houseBurden',
+    id: 'explore.map.page.side.panel.indicator.description.house.cost',
-    defaultMessage: 'Low income households spending more than 30% of income on housing',
+    defaultMessage: `Share of households making less than 80% of the area median family income and spending more than 30% of income on housing
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Low income households spending more than 30% of income housing`,
+    `,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of households making less than 80% of the area median family income and spending more than 30% of income on housing`,
   },
   LACK_GREEN_SPACE: {
     id: 'explore.map.page.side.panel.indicator.description.lack.green.space',
-    defaultMessage: 'Amount of non-crop land covered with artificial materials like pavement and concrete',
+    defaultMessage: 'Share of land covered with artificial materials like concrete or pavement and crop land',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description Amount of non-crop land covered with artificial materials like pavement and concrete`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description Share of land covered with artificial materials like concrete or pavement and crop land`,
   },
   LACK_PLUMBING: {
     id: 'explore.map.page.side.panel.indicator.description.lack.plumbing',
     defaultMessage: 'Share of homes without indoor kitchens or plumbing',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of homes without indoor kitchens or plumbing`,
   },
+  LEAD_PAINT: {
+    id: 'explore.map.page.side.panel.indicator.description.leadPaint',
+    defaultMessage: `
+      Share of homes that are not very expensive and are likely to have lead paint
+    `,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of homes that are not very expensive and are likely to have lead paint   
+    `,
+  },
 
+  // Legacy Pollution
   ABANDON_MINES: {
     id: 'explore.map.page.side.panel.indicator.description.abandon.mines',
-    defaultMessage: 'Presence of an abandoned land mine within the tract',
+    defaultMessage: 'Presence of an abandoned mine lands within the tract',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of an abandoned land mine within the tract`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of an abandoned mine lands within the tract`,
   },
   FORMER_DEF_SITES: {
     id: 'explore.map.page.side.panel.indicator.description.former.def.sites',
@@ -899,88 +930,83 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
     defaultMessage: 'Count of hazardous waste facilities within 5 kilometers',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Count of hazardous waste facilities within 5 kilometers`,
   },
-  PROX_NPL: {
-    id: 'explore.map.page.side.panel.indicator.description.prox.npl',
-    defaultMessage: 'Proposed or listed NPL (Superfund) sites within 5 kilometers',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Proposed or listed NPL (Superfund) sites within 5 kilometers`,
-  },
   PROX_RMP: {
     id: 'explore.map.page.side.panel.indicator.description.prox.rmp',
-    defaultMessage: 'RMP facilities within 5 kilometers',
+    defaultMessage: 'Count of Risk Management Plan facilities within 5 kilometers',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Risk Management Plan facilities within 5 kilometers`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Count of Risk Management Plan facilities within 5 kilometers`,
+  },
+  PROX_NPL: {
+    id: 'explore.map.page.side.panel.indicator.description.prox.npl',
+    defaultMessage: `Count of proposed or listed Superfund (or National Priorities List) sites within 5 kilometers`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Count of proposed or listed Superfund (or National Priorities List) sites within 5 kilometers`,
   },
 
+  // Transportation
+  DIESEL_PARTICULATE_MATTER: {
+    id: 'explore.map.page.side.panel.indicator.description.dieselPartMatter',
+    defaultMessage: 'Amount of diesel exhaust in the air',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Diesel exhaust in the air`,
+  },
+  BARRIER_TRANS: {
+    id: 'explore.map.page.side.panel.indicator.description.barrierTrans',
+    defaultMessage: 'Average of relative cost and time spent on transportation',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Cost and time spent on transportation`,
+  },
+  TRAFFIC_VOLUME: {
+    id: 'explore.map.page.side.panel.indicator.description.trafficVolume',
+    defaultMessage: 'Count of vehicles at major roads within 500 meters',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Count of vehicles at major roads within 500 meters`,
+  },
+
+  // Water
   LEAKY_TANKS: {
     id: 'explore.map.page.side.panel.indicator.description.leaky.tanks',
-    defaultMessage: `Count of leaking underground storage tanks when compared to all underground storage tanks`,
+    defaultMessage: `Formula that counts leaking underground storage tanks and number of all underground storage tanks within 1500 feet
+    `,
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of leaky storage tanks`,
   },
   WASTE_WATER: {
     id: 'explore.map.page.side.panel.indicator.description.wasteWater',
-    defaultMessage: 'Toxic concentrations at stream segments within 500 meters',
+    defaultMessage: 'Modeled toxic concentrations at parts of streams within 500 meters',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Toxic concentrations at stream segments within 500 meters`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Modeled toxic concentrations at parts of streams within 500 meters`,
   },
 
-  ASTHMA: {
-    id: 'explore.map.page.side.panel.indicator.description.asthma',
-    defaultMessage: 'Weighted percent of people who have been told they have asthma',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Number of people who have been told they have asthma`,
-  },
-  DIABETES: {
-    id: 'explore.map.page.side.panel.indicator.description.diabetes',
-    defaultMessage: `
-      Weighted percent of people ages 18 years and older who have diabetes other than 
-      diabetes during pregnancy
-    `,
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of People ages 18 years and older who have diabetes other than 
-      diabetes during pregnancy`,
-  },
-  HEART_DISEASE: {
-    id: 'explore.map.page.side.panel.indicator.description.heartDisease',
-    defaultMessage: `People ages 18 years and older who have been told they have heart disease`,
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Weighted percent of people ages 18 years and older who have 
-    been told they have heart disease`,
-  },
-  LOW_LIFE_EXPECT: {
-    id: 'explore.map.page.side.panel.indicator.description.lifeExpect',
-    defaultMessage: 'Average number of years a person can expect to live',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Average number of years of life a person can expect to live`,
-  },
 
-  LOW_MED_INCOME: {
+  // Workforce development
-    id: 'explore.map.page.side.panel.indicator.description.low.med.income',
-    defaultMessage: 'Median income calculated as a percent of the area’s median income',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Median income calculated as a percent of the area’s median income`,
-  },
   LING_ISO: {
     id: 'explore.map.page.side.panel.indicator.description.ling.iso',
     defaultMessage: `
-      Percent of households where no one over the age 14 speaks English well
+    Share of households where no one over the age 14 speaks English well
     `,
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Households in which no one age 14 and over speaks English only or also speaks a language other than English`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of households where no one over the age 14 speaks English well`,
   },
-  UNEMPLOY: {
+  LOW_MED_INCOME: {
-    id: 'explore.map.page.side.panel.indicator.description.unemploy',
+    id: 'explore.map.page.side.panel.indicator.description.low.med.income',
-    defaultMessage: 'Number of unemployed people as a percentage of the labor force',
+    defaultMessage: 'Comparison of income in the tract to incomes in the area',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side 
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Comparison of income in the tract to incomes in the area`,
-    panel will show an indicator description of Number of unemployed people as a percentage of the labor force`,
   },
   POVERTY: {
     id: 'explore.map.page.side.panel.indicator.description.poverty',
     defaultMessage: `
-      Percent of a census tract's population in households where the household income is at or below 100% 
+      Share of people in households where the income is at or below 100% of the Federal poverty level 
-      of the Federal poverty level 
     `,
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Percent of individuals in households where the household income is at or below 100% of the federal poverty level`,
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of people in households where the income is at or below 100% of the Federal poverty level`,
+  },
+  UNEMPLOY: {
+    id: 'explore.map.page.side.panel.indicator.description.unemploy',
+    defaultMessage: 'Number of unemployed people as a part of the labor force',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side 
+    panel will show an indicator description of Number of unemployed people as a part of the labor force`,
   },
   HIGH_SKL: {
     id: 'explore.map.page.side.panel.indicator.description.high.school',
     defaultMessage: `
-      Percent of people ages 25 years or older whose education level is less than a high school diploma 
+      Percent of people ages 25 years or older who did not graduate high school 
     `,
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Percent of people ages 25 years or older whose education level 
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Percent of people ages 25 years or older who did not graduate high school`,
-      is less than a high school diploma`,
   },
+
+  // Testing
   ADJ: {
     id: 'explore.map.page.side.panel.indicator.description.ling.iso',
     defaultMessage: `

client/src/data/copy/methodology.tsx

@@ -4,7 +4,7 @@ import {defineMessages} from 'react-intl';
 import {FormattedMessage} from 'gatsby-plugin-intl';
 import {boldFn, linkFn, simpleLink} from './common';
 
-export const VERSION_NUMBER = 0.1;
+export const VERSION_NUMBER = (1.0).toFixed(1);
 
 export const PAGE = defineMessages({
   TILE: {

client/src/images/sidePanelIcons/accordion-minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13H5v-2h14v2z" fill="white"/></svg>

client/src/images/sidePanelIcons/accordion-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="white"/></svg>

client/src/intl/en.json

@@ -572,39 +572,39 @@
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show transportation barriers"
   },
   "explore.map.page.side.panel.indicator.description.abandon.mines": {
-    "defaultMessage": "Presence of an abandoned land mine within the tract",
+    "defaultMessage": "Presence of an abandoned mine lands within the tract",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of an abandoned land mine within the tract"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of an abandoned mine lands within the tract"
   },
   "explore.map.page.side.panel.indicator.description.asthma": {
-    "defaultMessage": "Weighted percent of people who have been told they have asthma",
+    "defaultMessage": "Share of people who have been told they have asthma",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Number of people who have been told they have asthma"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of people who have been told they have asthma"
   },
   "explore.map.page.side.panel.indicator.description.barrierTrans": {
-    "defaultMessage": "Cost and time spent on transportation",
+    "defaultMessage": "Average of relative cost and time spent on transportation",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Cost and time spent on transportation"
   },
   "explore.map.page.side.panel.indicator.description.diabetes": {
-    "defaultMessage": "Weighted percent of people ages 18 years and older who have diabetes other than diabetes during pregnancy",
+    "defaultMessage": "Share of people ages 18 years and older who have diabetes",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of People ages 18 years and older who have diabetes other than \n      diabetes during pregnancy"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of people ages 18 years and older who have diabetes"
   },
   "explore.map.page.side.panel.indicator.description.dieselPartMatter": {
-    "defaultMessage": "Diesel exhaust in the air",
+    "defaultMessage": "Amount of diesel exhaust in the air",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Diesel exhaust in the air"
   },
-  "explore.map.page.side.panel.indicator.description.energyBurden": {
+  "explore.map.page.side.panel.indicator.description.energy.cost": {
     "defaultMessage": "Average annual energy costs divided by household income",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Energy costs divided by household income"
   },
   "explore.map.page.side.panel.indicator.description.exp.ag.loss": {
-    "defaultMessage": "Economic loss rate to agricultural value resulting from natural hazards each year",
+    "defaultMessage": "Economic loss to agricultural value resulting from natural hazards each year",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Economic loss rate to agriculture resulting from natural hazards\n    "
   },
   "explore.map.page.side.panel.indicator.description.exp.bld.loss": {
-    "defaultMessage": "Economic loss rate to agricultural value resulting from natural hazards each year",
+    "defaultMessage": "Economic loss to agricultural value resulting from natural hazards each year",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side \n    panel will show an indicator description of Economic loss rate to buildings resulting from natural hazards"
   },
   "explore.map.page.side.panel.indicator.description.exp.pop.loss": {
-    "defaultMessage": "Rate of fatalities and injuries resulting from natural hazards each year",
+    "defaultMessage": "Fatalities and injuries resulting from natural hazards each year",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Economic loss rate to the population in fatalities and \n      injuries resulting from natural hazards"
   },
   "explore.map.page.side.panel.indicator.description.flooding": {
@@ -616,39 +616,39 @@
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of a Formerly Used Defense Site within the tract"
   },
   "explore.map.page.side.panel.indicator.description.heartDisease": {
-    "defaultMessage": "People ages 18 years and older who have been told they have heart disease",
+    "defaultMessage": "Share of people ages 18 years and older who have been told they have heart disease",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Weighted percent of people ages 18 years and older who have \n    been told they have heart disease"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of people ages 18 years and older who have been told they have heart disease"
   },
   "explore.map.page.side.panel.indicator.description.high.ed": {
     "defaultMessage": "Percent of the census tract's population 15 or older not enrolled in college, university, or graduate school",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Percent of the census tract's population 15 or older not \n      enrolled in college, university, or graduate school"
   },
   "explore.map.page.side.panel.indicator.description.high.school": {
-    "defaultMessage": "Percent of people ages 25 years or older whose education level is less than a high school diploma",
+    "defaultMessage": "Percent of people ages 25 years or older who did not graduate high school",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Percent of people ages 25 years or older whose education level \n      is less than a high school diploma"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Percent of people ages 25 years or older who did not graduate high school"
   },
   "explore.map.page.side.panel.indicator.description.historic.underinvestment": {
     "defaultMessage": "Census tracts with historically high barriers to accessing home loans",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Low income households spending more than 30% of income housing"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Census tracts with historically high barriers to accessing home loans"
   },
-  "explore.map.page.side.panel.indicator.description.houseBurden": {
+  "explore.map.page.side.panel.indicator.description.house.cost": {
-    "defaultMessage": "Low income households spending more than 30% of income on housing",
+    "defaultMessage": "Share of households making less than 80% of the area median family income and spending more than 30% of income on housing",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Low income households spending more than 30% of income housing"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of households making less than 80% of the area median family income and spending more than 30% of income on housing"
   },
   "explore.map.page.side.panel.indicator.description.lack.green.space": {
-    "defaultMessage": "Amount of non-crop land covered with artificial materials like pavement and concrete",
+    "defaultMessage": "Share of land covered with artificial materials like concrete or pavement and crop land",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description Amount of non-crop land covered with artificial materials like pavement and concrete"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description Share of land covered with artificial materials like concrete or pavement and crop land"
   },
   "explore.map.page.side.panel.indicator.description.lack.plumbing": {
     "defaultMessage": "Share of homes without indoor kitchens or plumbing",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of homes without indoor kitchens or plumbing"
   },
   "explore.map.page.side.panel.indicator.description.leadPaint": {
-    "defaultMessage": "Percentile of number of homes built before 1960 that are not among the most expensive",
+    "defaultMessage": "Share of homes that are not very expensive and are likely to have lead paint",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Pre-1960 housing"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of homes that are not very expensive and are likely to have lead paint   \n    "
   },
   "explore.map.page.side.panel.indicator.description.leaky.tanks": {
-    "defaultMessage": "Count of leaking underground storage tanks when compared to all underground storage tanks",
+    "defaultMessage": "Formula that counts leaking underground storage tanks and number of all underground storage tanks within 1500 feet",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of leaky storage tanks"
   },
   "explore.map.page.side.panel.indicator.description.lifeExpect": {
@@ -660,48 +660,44 @@
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator about adjacency"
   },
   "explore.map.page.side.panel.indicator.description.low.income": {
-    "defaultMessage": "Household income is less than or equal to twice the federal poverty level",
+    "defaultMessage": "People in households where income is less than or equal to twice the federal poverty level, not including students enrolled in higher ed",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Household income is less than or equal to twice the federal poverty level"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description ofPeople in households where income is less than or equal to twice the federal poverty level, not including students enrolled in higher ed"
   },
   "explore.map.page.side.panel.indicator.description.low.med.income": {
-    "defaultMessage": "Median income calculated as a percent of the area’s median income",
+    "defaultMessage": "Comparison of income in the tract to incomes in the area",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Median income calculated as a percent of the area’s median income"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Comparison of income in the tract to incomes in the area"
-  },
-  "explore.map.page.side.panel.indicator.description.med.home.val": {
-    "defaultMessage": "Median home value in area",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Median home value in area"
   },
   "explore.map.page.side.panel.indicator.description.pm25": {
-    "defaultMessage": "Fine inhalable particles, 2.5 micrometers or smaller",
+    "defaultMessage": "Level of inhalable particles, 2.5 micrometers or smaller",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Fine inhalable particles, 2.5 micrometers and smaller"
   },
   "explore.map.page.side.panel.indicator.description.poverty": {
-    "defaultMessage": "Percent of a census tract's population in households where the household income is at or below 100% of the Federal poverty level",
+    "defaultMessage": "Share of people in households where the income is at or below 100% of the Federal poverty level",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Percent of individuals in households where the household income is at or below 100% of the federal poverty level"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of people in households where the income is at or below 100% of the Federal poverty level"
   },
   "explore.map.page.side.panel.indicator.description.prox.haz": {
     "defaultMessage": "Count of hazardous waste facilities within 5 kilometers",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Count of hazardous waste facilities within 5 kilometers"
   },
   "explore.map.page.side.panel.indicator.description.prox.npl": {
-    "defaultMessage": "Proposed or listed NPL (Superfund) sites within 5 kilometers",
+    "defaultMessage": "Count of proposed or listed Superfund (or National Priorities List) sites within 5 kilometers",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Proposed or listed NPL (Superfund) sites within 5 kilometers"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Count of proposed or listed Superfund (or National Priorities List) sites within 5 kilometers"
   },
   "explore.map.page.side.panel.indicator.description.prox.rmp": {
-    "defaultMessage": "RMP facilities within 5 kilometers",
+    "defaultMessage": "Count of Risk Management Plan facilities within 5 kilometers",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Risk Management Plan facilities within 5 kilometers"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Count of Risk Management Plan facilities within 5 kilometers"
   },
   "explore.map.page.side.panel.indicator.description.trafficVolume": {
     "defaultMessage": "Count of vehicles at major roads within 500 meters",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Count of vehicles at major roads within 500 meters"
   },
   "explore.map.page.side.panel.indicator.description.unemploy": {
-    "defaultMessage": "Number of unemployed people as a percentage of the labor force",
+    "defaultMessage": "Number of unemployed people as a part of the labor force",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side \n    panel will show an indicator description of Number of unemployed people as a percentage of the labor force"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side \n    panel will show an indicator description of Number of unemployed people as a part of the labor force"
   },
   "explore.map.page.side.panel.indicator.description.wasteWater": {
-    "defaultMessage": "Toxic concentrations at stream segments within 500 meters",
+    "defaultMessage": "Modeled toxic concentrations at parts of streams within 500 meters",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Toxic concentrations at stream segments within 500 meters"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Modeled toxic concentrations at parts of streams within 500 meters"
   },
   "explore.map.page.side.panel.indicator.description.wildfire": {
     "defaultMessage": "Projected risk to properties from wildfire from fire fuels, weather, humans, and fire movement",
@@ -716,8 +712,8 @@
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Diesel particulate matter exposure"
   },
   "explore.map.page.side.panel.indicator.energyBurden": {
-    "defaultMessage": "Energy burden",
+    "defaultMessage": "Energy cost",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Energy burden"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Energy cost"
   },
   "explore.map.page.side.panel.indicator.exp.ag.loss": {
     "defaultMessage": "Expected agriculture loss rate",
@@ -732,12 +728,12 @@
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show population loss rate"
   },
   "explore.map.page.side.panel.indicator.flooding": {
-    "defaultMessage": "Future flood risk",
+    "defaultMessage": "Projected flood risk",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show flood risk"
   },
   "explore.map.page.side.panel.indicator.former.def.sites": {
-    "defaultMessage": "Formerly Used Defense Sites (FUDS)",
+    "defaultMessage": "Formerly Used Defense Sites",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Formerly Used Defense Sites (FUDS)"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Formerly Used Defense Sites"
   },
   "explore.map.page.side.panel.indicator.heartDisease": {
     "defaultMessage": "Heart disease",
@@ -748,16 +744,16 @@
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Higher ed degree achievement rate"
   },
   "explore.map.page.side.panel.indicator.high.school": {
-    "defaultMessage": "High school degree non-attainment",
+    "defaultMessage": "High school education",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show High school degree achievement rate"
   },
   "explore.map.page.side.panel.indicator.historic.underinvest": {
     "defaultMessage": "Historic underinvestment",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Historic underinvestment"
   },
-  "explore.map.page.side.panel.indicator.houseBurden": {
+  "explore.map.page.side.panel.indicator.house.cost": {
-    "defaultMessage": "Housing cost burden",
+    "defaultMessage": "Housing cost",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing cost burden"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing cost"
   },
   "explore.map.page.side.panel.indicator.imp.flg": {
     "defaultMessage": "Impute flag",
@@ -816,40 +812,40 @@
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Proximity to hazardous waste facilities"
   },
   "explore.map.page.side.panel.indicator.prox.npl": {
-    "defaultMessage": "Proximity to National Priorities List (NPL) sites",
+    "defaultMessage": "Proximity to Superfund sites",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Count of proposed or listed NPL "
   },
   "explore.map.page.side.panel.indicator.prox.rmp": {
-    "defaultMessage": "Proximity to Risk Management Plan (RMP) facilities",
+    "defaultMessage": "Proximity to Risk Management Plan facilities",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Count of proposed or listed RMP"
   },
   "explore.map.page.side.panel.indicator.title.clean.energy": {
-    "defaultMessage": "Clean energy and energy efficiency",
+    "defaultMessage": "Energy",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Clean, efficient energy title\n"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Energy title\n"
   },
   "explore.map.page.side.panel.indicator.title.clean.transport": {
-    "defaultMessage": "Clean transit",
+    "defaultMessage": "Transportation",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Clean transportation title\n"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Transportation title\n"
   },
   "explore.map.page.side.panel.indicator.title.clean.water": {
-    "defaultMessage": "Clean water and wastewater infrastructure",
+    "defaultMessage": "Water",
-    "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show Clean water and waste title\n"
+    "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show Water title\n"
   },
   "explore.map.page.side.panel.indicator.title.climate": {
     "defaultMessage": "Climate change",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Climate change title\n"
   },
   "explore.map.page.side.panel.indicator.title.health.burden": {
-    "defaultMessage": "Health burdens",
+    "defaultMessage": "Health",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Health burdens title\n"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Healt title\n"
   },
   "explore.map.page.side.panel.indicator.title.legacy.pollution": {
     "defaultMessage": "Legacy pollution",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Legacy pollution title\n"
   },
   "explore.map.page.side.panel.indicator.title.sustain.house": {
-    "defaultMessage": "Sustainable housing",
+    "defaultMessage": "Housing",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Sustainable housing title\n"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing title\n"
   },
   "explore.map.page.side.panel.indicator.title.testing": {
     "defaultMessage": "Testing",
@@ -904,7 +900,7 @@
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Wastewater discharge"
   },
   "explore.map.page.side.panel.indicator.wildfire": {
-    "defaultMessage": "Future wildfire risk",
+    "defaultMessage": "Projected wildfire risk",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk"
   },
   "explore.map.page.side.panel.info.alt.text.icon1": {

client/src/styles/global.scss

@@ -18,25 +18,32 @@ There are 3 things that should be included in this file:
 // 3. Include or point to your project's custom Sass
 /* 
   Instead of having a separate file for these styles, all styles are being placed here.
-  - Global styles
+
-  - Layout styles
+  Ideally, this file should only hold styles for when we need to override the USWDS component 
-    -- Main content styles
+  or the Trusswork component. J40 component styles should be contained in it's own component styles.
-    -- Footer styles
+
-  - Component styles
+  - GLOBAL STYLES
-    -- Map styles
+  - MAIN CONTENT STYLES
-    -- Demographics styles
+  - FOOTER STYLES
-    -- Public Event styles
+  - MAP STYLES
-    -- About styles
+  - ACCORDION STYLES
-    -- Summary box
+  - DEMOGRAPHICS STYLES
+  - PUBLIC EVENT STYLES
+  - ABOUT CARD STYLES
+  - SUMMARY BOX STYLES
 */
 
 
 
-
+/* 
-/***************** GLOBAL STYLES **************************************************************/
+******************************
+*      GLOBAL STYLES
+****************************** 
+*/
 
 $primary-color: #112f4e;  // Used for header font color - selection color is #005EA2
 $j40-blue-background-color: #e7f2f5;  // Hex value of 'blue-cool-5'
+$disadvantaged-color-side-panel: #1a4480;
 
 // The j40-element mixin is used to create any font element. E.g. <h1>, <p> tags, etc.
 // Arguments to the mixins must be tokens from USWDS
@@ -97,12 +104,6 @@ p.flush {
   @include j40-element('lg', 2, 'bold', 0 );
 }
 
-/***************** LAYOUT STYLES **************************************************************
-This section will outline styles for components that are on each page. These 
-components include:
-
-- main content styles
-- footer styles
 
 
 /* 
@@ -184,14 +185,6 @@ li[class*='datasetCard-module'] .usa-link--external::after {
 }
 
 
-
-/***************** COMPONENT STYLES **************************************************************
-This section will outline styles that are component specific
-
-- map
-- timeline
-- about
-
 /* 
 ******************************
 *      MAP STYLES
@@ -359,16 +352,34 @@ Beacon - the beacon's color (*-location-dot) and proximity animation (::before),
 }
 
 
-.usa-accordion__content {
-  padding-bottom: 0;
-}
-
 //As per Mikel Maron's (MapBox advocate) suggestion to use svg data URI override:
 a.mapboxgl-ctrl-logo { 
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(/studio-manual/assets/%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(/studio-manual/assets/%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E") !important;
 };
 
 
+/* 
+******************************
+*      ACCORDION STYLES
+****************************** 
+*/
+.usa-accordion__content {
+  padding-bottom: 0;
+}
+
+// The following two styles will only work in browsers that support the ":has" selector
+button.usa-accordion__button:has(div[class*="disCategoryContainer"])  {
+  background-color: $disadvantaged-color-side-panel;
+  background-image: url("../images/sidePanelIcons/accordion-plus.svg");
+
+  div[class*="disCategoryContainer"]{
+    color: white;
+  }
+}
+button.usa-accordion__button[aria-expanded=true]:has(div[class*="disCategoryContainer"])  {
+  background-image: url("../images/sidePanelIcons/accordion-minus.svg");
+}
+
 /* 
 ******************************
 *      DEMOGRAPHICS STYLES