diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx index 3d6d2667..d51c62db 100644 --- a/client/src/components/AreaDetail/AreaDetail.tsx +++ b/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) => { + {/* Show IslandCopy if the GeoID matches an island prefix */} + {constants.TILES_ISLAND_AREA_FIPS_CODES.some((code) => { + return properties[constants.GEOID_PROPERTY].startsWith(code); + }) && ( + + )} + {/* Only show the DonutCopy if Adjacency index is true, the total number of disadv ind == 0, and not grandfathered. */} {properties[constants.ADJACENCY_EXCEEDS_THRESH] && diff --git a/client/src/components/IslandCopy/IslandCopy.module.scss b/client/src/components/IslandCopy/IslandCopy.module.scss new file mode 100644 index 00000000..d357652b --- /dev/null +++ b/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; + } +} diff --git a/client/src/components/IslandCopy/IslandCopy.module.scss.d.ts b/client/src/components/IslandCopy/IslandCopy.module.scss.d.ts new file mode 100644 index 00000000..e95628dd --- /dev/null +++ b/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; diff --git a/client/src/components/IslandCopy/IslandCopy.tsx b/client/src/components/IslandCopy/IslandCopy.tsx new file mode 100644 index 00000000..e7878142 --- /dev/null +++ b/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 ( +
+
+
+ {intl.formatMessage(EXPLORE_COPY.ISLAND_COPY.LOW_INC)} +
+
+
= threshold ? + styles.invert : + styles.noInvert } + `}> + +
+
+ = threshold ? true : false} + threshold={threshold} + type={'percentile'} + /> +
+
+
+
+ ); +}; + +export default IslandCopy; diff --git a/client/src/components/PrioritizationCopy2/PrioritizationCopy2.tsx b/client/src/components/PrioritizationCopy2/PrioritizationCopy2.tsx index de021bf1..63c92926 100644 --- a/client/src/components/PrioritizationCopy2/PrioritizationCopy2.tsx +++ b/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 ( -
+
? '' : styles.prioritizationCopy2Container}> {prioCopy2Rendered}
); diff --git a/client/src/components/PrioritizationCopy2/__snapshots__/PrioritizationCopy2.test.tsx.snap b/client/src/components/PrioritizationCopy2/__snapshots__/PrioritizationCopy2.test.tsx.snap index 348e5bbb..393064e7 100644 --- a/client/src/components/PrioritizationCopy2/__snapshots__/PrioritizationCopy2.test.tsx.snap +++ b/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`] = ` -
+
The lands of Federally Recognized Tribes that cover 2% of this tract are also considered disadvantaged.
@@ -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`] = ` -
+
The lands of Federally Recognized Tribes that cover 4% of this tract are also considered disadvantaged.
diff --git a/client/src/data/constants.tsx b/client/src/data/constants.tsx index 73631584..585d7eca 100644 --- a/client/src/data/constants.tsx +++ b/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"; diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index 4815b14c..5ec6c40b 100644 --- a/client/src/data/copy/explore.tsx +++ b/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: