Update FE to Def M (#1235)

* Update to Def M

- update first column of meth page, formula intro, ID,AND, & remove THEN
- remove Low income box under download box
- update id as disadv. in each category
- modify AND clause in each category
- add dataset Higher ed enrollment
- update snapshots

* Fix HS and higher ed DOM id in links

* Update side panel description to def m

* Fix typo on AND part of the formula

* Update snapshots

* Update snapshot

* Resolve rebase error where Send feedback was removed

- add back send feedback button
- update snapshots

* Add back blue indicator boolean

client/src/components/AreaDetail/AreaDetail.tsx

@@ -0,0 +1,442 @@
+/* eslint-disable quotes */
+// External Libs:
+import React from 'react';
+import {useIntl, FormattedMessage} from 'gatsby-plugin-intl';
+import {Accordion, Button} from '@trussworks/react-uswds';
+
+// Components:
+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 CONTACT_COPY from '../../data/copy/contact';
+// @ts-ignore
+// import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail.svg';
+
+interface IAreaDetailProps {
+  properties: constants.J40Properties,
+}
+
+/**
+ * This interface is used as define the various fields for each indicator in the side panel
+ *  label: the indicator label or title
+ *  description: the description of the indicator used in the side panel
+ *  value: the number from the geoJSON tile
+ *  isDisadvagtaged: the flag from the geoJSON tile
+ *  isPercent: is the value a percent or percentile
+ *  */
+export interface indicatorInfo {
+  label: string,
+  description: string,
+  value: number,
+  isDisadvagtaged: boolean,
+  isPercent?: boolean,
+}
+
+const AreaDetail = ({properties}:IAreaDetailProps) => {
+  const intl = useIntl();
+
+  // console.log the properties of the census that is selected:
+  console.log("Area Detail properies: ", properties);
+
+  const score = properties[constants.SCORE_PROPERTY_HIGH] ? properties[constants.SCORE_PROPERTY_HIGH] as number : 0;
+  const blockGroup = properties[constants.GEOID_PROPERTY] ? properties[constants.GEOID_PROPERTY] : "N/A";
+  const population = properties[constants.TOTAL_POPULATION] ? properties[constants.TOTAL_POPULATION] : "N/A";
+  const countyName = properties[constants.COUNTY_NAME] ? properties[constants.COUNTY_NAME] : "N/A";
+  const stateName = properties[constants.STATE_NAME] ? properties[constants.STATE_NAME] : "N/A";
+
+  const isCommunityFocus = score >= constants.SCORE_BOUNDARY_THRESHOLD;
+
+  const feedbackEmailSubject = `Census tract ID ${blockGroup}, ${countyName}, ${stateName}`;
+  const feedbackEmailBody = intl.formatMessage(EXPLORE_COPY.SEND_FEEDBACK.EMAIL_BODY);
+
+
+  // Define each indicator in the side panel with constants from copy file (for intl)
+  // Indicators are grouped by category
+  const expAgLoss:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_AG_LOSS),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_AG_LOSS),
+    value: properties[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,
+  };
+
+  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 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,
+    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 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,
+    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 lifeExpect:indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_LIFE_EXPECT),
+    value: properties[constants.LIFE_PERCENTILE] ?
+      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_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED] &&
+      properties[constants.IS_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED] == 1 ?
+       true : false,
+    isPercent: true,
+  };
+
+  // Aggregate indicators based on categories
+  const categories = [
+    {
+      id: 'climate-change',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE),
+      indicators: [expAgLoss, expBldLoss, expPopLoss, lowInc],
+      isDisadvagtaged: properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] ?
+        properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] : 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_M] ?
+        properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_M] : 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_M] ?
+        properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_M] : 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_M] ?
+        properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_M] : 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_M] ?
+        properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_M] : null,
+    },
+    {
+      id: 'clean-water',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
+      indicators: [wasteWater, lowInc],
+      isDisadvagtaged: properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] ?
+        properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] : 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_M] ?
+        properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_M] : null,
+    },
+    {
+      id: 'work-dev',
+      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
+      indicators: [lowMedInc, lingIso, unemploy, poverty, highSchool],
+      isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] ?
+        properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] : 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 Header */}
+        <div className={styles.categoryHeader}>
+          <div>{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.INDICATOR)}</div>
+          <div>{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.PERCENTILE)}</div>
+        </div>
+
+        {/* Category Indicators */}
+        {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}>
+            {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.CENSUS_BLOCK_GROUP)}
+          </span>
+          <span className={styles.censusText}>{` ${blockGroup}`}</span>
+        </li>
+        <li>
+          <span className={styles.censusLabel}>
+            {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.COUNTY)}
+          </span>
+          <span className={styles.censusText}>{` ${countyName}`}</span>
+        </li>
+        <li>
+          <span className={styles.censusLabel}>
+            {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.STATE)}
+          </span>
+          <span className={styles.censusText}>{` ${stateName}`}</span>
+        </li>
+        <li>
+          <span className={styles.censusLabel}>
+            {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.POPULATION)}
+          </span>
+          <span className={styles.censusText}>{` ${population.toLocaleString()}`}</span>
+        </li>
+      </ul>
+
+      {/* Disadvantaged? */}
+      <div className={styles.categorization}>
+
+        {/* Questions asking if disadvantaged? */}
+        <div className={styles.isInFocus}>
+          {EXPLORE_COPY.COMMUNITY.IS_FOCUS}
+        </div>
+
+        {/* YES with Dot or NO with no Dot  */}
+        <div className={styles.communityOfFocus}>
+          {isCommunityFocus ?
+            <>
+              <h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
+              <DisadvantageDot isDisadvantaged={isCommunityFocus}/>
+            </> :
+          <h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
+          }
+        </div>
+
+        {/* Number of thresholds exceeded */}
+        <div className={
+            properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS] > 0 ?
+            styles.showThresholdExceed : styles.hideThresholdExceed
+        }>
+          <FormattedMessage
+            id={'explore.page.threshold.count.exceed'}
+            description={"threshold exceeded count"}
+            defaultMessage={'{disadvCount} of {totalCount} thresholds exceeded'}
+            values={{
+              disadvCount: properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS],
+              totalCount: constants.TOTAL_NUMBER_OF_INDICATORS,
+            }}/>
+        </div>
+
+        {/* Send Feedback button */}
+        <a
+          className={styles.sendFeedbackBtn}
+          // The mailto string must be on a single line otherwise the email does not display subject and body
+          href={`
+            mailto:${CONTACT_COPY.FEEDBACK_EMAIL}?subject=${feedbackEmailSubject}&body=${feedbackEmailBody}
+          `}
+        >
+          <Button
+            type="button">
+            <div>
+              {EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
+            </div>
+            {/* <div>
+                <img src={mailIcon} alt={'mail icon for email'}/>
+              </div> */}
+          </Button>
+        </a>
+
+      </div>
+
+      {/* All category accordions in this component */}
+      <Accordion multiselectable={true} items={categoryItems}/>
+
+    </aside>
+  );
+};
+
+export default AreaDetail;

client/src/components/AreaDetail/index.tsx

