Updated side panel for score L launch (#1022)

* Remove un-needed state and useEffect vars

* Add initial Accordion UI to side panel

- abstract out Indicators to separate component
- add snapshot test
- define new indicators in EXPLORE copy
- intl copy to AreaDetail component

* Make side panel indicators styling match design

* Rename export IndicatorCategory -> CategoryCard

* Add disadvangted dots to category and indicators

- add new Category component
- add new DisadvantageDot component
- make copy corrections
- comment out send feedback link in side panel

* Integrate MapLegend's dot into component

- change color to 'blue-warm-70v'
- update map stroke to 'blue-warm-70v'

* Add new indicator names from BE

- add abbreviations and use key in json file to decode

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

@@ -1,30 +1,19 @@
+@use '../../styles/design-system.scss' as *;
 @import "../utils.scss";
 
 $sidePanelLabelFontColor: #171716;
 
 @mixin sidePanelLabelStyle {
-  font-size: small;
+  font-size: medium;
   color: $sidePanelLabelFontColor;
   font-weight: 600;
 }
 
-@mixin categorizationCircleStyle {
+.versionInfo {
-  height: 0.6rem;
+  padding: .5rem 1rem .5rem 1.2rem;
-  width: 0.6rem;
+  font-size: medium;
-  border-radius: 100%;
+  font-weight: bold;
-  align-self: center;
+  border-bottom: 1px solid $sidePanelBorderColor; 
-  margin-top: 2rem;
-  margin-right: 0.5rem;
-  opacity: 0.6;
-}
-
-@mixin indicatorBox {
-  display: flex;
-  flex-direction: column;
-  padding: 0 1rem 1.5rem;
-  &:last-child {
-    border-bottom: none;
-  }
 }
 
 .areaDetailContainer {
@@ -39,14 +28,25 @@ $sidePanelLabelFontColor: #171716;
   align-items: center;
   padding-bottom: 2rem;
 
+  .isInFocus {
+    padding: .5rem 1rem .25rem 1.2rem;
+    font-size: small;
+    font-weight: bold;
+    @include u-margin-top(2);
+  }
+
   .communityOfFocus {
     display: flex;
 
-    .communityOfFocusCircle {
+    h3 {
-      @include categorizationCircleStyle;
+      margin-top: 0;
-      background: #1a4480;
+      margin-bottom: 0;
+    }
   }
 
+  .feedbackLink {
+    font-size: small;
+    @include u-margin-top(1);
   }
 
 }
@@ -64,12 +64,10 @@ $sidePanelLabelFontColor: #171716;
   }
 
   .censusText {
-    font-size: small;
+    font-size: medium;
   }  
 }
 
-
-
 //Divider styles
 .divider {
   @include sidePanelLabelStyle;
@@ -79,45 +77,3 @@ $sidePanelLabelFontColor: #171716;
   border-top: 1px solid $sidePanelBorderColor;
   border-bottom: 1px solid $sidePanelBorderColor;
 }
-
-//Indicator box styles
-.indicatorBoxMain {
-  @include indicatorBox;
-  border-bottom: $sidePanelBorder;
-}
-
-.indicatorBoxAdditional {
-  @include indicatorBox;
-  border-bottom: 1px solid #1b1b1b;
-  background-color: $additionalCardsBGColor;
-}
-
-.indicatorRow {
-  display: flex;
-
-  @media screen and (max-width: $mobileBreakpoint) {
-    flex: 1 0 40%;
-    align-self: inherit;
-    padding-left: 3rem;
-    padding-top: 1rem;
-  }
-
-  .indicatorName {
-    flex: 0 1 77%;
-  }
-  
-  .indicatorValue {
-    margin-top: 1.2rem;
-    margin-left: 2.2rem;
-    
-    .indicatorSuperscript {
-      top: -0.2em
-    }
-    
-  }
-  
-  .indicatorDesc {
-    max-width: 10rem;    
-  }
-}
-

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

@@ -8,13 +8,9 @@ declare namespace MapModuleScssNamespace {
     censusLabel:string;
     censusText: string;
     divider:string;
-    indicatorBoxMain:string;
+    feedbackLink:string;
-    indicatorBoxAdditional:string;
+    isInFocus:string;
-    indicatorRow:string;
+    versionInfo: string;
-    indicatorName:string;
-    indicatorValue:string;
-    indicatorSuperscript:string;
-    indicatorDesc:string;
   }
 }
 

client/src/components/AreaDetail/index.tsx

@@ -1,46 +1,32 @@
 /* eslint-disable quotes */
 // External Libs:
-import React, {useEffect} from 'react';
+import React from 'react';
 import {useIntl} from 'gatsby-plugin-intl';
+import {Accordion} from '@trussworks/react-uswds';
 
 // Components:
-// import {Accordion} from '@trussworks/react-uswds';
+import Category from '../Category';
+import DisadvantageDot from '../DisadvantageDot';
+import Indicator from '../Indicator';
 
 // Styles and constants
 import * as styles from './areaDetail.module.scss';
 import * as constants from '../../data/constants';
 import * as EXPLORE_COPY from '../../data/copy/explore';
-import * as METHODOLOGY_COPY from '../../data/copy/methodology';
-
-export const readablePercentile = (percentile: number | null) => {
-  return percentile ? Math.round(percentile * 100) : 'N/A';
-};
-
-// Todo: Add internationalization to superscript ticket #582
-const getSuperscriptOrdinal = (percentile: number | string) => {
-  if (typeof percentile === "number") {
-    const englishOrdinalRules = new Intl.PluralRules('en', {
-      type: 'ordinal',
-    });
-    const suffixes = {
-      zero: 'th',
-      one: 'st',
-      two: 'nd',
-      few: 'rd',
-      many: 'th',
-      other: 'th',
-    };
-    return suffixes[englishOrdinalRules.select(percentile)];
-  }
-};
 
 interface IAreaDetailProps {
   properties: constants.J40Properties,
 }
 
+export interface indicatorInfo {
+  label: string,
+  description: string,
+  value: number,
+  isDisadvagtaged: boolean,
+}
+
 const AreaDetail = ({properties}:IAreaDetailProps) => {
   const intl = useIntl();
-  const [isCommunityFocus, setIsCommunityFocus] = React.useState<boolean>(true);
 
   console.log("Area Detail properies: ", properties);
 
@@ -50,122 +36,298 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
   const countyName = properties[constants.COUNTY_NAME] ? properties[constants.COUNTY_NAME] : "N/A";
   const stateName = properties[constants.STATE_NAME] ? properties[constants.STATE_NAME] : "N/A";
 
-  useEffect(() => {
+  const isCommunityFocus = score >= constants.SCORE_BOUNDARY_PRIORITIZED;
-    if (score >= constants.SCORE_BOUNDARY_PRIORITIZED ) {
-      setIsCommunityFocus(true);
-    } else {
-      setIsCommunityFocus(false);
-    }
-  }, [score]);
 
+  // const sidePanelFeedbackHref = `
+  //   mailto:screeningtool.feedback@usds.gov?subject=Feedback on Census Tract: ${blockGroup}
+  // `;
 
-  interface indicatorInfo {
+  // Define each indicator in the side panel with constants from copy file (for intl)
-    label: string,
+  // Indicators are grouped by category
-    description: string,
+  const expAgLoss:indicatorInfo = {
-    value: number,
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_AG_LOSS),
-  }
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_AG_LOSS),
+    value: properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] ?
+    properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME] : null,
+  };
+  const expBldLoss:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_BLD_LOSS),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_BLD_LOSS),
+    value: properties[constants.EXP_BUILDING_LOSS_PERCENTILE] ?
+    properties[constants.EXP_BUILDING_LOSS_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME] : null,
+  };
+  const expPopLoss:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_POP_LOSS),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_POP_LOSS),
+    value: properties[constants.EXP_POPULATION_LOSS_PERCENTILE] ?
+    properties[constants.EXP_POPULATION_LOSS_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME] : null,
+  };
+  const lowInc:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_INCOME),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_INCOME),
+    value: properties[constants.POVERTY_BELOW_200_PERCENTILE] ?
+    properties[constants.POVERTY_BELOW_200_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] ?
+    properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] : null,
+  };
 
-  // Todo: Ticket #367 will be replacing descriptions with YAML file
-  const areaMedianIncome:indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.AREA_MEDIAN_INCOME),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.AREA_MEDIAN_INCOME),
-    value: properties[constants.AREA_MEDIAN_INCOME_PERCENTILE] ?
-    properties[constants.AREA_MEDIAN_INCOME_PERCENTILE] : null,
-  };
-  const eduInfo:indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EDUCATION),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EDUCATION),
-    value: properties[constants.EDUCATION_PROPERTY_PERCENTILE] ?
-    properties[constants.EDUCATION_PROPERTY_PERCENTILE] : null,
-  };
-  const poverty:indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY),
-    value: properties[constants.POVERTY_PROPERTY_PERCENTILE] ?
-    properties[constants.POVERTY_PROPERTY_PERCENTILE] : null,
-  };
-  const asthma:indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
-    value: properties[constants.ASTHMA_PERCENTILE] ?
-    properties[constants.ASTHMA_PERCENTILE] : null,
-  };
-  const diabetes:indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
-    value: properties[constants.DIABETES_PERCENTILE] ?
-    properties[constants.DIABETES_PERCENTILE] : null,
-  };
-  const dieselPartMatter:indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER),
-    value: properties[constants.DIESEL_MATTER_PERCENTILE] ?
-    properties[constants.DIESEL_MATTER_PERCENTILE] : null,
-  };
-  const lifeExpect:indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LIFE_EXPECT),
-    value: properties[constants.LIFE_PERCENTILE] ?
-    properties[constants.LIFE_PERCENTILE] : null,
-  };
   const energyBurden:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
     value: properties[constants.ENERGY_PERCENTILE] ?
     properties[constants.ENERGY_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME] : null,
   };
   const pm25:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PM_2_5),
     value: properties[constants.PM25_PERCENTILE] ?
     properties[constants.PM25_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_PM25_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_PM25_AND_IS_LOW_INCOME] : null,
   };
