Show island low income percentiles in sidebar

client/src/components/AreaDetail/AreaDetail.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable quotes */
 // External Libs:
-import React from "react";
-import {MessageDescriptor, useIntl} from "gatsby-plugin-intl";
 import {Accordion, Button} from "@trussworks/react-uswds";
+import {MessageDescriptor, useIntl} from "gatsby-plugin-intl";
+import React from "react";
 
 // Components:
 import Category from "../Category";
@@ -15,11 +15,12 @@ import TractInfo from "../TractInfo";
 import TractPrioritization from "../TractPrioritization";
 
 // 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 styles from "./areaDetail.module.scss";
 
 // @ts-ignore
+import IslandCopy from "../IslandCopy/IslandCopy";
 import launchIcon from "/node_modules/uswds/dist/img/usa-icons/launch.svg";
 
 interface IAreaDetailProps {
@@ -1192,6 +1193,13 @@ const AreaDetail = ({properties}: IAreaDetailProps) => {
         </div>
       </div>
 
+      {/* Show IslandCopy if the GeoID matches an island prefix */}
+      {constants.TILES_ISLAND_AREA_FIPS_CODES.some((code) => {
+        return properties[constants.GEOID_PROPERTY].startsWith(code);
+      }) && (
+        <IslandCopy povertyPercentile={ properties[constants.CENSUS_DECENNIAL_POVERTY_LESS_THAN_200_FPL_PERCENTILE]} />
+      )}
+
       {/* Only show the DonutCopy if Adjacency index is true, the total number of disadv ind == 0,
           and not grandfathered. */}
       {properties[constants.ADJACENCY_EXCEEDS_THRESH] &&

client/src/components/IslandCopy/IslandCopy.module.scss

@@ -0,0 +1,44 @@
+@use '../../styles/design-system.scss' as *;
+@import "../utils.scss";
+
+.islandCopyContainer{
+    @include u-display('flex');
+    flex-direction: column;
+    @include u-padding-left(2);
+    @include u-padding-right(2.5);
+    @include u-padding-top(2);
+
+    .islandRow {
+        @include u-display('flex');
+        justify-content: space-between;
+
+        .islandRowLabel {
+            font-weight: bold;
+        }
+
+        .valueSubTextContainer {
+            @include u-display('flex');
+            flex-direction: column;
+            .subTextContainer{
+                @include indicatorValueSubTextContainer();
+            }
+        }
+    }
+
+    .islandRow:first-child {
+        @include u-padding-bottom("05");
+    }
+
+    .valueContainer {
+        @include u-text('bold');
+    }
+
+    .invert {
+        align-self: flex-end;
+        @include invert();
+    }
+
+    .noInvert {
+        align-self: flex-end;
+    }
+}

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

@@ -0,0 +1,19 @@
+declare namespace IslandCopyNamespace {
+    export interface IIslandCopyScss {
+      islandCopyContainer: string;
+      islandRow: string;
+      islandRowLabel: string;
+      invert: string;
+      noInvert: string;
+      valueSubTextContainer: string;
+      valueContainer: string;
+      subTextContainer: string;
+    }
+  }
+
+declare const IslandCopyScssModule: IslandCopyNamespace.IIslandCopyScss & {
+    /** WARNING: Only available when "css-loader" is used without "style-loader" or "mini-css-extract-plugin" */
+    locals: IslandCopyNamespace.IIslandCopyScss;
+  };
+
+  export = IslandCopyScssModule;

client/src/components/IslandCopy/IslandCopy.tsx

@@ -0,0 +1,51 @@
+import {useIntl} from 'gatsby-plugin-intl';
+import React from 'react';
+
+import {IndicatorValue, IndicatorValueSubText} from '../Indicator/Indicator';
+
+import * as styles from './IslandCopy.module.scss';
+
+import * as EXPLORE_COPY from '../../data/copy/explore';
+
+export interface IIslandCopyProps {
+  povertyPercentile: number | null
+}
+
+const IslandCopy = ({povertyPercentile}: IIslandCopyProps) => {
+  const intl = useIntl();
+  const percentileWhole = povertyPercentile ?
+    parseFloat((povertyPercentile*100).toFixed()) : null;
+  const threshold = 65;
+
+  return (
+    <div className={styles.islandCopyContainer}>
+      <div className={styles.islandRow}>
+        <div className={styles.islandRowLabel}>
+          {intl.formatMessage(EXPLORE_COPY.ISLAND_COPY.LOW_INC)}
+        </div>
+        <div className={styles.valueSubTextContainer}>
+          <div className={`${styles.valueContainer}
+            ${ percentileWhole && percentileWhole >= threshold ?
+              styles.invert :
+              styles.noInvert }
+          `}>
+            <IndicatorValue
+              type={'percentile'}
+              displayStat={percentileWhole}
+            />
+          </div>
+          <div className={styles.subTextContainer}>
+            <IndicatorValueSubText
+              value={percentileWhole}
+              isAboveThresh={percentileWhole && percentileWhole >= threshold ? true : false}
+              threshold={threshold}
+              type={'percentile'}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default IslandCopy;

client/src/components/PrioritizationCopy2/PrioritizationCopy2.tsx

@@ -40,8 +40,8 @@ const PrioritizationCopy2 =
      tribalCountUS,
      percentTractTribal,
    }:IPrioritizationCopy2) => {
-     let noStyles = false;
-     let prioCopy2Rendered;
+     let prioCopy2Rendered = <></>;
+
 
      // if 1
      if (
@@ -165,13 +165,10 @@ const PrioritizationCopy2 =
       (tribalCountAK !== null && tribalCountAK >= 1)
      ) {
        prioCopy2Rendered = EXPLORE_COPY.getPrioANVCopy(tribalCountAK, false);
-     } else {
-       prioCopy2Rendered = <></>;
-       noStyles = true;
      };
 
      return (
-       <div className={noStyles ? '' : styles.prioritizationCopy2Container}>
+       <div className={prioCopy2Rendered !== <></> ? '' : styles.prioritizationCopy2Container}>
          {prioCopy2Rendered}
        </div>
      );

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

@@ -2,7 +2,9 @@
 
 exports[`rendering of PrioritizationCopy2 Component checks if component renders The lands of Federally Recognized Tribes that cover 2% of this tract are also considered disadvantaged. when totCats = 0, totBurds = 0, isAdj = true, isAdjLI = true, tribal % = 2, 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    class=""
+  >
     The lands of Federally Recognized Tribes that cover 2% of this tract are also considered disadvantaged.
   </div>
 </DocumentFragment>
@@ -10,7 +12,9 @@ exports[`rendering of PrioritizationCopy2 Component checks if component renders
 
 exports[`rendering of PrioritizationCopy2 Component checks if component renders The lands of Federally Recognized Tribes that cover 4% of this tract are also considered disadvantaged. when totCats = 0, totBurds = 1, isAdj = true, isAdjLI = true, tribal % = 4, 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    class=""
+  >
     The lands of Federally Recognized Tribes that cover 4% of this tract are also considered disadvantaged.
   </div>
 </DocumentFragment>

client/src/data/constants.tsx

@@ -110,6 +110,8 @@ export const IS_EXCEED_BOTH_SOCIO_INDICATORS = "N_EBSI";
 
 export const POVERTY_BELOW_200_PERCENTILE = "P200_I_PFS";
 export const IS_FEDERAL_POVERTY_LEVEL_200 = "FPL200S";
+// Percentile FPL 200 for islands only
+export const CENSUS_DECENNIAL_POVERTY_LESS_THAN_200_FPL_PERCENTILE = "FPL200P";
 
 export const HIGHER_ED_PERCENTILE = "CA";
 export const IS_HIGHER_ED_PERCENTILE = "CA_LT20";

client/src/data/copy/explore.tsx

@@ -772,6 +772,13 @@ export const DONUT_COPY = defineMessages({
     description: `Navigate to the explore the map page. Click on side panel, this copy may show up`,
   },
 });
+export const ISLAND_COPY = defineMessages({
+  LOW_INC: {
+    id: 'explore.map.page.side.panel.island.copy.low.income',
+    defaultMessage: 'Low income',
+    description: `Navigate to the explore the map page. Click on side panel, this copy may show up`,
+  },
+});
 export const COMMUNITY = {
   OF_FOCUS: <FormattedMessage
     id={'explore.map.page.side.panel.community.of.focus'}

client/src/intl/en.json

@@ -1375,6 +1375,10 @@
     "defaultMessage": "Identified as disadvantaged?",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show asking IF the communities is focused on"
   },
+  "explore.map.page.side.panel.island.copy.low.income": {
+    "defaultMessage": "Low income",
+    "description": "Navigate to the explore the map page. Click on side panel, this copy may show up"
+  },
   "explore.map.page.side.panel.not.community.of.focus": {
     "defaultMessage": "NO",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the communities the score currently is not focused on"

client/src/intl/es.json

@@ -213,6 +213,7 @@
   "explore.map.page.side.panel.demo.two.or.more": "Dos o más razas",
   "explore.map.page.side.panel.demo.white": "Personas de raza blanca",
   "explore.map.page.side.panel.donut.copy.adj.low.income": "Bajos ingresos ajustados",
+  "explore.map.page.side.panel.island.copy.low.income": "Bajos ingresos",
   "explore.map.page.side.panel.donut.copy.complete.surround": "completamente rodeada",
   "explore.map.page.side.panel.exceed.burden.answer.no": "No",
   "explore.map.page.side.panel.exceed.burden.answer.yes": "Sí",