@@ -1,442 +1,3 @@
-/* eslint-disable quotes */
+import AreaDetail from './AreaDetail';
-// External Libs:
-import React from 'react';
-import {useIntl, FormattedMessage} from 'gatsby-plugin-intl';
-import {Accordion, Button} from '@trussworks/react-uswds';
-
-// Components:
-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 CONTACT_COPY from '../../data/copy/contact';
-// @ts-ignore
-// import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail.svg';
-
-interface IAreaDetailProps {
-  properties: constants.J40Properties,
-}
-
-/**
- * This interface is used as define the various fields for each indicator in the side panel
- *  label: the indicator label or title
- *  description: the description of the indicator used in the side panel
- *  value: the number from the geoJSON tile
- *  isDisadvagtaged: the flag from the geoJSON tile
- *  isPercent: is the value a percent or percentile
- *  */
-export interface indicatorInfo {
-  label: string,
-  description: string,
-  value: number,
-  isDisadvagtaged: boolean,
-  isPercent?: boolean,
-}
-
-const AreaDetail = ({properties}:IAreaDetailProps) => {
-  const intl = useIntl();
-
-  // console.log the properties of the census that is selected:
-  console.log("Area Detail properies: ", properties);
-
-  const score = properties[constants.SCORE_PROPERTY_HIGH] ? properties[constants.SCORE_PROPERTY_HIGH] as number : 0;
-  const blockGroup = properties[constants.GEOID_PROPERTY] ? properties[constants.GEOID_PROPERTY] : "N/A";
-  const population = properties[constants.TOTAL_POPULATION] ? properties[constants.TOTAL_POPULATION] : "N/A";
-  const countyName = properties[constants.COUNTY_NAME] ? properties[constants.COUNTY_NAME] : "N/A";
-  const stateName = properties[constants.STATE_NAME] ? properties[constants.STATE_NAME] : "N/A";
-
-  const isCommunityFocus = score >= constants.SCORE_BOUNDARY_THRESHOLD;
-
-  const feedbackEmailSubject = `Census tract ID ${blockGroup}, ${countyName}, ${stateName}`;
-  const feedbackEmailBody = intl.formatMessage(EXPLORE_COPY.SEND_FEEDBACK.EMAIL_BODY);
-
-
-  // Define each indicator in the side panel with constants from copy file (for intl)
-  // Indicators are grouped by category
-  const expAgLoss:indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_AG_LOSS),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_AG_LOSS),
-    value: properties[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,
-  };
-
-  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 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,
-    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 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,
-    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 lifeExpect:indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_LIFE_EXPECT),
-    value: properties[constants.LIFE_PERCENTILE] ?
-      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_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED] &&
-     properties[constants.IS_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED] == 1 ?
-      true : false,
-    isPercent: true,
-  };
-
-  // Aggregate indicators based on categories
-  const categories = [
-    {
-      id: 'climate-change',
-      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE),
-      indicators: [expAgLoss, expBldLoss, expPopLoss, lowInc],
-      isDisadvagtaged: properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] ?
-        properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] : 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_M] ?
-        properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_M] : 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_M] ?
-        properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_M] : 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_M] ?
-        properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_M] : 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_M] ?
-        properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_M] : null,
-    },
-    {
-      id: 'clean-water',
-      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
-      indicators: [wasteWater, lowInc],
-      isDisadvagtaged: properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] ?
-        properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] : 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_M] ?
-        properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_M] : null,
-    },
-    {
-      id: 'work-dev',
-      titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
-      indicators: [lowMedInc, lingIso, unemploy, poverty, highSchool],
-      isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] ?
-        properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] : 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 Header */}
-        <div className={styles.categoryHeader}>
-          <div>{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.INDICATOR)}</div>
-          <div>{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.PERCENTILE)}</div>
-        </div>
-
-        {/* Category Indicators */}
-        {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}>
-            {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.CENSUS_BLOCK_GROUP)}
-          </span>
-          <span className={styles.censusText}>{` ${blockGroup}`}</span>
-        </li>
-        <li>
-          <span className={styles.censusLabel}>
-            {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.COUNTY)}
-          </span>
-          <span className={styles.censusText}>{` ${countyName}`}</span>
-        </li>
-        <li>
-          <span className={styles.censusLabel}>
-            {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.STATE)}
-          </span>
-          <span className={styles.censusText}>{` ${stateName}`}</span>
-        </li>
-        <li>
-          <span className={styles.censusLabel}>
-            {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.POPULATION)}
-          </span>
-          <span className={styles.censusText}>{` ${population.toLocaleString()}`}</span>
-        </li>
-      </ul>
-
-      {/* Disadvantaged? */}
-      <div className={styles.categorization}>
-
-        {/* Questions asking if disadvantaged? */}
-        <div className={styles.isInFocus}>
-          {EXPLORE_COPY.COMMUNITY.IS_FOCUS}
-        </div>
-
-        {/* YES with Dot or NO with no Dot  */}
-        <div className={styles.communityOfFocus}>
-          {isCommunityFocus ?
-            <>
-              <h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
-              <DisadvantageDot isDisadvantaged={isCommunityFocus}/>
-            </> :
-          <h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
-          }
-        </div>
-
-        {/* Number of thresholds exceeded */}
-        <div className={
-            properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS] > 0 ?
-            styles.showThresholdExceed : styles.hideThresholdExceed
-        }>
-          <FormattedMessage
-            id={'explore.page.threshold.count.exceed'}
-            description={"threshold exceeded count"}
-            defaultMessage={'{disadvCount} of {totalCount} thresholds exceeded'}
-            values={{
-              disadvCount: properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS],
-              totalCount: constants.TOTAL_NUMBER_OF_INDICATORS,
-            }}/>
-        </div>
-
-        {/* Send Feedback button */}
-        <a
-          className={styles.sendFeedbackBtn}
-          // The mailto string must be on a single line otherwise the email does not display subject and body
-          href={`
-            mailto:${CONTACT_COPY.FEEDBACK_EMAIL}?subject=${feedbackEmailSubject}&body=${feedbackEmailBody}
-          `}
-        >
-          <Button
-            type="button">
-            <div>
-              {EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
-            </div>
-            {/* <div>
-                <img src={mailIcon} alt={'mail icon for email'}/>
-              </div> */}
-          </Button>
-        </a>
-
-      </div>
-
-      {/* All category accordions in this component */}
-      <Accordion multiselectable={true} items={categoryItems}/>
-
-    </aside>
-  );
-};
 
 export default AreaDetail;

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

@@ -174,7 +174,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
             <div>
               Low income
               <div>
-                Household income is less than or equal to twice the federal poverty level
+                
+      Household income is less than or equal to twice the federal poverty level when higher ed enrollment 
+      rate is less than 20% in order to exclude areas with college and graduate students
+    
               </div>
             </div>
             <div>
@@ -265,7 +268,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
             <div>
               Low income
               <div>
-                Household income is less than or equal to twice the federal poverty level
+                
+      Household income is less than or equal to twice the federal poverty level when higher ed enrollment 
+      rate is less than 20% in order to exclude areas with college and graduate students
+    
               </div>
             </div>
             <div>
@@ -356,7 +362,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
             <div>
               Low income
               <div>
-                Household income is less than or equal to twice the federal poverty level
+                
+      Household income is less than or equal to twice the federal poverty level when higher ed enrollment 
+      rate is less than 20% in order to exclude areas with college and graduate students
+    
               </div>
             </div>
             <div>
@@ -431,7 +440,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
             <div>
               Lead paint
               <div>
-                Percent of pre-1960 housing with a median home value is at or below 90th
+                
+      Percent of pre-1960 housing when median home value is at or below 90th percentile in order to 
+      exclude areas with high value, older homes
+    
               </div>
             </div>
             <div>