-  const leadPaint:indicatorInfo = {
+
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
+  const dieselPartMatter:indicatorInfo = {
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER),
-    value: properties[constants.LEAD_PAINT_PERCENTILE] ?
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER),
-    properties[constants.LEAD_PAINT_PERCENTILE] : null,
+    value: properties[constants.DIESEL_MATTER_PERCENTILE] ?
+    properties[constants.DIESEL_MATTER_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME] : 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),
     value: properties[constants.TRAFFIC_PERCENTILE] ?
     properties[constants.TRAFFIC_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME] : null,
   };
+
+  const houseBurden:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
+    value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] ?
+    properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME] : 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),
+    value: properties[constants.LEAD_PAINT_PERCENTILE] ?
+    properties[constants.LEAD_PAINT_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME] : null,
+  };
+  // const medHomeVal:indicatorInfo = {
+  //   label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.MED_HOME_VAL),
+  //   description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.MED_HOME_VAL),
+  //   value: properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] ?
+  //   properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] : null,
+  //   isDisadvagtaged: false, // TODO
+  // };
+
+  const proxHaz:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ),
+    value: properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] ?
+    properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME] : 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),
+    value: properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] ?
+    properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME] : 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),
+    value: properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] ?
+    properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_RMP_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_RMP_AND_IS_LOW_INCOME] : 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),
     value: properties[constants.WASTEWATER_PERCENTILE] ?
     properties[constants.WASTEWATER_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME] : null,
   };
-  const femaRisk:indicatorInfo = {
+
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FEMA_RISK),
+  const asthma:indicatorInfo = {
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FEMA_RISK),
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
-    value: properties[constants.FEMA_PERCENTILE] ?
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
-    properties[constants.FEMA_PERCENTILE] : null,
+    value: properties[constants.ASTHMA_PERCENTILE] ?
+    properties[constants.ASTHMA_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME] : null,
+  };
+  const diabetes:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
+    value: properties[constants.DIABETES_PERCENTILE] ?
+    properties[constants.DIABETES_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_DIABETES_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_DIABETES_AND_IS_LOW_INCOME] : null,
   };
   const heartDisease:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HEART_DISEASE),
     value: properties[constants.HEART_PERCENTILE] ?
     properties[constants.HEART_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME] : null,
   };
-  const houseBurden:indicatorInfo = {
+  const lifeExpect:indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_LIFE_EXPECT),
-    value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] ?
+    value: properties[constants.LIFE_PERCENTILE] ?
-    properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
+    properties[constants.LIFE_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME] : null,
   };
 
+  const lowMedInc:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_MED_INC),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_MED_INCOME),
+    value: properties[constants.LOW_MEDIAN_INCOME_PERCENTILE] ?
+    properties[constants.LOW_MEDIAN_INCOME_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU] ?
+    properties[constants.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU] : null,
+  };
+  const lingIso:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LING_ISO),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LING_ISO),
+    value: properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] ?
+    properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME] ?
+    properties[constants.IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME] : null,
+  };
+  const unemploy:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.UNEMPLOY),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.UNEMPLOY),
+    value: properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE] ?
+    properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] ?
+    properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] : null,
+  };
+  const poverty:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY),
+    value: properties[constants.POVERTY_PROPERTY_PERCENTILE] ?
+    properties[constants.POVERTY_PROPERTY_PERCENTILE] : null,
+    isDisadvagtaged: properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] ?
+    properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] : null,
+  };
+  // const highSchool:indicatorInfo = {
+  //   label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_SCL),
+  //   description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_SKL),
+  //   value: properties[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE] ?
+  //   properties[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE] : null,
+  //   isDisadvagtaged: properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] ?
+  //   properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] : null,
+  // };
 
-  const indicators = [areaMedianIncome, eduInfo, poverty];
+  // Aggregate indicators based on categories
-  const additionalIndicators = [
+  const categories = [
-    asthma, diabetes, dieselPartMatter, energyBurden, femaRisk, heartDisease,
+    {
-    houseBurden, leadPaint, lifeExpect, pm25, trafficVolume, wasteWater,
+      id: 'climate-change',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE),
+      indicators: [expAgLoss, expBldLoss, expPopLoss, lowInc],
+      isDisadvagtaged: properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_L] ?
+      properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_L] : null,
+    },
+    {
+      id: 'clean-energy',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_ENERGY),
+      indicators: [energyBurden, pm25, lowInc],
+      isDisadvagtaged: properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_L] ?
+    properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_L] : null,
+    },
+    {
+      id: 'clean-transport',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT),
+      indicators: [dieselPartMatter, trafficVolume, lowInc],
+      isDisadvagtaged: properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_L] ?
+    properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_L] : null,
+    },
+    {
+      id: 'sustain-house',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.SUSTAIN_HOUSE),
+      indicators: [houseBurden, leadPaint, lowInc],
+      isDisadvagtaged: properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_L] ?
+    properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_L] : null,
+    },
+    {
+      id: 'leg-pollute',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.LEG_POLLUTE),
+      indicators: [proxHaz, proxNPL, proxRMP, lowInc],
+      isDisadvagtaged: properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_L] ?
+    properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_L] : null,
+    },
+    {
+      id: 'clean-water',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
+      indicators: [wasteWater, lowInc],
+      isDisadvagtaged: properties[constants.IS_WATER_FACTOR_DISADVANTAGED_L] ?
+    properties[constants.IS_WATER_FACTOR_DISADVANTAGED_L] : null,
+    },
+    {
+      id: 'health-burdens',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN),
+      indicators: [asthma, diabetes, heartDisease, lifeExpect, lowInc],
+      isDisadvagtaged: properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_L] ?
+    properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_L] : null,
+    },
+    {
+      id: 'work-dev',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
+      indicators: [lowMedInc, lingIso, unemploy, poverty],
+      isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_L] ?
+    properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_L] : null,
+    },
   ];
 
+  // Create the AccoridionItems by mapping over the categories array. In this array we define the
+  // various indicators for a specific category. This is an array which then maps over the <Indicator />
+  // component to render the actual Indicator
+  const categoryItems = categories.map((category) => ({
+    id: category.id,
+    title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged}/>,
+    content: (
+      <>
+        {category.indicators.map((indicator:any, index:number) => {
+          return <Indicator key={`ind${index}`} indicator={indicator}/>;
+        })}
+      </>
+    ),
+    expanded: false,
+  }));
+
   return (
     <aside className={styles.areaDetailContainer} data-cy={'aside'}>
+
+      {/* Methodology version */}
+      <div className={styles.versionInfo}>
+        {EXPLORE_COPY.SIDE_PANEL_VERION.TITLE}
+      </div>
+
+      {/* Census Info */}
       <ul className={styles.censusRow}>
         <li>
           <span className={styles.censusLabel}>
@@ -192,139 +354,27 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
           <span className={styles.censusText}>{` ${population.toLocaleString()}`}</span>
         </li>
       </ul>
+
+      {/* Disadvantaged? */}
       <div className={styles.categorization}>
+        <div className={styles.isInFocus}>
+          {EXPLORE_COPY.COMMUNITY.IS_FOCUS}
+        </div>
         <div className={styles.communityOfFocus}>
           {isCommunityFocus ?
             <>
-              <div className={styles.communityOfFocusCircle} />
               <h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
+              <DisadvantageDot isDisadvantaged={isCommunityFocus}/>
             </> :
           <h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
           }
         </div>
-        <p className={"secondary"}>version {METHODOLOGY_COPY.VERSION_NUMBER}</p>
+        {/* eslint-disable-next-line max-len */}
-      </div>
+        {/* <a className={styles.feedbackLink} href={sidePanelFeedbackHref}>{EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK}</a> */}
-      <div className={styles.divider}>
-        <h6>
-          {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.INDICATOR_COLUMN_HEADER)}
-        </h6>
-        <h6>
-          {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PERCENTILE_COLUMN_HEADER)}
-        </h6>
       </div>
 
