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>