@@ -449,7 +461,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
             <div>
               Low income
               <div>
-                Household income is less than or equal to twice the federal poverty level
+                
+      Household income is less than or equal to twice the federal poverty level when higher ed enrollment 
+      rate is less than 20% in order to exclude areas with college and graduate students
+    
               </div>
             </div>
             <div>
@@ -558,7 +573,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
             <div>
               Low income
               <div>
-                Household income is less than or equal to twice the federal poverty level
+                
+      Household income is less than or equal to twice the federal poverty level when higher ed enrollment 
+      rate is less than 20% in order to exclude areas with college and graduate students
+    
               </div>
             </div>
             <div>
@@ -631,7 +649,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
             <div>
               Low income
               <div>
-                Household income is less than or equal to twice the federal poverty level
+                
+      Household income is less than or equal to twice the federal poverty level when higher ed enrollment 
+      rate is less than 20% in order to exclude areas with college and graduate students
+    
               </div>
             </div>
             <div>
@@ -763,7 +784,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
             <div>
               Low income
               <div>
-                Household income is less than or equal to twice the federal poverty level
+                
+      Household income is less than or equal to twice the federal poverty level when higher ed enrollment 
+      rate is less than 20% in order to exclude areas with college and graduate students
+    
               </div>
             </div>
             <div>
@@ -837,7 +861,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               Linguistic isolation
               <div>
                 
-      Percent of limited speaking households, which are households where no one over age 14 speaks English well
+      Percent of households where no one over the age 14 speaks English well
     
               </div>
             </div>
@@ -902,8 +926,8 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
               High school degree achievement rate
               <div>
                 
-      Percent (not a percentile) of people ages 25 years or older whose education level is less than a 
+      Percent of people ages 25 years or older whose education level is less than a high school diploma 
-      high school diploma
+      when higher ed enrollment rate is less than 20% in order to exclude areas with college and graduate students
     
               </div>
             </div>

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

@@ -30,6 +30,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       </h3>
       <p>
         
+      Communities are 
+        <strong>
+          identified as disadvantaged
+        </strong>
+         in this category 
+    
+      </p>
+      <p>
+        
       
         <strong>
           IF
@@ -56,20 +65,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       
       </p>
       <p>
+        
+      
         <strong>
           AND
         </strong>
-         is low income
+         is at or above 65th percentile for 
-        <sup>
+        <a
-          *
+          href="#low-income"
-        </sup>
+        >
-      </p>
+          low income
-      <p>
+        </a>
-        <strong>
+         WHEN 
-          THEN
+        <a
-        </strong>
+          href="#high-ed-enroll-rate"
-         the community is disadvantaged.
+        >
+          higher ed enrollment rate
+        </a>
+         is at or below 20%
+    
       </p>
+      <p />
     </div>
     <div>
       <h3>
@@ -77,6 +93,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       </h3>
       <p>
         
+      Communities are 
+        <strong>
+          identified as disadvantaged
+        </strong>
+         in this category 
+    
+      </p>
+      <p>
+        
         
         <strong>
           IF
@@ -97,20 +122,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       
       </p>
       <p>
+        
+      
         <strong>
           AND
         </strong>
-         is low income
+         is at or above 65th percentile for 
-        <sup>
+        <a
-          *
+          href="#low-income"
-        </sup>
+        >
-      </p>
+          low income
-      <p>
+        </a>
-        <strong>
+         WHEN 
-          THEN
+        <a
-        </strong>
+          href="#high-ed-enroll-rate"
-         the community is disadvantaged.
+        >
+          higher ed enrollment rate
+        </a>
+         is at or below 20%
+    
       </p>
+      <p />
     </div>
     <div>
       <h3>
@@ -118,6 +150,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       </h3>
       <p>
         
+      Communities are 
+        <strong>
+          identified as disadvantaged
+        </strong>
+         in this category 
+    
+      </p>
+      <p>
+        
         
         <strong>
           IF
@@ -138,20 +179,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       
       </p>
       <p>
+        
+      
         <strong>
           AND
         </strong>
-         is low income
+         is at or above 65th percentile for 
-        <sup>
+        <a
-          *
+          href="#low-income"
-        </sup>
+        >
-      </p>
+          low income
-      <p>
+        </a>
-        <strong>
+         WHEN 
-          THEN
+        <a
-        </strong>
+          href="#high-ed-enroll-rate"
-         the community is disadvantaged.
+        >
+          higher ed enrollment rate
+        </a>
+         is at or below 20%
+    
       </p>
+      <p />
     </div>
     <div>
       <h3>
@@ -159,6 +207,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       </h3>
       <p>
         
+      Communities are 
+        <strong>
+          identified as disadvantaged
+        </strong>
+         in this category 
+    
+      </p>
+      <p>
+        
         
         <strong>
           IF
@@ -169,7 +226,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         >
           lead paint
         </a>
-         AND 
+         WHEN 
         <a
           href="#median-home"
         >
@@ -186,20 +243,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       
       </p>
       <p>
+        
+      
         <strong>
           AND
         </strong>
-         is low income
+         is at or above 65th percentile for 
-        <sup>
+        <a
-          *
+          href="#low-income"
-        </sup>
+        >
-      </p>
+          low income
-      <p>
+        </a>
-        <strong>
+         WHEN 
-          THEN
+        <a
-        </strong>
+          href="#high-ed-enroll-rate"
-         the community is disadvantaged.
+        >
+          higher ed enrollment rate
+        </a>
+         is at or below 20%
+    
       </p>
+      <p />
     </div>
     <div>
       <h3>
@@ -207,6 +271,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       </h3>
       <p>
         
+      Communities are 
+        <strong>
+          identified as disadvantaged
+        </strong>
+         in this category 
+    
+      </p>
+      <p>
+        
         
         <strong>
           IF
@@ -233,20 +306,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       
       </p>
       <p>
+        
+      
         <strong>
           AND
         </strong>
-         is low income
+         is at or above 65th percentile for 
-        <sup>
+        <a
-          *
+          href="#low-income"
-        </sup>
+        >
-      </p>
+          low income
-      <p>
+        </a>
-        <strong>
+         WHEN 
-          THEN
+        <a
-        </strong>
+          href="#high-ed-enroll-rate"
-         the community is disadvantaged.
+        >
+          higher ed enrollment rate
+        </a>
+         is at or below 20%
+    
       </p>
+      <p />
     </div>
     <div>
       <h3>
@@ -254,6 +334,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       </h3>
       <p>
         
+      Communities are 
+        <strong>
+          identified as disadvantaged
+        </strong>
+         in this category 
+    
+      </p>
+      <p>
+        
         
         <strong>
           IF
@@ -268,20 +357,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       
       </p>
       <p>
+        
+      
         <strong>
           AND
         </strong>
-         is low income
+         is at or above 65th percentile for 
-        <sup>
+        <a
-          *
+          href="#low-income"
-        </sup>
+        >
-      </p>
+          low income
-      <p>
+        </a>
-        <strong>
+         WHEN 
-          THEN
+        <a
-        </strong>
+          href="#high-ed-enroll-rate"
-         the community is disadvantaged.
+        >
+          higher ed enrollment rate
+        </a>
+         is at or below 20%
+    
       </p>
+      <p />
     </div>
     <div>
       <h3>
@@ -289,6 +385,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       </h3>
       <p>
         