-      <>
+      {/* All category accordions in this component */}
-        {
+      <Accordion multiselectable={true} items={categoryItems}/>
-          indicators.map((indicator:any, index:number) => {
-            return <li key={`ind${index}`} className={styles.indicatorBoxMain} data-cy={'indicatorBox'}>
-              <div className={styles.indicatorRow}>
-                <h4 className={styles.indicatorName}>{indicator.label}</h4>
-                <div className={styles.indicatorValue}>
-                  {readablePercentile(indicator.value)}
-                  <sup className={styles.indicatorSuperscript}><span>
-                    {getSuperscriptOrdinal(readablePercentile(indicator.value))}
-                  </span></sup>
-                </div>
-              </div>
-              <p className={'secondary j40-indicator'}>
-                {indicator.description}
-              </p>
-            </li>;
-          })
-        }
-      </>
-
-      <>
-        {
-          additionalIndicators.map((indicator:any, index:number) => {
-            return <li
-              key={`ind${index}`}
-              className={styles.indicatorBoxAdditional}
-              data-cy={'indicatorBox'}>
-              <div className={styles.indicatorRow}>
-                <h4 className={styles.indicatorName}>{indicator.label}</h4>
-                <div className={styles.indicatorValue}>
-                  {readablePercentile(indicator.value)}
-                  <sup className={styles.indicatorSuperscript}><span>
-                    {getSuperscriptOrdinal(readablePercentile(indicator.value))}
-                  </span></sup>
-                </div>
-              </div>
-              <p className={'secondary j40-indicator'}>
-                {indicator.description}
-              </p>
-            </li>;
-          })
-        }
-      </>
-
-      {/* Temporarily remove Accordions and may place back in later, removed unused
-      className prop as as styles are based on the id of the Accordion Item */}
-      {/* <Accordion
-        multiselectable={true}
-        items={
-          [
-            {
-              id: 'prioritization-indicators',
-              title: 'Indicators',
-              content: (
-                <>
-                  {
-                    indicators.map((indicator:any, index:number) => {
-                      return <li key={`ind${index}`} className={styles.indicatorBoxMain} data-cy={'indicatorBox'}>
-                        <div className={styles.indicatorRow}>
-                          <h4 className={styles.indicatorName}>{indicator.label}</h4>
-                          <div className={styles.indicatorValue}>
-                            {readablePercentile(indicator.value)}
-                            <sup className={styles.indicatorSuperscript}><span>
-                              {getSuperscriptOrdinal(readablePercentile(indicator.value))}
-                            </span></sup>
-                          </div>
-                        </div>
-                        <p className={'secondary j40-indicator'}>
-                          {indicator.description}
-                        </p>
-                      </li>;
-                    })
-                  }
-                </>
-              ),
-              expanded: true,
-            },
-            {
-              id: 'additional-indicators',
-              title: 'Additional indicators (not used in prioritization)',
-              content: (
-                (
-                  <>
-                    {
-                      additionalIndicators.map((indicator:any, index:number) => {
-                        return <li
-                          key={`ind${index}`}
-                          className={styles.indicatorBoxAdditional}
-                          data-cy={'indicatorBox'}>
-                          <div className={styles.indicatorRow}>
-                            <h4 className={styles.indicatorName}>{indicator.label}</h4>
-                            <div className={styles.indicatorValue}>
-                              {readablePercentile(indicator.value)}
-                              <sup className={styles.indicatorSuperscript}><span>
-                                {getSuperscriptOrdinal(readablePercentile(indicator.value))}
-                              </span></sup>
-                            </div>
-                          </div>
-                          <p className={'secondary j40-indicator'}>
-                            {indicator.description}
-                          </p>
-                        </li>;
-                      })
-                    }
-                  </>
-                )
-              ),
-              expanded: true,
-            },
-          ]
-        }/> */}
 
     </aside>
   );

client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap

@@ -5,6 +5,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
   <aside
     data-cy="aside"
   >
+    <div>
+      Methodology version 0.1
+    </div>
     <ul>
       <li>
         <span>
@@ -41,76 +44,110 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
     </ul>
     <div>
       <div>
-        <div />
+        Identified as disadvantaged?
+      </div>
+      <div>
         <h3>
-          Community of focus
+          YES
         </h3>
+        <div />
       </div>
-      <p
+    </div>
-        class="secondary"
+    <div
+      aria-multiselectable="true"
+      class="usa-accordion"
+      data-testid="accordion"
+    >
+      <h2
+        class="usa-accordion__heading"
+      >
+        <button
+          aria-controls="climate-change"
+          aria-expanded="false"
+          class="usa-accordion__button"
+          data-testid="accordionButton_climate-change"
+          type="button"
         >
-        version 0.1
-      </p>
-    </div>
           <div>
-      <h6>
+            <div>
-        Indicator
+              Climate change
-      </h6>
-      <h6>
-        Percentile (0-100)
-      </h6>
             </div>
+            <div
+              class=""
+            />
+          </div>
+        </button>
+      </h2>
+      <div
+        class="usa-accordion__content usa-prose"
+        data-testid="accordionItem_climate-change"
+        hidden=""
+        id="climate-change"
+      >
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
-          Area Median Income
-        </h4>
             <div>
-          19
+              Expected agriculture loss rate
+              <div>
+                Economic loss rate to agriculture resulting from natural hazards
+              </div>
+            </div>
+            <div>
+              N/A
               <sup>
-            <span>
+                <span />
-              th
-            </span>
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Median income of the census tract calculated as a percent of the metropolitan area’s or state's median income
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
-          Education, less than high school
-        </h4>
             <div>
-          98
+              Expected building loss rate
+              <div>
+                Economic loss rate to buildings resulting from natural hazards
+              </div>
+            </div>
+            <div>
+              N/A
               <sup>
-            <span>
+                <span />
-              th
-            </span>
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Percent of people age 25 or older that didn’t get a high school diploma
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
+            <div>
-          Poverty
+              Expected population loss rate
-        </h4>
+              <div>
+                Economic loss rate to the population in fatalities and injuries resulting from natural hazards
+              </div>
+            </div>
+            <div>
+              N/A
+              <sup>
+                <span />
+              </sup>
+            </div>
+          </div>
+        </li>
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Low income
+              <div>
+                Household income is less than or equal to twice the federal poverty level
+              </div>
+            </div>
             <div>
               12
               <sup>
@@ -120,19 +157,44 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Percent of a tract's population in households where the household income is at or below 100% of the federal poverty level
-      </p>
         </li>
+      </div>
+      <h2
+        class="usa-accordion__heading"
+      >
+        <button
+          aria-controls="clean-energy"
+          aria-expanded="false"
+          class="usa-accordion__button"
+          data-testid="accordionButton_clean-energy"
+          type="button"
+        >
+          <div>
+            <div>
+              Clean, efficient energy 
+            </div>
+            <div
+              class=""
+            />
+          </div>
+        </button>
+      </h2>
+      <div
+        class="usa-accordion__content usa-prose"
+        data-testid="accordionItem_clean-energy"
+        hidden=""
+        id="clean-energy"
+      >
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
+            <div>
-          Asthma
+              Energy cost burden
-        </h4>
+              <div>
+                Energy costs divided by household income
+              </div>
+            </div>
             <div>
               N/A
               <sup>
@@ -140,19 +202,17 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        People who answer “yes” to both of the questions: “Have you ever been told by a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?"
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
+            <div>
-          Diabetes
+              PM2.5
-        </h4>
+              <div>
+                Fine inhalable particles, 2.5 micrometers and smaller
+              </div>
+            </div>
             <div>
               N/A
               <sup>
@@ -160,19 +220,64 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        People ages 18 and up who report having been told by a doctor, nurse, or other health professionals that they have diabetes other than diabetes during pregnancy
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
+            <div>
+              Low income
+              <div>
+                Household income is less than or equal to twice the federal poverty level
+              </div>
+            </div>
+            <div>
+              12
+              <sup>
+                <span>
+                  th
+                </span>
+              </sup>
+            </div>
+          </div>
+        </li>
+      </div>
+      <h2
+        class="usa-accordion__heading"
+      >
+        <button
+          aria-controls="clean-transport"
+          aria-expanded="false"
+          class="usa-accordion__button"
+          data-testid="accordionButton_clean-transport"
+          type="button"
+        >
+          <div>
+            <div>
+              Clean transportation
+            </div>
+            <div
+              class=""
+            />
+          </div>
+        </button>
+      </h2>
+      <div
+        class="usa-accordion__content usa-prose"
+        data-testid="accordionItem_clean-transport"
+        hidden=""
+        id="clean-transport"
+      >
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
               Diesel particulate matter
-        </h4>
+              <div>
+                Diesel exhaust in the air
+              </div>
+            </div>
             <div>
               N/A
               <sup>
@@ -180,19 +285,17 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Mixture of particles that is part of diesel exhaust in the air
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
+            <div>
-          Energy burden
+              Traffic
-        </h4>
+              <div>
+                Count of vehicles at major roads within 500 meters
+              </div>
+            </div>
             <div>
               N/A
               <sup>
@@ -200,59 +303,64 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Average annual energy cost ($) divided by household income
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
-          FEMA Risk Index
-        </h4>
             <div>
-          N/A
+              Low income
+              <div>
+                Household income is less than or equal to twice the federal poverty level
+              </div>
+            </div>
+            <div>
+              12
               <sup>
-            <span />
+                <span>
+                  th
+                </span>
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Expected Annual Loss Score, which is the average economic loss in dollars resulting from natural hazards each year.
-      </p>
         </li>
+      </div>
+      <h2
+        class="usa-accordion__heading"
+      >
+        <button
+          aria-controls="sustain-house"
+          aria-expanded="false"
+          class="usa-accordion__button"
+          data-testid="accordionButton_sustain-house"
+          type="button"
+        >
+          <div>
+            <div>
+              Sustainable housing
+            </div>
+            <div
+              class=""
+            />
+          </div>
+        </button>
+      </h2>
+      <div
+        class="usa-accordion__content usa-prose"
+        data-testid="accordionItem_sustain-house"
+        hidden=""
+        id="sustain-house"
+      >
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
-          Heart disease
-        </h4>
             <div>
-          N/A
-          <sup>
-            <span />
-          </sup>
-        </div>
-      </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        People ages 18 and up who report ever having been told by a doctor, nurse, or other health professionals that they had angina or coronary heart disease
-      </p>
-    </li>
-    <li
-      data-cy="indicatorBox"
-    >
-      <div>
-        <h4>
               Housing cost burden
-        </h4>
+              <div>
+                Low income households spending more than 30% of income on housing
+              </div>
+            </div>
             <div>
               95
               <sup>
@@ -262,19 +370,17 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Households that are low income and spend more than 30% of their income on housing costs
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
+            <div>
               Lead paint
-        </h4>
+              <div>
+                Pre-1960 housing
+              </div>
+            </div>
             <div>
               N/A
               <sup>