+      Communities are 
+        <strong>
+          identified as disadvantaged
+        </strong>
+         in this category 
+    
+      </p>
+      <p>
+        
         
         <strong>
           IF
@@ -321,20 +426,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       
       </p>
       <p>
+        
+      
         <strong>
           AND
         </strong>
-         is low income
+         is at or above 65th percentile for 
-        <sup>
+        <a
-          *
+          href="#low-income"
-        </sup>
+        >
-      </p>
+          low income
-      <p>
+        </a>
-        <strong>
+         WHEN 
-          THEN
+        <a
-        </strong>
+          href="#high-ed-enroll-rate"
-         the community is disadvantaged.
+        >
+          higher ed enrollment rate
+        </a>
+         is at or below 20%
+    
       </p>
+      <p />
     </div>
     <div>
       <h3>
@@ -342,6 +454,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
       </h3>
       <p>
         
+      Communities are 
+        <strong>
+          identified as disadvantaged
+        </strong>
+         in this category 
+    
+      </p>
+      <p>
+        
         
         <strong>
           IF
@@ -382,21 +503,23 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         <strong>
           AND
         </strong>
-         where 
+         where the 
         <a
           href="#high-school"
         >
-          the high school degree achievement rates
+          high school degree achievement rates
         </a>
-         for adults 25 years and older is at or less than 90%
+         rates for adults 25 years and older is at or less than 
+    90% WHEN 
+        <a
+          href="#high-ed-enroll-rate"
+        >
+          higher ed enrollment rate
+        </a>
+         is at or below 20%
   
       </p>
-      <p>
+      <p />
-        <strong>
-          THEN
-        </strong>
-         the community is disadvantaged.
-      </p>
     </div>
   </div>
 </DocumentFragment>

client/src/components/CategoryCard/CategoryCard.module.scss

@@ -13,3 +13,7 @@
   @include baseCard;
   @include u-bg('blue-cool-5');
 }
+
+.idAsDisdvantaged {
+  font-style: italic;
+}

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

@@ -1,6 +1,7 @@
 declare namespace IndicatorCategoryNamespace {
     export interface IIndicatorCategoryScss {
       categoryCard: string;
+      idAsDisdvantaged: string;
     }
   }
 

client/src/components/CategoryCard/CategoryCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import * as METHODOLOGY_COPY from '../../data/copy/methodology';
 import * as styles from './CategoryCard.module.scss';
-
 interface ICategoryInterface {
     categoryInfo: {
         TITLE: JSX.Element,
@@ -16,6 +16,9 @@ const CategoryCard = ({categoryInfo}: ICategoryInterface) => {
       <h3>
         {categoryInfo.TITLE}
       </h3>
+      <p className={styles.idAsDisdvantaged}>
+        {METHODOLOGY_COPY.CATEGORY.ID_AS_DISADV_TEXT}
+      </p>
       <p>
         {categoryInfo.IF}
       </p>

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

@@ -8,6 +8,15 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
     </h3>
     <p>
       
+      Communities are 
+      <strong>
+        identified as disadvantaged
+      </strong>
+       in this category 
+    
+    </p>
+    <p>
+      
       
       <strong>
         IF
@@ -34,20 +43,27 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
       
     </p>
     <p>
+      
+      
       <strong>
         AND
       </strong>
-       is low income
+       is at or above 65th percentile for 
-      <sup>
+      <a
-        *
+        href="#low-income"
-      </sup>
+      >
-    </p>
+        low income
-    <p>
+      </a>
-      <strong>
+       WHEN 
-        THEN
+      <a
-      </strong>
+        href="#high-ed-enroll-rate"
-       the community is disadvantaged.
+      >
+        higher ed enrollment rate
+      </a>
+       is at or below 20%
+    
     </p>
+    <p />
   </div>
 </DocumentFragment>
 `;

client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`rendering of indicator dataset card checks if component renders 1`] = `
         <span>
           Used in: 
         </span>
-        All methodologies except for training and workforce development
+        All categories except for training and workforce development
       </li>
       <li>
         <span>

client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap

@@ -49,7 +49,54 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   <span>
                     Used in: 
                   </span>
-                  All methodologies except for training and workforce development
+                  All categories except for training and workforce development
+                </li>
+                <li>
+                  <span>
+                    Responsible Party: 
+                  </span>
+                  Census
+                </li>
+                <li>
+                  <span>
+                    Source: 
+                  </span>
+                  <a
+                    class="usa-link usa-link--external"
+                    data-cy=""
+                    href="https://www.census.gov/programs-surveys/acs"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    American Community Survey
+                  </a>
+                   from 2015-2019
+                </li>
+                <li>
+                  <span>
+                    Available for: 
+                  </span>
+                  All U.S. states and the District of Columbia
+                </li>
+              </ul>
+            </div>
+            <div
+              id="high-ed-enroll-rate"
+            >
+              <h3>
+                Higher ed enrollment rate
+              </h3>
+              <div>
+                
+        Percent of people who are currently enrolled in college or graduate school.
+      
+              </div>
+              <ul>
+                <li>
+                  <span>
+                    Used in: 
+                  </span>
+                  All categories
                 </li>
                 <li>
                   <span>

client/src/components/MethodologyFormula/MethodologyFormula.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {useIntl} from 'gatsby-plugin-intl';
 
 import * as METHODOLOGY_COPY from '../../data/copy/methodology';
 import * as styles from './MethodologyFormula.module.scss';
@@ -9,12 +8,10 @@ import * as styles from './MethodologyFormula.module.scss';
 // reserved words.
 
 const MethodologyFormula = () => {
-  const intl = useIntl();
-
   return (
     <section className={styles.formulaContainer}>
       <p>
-        {intl.formatMessage(METHODOLOGY_COPY.PAGE.FORMULA_INTRO)}
+        {METHODOLOGY_COPY.FORMULA.INTRO}
       </p>
 
       <p>
@@ -25,9 +22,9 @@ const MethodologyFormula = () => {
         {METHODOLOGY_COPY.FORMULA.AND}
       </p>
 
-      <p>
+      {/* <p>
         {METHODOLOGY_COPY.FORMULA.THEN}
-      </p>
+      </p> */}
     </section>
   );
 };

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

@@ -5,26 +5,30 @@ exports[`rendering of the MethodologyFormula checks if component renders 1`] = `
   <section>
     <p>
       
-      Under the current formula, a census tract will be considered disadvantaged:
+      Under the current formula, a census tract will be 
+      <strong>
+        identified as disadvantaged
+      </strong>
+       in one or more categories of criteria: 
     
     </p>
     <p>
+      
+      
       <span>
         IF
       </span>
-       it is above the threshold for one or more climate or environmental indicator
+       the tract is above the thresholds for a set of environmental, climate or socioeconomic related indicators
+      
     </p>
     <p>
+      
+      
       <span>
         AND
       </span>
-       it is above the threshold for one or more socioeconomic indicator
+       the tract is above the thresholds for another set of income or education related indicators
-    </p>
+    
-    <p>
-      <span>
-        THEN
-      </span>
-       the community is considered disadvantaged.
     </p>
   </section>
 </DocumentFragment>

client/src/data/copy/explore.tsx

@@ -452,7 +452,10 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
   },
   LOW_INCOME: {
     id: 'areaDetail.indicator.description.low.income',
-    defaultMessage: 'Household income is less than or equal to twice the federal poverty level',
+    defaultMessage: `
+      Household income is less than or equal to twice the federal poverty level when higher ed enrollment 
+      rate is less than 20% in order to exclude areas with college and graduate students
+    `,
     description: 'Household income is less than or equal to twice the federal poverty level',
   },
 
@@ -480,7 +483,10 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
 
   LEAD_PAINT: {
     id: 'areaDetail.indicator.description.leadPaint',
-    defaultMessage: 'Percent of pre-1960 housing with a median home value is at or below 90th',
+    defaultMessage: `
+      Percent of pre-1960 housing when median home value is at or below 90th percentile in order to 
+      exclude areas with high value, older homes
+    `,
     description: 'Pre-1960 housing',
   },
   MED_HOME_VAL: {
@@ -551,7 +557,7 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
   LING_ISO: {
     id: 'areaDetail.indicator.description.ling.iso',
     defaultMessage: `
-      Percent of limited speaking households, which are households where no one over age 14 speaks English well
+      Percent of households where no one over the age 14 speaks English well
     `,
     description: `Households in which no one age 14 and over speaks English only or also speaks 
     a language other than English`,
@@ -573,8 +579,8 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
   HIGH_SKL: {
     id: 'areaDetail.indicator.description.high.school',
     defaultMessage: `
-      Percent (not a percentile) of people ages 25 years or older whose education level is less than a 
+      Percent of people ages 25 years or older whose education level is less than a high school diploma 
-      high school diploma
+      when higher ed enrollment rate is less than 20% in order to exclude areas with college and graduate students
     `,
     description: 'Percent of people ages 25 years or older whose education level is less than a high school diploma',
   },

client/src/data/copy/methodology.tsx

@@ -26,13 +26,6 @@ export const PAGE = defineMessages({
     `,
     description: 'methodology page paragraph',
   },
-  FORMULA_INTRO: {
-    id: 'methodology.page.formula.intro',
-    defaultMessage: `
-      Under the current formula, a census tract will be considered disadvantaged:
-    `,
-    description: 'methodology page introducing the formula',
-  },
   CATEGORY_TEXT: {
     id: 'methodology.page.categories.title',
     defaultMessage: `
@@ -46,9 +39,21 @@ export const PAGE = defineMessages({
 
 
 export const FORMULA = {
+  INTRO: <FormattedMessage
+    id={'methodology.page.formula.intro'}
+    defaultMessage={`
+      Under the current formula, a census tract will be {identifiedDis} in one or more categories of criteria: 
+    `}
+    description={'methodology page introducing the formula'}
+    values={{
+      identifiedDis: <strong>identified as disadvantaged</strong>,
+    }}
+  />,
   IF: <FormattedMessage
     id={'methodology.page.formula.first'}
-    defaultMessage={ `{if} it is above the threshold for one or more climate or environmental indicator`}
+    defaultMessage={ `
+      {if} the tract is above the thresholds for a set of environmental, climate or socioeconomic related indicators
+      `}
     description={'the first part of the formula used in the methodology'}
     values= {{
       if: <span>IF</span>,
@@ -56,7 +61,9 @@ export const FORMULA = {
   />,
   AND: <FormattedMessage
     id={'methodology.page.formula.second'}
-    defaultMessage={ `{and} it is above the threshold for one or more socioeconomic indicator`}
+    defaultMessage={ `
+      {and} the tract is above the thresholds for another set of income or education related indicators
+    `}
     description={'the second part of the formula used in the methodology'}
     values= {{
       and: <span>AND</span>,
@@ -144,19 +151,59 @@ export const CATEGORY= {
     defaultMessage={'Categories'}
     description= {'category heading'}
   />,
+  ID_AS_DISADV_TEXT: <FormattedMessage
+    id={'methodology.category.card.title'}
+    defaultMessage={`
+      Communities are {idAsDisadv} in this category 
+    `}
+    description= {'category heading'}
+    values={{
+      idAsDisadv: <strong>identified as disadvantaged</strong>,
+    }}
+  />,
 };
 
+// Category AND Clause:
 
+export const CATEGORY_AND_CLAUSE = {
+  LOW_INC_65_WHEN_HIGH_ED_LTE_20: <FormattedMessage
+    id= {'methodology.paage.category.and.clause.low.inc.hs.ed'}
+    defaultMessage={`
+      {and} is at or above 65th percentile for {lowIncome} WHEN {highEdEnrollRate} is at or below 20%
+    `}
+    description= {'and portion of the formula dealing with lower income and high school degree rate'}
+    values= {{
+      and: <strong>AND</strong>,
+      lowIncome: <a href="#low-income">low income</a>,
+      highEdEnrollRate: <a href="#high-ed-enroll-rate">higher ed enrollment rate</a>,
+    }}
+  />,
+  HS_DEG_90_WHEN_HIGH_ED_LTE_20: <FormattedMessage
+    id= {'methodology.paage.category.and.clause.hs.ed.higher.ed'}
+    defaultMessage= {`
+    {and} where the {highSchoolRate} rates for adults 25 years and older is at or less than 
+    90% WHEN {highEdEnrollRate} is at or below 20%
+  `}
+    description= {'and portion of the formula dealing with higher ed enrollment and high school degree rate'}
+    values= {{
+      and: <strong>AND</strong>,
+      highSchoolRate: <a href="#high-school">high school degree achievement rates</a>,
+      highEdEnrollRate: <a href="#high-ed-enroll-rate">higher ed enrollment rate</a>,
+    }}
+  />,
+};
 // Indicator Categories copy constants:
 export const CATEGORIES = {
-  ALL: {
+  ALL: <FormattedMessage
-    METHODOLOGY:
+    id= {'categories.all.used.in.text'}
-      <FormattedMessage
+    defaultMessage= {`All categories`}
-        id= {'methodologies.all.used.in.text'}
+    description= {'used in text for all methodologies'}
-        defaultMessage= {`All methodologies except for training and workforce development`}
+  />,
-        description= {'used in text for all methodologies'}
+  ALL_EXCEPT_WORKFORCE: <FormattedMessage
-      />,
+    id= {'methodologies.all.except.workforce.used.in.text'}
-  },
+    defaultMessage= {`All categories except for training and workforce development`}
+    description= {'used in text for all methodologies'}
+  />,
   CLIMATE_CHANGE: {
     METHODOLOGY: <FormattedMessage
       id= {'indicator.categories.climate.change.methodology'}
@@ -181,24 +228,16 @@ export const CATEGORIES = {
         expPopLossRate: <a href="#exp-pop-loss-rate">expected population loss rate</a>,
       }}
     />,
-    AND: <FormattedMessage
+    AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
-      id= {'indicator.categories.climate.change.and'}
+    // THEN: <FormattedMessage
-      defaultMessage= {'{and} is low income{asterisk}'}
+    //   id= {'indicator.categories.climate.change.then'}
-      description= {'and portion of the formula'}
+    //   defaultMessage= {'{then} the community is disadvantaged.'}
-      values= {{
+    //   description= {'then portion of the formula'}
-        and: <strong>AND</strong>,
+    //   values= {{
-        asterisk: <sup>*</sup>,
+    //     then: <strong>THEN</strong>,
-      }}
+    //     asterisk: <sup>*</sup>,
-    />,
+    //   }}
-    THEN: <FormattedMessage
+    // />,
-      id= {'indicator.categories.climate.change.then'}
-      defaultMessage= {'{then} the community is disadvantaged.'}
-      description= {'then portion of the formula'}
-      values= {{
-        then: <strong>THEN</strong>,
-        asterisk: <sup>*</sup>,
-      }}
-    />,
   },
   CLEAN_ENERGY: {
     METHODOLOGY: <FormattedMessage
@@ -223,24 +262,16 @@ export const CATEGORIES = {
         pm25: <a href='#pm-25'>PM2.5 in the air</a>,
       }}
     />,
-    AND: <FormattedMessage
+    AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
-      id= {'indicator.categories.clean.energy.and'}
+    // THEN: <FormattedMessage
-      defaultMessage= {'{and} is low income{asterisk}'}
+    //   id= {'indicator.categories.clean.energy.then'}
-      description= {'and portion of the formula'}
+    //   defaultMessage= {'{then} the community is disadvantaged.'}
-      values= {{
+    //   description= {'then portion of the formula'}
-        and: <strong>AND</strong>,
+    //   values= {{
-        asterisk: <sup>*</sup>,
+    //     then: <strong>THEN</strong>,
-      }}
+    //     asterisk: <sup>*</sup>,
-    />,
+    //   }}
-    THEN: <FormattedMessage
+    // />,
-      id= {'indicator.categories.clean.energy.then'}
-      defaultMessage= {'{then} the community is disadvantaged.'}
-      description= {'then portion of the formula'}
-      values= {{
-        then: <strong>THEN</strong>,
-        asterisk: <sup>*</sup>,
-      }}
-    />,
   },
   CLEAN_TRANSPORT: {
     METHODOLOGY: <FormattedMessage
@@ -265,24 +296,16 @@ export const CATEGORIES = {
         traffic: <a href='#traffic-vol'>traffic proximity and volume</a>,
       }}
     />,
-    AND: <FormattedMessage
+    AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
-      id= {'indicator.categories.clean.transport.and'}
+    // THEN: <FormattedMessage
-      defaultMessage= {'{and} is low income{asterisk}'}
+    //   id= {'indicator.categories.clean.transport.then'}
-      description= {'and portion of the formula'}
+    //   defaultMessage= {'{then} the community is disadvantaged.'}
-      values= {{
+    //   description= {'then portion of the formula'}
-        and: <strong>AND</strong>,
+    //   values= {{
-        asterisk: <sup>*</sup>,
+    //     then: <strong>THEN</strong>,
-      }}
+    //     asterisk: <sup>*</sup>,
-    />,
+    //   }}
-    THEN: <FormattedMessage
+    // />,
-      id= {'indicator.categories.clean.transport.then'}
-      defaultMessage= {'{then} the community is disadvantaged.'}
-      description= {'then portion of the formula'}
-      values= {{
-        then: <strong>THEN</strong>,
-        asterisk: <sup>*</sup>,
-      }}
-    />,
   },
   AFFORDABLE_HOUSING: {
     METHODOLOGY: <FormattedMessage
@@ -298,7 +321,7 @@ export const CATEGORIES = {
     IF: <FormattedMessage
       id= {'indicator.categories.afford.house.if'}
       defaultMessage= {`
-        {if} at or above 90th percentile for {lead} AND {medianHomeVal} is at or less than
+        {if} at or above 90th percentile for {lead} WHEN {medianHomeVal} is at or less than
         90th percentile OR at or above the 90th percentile for the {houseBur}
       `}
       description= {'if portion of the formula'}
@@ -309,24 +332,16 @@ export const CATEGORIES = {
         houseBur: <a href='#house-burden'>housing cost burden</a>,
       }}
     />,
-    AND: <FormattedMessage
+    AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
-      id= {'indicator.categories.afford.house.and'}
+    // THEN: <FormattedMessage
-      defaultMessage= {'{and} is low income{asterisk}'}
+    //   id= {'indicator.categories.afford.house.then'}
-      description= {'and portion of the formula'}
+    //   defaultMessage= {'{then} the community is disadvantaged.'}
-      values= {{
+    //   description= {'then portion of the formula'}
-        and: <strong>AND</strong>,
+    //   values= {{
-        asterisk: <sup>*</sup>,
+    //     then: <strong>THEN</strong>,
-      }}
+    //     asterisk: <sup>*</sup>,
-    />,
+    //   }}
-    THEN: <FormattedMessage
+    // />,
-      id= {'indicator.categories.afford.house.then'}
-      defaultMessage= {'{then} the community is disadvantaged.'}
-      description= {'then portion of the formula'}
-      values= {{
-        then: <strong>THEN</strong>,
-        asterisk: <sup>*</sup>,
-      }}
-    />,
   },
   LEGACY_POLLUTION: {
     METHODOLOGY: <FormattedMessage
@@ -352,24 +367,16 @@ export const CATEGORIES = {
         proxRMP: <a href='#prox-rmp'>proximity to RMP facilities</a>,
       }}
     />,
-    AND: <FormattedMessage
+    AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
-      id= {'indicator.categories.legacy.pollution.and'}
+    // THEN: <FormattedMessage
-      defaultMessage= {'{and} is low income{asterisk}'}
+    //   id= {'indicator.categories.legacy.pollution.then'}
-      description= {'and portion of the formula'}
+    //   defaultMessage= {'{then} the community is disadvantaged.'}
-      values= {{
+    //   description= {'then portion of the formula'}
-        and: <strong>AND</strong>,
+    //   values= {{
-        asterisk: <sup>*</sup>,
+    //     then: <strong>THEN</strong>,
-      }}
+    //     asterisk: <sup>*</sup>,
-    />,
+    //   }}
-    THEN: <FormattedMessage
+    // />,
-      id= {'indicator.categories.legacy.pollution.then'}
-      defaultMessage= {'{then} the community is disadvantaged.'}
-      description= {'then portion of the formula'}
-      values= {{
-        then: <strong>THEN</strong>,
-        asterisk: <sup>*</sup>,
-      }}
-    />,
   },
   CLEAN_WATER: {
     METHODOLOGY: <FormattedMessage
@@ -393,24 +400,16 @@ export const CATEGORIES = {
         wasteWater: <a href='#waste-water'>wastewater discharge</a>,
       }}
     />,
-    AND: <FormattedMessage
+    AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
-      id= {'indicator.categories.clean.water.and'}
+    // THEN: <FormattedMessage
-      defaultMessage= {'{and} is low income{asterisk}'}
+    //   id= {'indicator.categories.clean.water.then'}
-      description= {'and portion of the formula'}
+    //   defaultMessage= {'{then} the community is disadvantaged.'}
-      values= {{
+    //   description= {'then portion of the formula'}
-        and: <strong>AND</strong>,
+    //   values= {{
-        asterisk: <sup>*</sup>,
+    //     then: <strong>THEN</strong>,
-      }}
+    //     asterisk: <sup>*</sup>,
-    />,
+    //   }}
-    THEN: <FormattedMessage
+    // />,
-      id= {'indicator.categories.clean.water.then'}
-      defaultMessage= {'{then} the community is disadvantaged.'}
-      description= {'then portion of the formula'}
-      values= {{
-        then: <strong>THEN</strong>,
-        asterisk: <sup>*</sup>,
-      }}
-    />,
   },
   HEALTH_BURDENS: {
     METHODOLOGY: <FormattedMessage
@@ -437,24 +436,16 @@ export const CATEGORIES = {
         life: <a href='#life-exp'>low life expectancy</a>,
       }}
     />,
-    AND: <FormattedMessage
+    AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
-      id= {'indicator.categories.health.burdens.and'}
+    // THEN: <FormattedMessage
-      defaultMessage= {'{and} is low income{asterisk}'}
+    //   id= {'indicator.categories.health.burdens.then'}
-      description= {'and portion of the formula'}
+    //   defaultMessage= {'{then} the community is disadvantaged.'}
-      values= {{
+    //   description= {'then portion of the formula'}
-        and: <strong>AND</strong>,
+    //   values= {{
-        asterisk: <sup>*</sup>,
+    //     then: <strong>THEN</strong>,
-      }}
+    //     asterisk: <sup>*</sup>,
-    />,
+    //   }}
-    THEN: <FormattedMessage
+    // />,
-      id= {'indicator.categories.health.burdens.then'}
-      defaultMessage= {'{then} the community is disadvantaged.'}
-      description= {'then portion of the formula'}
-      values= {{
-        then: <strong>THEN</strong>,
-        asterisk: <sup>*</sup>,
-      }}
-    />,
   },
   WORKFORCE_DEV: {
     METHODOLOGY: <FormattedMessage
@@ -484,26 +475,16 @@ export const CATEGORIES = {
         poverty: <a href='#poverty'>poverty</a>,
       }}
     />,
-    AND: <FormattedMessage
+    AND: CATEGORY_AND_CLAUSE.HS_DEG_90_WHEN_HIGH_ED_LTE_20,
-      id= {'indicator.categories.work.dev.and'}
+    // THEN: <FormattedMessage
-      defaultMessage= {`
+    //   id= {'indicator.categories.work.dev.then'}
-      {and} where {highSchool} for adults 25 years and older is at or less than 90%
+    //   defaultMessage= {'{then} the community is disadvantaged.'}
-      `}
+    //   description= {'then portion of the formula'}
-      description= {'and portion of the formula'}
+    //   values= {{
-      values= {{
+    //     then: <strong>THEN</strong>,
-        and: <strong>AND</strong>,
+    //     asterisk: <sup>*</sup>,
-        highSchool: <a href='#high-school'>the high school degree achievement rates</a>,
+    //   }}
-      }}
+    // />,
-    />,
-    THEN: <FormattedMessage
-      id= {'indicator.categories.work.dev.then'}
-      defaultMessage= {'{then} the community is disadvantaged.'}
-      description= {'then portion of the formula'}
-      values= {{
-        then: <strong>THEN</strong>,
-        asterisk: <sup>*</sup>,
-      }}
-    />,
   },
 };
 
@@ -836,7 +817,26 @@ export const INDICATORS = [
       `}
       description= {'description text for low income'}
     />,
-    usedIn: CATEGORIES.ALL.METHODOLOGY,
+    usedIn: CATEGORIES.ALL_EXCEPT_WORKFORCE,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
+    sources: [
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_15_19,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
+  },
+  {
+    domID: 'high-ed-enroll-rate',
+    indicator: 'Higher ed enrollment rate',
+    description: <FormattedMessage
+      id= {'category.high.ed.enroll.rate.description.text'}
+      defaultMessage= {`
+        Percent of people who are currently enrolled in college or graduate school.
+      `}
+      description= {'description text for low income'}
+    />,
+    usedIn: CATEGORIES.ALL,
     responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
     sources: [
       {

client/src/pages/__snapshots__/methodology.test.tsx.snap

@@ -302,31 +302,33 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           <section>
             <p>
               
-      Under the current formula, a census tract will be considered disadvantaged:
+      Under the current formula, a census tract will be 
+              <strong>
+                identified as disadvantaged
+              </strong>
+               in one or more categories of criteria: 
     
             </p>
             <p>
+              
+      
               <span>
                 IF
               </span>
-               it is above the threshold for one or more climate or environmental indicator
+               the tract is above the thresholds for a set of environmental, climate or socioeconomic related indicators
+      
             </p>
             <p>
+              
+      
               <span>
                 AND
               </span>
-               it is above the threshold for one or more socioeconomic indicator
+               the tract is above the thresholds for another set of income or education related indicators
-            </p>
+    
-            <p>
-              <span>
-                THEN
-              </span>
-               the community is considered disadvantaged.
             </p>
           </section>
-          <section
+          <section>
-            class="j40-mt-7"
-          >
             <p>
               
     Communities will be defined as disadvantaged for the purposes of Justice40 if they meet
@@ -384,20 +386,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
               </div>
             </div>
           </div>
-          <div>
-            <p>
-              <sup>
-                *
-              </sup>
-               Low Income
-            </p>
-            <p>
-              
-      At or above 65th percentile  for percent of census tract population of households where household 
-      income is at or below 200% of the federal poverty level
-    
-            </p>
-          </div>
         </div>
       </div>
     </div>
@@ -429,6 +417,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </h3>
         <p>
           
+      Communities are 
+          <strong>
+            identified as disadvantaged
+          </strong>
+           in this category 
+    
+        </p>
+        <p>
+          
       
           <strong>
             IF
@@ -455,20 +452,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       
         </p>
         <p>
+          
+      
           <strong>
             AND
           </strong>
-           is low income
+           is at or above 65th percentile for 
-          <sup>
+          <a
-            *
+            href="#low-income"
-          </sup>
+          >
-        </p>
+            low income
-        <p>
+          </a>
-          <strong>
+           WHEN 
-            THEN
+          <a
-          </strong>
+            href="#high-ed-enroll-rate"
-           the community is disadvantaged.
+          >
+            higher ed enrollment rate
+          </a>
+           is at or below 20%
+    
         </p>
+        <p />
       </div>
       <div>
         <h3>
@@ -476,6 +480,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </h3>
         <p>
           
+      Communities are 
+          <strong>
+            identified as disadvantaged
+          </strong>
+           in this category 
+    
+        </p>
+        <p>
+          
         
           <strong>
             IF
@@ -496,20 +509,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       
         </p>
         <p>
+          
+      
           <strong>
             AND
           </strong>
-           is low income
+           is at or above 65th percentile for 
-          <sup>
+          <a
-            *
+            href="#low-income"
-          </sup>
+          >
-        </p>
+            low income
-        <p>
+          </a>
-          <strong>
+           WHEN 
-            THEN
+          <a
-          </strong>
+            href="#high-ed-enroll-rate"
-           the community is disadvantaged.
+          >
+            higher ed enrollment rate
+          </a>
+           is at or below 20%
+    
         </p>
+        <p />
       </div>
       <div>
         <h3>
@@ -517,6 +537,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </h3>
         <p>
           
+      Communities are 
+          <strong>
+            identified as disadvantaged
+          </strong>
+           in this category 
+    
+        </p>
+        <p>
+          
         
           <strong>
             IF
@@ -537,20 +566,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       
         </p>
         <p>
+          
+      
           <strong>
             AND
           </strong>
-           is low income
+           is at or above 65th percentile for 
-          <sup>
+          <a
-            *
+            href="#low-income"
-          </sup>
+          >
-        </p>
+            low income
-        <p>
+          </a>
-          <strong>
+           WHEN 
-            THEN
+          <a
-          </strong>
+            href="#high-ed-enroll-rate"
-           the community is disadvantaged.
+          >
+            higher ed enrollment rate
+          </a>
+           is at or below 20%
+    
         </p>
+        <p />
       </div>
       <div>
         <h3>
@@ -558,6 +594,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </h3>
         <p>
           
+      Communities are 
+          <strong>
+            identified as disadvantaged
+          </strong>
+           in this category 
+    
+        </p>
+        <p>
+          
         
           <strong>
             IF
@@ -568,7 +613,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           >
             lead paint
           </a>
-           AND 
+           WHEN 
           <a
             href="#median-home"
           >
@@ -585,20 +630,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       
         </p>
         <p>
+          
+      
           <strong>
             AND
           </strong>
-           is low income
+           is at or above 65th percentile for 
-          <sup>
+          <a
-            *
+            href="#low-income"
-          </sup>
+          >
-        </p>
+            low income
-        <p>
+          </a>
-          <strong>
+           WHEN 
-            THEN
+          <a
-          </strong>
+            href="#high-ed-enroll-rate"
-           the community is disadvantaged.
+          >
+            higher ed enrollment rate
+          </a>
+           is at or below 20%
+    
         </p>
+        <p />
       </div>
       <div>
         <h3>
@@ -606,6 +658,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </h3>
         <p>
           
+      Communities are 
+          <strong>
+            identified as disadvantaged
+          </strong>
+           in this category 
+    
+        </p>
+        <p>
+          
         
           <strong>
             IF
@@ -632,20 +693,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       
         </p>
         <p>
+          
+      
           <strong>
             AND
           </strong>
-           is low income
+           is at or above 65th percentile for 
-          <sup>
+          <a
-            *
+            href="#low-income"
-          </sup>
+          >
-        </p>
+            low income
-        <p>
+          </a>
-          <strong>
+           WHEN 
-            THEN
+          <a
-          </strong>
+            href="#high-ed-enroll-rate"
-           the community is disadvantaged.
+          >
+            higher ed enrollment rate
+          </a>
+           is at or below 20%
+    
         </p>
+        <p />
       </div>
       <div>
         <h3>
@@ -653,6 +721,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </h3>
         <p>
           
+      Communities are 
+          <strong>
+            identified as disadvantaged
+          </strong>
+           in this category 
+    
+        </p>
+        <p>
+          
         
           <strong>
             IF
@@ -667,20 +744,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       
         </p>
         <p>
+          
+      
           <strong>
             AND
           </strong>
-           is low income
+           is at or above 65th percentile for 
-          <sup>
+          <a
-            *
+            href="#low-income"
-          </sup>
+          >
-        </p>
+            low income
-        <p>
+          </a>
-          <strong>
+           WHEN 
-            THEN
+          <a
-          </strong>
+            href="#high-ed-enroll-rate"
-           the community is disadvantaged.
+          >
+            higher ed enrollment rate
+          </a>
+           is at or below 20%
+    
         </p>
+        <p />
       </div>
       <div>
         <h3>
@@ -688,6 +772,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </h3>
         <p>
           
+      Communities are 
+          <strong>
+            identified as disadvantaged
+          </strong>
+           in this category 
+    
+        </p>
+        <p>
+          
         
           <strong>
             IF
@@ -720,20 +813,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       
         </p>
         <p>
+          
+      
           <strong>
             AND
           </strong>
-           is low income
+           is at or above 65th percentile for 
-          <sup>
+          <a
-            *
+            href="#low-income"
-          </sup>
+          >
-        </p>
+            low income
-        <p>
+          </a>
-          <strong>
+           WHEN 
-            THEN
+          <a
-          </strong>
+            href="#high-ed-enroll-rate"
-           the community is disadvantaged.
+          >
+            higher ed enrollment rate
+          </a>
+           is at or below 20%
+    
         </p>
+        <p />
       </div>
       <div>
         <h3>
@@ -741,6 +841,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </h3>
         <p>
           
+      Communities are 
+          <strong>
+            identified as disadvantaged
+          </strong>
+           in this category 
+    
+        </p>
+        <p>
+          
         
           <strong>
             IF
@@ -781,21 +890,23 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           <strong>
             AND
           </strong>
-           where 
+           where the 
           <a
             href="#high-school"
           >
-            the high school degree achievement rates
+            high school degree achievement rates
           </a>
-           for adults 25 years and older is at or less than 90%
+           rates for adults 25 years and older is at or less than 
+    90% WHEN 
+          <a
+            href="#high-ed-enroll-rate"
+          >
+            higher ed enrollment rate
+          </a>
+           is at or below 20%
   
         </p>
-        <p>
+        <p />
-          <strong>
-            THEN
-          </strong>
-           the community is disadvantaged.
-        </p>
       </div>
     </div>
     <div
@@ -845,7 +956,54 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                     <span>
                       Used in: 
                     </span>
-                    All methodologies except for training and workforce development
+                    All categories except for training and workforce development
+                  </li>
+                  <li>
+                    <span>
+                      Responsible Party: 
+                    </span>
+                    Census
+                  </li>
+                  <li>
+                    <span>
+                      Source: 
+                    </span>
+                    <a
+                      class="usa-link usa-link--external"
+                      data-cy=""
+                      href="https://www.census.gov/programs-surveys/acs"
+                      rel="noreferrer"
+                      target="_blank"
+                    >
+                      American Community Survey
+                    </a>
+                     from 2015-2019
+                  </li>
+                  <li>
+                    <span>
+                      Available for: 
+                    </span>
+                    All U.S. states and the District of Columbia
+                  </li>
+                </ul>
+              </div>
+              <div
+                id="high-ed-enroll-rate"
+              >
+                <h3>
+                  Higher ed enrollment rate
+                </h3>
+                <div>
+                  
+        Percent of people who are currently enrolled in college or graduate school.
+      
+                </div>
+                <ul>
+                  <li>
+                    <span>
+                      Used in: 
+                    </span>
+                    All categories
                   </li>
                   <li>
                     <span>

client/src/pages/methodology.tsx

@@ -8,8 +8,6 @@ import DownloadPacket from '../components/DownloadPacket';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import MethodologyFormula from '../components/MethodologyFormula';
 import Layout from '../components/layout';
-import LowIncome from '../components/LowIncome';
-// import ScoreStepsList from '../components/scoreStepsList';
 
 import * as METHODOLOGY_COPY from '../data/copy/methodology';
 
@@ -40,7 +38,7 @@ const IndexPage = ({location}: MethodPageProps) => {
             <MethodologyFormula />
 
             {/* Category description */}
-            <section className={`j40-mt-7`}>
+            <section>
               <p>
                 {intl.formatMessage(METHODOLOGY_COPY.PAGE.CATEGORY_TEXT)}
               </p>
@@ -50,7 +48,6 @@ const IndexPage = ({location}: MethodPageProps) => {
           {/* Second column */}
           <Grid col={12} tablet={{col: 4}}>
             <DownloadPacket />
-            <LowIncome />
           </Grid>
         </Grid>
       </J40MainGridContainer>
@@ -58,13 +55,6 @@ const IndexPage = ({location}: MethodPageProps) => {
       <Categories />
       <DatasetContainer/>
 
-      {/* <J40MainGridContainer>
-        <Grid row>
-          <Grid col>
-            <ScoreStepsList/>
-          </Grid>
-        </Grid>
-      </J40MainGridContainer> */}
     </Layout>
   );
 };

client/src/styles/global.scss

@@ -91,11 +91,6 @@ p.flush {
   @include u-margin-bottom(5)
 }
 
-// 56 pixel margin-top
-.j40-mt-7 {
-  @include u-margin-top(7)
-}
-
 .j40-footer-ceq-font {
   @include j40-element('lg', 2, 'bold', 0 );
 }