@@ -282,19 +388,64 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Housing units built pre-1960, used as an indicator of potential lead paint exposure in homes
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
+            <div>
-          Life expectancy
+              Low income
-        </h4>
+              <div>
+                Household income is less than or equal to twice the federal poverty level
+              </div>
+            </div>
+            <div>
+              12
+              <sup>
+                <span>
+                  th
+                </span>
+              </sup>
+            </div>
+          </div>
+        </li>
+      </div>
+      <h2
+        class="usa-accordion__heading"
+      >
+        <button
+          aria-controls="leg-pollute"
+          aria-expanded="false"
+          class="usa-accordion__button"
+          data-testid="accordionButton_leg-pollute"
+          type="button"
+        >
+          <div>
+            <div>
+              Legacy pollution
+            </div>
+            <div
+              class=""
+            />
+          </div>
+        </button>
+      </h2>
+      <div
+        class="usa-accordion__content usa-prose"
+        data-testid="accordionItem_leg-pollute"
+        hidden=""
+        id="leg-pollute"
+      >
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Proximity to hazardous waste facilities
+              <div>
+                Count of hazardous waste facilities within 5 km
+              </div>
+            </div>
             <div>
               N/A
               <sup>
@@ -302,19 +453,17 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Estimated years of life expectancy
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
+            <div>
-          PM2.5
+              Proximity to NPL sites
-        </h4>
+              <div>
+                Proposed or listed NPL (Superfund) sites within 5 km
+              </div>
+            </div>
             <div>
               N/A
               <sup>
@@ -322,19 +471,17 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
+            <div>
-          Traffic proximity and volume
+              Proximity to RMP sites
-        </h4>
+              <div>
+                Risk Management Plan facilities within 5 km
+              </div>
+            </div>
             <div>
               N/A
               <sup>
@@ -342,19 +489,64 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Count of vehicles (average annual daily traffic) at major roads within 500 meters, divided by distance in meters
-      </p>
         </li>
         <li
           data-cy="indicatorBox"
         >
           <div>
-        <h4>
+            <div>
+              Low income
+              <div>
+                Household income is less than or equal to twice the federal poverty level
+              </div>
+            </div>
+            <div>
+              12
+              <sup>
+                <span>
+                  th
+                </span>
+              </sup>
+            </div>
+          </div>
+        </li>
+      </div>
+      <h2
+        class="usa-accordion__heading"
+      >
+        <button
+          aria-controls="clean-water"
+          aria-expanded="false"
+          class="usa-accordion__button"
+          data-testid="accordionButton_clean-water"
+          type="button"
+        >
+          <div>
+            <div>
+              Clean water and waste
+            </div>
+            <div
+              class=""
+            />
+          </div>
+        </button>
+      </h2>
+      <div
+        class="usa-accordion__content usa-prose"
+        data-testid="accordionItem_clean-water"
+        hidden=""
+        id="clean-water"
+      >
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
               Wastewater discharge
-        </h4>
+              <div>
+                Toxic concentrations at stream segments within 500 meters
+              </div>
+            </div>
             <div>
               N/A
               <sup>
@@ -362,12 +554,255 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               </sup>
             </div>
           </div>
-      <p
-        class="secondary j40-indicator"
-      >
-        Toxic concentrations at stream segments within 500 meters divided by distance in kilometers
-      </p>
         </li>
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Low income
+              <div>
+                Household income is less than or equal to twice the federal poverty level
+              </div>
+            </div>
+            <div>
+              12
+              <sup>
+                <span>
+                  th
+                </span>
+              </sup>
+            </div>
+          </div>
+        </li>
+      </div>
+      <h2
+        class="usa-accordion__heading"
+      >
+        <button
+          aria-controls="health-burdens"
+          aria-expanded="false"
+          class="usa-accordion__button"
+          data-testid="accordionButton_health-burdens"
+          type="button"
+        >
+          <div>
+            <div>
+              Health burdens
+            </div>
+            <div
+              class=""
+            />
+          </div>
+        </button>
+      </h2>
+      <div
+        class="usa-accordion__content usa-prose"
+        data-testid="accordionItem_health-burdens"
+        hidden=""
+        id="health-burdens"
+      >
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Asthma
+              <div>
+                Number of people who have been told they have asthma
+              </div>
+            </div>
+            <div>
+              N/A
+              <sup>
+                <span />
+              </sup>
+            </div>
+          </div>
+        </li>
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Diabetes
+              <div>
+                People ages 18 years and older who have diabetes other than diabetes during pregnancy
+              </div>
+            </div>
+            <div>
+              N/A
+              <sup>
+                <span />
+              </sup>
+            </div>
+          </div>
+        </li>
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Heart disease
+              <div>
+                People ages 18 years and older who have been told they have heart disease
+              </div>
+            </div>
+            <div>
+              N/A
+              <sup>
+                <span />
+              </sup>
+            </div>
+          </div>
+        </li>
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Low life expectancy
+              <div>
+                Average number of years of life a person can expect to live
+              </div>
+            </div>
+            <div>
+              N/A
+              <sup>
+                <span />
+              </sup>
+            </div>
+          </div>
+        </li>
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Low income
+              <div>
+                Household income is less than or equal to twice the federal poverty level
+              </div>
+            </div>
+            <div>
+              12
+              <sup>
+                <span>
+                  th
+                </span>
+              </sup>
+            </div>
+          </div>
+        </li>
+      </div>
+      <h2
+        class="usa-accordion__heading"
+      >
+        <button
+          aria-controls="work-dev"
+          aria-expanded="false"
+          class="usa-accordion__button"
+          data-testid="accordionButton_work-dev"
+          type="button"
+        >
+          <div>
+            <div>
+              Workforce development
+            </div>
+            <div
+              class=""
+            />
+          </div>
+        </button>
+      </h2>
+      <div
+        class="usa-accordion__content usa-prose"
+        data-testid="accordionItem_work-dev"
+        hidden=""
+        id="work-dev"
+      >
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Low median income
+              <div>
+                Median income calculated as a percent of the area’s median income
+              </div>
+            </div>
+            <div>
+              N/A
+              <sup>
+                <span />
+              </sup>
+            </div>
+          </div>
+        </li>
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Linguistic isolation
+              <div>
+                Households in which no one age 14 and over speaks English only or also speaks 
+    a language other than English
+              </div>
+            </div>
+            <div>
+              97
+              <sup>
+                <span>
+                  th
+                </span>
+              </sup>
+            </div>
+          </div>
+        </li>
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Unemployment
+              <div>
+                Number of unemployed people as a percentage of the labor force
+              </div>
+            </div>
+            <div>
+              96
+              <sup>
+                <span>
+                  th
+                </span>
+              </sup>
+            </div>
+          </div>
+        </li>
+        <li
+          data-cy="indicatorBox"
+        >
+          <div>
+            <div>
+              Poverty
+              <div>
+                Percent of individuals in households where the household income is at or 
+    below 100% of the federal poverty level
+              </div>
+            </div>
+            <div>
+              12
+              <sup>
+                <span>
+                  th
+                </span>
+              </sup>
+            </div>
+          </div>
+        </li>
+      </div>
+    </div>
   </aside>
 </DocumentFragment>
 `;

client/src/components/AreaDetail/tests/areaDetail.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {render} from '@testing-library/react';
-import AreaDetail, {readablePercentile} from '..';
+import AreaDetail from '..';
 import {LocalizedComponent} from '../../../test/testHelpers';
 
 import * as constants from '../../../data/constants';
@@ -29,9 +29,3 @@ describe('rendering of the AreaDetail', () => {
   });
 });
 
-describe('tests the readablePercentile function', () => {
-  expect(readablePercentile(.98)).toEqual(98);
-  expect(readablePercentile(.07)).toEqual(7);
-  expect(readablePercentile(.123)).toEqual(12);
-  expect(readablePercentile(.789)).toEqual(79);
-});

client/src/components/Categories/Categories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Grid} from '@trussworks/react-uswds';
 
-import IndicatorCategory from '../CategoryCard';
+import CategoryCard from '../CategoryCard';
 import J40MainGridContainer from '../J40MainGridContainer';
 
 import * as METHODOLOGY_COPY from '../../data/copy/methodology';
@@ -33,7 +33,7 @@ const Categories = () => {
 
       <J40MainGridContainer className={styles.categoriesContainer}>
         {
-          categories.map((category, index) => <IndicatorCategory key={index} categoryInfo={category} />)
+          categories.map((category, index) => <CategoryCard key={index} categoryInfo={category} />)
         }
       </J40MainGridContainer>
     </>

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

@@ -0,0 +1,6 @@
+@use '../../styles/design-system.scss' as *;
+
+.categoryContainer {
+    display: flex;
+    justify-content: space-between;
+}

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

@@ -0,0 +1,13 @@
+declare namespace CategoryNamespace {
+    export interface ICategoryScss {
+        categoryContainer: string;
+        disadvantageDot: string;
+    }
+  }
+
+declare const CategoryScssModule: CategoryNamespace.ICategoryScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: CategoryNamespace.ICategoryScss;
+  };
+
+  export = CategoryScssModule;

client/src/components/Category/Category.test.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import Category from './Category';
+
+describe('rendering of the Category disadvantaged', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <Category name={'test name'} isDisadvantaged={true}/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('rendering of the Category non-disadvantaged', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <Category name={'test name'} isDisadvantaged={false}/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/Category/Category.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import DisadvantageDot from '../DisadvantageDot';
+
+import * as styles from './Category.module.scss';
+
+interface ICategory {
+    name: string;
+    isDisadvantaged: boolean;
+}
+
+const Category = ({name, isDisadvantaged}:ICategory) => {
+  return (
+    <div className={styles.categoryContainer}>
+      <div>
+        {name}
+      </div>
+      <DisadvantageDot isDisadvantaged={isDisadvantaged}/>
+    </div>
+  );
+};
+
+export default Category;

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the Category disadvantaged checks if component renders 1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      test name
+    </div>
+    <div />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`rendering of the Category non-disadvantaged checks if component renders 1`] = `<DocumentFragment />`;

client/src/components/Category/index.tsx

@@ -0,0 +1,3 @@
+import Category from './Category';
+
+export default Category;

client/src/components/CategoryCard/CategoryCard.tsx

@@ -10,7 +10,7 @@ interface ICategoryInterface {
         THEN: JSX.Element
     }
 }
-const IndicatorCategory = ({categoryInfo}: ICategoryInterface) => {
+const CategoryCard = ({categoryInfo}: ICategoryInterface) => {
   return (
     <div className={styles.categoryCard}>
       <h3>
@@ -29,4 +29,4 @@ const IndicatorCategory = ({categoryInfo}: ICategoryInterface) => {
   );
 };
 
-export default IndicatorCategory;
+export default CategoryCard;

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

@@ -0,0 +1,19 @@
+@use '../../styles/design-system.scss' as *;
+
+.disadvantagedDotSmall {
+    @include u-circle('105');
+    @include u-margin-left(1);
+    
+    align-self: center;
+    @include u-bg('blue-warm-70v');
+}
+
+.disadvantagedDotBig {
+    @include u-circle(4);
+    margin: 2.3rem 1.5rem 2rem 0;
+    opacity: .6;
+    
+    //Maintain aspect ratio as screen width decreases
+    flex: 1 0 2rem; 
+    @include u-bg('blue-warm-70v');
+}

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

@@ -0,0 +1,14 @@
+declare namespace DisadvantagedDotNamespace {
+    export interface IDisadvantagedDot {
+        disadvantagedDotBig: string;
+        disadvantagedDotSmall: string;
+    }
+  }
+
+declare const DisadvantagedDotModule: DisadvantagedDotNamespace.IDisadvantagedDot & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: DisadvantagedDotNamespace.IDisadvantagedDot;
+  };
+
+  export = DisadvantagedDotModule;
+

client/src/components/DisadvantageDot/DisadvantageDot.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import DisadvantageDot from './DisadvantageDot';
+
+describe('rendering of the DisadvantageDot disadvantaged', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <DisadvantageDot isDisadvantaged={true}/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/DisadvantageDot/DisadvantageDot.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import * as styles from './DisadvantageDot.module.scss';
+
+interface IDisadvantageDot {
+  isDisadvantaged?: boolean;
+  isBig?: boolean;
+}
+const DisadvantageDot = ({isDisadvantaged = false, isBig}:IDisadvantageDot) => {
+  let computedClass = '';
+
+  if (isBig) {
+    computedClass = styles.disadvantagedDotBig;
+  } else {
+    computedClass = isDisadvantaged ? styles.disadvantagedDotSmall : '';
+  }
+
+  return (
+    <div className={computedClass} />
+  );
+};
+
+export default DisadvantageDot;

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the DisadvantageDot disadvantaged checks if component renders 1`] = `
+<DocumentFragment>
+  <div />
+</DocumentFragment>
+`;

client/src/components/DisadvantageDot/index.tsx

@@ -0,0 +1,3 @@
+import DisadvantageDot from './DisadvantageDot';
+
+export default DisadvantageDot;

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

@@ -0,0 +1,59 @@
+@use '../../styles/design-system.scss' as *;
+@import "../utils.scss";
+
+@mixin indicator {
+  display: flex;
+  flex-direction: column;
+  @include u-padding-bottom(3);
+  &:last-child {
+    border-bottom: none;
+    @include u-padding-bottom(0);
+  }
+  
+  .indicatorRow {
+    display: flex;
+    
+    @media screen and (max-width: $mobileBreakpoint) {
+      flex: 1 0 40%;
+      align-self: inherit;
+      padding-left: 3rem;
+      padding-top: 1rem;
+    }
+    
+    .indicatorName {
+      flex: 0 1 77%;
+      display: flex;
+      flex-direction: column;
+      @include typeset('sans', '2xs', 2);
+      @include u-text('bold'); 
+      
+      .indicatorDesc {
+        @include typeset('sans', '3xs', 2); 
+        @include u-text('normal'); 
+        max-width: 12rem;    
+        @include u-margin-top(0);
+        @media screen and (max-width: 1024px) {
+          max-width: 80%;
+        }
+      }
+    }
+    
+    .indicatorValue {
+      margin-left: 2.2rem;
+      
+      .indicatorSuperscript {
+        top: -0.2em
+      }
+    }  
+  }
+}
+
+//Indicator box styles
+.indicatorBoxMain {
+  @include indicator;
+}
+
+.disadvantagedIndicator {
+  @include indicator;
+  @include u-text('blue-warm-70v');
+}

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

@@ -0,0 +1,19 @@
+declare namespace IndicatorNamespace {
+    export interface IIndicatorScss {
+      indicatorBoxMain:string;
+      indicatorBoxAdditional:string;
+      indicatorRow:string;
+      indicatorName:string;
+      indicatorValue:string;
+      indicatorSuperscript:string;
+      indicatorDesc:string;
+      disadvantagedIndicator:string;
+    }
+  }
+
+declare const IndicatorScssModule: IndicatorNamespace.IIndicatorScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: IndicatorNamespace.IIndicatorScss;
+  };
+
+  export = IndicatorScssModule;

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import Indicator, {readablePercentile} from './Indicator';
+import {indicatorInfo} from '../AreaDetail';
+
+const highSchool:indicatorInfo = {
+  label: 'some label',
+  description: 'some description',
+  value: 97,
+};
+
+describe('rendering of the Indicator', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <Indicator indicator={highSchool}/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('tests the readablePercentile function', () => {
+  expect(readablePercentile(.98)).toEqual(98);
+  expect(readablePercentile(.07)).toEqual(7);
+  expect(readablePercentile(.123)).toEqual(12);
+  expect(readablePercentile(.789)).toEqual(79);
+});

client/src/components/Indicator/Indicator.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {indicatorInfo} from '../AreaDetail';
+
+import * as styles from './Indicator.module.scss';
+
+interface IIndicator {
+    indicator: indicatorInfo,
+}
+
+export const readablePercentile = (percentile: number | null) => {
+  return percentile ? Math.round(percentile * 100) : 'N/A';
+};
+
+// Todo: Add internationalization to superscript ticket #582
+export const getSuperscriptOrdinal = (percentile: number | string) => {
+  if (typeof percentile === 'number') {
+    const englishOrdinalRules = new Intl.PluralRules('en', {
+      type: 'ordinal',
+    });
+    const suffixes = {
+      zero: 'th',
+      one: 'st',
+      two: 'nd',
+      few: 'rd',
+      many: 'th',
+      other: 'th',
+    };
+    return suffixes[englishOrdinalRules.select(percentile)];
+  }
+};
+
+const Indicator = ({indicator}:IIndicator) => {
+  return (
+    <li
+      className={indicator.isDisadvagtaged ? styles.disadvantagedIndicator : styles.indicatorBoxMain}
+      data-cy={'indicatorBox'}>
+      <div className={styles.indicatorRow}>
+        <div className={styles.indicatorName}>
+          {indicator.label}
+          <div className={styles.indicatorDesc}>
+            {indicator.description}
+          </div>
+        </div>
+        <div className={styles.indicatorValue}>
+          {readablePercentile(indicator.value)}
+          <sup className={styles.indicatorSuperscript}><span>
+            {getSuperscriptOrdinal(readablePercentile(indicator.value))}
+          </span></sup>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+export default Indicator;

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

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the Indicator checks if component renders 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        9700
+        <sup>
+          <span>
+            th
+          </span>
+        </sup>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;

client/src/components/Indicator/index.tsx

@@ -0,0 +1,3 @@
+import Indicator from './Indicator';
+
+export default Indicator;

client/src/components/MapLegend/index.tsx

@@ -3,13 +3,14 @@ import {useIntl} from 'gatsby-plugin-intl';
 
 import * as styles from './mapLegend.module.scss';
 import * as EXPLORE_COPY from '../../data/copy/explore';
+import DisadvantageDot from '../DisadvantageDot';
 
 const MapLegend = () => {
   const intl = useIntl();
   return (
     <div className={styles.legendContainer}>
-      <div className={styles.colorSwatch} />
+      <DisadvantageDot isBig={true} />
-      <div>
+      <div className={styles.legendTextBox}>
         <div className={'j40-h4'}>
           {intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_LABEL)}
         </div>

client/src/components/MapLegend/mapLegend.module.scss

@@ -1,26 +1,17 @@
 @import "../utils.scss";
 
-$min-color: #fafaf8;
-$med-color: rgba(26, 68, 128, 0.2);
-$max-color: rgba(26, 68, 128, 0.6);
-$alertInfoColor: #e7f6f8;
-
 .legendContainer {
   display: flex;
-  margin: 1rem 0 1rem 2.5rem;
   border: 1px solid #DFE1E2;
-  padding: .5rem 1.5rem 1rem 1.5rem;
+  margin: 1rem 0 1rem 2.5rem;
+  padding: 0 1.5rem 1rem 1.5rem;
 
+  .legendTextBox {
+    // Set maximum width for text area so that blue dot
+    // doesn't lose aspect ratio
+    flex-basis: 88%;
+  }
   @media screen and (max-width: 640px) {
     margin: 1rem 0 0;
   }
 }
-
-.colorSwatch {
-  flex: 1 0 2rem; 
-  box-sizing: border-box;
-  height: 2rem;
-  margin: 2rem 1.5rem 2rem 0;
-  border-radius: 50%;
-  background-color: $max-color;
-}

client/src/components/MapLegend/mapLegend.module.scss.d.ts

@@ -1,7 +1,7 @@
 declare namespace HowYouCanHelpModuleScssNamespace {
   export interface IHowYouCanHelpModuleScss {
     legendContainer: string;
-    colorSwatch: string;
+    legendTextBox: string;
   }
 }
 

client/src/data/constants.tsx

@@ -30,7 +30,7 @@ export const FEATURE_TILE_LOW_ZOOM_URL = featureURLForTilesetName('low');
 export const PERFORMANCE_MARKER_MAP_IDLE = 'MAP_IDLE';
 
 // Properties
-export const SCORE_PROPERTY_HIGH = 'Definition L (percentile)';
+export const SCORE_PROPERTY_HIGH = 'SL_PFS';
 export const SCORE_PROPERTY_LOW = 'L_SCORE';
 export const GEOID_PROPERTY = 'GEOID10';
 export const HIGH_SCORE_SOURCE_NAME = 'score-high';
@@ -42,28 +42,73 @@ export const CURRENTLY_SELECTED_FEATURE_HIGHLIGHT_LAYER_NAME = 'currently-select
 export const BLOCK_GROUP_BOUNDARY_LAYER_NAME = 'block-group-boundary-layer';
 
 
-// Properties
+// Indicator values:
-export const POVERTY_PROPERTY_PERCENTILE = 'Poverty (Less than 200% of federal poverty line) (percentile)';
+export const ASTHMA_PERCENTILE = 'AF_PFS';
-export const HOUSING_BURDEN_PROPERTY_PERCENTILE = 'Housing burden (percent) (percentile)';
+export const COUNTY_NAME = 'CF';
-export const LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'Linguistic isolation (percent) (percentile)';
+export const DIABETES_PERCENTILE = 'DF_PFS';
-export const UNEMPLOYMENT_PROPERTY_PERCENTILE = 'Unemployed civilians (percent) (percentile)';
+export const DIESEL_MATTER_PERCENTILE = 'DSF_PFS';
-export const TOTAL_POPULATION = 'Total population';
+export const ENERGY_PERCENTILE = 'EBF_PFS';
-export const EDUCATION_PROPERTY_PERCENTILE =
+export const HEART_PERCENTILE = 'HDF_PFS';
-  `Percent individuals age 25 or over with less than high school degree (percentile)`;
+export const HIGH_SCHOOL_PROPERTY_PERCENTILE = `HSEF`;
-export const COUNTY_NAME = 'County Name';
+export const HOUSING_BURDEN_PROPERTY_PERCENTILE = 'HBF_PFS';
-export const STATE_NAME = 'State Name';
+export const LEAD_PAINT_PERCENTILE = 'LPF_PFS';
-export const DIABETES_PERCENTILE = 'Diagnosed diabetes among adults aged >=18 years (percentile)';
+export const LIFE_PERCENTILE = 'LLEF_PFS';
-export const ASTHMA_PERCENTILE = 'Current asthma among adults aged >=18 years (percentile)';
+export const LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'LIF_PFS';
-export const HEART_PERCENTILE = 'Coronary heart disease among adults aged >=18 years (percentile)';
+export const LOW_MEDIAN_INCOME_PERCENTILE = 'LMI_PFS';
-export const LIFE_PERCENTILE = 'Life expectancy (years) (percentile)';
+export const PM25_PERCENTILE = 'PM25F_PFS';
-export const TRAFFIC_PERCENTILE = 'Traffic proximity and volume (percentile)';
+export const POVERTY_PROPERTY_PERCENTILE = 'P200_PFS';
-export const FEMA_PERCENTILE = 'FEMA Risk Index Expected Annual Loss Score (percentile)';
+export const STATE_NAME = 'SF';
-export const ENERGY_PERCENTILE = 'Energy burden (percentile)';
+export const TOTAL_POPULATION = 'TPF';
-export const WASTEWATER_PERCENTILE = 'Wastewater discharge (percentile)';
+export const TRAFFIC_PERCENTILE = 'TF_PFS';
-export const LEAD_PAINT_PERCENTILE = 'Percent pre-1960s housing (lead paint indicator) (percentile)';
+export const UNEMPLOYMENT_PROPERTY_PERCENTILE = 'UF_PFS';
-export const DIESEL_MATTER_PERCENTILE = 'Diesel particulate matter (percentile)';
+export const WASTEWATER_PERCENTILE = 'WF_PFS';
-export const PM25_PERCENTILE = 'Particulate matter (PM2.5) (percentile)';
+export const EXP_AGRICULTURE_LOSS_PERCENTILE = 'EALR_PFS';
-export const AREA_MEDIAN_INCOME_PERCENTILE = 'Median household income (% of AMI) (percentile)';
+export const EXP_BUILDING_LOSS_PERCENTILE = 'EBLR_PFS';
+export const EXP_POPULATION_LOSS_PERCENTILE = 'EPLR_PFS';
+export const MEDIAN_HOME_VALUE_PERCENTILE = 'MHVF_PFS';
+export const POVERTY_BELOW_100_PERCENTILE = 'P100_PFS';
+export const POVERTY_BELOW_200_PERCENTILE = 'P200_PFS';
+export const PROXIMITY_NPL_SITES_PERCENTILE = 'NPL_PFS';
+export const PROXIMITY_RMP_SITES_PERCENTILE = 'RMP_PFS';
+export const PROXIMITY_TSDF_SITES_PERCENTILE = 'TSDF_PFS';
+
+// Category booleans (disadvantaged or not):
+export const IS_CLIMATE_FACTOR_DISADVANTAGED_L = 'L_CLT';
+export const IS_WORKFORCE_FACTOR_DISADVANTAGED_L = 'L_WKFC';
+export const IS_WATER_FACTOR_DISADVANTAGED_L = 'L_WTR';
+export const IS_ENERGY_FACTOR_DISADVANTAGED_L = 'L_ENY';
+export const IS_TRANSPORT_FACTOR_DISADVANTAGED_L = 'L_TRN';
+export const IS_HOUSING_FACTOR_DISADVANTAGED_L = 'L_HSG';
+export const IS_POLLUTION_FACTOR_DISADVANTAGED_L = 'L_PLN';
+export const IS_HEALTH_FACTOR_DISADVANTAGED_L = 'L_HLTH';
+
+// Indicator booleans (disadvangted or not): (GTE = greater than or equal)
+export const IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME = 'EPLRLI';
+export const IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME = 'EALRLI';
+export const IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME = 'EBLRLI';
+export const IS_GTE_90_PM25_AND_IS_LOW_INCOME = 'PM25LI';
+export const IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME = 'EBLI';
+export const IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME = 'DPMLI';
+export const IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME = 'TPLI';
+export const IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME = 'LPMHVLI';
+export const IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME = 'HBLI';
+export const IS_GTE_90_RMP_AND_IS_LOW_INCOME = 'RMPLI';
+export const IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME = 'SFLI';
+export const IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME = 'HWLI';
+export const IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME = 'WDLI';
+export const IS_GTE_90_DIABETES_AND_IS_LOW_INCOME = 'DLI';
+export const IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME = 'ALI';
+export const IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME = 'HDLI';
+export const IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME = 'LLELI';
+export const IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME = 'LILHSE';
+export const IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU = 'PLHSE';
+export const IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU = 'LMILHSE';
+export const IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU = 'ULHSE';
+export const IS_FEDERAL_POVERTY_LEVEL_200 = 'FPL200S';
+export const TOTAL_THRESHOLD_CRITERIA = 'TC';
+export const IS_GTE_90_ISLAND_AREA_UNEMPLOYMENT_AND_IS_LOW_HS_EDU_2009 = 'IAULHSE';
+export const IS_GTE_90_ISLAND_AREA_BELOW_100_POVERTY_AND_IS_LOW_HS_EDU_2009 = 'ISPLHSE';
+export const IS_GTE_90_ISLAND_AREA_LOW_MEDIAN_INCOME_AND_IS_LOW_HS_EDU_2009 = 'IALMILHSE';
 
 export type J40Properties = { [key: string]: any };
 
@@ -136,7 +181,7 @@ export const DEFAULT_OUTLINE_COLOR = '#4EA5CF';
 export const MIN_COLOR = '#FFFFFF';
 export const MED_COLOR = '#D1DAE6';
 export const MAX_COLOR = '#768FB3';
-export const BORDER_HIGHLIGHT_COLOR = '#00BDE3';
+export const BORDER_HIGHLIGHT_COLOR = '#1A4480';
 export const CURRENTLY_SELECTED_FEATURE_LAYER_OPACITY = 0.5;
 
 // Widths

client/src/data/copy/explore.tsx

@@ -178,6 +178,17 @@ export const SIDE_PANEL_INITIAL_STATE = defineMessages({
   },
 });
 
+export const SIDE_PANEL_VERION = {
+  TITLE: <FormattedMessage
+    id={'areaDetail.side.panel.version.title'}
+    defaultMessage={ 'Methodology version {version}'}
+    description={'methodology version number'}
+    values= {{
+      version: METHODOLOGY_COPY.VERSION_NUMBER,
+    }}
+  />,
+};
+
 export const SIDE_PANEL_CBG_INFO = defineMessages({
   CENSUS_BLOCK_GROUP: {
     id: 'areaDetail.geographicInfo.censusBlockGroup',
@@ -204,41 +215,148 @@ export const SIDE_PANEL_CBG_INFO = defineMessages({
 export const COMMUNITY = {
   OF_FOCUS: <FormattedMessage
     id={'areaDetail.categorization.community.of.focus'}
-    defaultMessage={ 'Community of focus'}
+    defaultMessage={ 'YES'}
     description={'the communities the score currently is focused on'}
   />,
   NOT_OF_FOCUS: <FormattedMessage
     id= {'areaDetail.categorization.not.community.of.focus'}
-    defaultMessage= {'Not a community of focus'}
+    defaultMessage= {'No'}
     description= {'the communities the score currently is not focused on'}
   />,
+  IS_FOCUS: <FormattedMessage
+    id={'areaDetail.categorization.is.community.of.focus'}
+    defaultMessage={ 'Identified as disadvantaged?'}
+    description={'asking IF the communities is focused on'}
+  />,
+  SEND_FEEDBACK: <FormattedMessage
+    id={'areaDetail.categorization.send.feedback'}
+    defaultMessage={ 'send feedback'}
+    description={'link to send feedback'}
+  />,
 };
 
+export const SIDE_PANEL_CATEGORY = defineMessages({
+  CLIMATE: {
+    id: 'areaDetail.indicator.title.climate',
+    defaultMessage: 'Climate change',
+    description: 'Climate change title',
+  },
+  CLEAN_ENERGY: {
+    id: 'areaDetail.indicator.title.clean.energy',
+    defaultMessage: 'Clean, efficient energy ',
+    description: 'Clean, efficient energy title',
+  },
+  CLEAN_TRANSPORT: {
+    id: 'areaDetail.indicator.title.clean.transport',
+    defaultMessage: 'Clean transportation',
+    description: 'Clean transportation title',
+  },
+  SUSTAIN_HOUSE: {
+    id: 'areaDetail.indicator.title.sustain.house',
+    defaultMessage: 'Sustainable housing',
+    description: 'Sustainable housing title',
+  },
+  LEG_POLLUTE: {
+    id: 'areaDetail.indicator.title.legacy.pollution',
+    defaultMessage: 'Legacy pollution',
+    description: 'Legacy pollution title',
+  },
+  CLEAN_WATER: {
+    id: 'areaDetail.indicator.title.clean.water',
+    defaultMessage: 'Clean water and waste',
+    description: 'Clean water and waste title',
+  },
+  HEALTH_BURDEN: {
+    id: 'areaDetail.indicator.title.health.burden',
+    defaultMessage: 'Health burdens',
+    description: 'Health burdens title',
+  },
+  WORK_DEV: {
+    id: 'areaDetail.indicator.title.work.dev',
+    defaultMessage: 'Workforce development',
+    description: 'Workforce development title',
+  },
+});
+
 export const SIDE_PANEL_INDICATORS = defineMessages({
-  INDICATOR_COLUMN_HEADER: {
+  EXP_AG_LOSS: {
-    id: 'areaDetail.indicators.indicatorColumnHeader',
+    id: 'areaDetail.indicator.exp.ag.loss',
-    defaultMessage: 'Indicator',
+    defaultMessage: 'Expected agriculture loss rate',
-    description: 'the population of the feature selected',
+    description: 'agriculture loss rate',
   },
-  PERCENTILE_COLUMN_HEADER: {
+  EXP_BLD_LOSS: {
-    id: 'areaDetail.indicators.percentileColumnHeader',
+    id: 'areaDetail.indicator.exp.bld.loss',
-    defaultMessage: 'Percentile (0-100)',
+    defaultMessage: 'Expected building loss rate',
-    description: 'the population of the feature selected',
+    description: 'building loss rate',
   },
-  POVERTY: {
+  EXP_POP_LOSS: {
-    id: 'areaDetail.indicator.poverty',
+    id: 'areaDetail.indicator.exp.pop.loss',
-    defaultMessage: 'Poverty',
+    defaultMessage: 'Expected population loss rate',
-    description: 'Household income is less than or equal to twice the federal "poverty level"',
+    description: 'population loss rate',
   },
-  AREA_MEDIAN_INCOME: {
+  LOW_INCOME: {
-    id: 'areaDetail.indicator.areaMedianIncome',
+    id: 'areaDetail.indicator.low.income',
-    defaultMessage: 'Area Median Income',
+    defaultMessage: 'Low income',
-    description: 'calculated as percent of the area median income',
+    description: 'low income',
   },
-  EDUCATION: {
+  ENERGY_BURDEN: {
-    id: 'areaDetail.indicator.education',
+    id: 'areaDetail.indicator.energyBurden',
-    defaultMessage: 'Education, less than high school',
+    defaultMessage: 'Energy cost burden',
-    description: 'Percent of people age 25 or older that didn’t get a high school diploma',
+    description: 'Average annual energy cost ($) divided by household income',
+  },
+  PM_2_5: {
+    id: 'areaDetail.indicator.pm25',
+    defaultMessage: 'PM2.5',
+    description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
+  },
+  DIESEL_PARTICULATE_MATTER: {
+    id: 'areaDetail.indicator.dieselPartMatter',
+    defaultMessage: 'Diesel particulate matter',
+    description: 'Diesel particulate matter level in air',
+  },
+  TRAFFIC_VOLUME: {
+    id: 'areaDetail.indicator.trafficVolume',
+    defaultMessage: 'Traffic',
+    description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
+      ' divided by distance in meters',
+  },
+  LEAD_PAINT: {
+    id: 'areaDetail.indicator.leadPaint',
+    defaultMessage: 'Lead paint',
+    description: 'Housing units built pre-1960, used as an indicator of potential'+
+      ' lead paint exposure in homes',
+  },
+  MED_HOME_VAL: {
+    id: 'areaDetail.indicator.med.home.val',
+    defaultMessage: 'Median home value',
+    description: 'Median home value of owner-occupied housing units in the area.',
+  },
+  HOUSE_BURDEN: {
+    id: 'areaDetail.indicator.houseBurden',
+    defaultMessage: 'Housing cost burden',
+    description: 'People ages 18 and up who report having been told by a doctor,' +
+      ' nurse, or other health professionals that they have diabetes other than diabetes during pregnancy',
+  },
+  PROX_HAZ: {
+    id: 'areaDetail.indicator.prox.haz',
+    defaultMessage: 'Proximity to hazardous waste facilities',
+    description: 'Count of hazardous waste facilities ',
+  },
+  PROX_NPL: {
+    id: 'areaDetail.indicator.prox.npl',
+    defaultMessage: 'Proximity to NPL sites',
+    description: 'Count of proposed or listed NPL ',
+  },
+  PROX_RMP: {
+    id: 'areaDetail.indicator.prox.rmp',
+    defaultMessage: 'Proximity to RMP sites',
+    description: 'Count of proposed or listed RMP',
+  },
+  WASTE_WATER: {
+    id: 'areaDetail.indicator.wasteWater',
+    defaultMessage: 'Wastewater discharge',
+    description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
+      ' kilometers',
   },
   ASTHMA: {
     id: 'areaDetail.indicator.asthma',
@@ -250,164 +368,182 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
     defaultMessage: 'Diabetes',
     description: 'diabetes from dr or nurse',
   },
-  DIESEL_PARTICULATE_MATTER: {
-    id: 'areaDetail.indicator.dieselPartMatter',
-    defaultMessage: 'Diesel particulate matter',
-    description: 'Diesel particulate matter level in air',
-  },
-  ENERGY_BURDEN: {
-    id: 'areaDetail.indicator.energyBurden',
-    defaultMessage: 'Energy burden',
-    description: 'Average annual energy cost ($) divided by household income',
-  },
-  FEMA_RISK: {
-    id: 'areaDetail.indicator.femaRisk',
-    defaultMessage: 'FEMA Risk Index',
-    description: 'Risk based on 18 natural hazard types, in addition to a '+
-      'community\'s social vulnerability and community resilience',
-  },
   HEART_DISEASE: {
     id: 'areaDetail.indicator.heartDisease',
     defaultMessage: 'Heart disease',
     description: 'People ages 18 and up who report ever having been told by a' +
       'doctor, nurse, or other health professionals that they had angina or coronary heart disease',
   },
-  HOUSE_BURDEN: {
-    id: 'areaDetail.indicator.houseBurden',
-    defaultMessage: 'Housing cost burden',
-    description: 'People ages 18 and up who report having been told by a doctor,' +
-      ' nurse, or other health professionals that they have diabetes other than diabetes during pregnancy',
-  },
-  LEAD_PAINT: {
-    id: 'areaDetail.indicator.leadPaint',
-    defaultMessage: 'Lead paint',
-    description: 'Housing units built pre-1960, used as an indicator of potential'+
-      ' lead paint exposure in homes',
-  },
   LIFE_EXPECT: {
     id: 'areaDetail.indicator.lifeExpect',
-    defaultMessage: 'Life expectancy',
+    defaultMessage: 'Low life expectancy',
     description: 'Estimated years of life expectancy',
   },
-  PM_2_5: {
+  LOW_MED_INC: {
-    id: 'areaDetail.indicator.pm25',
+    id: 'areaDetail.indicator.low.med.income',
-    defaultMessage: 'PM2.5',
+    defaultMessage: 'Low median income',
-    description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
+    description: 'Low median income',
   },
-  TRAFFIC_VOLUME: {
+  LING_ISO: {
-    id: 'areaDetail.indicator.trafficVolume',
+    id: 'areaDetail.indicator.ling.iso',
-    defaultMessage: 'Traffic proximity and volume',
+    defaultMessage: 'Linguistic isolation',
-    description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
+    description: 'Linguistic isolation',
-      ' divided by distance in meters',
   },
-  WASTE_WATER: {
+  UNEMPLOY: {
-    id: 'areaDetail.indicator.wasteWater',
+    id: 'areaDetail.indicator.unemploy',
-    defaultMessage: 'Wastewater discharge',
+    defaultMessage: 'Unemployment',
-    description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
+    description: 'Unemployment',
-      ' kilometers',
+  },
+  POVERTY: {
+    id: 'areaDetail.indicator.poverty',
+    defaultMessage: 'Poverty',
+    description: 'Unemployment',
+  },
+  HIGH_SCL: {
+    id: 'areaDetail.indicator.high.school',
+    defaultMessage: 'High school degree achievement rate',
+    description: 'High school degree achievement rate',
+
   },
 });
 
 
 export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
-  AREA_MEDIAN_INCOME: {
+  EXP_AG_LOSS: {
-    id: 'areaDetail.indicator.description.area_median_income',
+    id: 'areaDetail.indicator.description.exp.ag.loss',
-    defaultMessage: 'Median income of the census tract calculated as a percent of the metropolitan'+
+    defaultMessage: 'Economic loss rate to agriculture resulting from natural hazards',
-        ' area’s or state\'s median income',
+    description: 'Economic loss rate to agriculture resulting from natural hazards',
-    description: 'Median income of the census tract calculated as a percent of the metropolitan'+
+
-    ' area’s or state\'s median income',
   },
-  EDUCATION: {
+  EXP_BLD_LOSS: {
-    id: 'areaDetail.indicator.description.education',
+    id: 'areaDetail.indicator.description.exp.bld.loss',
-    defaultMessage: 'Percent of people age 25 or older that didn’t get a high school diploma',
+    defaultMessage: 'Economic loss rate to buildings resulting from natural hazards',
-    description: 'Percent of people age 25 or older that didn’t get a high school diploma',
+    description: 'Economic loss rate to buildings resulting from natural hazards',
   },
-  POVERTY: {
+  EXP_POP_LOSS: {
-    id: 'areaDetail.indicator.description.poverty',
+    id: 'areaDetail.indicator.description.exp.pop.loss',
-    defaultMessage: 'Percent of a tract\'s population in households where the household income' +
+    defaultMessage: 'Economic loss rate to the population in fatalities and injuries resulting from natural hazards',
-    ' is at or below 100% of the federal poverty level',
+    description: 'Economic loss rate to the population in fatalities and injuries resulting from natural hazards',
-    description: 'Percent of a tract\'s population in households where the household income' +
-    ' is at or below 100% of the federal poverty level',
   },
-  ASTHMA: {
+  LOW_INCOME: {
-    id: 'areaDetail.indicator.description.asthma',
+    id: 'areaDetail.indicator.description.low.income',
-    defaultMessage: 'People who answer “yes” to both of the questions: “Have you ever been told by' +
+    defaultMessage: 'Household income is less than or equal to twice the federal poverty level',
-    ' a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?"',
+    description: 'Household income is less than or equal to twice the federal poverty level',
-    description: 'People who answer “yes” to both of the questions: “Have you ever been told by' +
-    ' a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?"',
-  },
-  DIABETES: {
-    id: 'areaDetail.indicator.description.diabetes',
-    defaultMessage: 'People ages 18 and up who report having been told by a doctor, nurse, or other' +
-    ' health professionals that they have diabetes other than diabetes during pregnancy',
-    description: 'People ages 18 and up who report having been told by a doctor, nurse, or other' +
-    ' health professionals that they have diabetes other than diabetes during pregnancy',
-  },
-  DIESEL_PARTICULATE_MATTER: {
-    id: 'areaDetail.indicator.description.dieselPartMatter',
-    defaultMessage: 'Mixture of particles that is part of diesel exhaust in the air',
-    description: 'Mixture of particles that is part of diesel exhaust in the air',
   },
+
   ENERGY_BURDEN: {
     id: 'areaDetail.indicator.description.energyBurden',
-    defaultMessage: 'Average annual energy cost ($) divided by household income',
+    defaultMessage: 'Energy costs divided by household income',
-    description: 'Average annual energy cost ($) divided by household income',
+    description: 'Energy costs divided by household income',
-  },
-  FEMA_RISK: {
-    id: 'areaDetail.indicator.description.femaRisk',
-    defaultMessage: 'Expected Annual Loss Score, which is the average economic loss in dollars' +
-    ' resulting from natural hazards each year.',
-    description: 'Expected Annual Loss Score, which is the average economic loss in dollars' +
-    ' resulting from natural hazards each year.',
-  },
-  HEART_DISEASE: {
-    id: 'areaDetail.indicator.description.heartDisease',
-    defaultMessage: 'People ages 18 and up who report ever having been told by a' +
-    ' doctor, nurse, or other health professionals that they had angina or coronary heart disease',
-    description: 'People ages 18 and up who report ever having been told by a' +
-    ' doctor, nurse, or other health professionals that they had angina or coronary heart disease',
-  },
-  HOUSE_BURDEN: {
-    id: 'areaDetail.indicator.description.houseBurden',
-    defaultMessage: 'Households that are low income and spend more than 30% of their income on' +
-    ' housing costs',
-    description: 'Households that are low income and spend more than 30% of their income on' +
-    ' housing costs',
-  },
-  LEAD_PAINT: {
-    id: 'areaDetail.indicator.description.leadPaint',
-    defaultMessage: 'Housing units built pre-1960, used as an indicator of potential'+
-    ' lead paint exposure in homes',
-    description: 'Housing units built pre-1960, used as an indicator of potential'+
-    ' lead paint exposure in homes',
-  },
-  LIFE_EXPECT: {
-    id: 'areaDetail.indicator.description.lifeExpect',
-    defaultMessage: 'Estimated years of life expectancy',
-    description: 'Estimated years of life expectancy',
   },
   PM_2_5: {
     id: 'areaDetail.indicator.description.pm25',
-    defaultMessage: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
+    defaultMessage: 'Fine inhalable particles, 2.5 micrometers and smaller',
-    description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
+    description: 'Fine inhalable particles, 2.5 micrometers and smaller',
+  },
+
+  DIESEL_PARTICULATE_MATTER: {
+    id: 'areaDetail.indicator.description.dieselPartMatter',
+    defaultMessage: 'Diesel exhaust in the air',
+    description: 'Diesel exhaust in the air',
   },
   TRAFFIC_VOLUME: {
     id: 'areaDetail.indicator.description.trafficVolume',
-    defaultMessage: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
+    defaultMessage: 'Count of vehicles at major roads within 500 meters',
-    ' divided by distance in meters',
+    description: 'Count of vehicles at major roads within 500 meters',
-    description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
-    ' divided by distance in meters',
   },
+
+  LEAD_PAINT: {
+    id: 'areaDetail.indicator.description.leadPaint',
+    defaultMessage: 'Pre-1960 housing',
+    description: 'Pre-1960 housing',
+  },
+  MED_HOME_VAL: {
+    id: 'areaDetail.indicator.description.med.home.val',
+    defaultMessage: 'Meidan home value in area',
+    description: 'Meidan home value in area',
+
+  },
+  HOUSE_BURDEN: {
+    id: 'areaDetail.indicator.description.houseBurden',
+    defaultMessage: 'Low income households spending more than 30% of income on housing',
+    description: 'Low income households spending more than 30% of income on housing',
+  },
+
+  PROX_HAZ: {
+    id: 'areaDetail.indicator.description.prox.haz',
+    defaultMessage: 'Count of hazardous waste facilities within 5 km',
+    description: 'Count of hazardous waste facilities within 5 km',
+  },
+  PROX_NPL: {
+    id: 'areaDetail.indicator.description.prox.npl',
+    defaultMessage: 'Proposed or listed NPL (Superfund) sites within 5 km',
+    description: 'Proposed or listed NPL (Superfund) sites within 5 km',
+  },
+  PROX_RMP: {
+    id: 'areaDetail.indicator.description.prox.npl',
+    defaultMessage: 'Risk Management Plan facilities within 5 km',
+    description: 'Risk Management Plan facilities within 5 km',
+  },
+
   WASTE_WATER: {
     id: 'areaDetail.indicator.description.wasteWater',
-    defaultMessage: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
+    defaultMessage: 'Toxic concentrations at stream segments within 500 meters',
-    ' kilometers',
+    description: 'Toxic concentrations at stream segments within 500 meters',
-    description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
+  },
-    ' kilometers',
+
+  ASTHMA: {
+    id: 'areaDetail.indicator.description.asthma',
+    defaultMessage: 'Number of people who have been told they have asthma',
+    description: 'Number of people who have been told they have asthma',
+  },
+  DIABETES: {
+    id: 'areaDetail.indicator.description.diabetes',
+    defaultMessage: 'People ages 18 years and older who have diabetes other than diabetes during pregnancy',
+    description: 'People ages 18 years and older who have diabetes other than diabetes during pregnancy',
+  },
+  HEART_DISEASE: {
+    id: 'areaDetail.indicator.description.heartDisease',
+    defaultMessage: 'People ages 18 years and older who have been told they have heart disease',
+    description: 'People ages 18 years and older who have been told they have heart disease',
+  },
+  LOW_LIFE_EXPECT: {
+    id: 'areaDetail.indicator.description.lifeExpect',
+    defaultMessage: 'Average number of years of life a person can expect to live',
+    description: 'Average number of years of life a person can expect to live',
+  },
+
+  LOW_MED_INCOME: {
+    id: 'areaDetail.indicator.description.low.med.income',
+    defaultMessage: 'Median income calculated as a percent of the area’s median income',
+    description: 'Median income calculated as a percent of the area’s median income',
+  },
+  LING_ISO: {
+    id: 'areaDetail.indicator.description.ling.iso',
+    defaultMessage: `Households in which no one age 14 and over speaks English only or also speaks 
+    a language other than English`,
+    description: `Households in which no one age 14 and over speaks English only or also speaks 
+    a language other than English`,
+  },
+  UNEMPLOY: {
+    id: 'areaDetail.indicator.description.unemploy',
+    defaultMessage: 'Number of unemployed people as a percentage of the labor force',
+    description: 'Number of unemployed people as a percentage of the labor force',
+  },
+  POVERTY: {
+    id: 'areaDetail.indicator.description.poverty',
+    defaultMessage: `Percent of individuals in households where the household income is at or 
+    below 100% of the federal poverty level`,
+    description: `Percent of individuals in households where the household income is at or 
+    below 100% of the federal poverty level`,
+  },
+  HIGH_SKL: {
+    id: 'areaDetail.indicator.description.high.school',
+    defaultMessage: 'Percent of people ages 25 years or older whose education level is less than a high school diploma',
+    description: 'Percent of people ages 25 years or older whose education level is less than a high school diploma',
   },
 });
 
-
 export const DOWNLOAD_DRAFT = {
   PARAGRAPH_1: <FormattedMessage
     id={'download.draft.ptag.1'}

client/src/styles/global.scss

@@ -293,15 +293,6 @@ This section will outline styles that are component specific
   }
 }
 
-//Area Detail Component
-p.secondary.j40-indicator {
-  max-width: 10rem;
-
- @media screen and (max-width: 1024px) {
-   max-width: 80%;
-  }
-}
-
 /* 
 ***************************************
 *      TIMELINE / PROCESS LIST STYLES