From 94095ff4c27470b0e5dc1bd7d3b5068fe8f23b81 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Thu, 23 Sep 2021 08:06:49 -0700 Subject: [PATCH] Change map legend color key (#732) * Change map legend color key - make legend key a circle - remove blue border in legend - remove blue border in color key of side panel * Add space in CBG sub-headings - update snaphots * Add state to the AreaDetail component - add useState to track the community of focus - add useEffect to control rendering - remove getCategorization() - clean up all SASS around 'prioritization' - add snapshots --- .../AreaDetail/areaDetail.module.scss | 70 ++++++++----------- .../AreaDetail/areaDetail.module.scss.d.ts | 14 ++-- client/src/components/AreaDetail/index.tsx | 51 ++++++-------- .../__snapshots__/areaDetail.test.tsx.snap | 12 ++-- .../AreaDetail/tests/areaDetail.test.tsx | 20 +----- .../MapLegend/mapLegend.module.scss | 4 +- 6 files changed, 67 insertions(+), 104 deletions(-) diff --git a/client/src/components/AreaDetail/areaDetail.module.scss b/client/src/components/AreaDetail/areaDetail.module.scss index 6df9b2e4..072c5d04 100644 --- a/client/src/components/AreaDetail/areaDetail.module.scss +++ b/client/src/components/AreaDetail/areaDetail.module.scss @@ -13,7 +13,7 @@ $sidePanelLabelFontColor: #171716; width: 0.6rem; border-radius: 100%; align-self: center; - margin-top: 1.8rem; + margin-top: 2rem; margin-right: 0.5rem; opacity: 0.6; } @@ -32,59 +32,43 @@ $sidePanelLabelFontColor: #171716; flex-direction: column; } + .categorization { display: flex; flex-direction: column; align-items: center; padding-bottom: 2rem; + + .communityOfFocus { + display: flex; + + .communityOfFocusCircle { + @include categorizationCircleStyle; + background: #1a4480; + } + + } + } -.censusLabel { - @include sidePanelLabelStyle; -} - -.priority { - display: flex; -} - -.prioritized { - @include categorizationCircleStyle; - background: #1a4480; - border: 1px solid $featureSelectBorderColor; -} - -.threshold { - @include categorizationCircleStyle; - background: #d7dde7; - border: 1px solid $featureSelectBorderColor; -} - -.nonPrioritized { - @include categorizationCircleStyle; - border: 1px solid $featureSelectBorderColor; -} - -.prioritization { - font-size: large; - font-weight: bold; - padding-top: 0.8rem; -} - +//Census row styles .censusRow { display: flex; flex-direction: column; list-style: none; margin: 0; -} - -//census row styles -.censusRow { padding: 1.2rem 1rem 0 1.2rem; + + .censusLabel { + @include sidePanelLabelStyle; + } + + .censusText { + font-size: small; + } } -.censusText { - font-size: small; -} + //Divider styles .divider { @@ -125,6 +109,11 @@ $sidePanelLabelFontColor: #171716; .indicatorValue { margin-top: 1.2rem; margin-left: 2.2rem; + + .indicatorSuperscript { + top: -0.2em + } + } .indicatorDesc { @@ -132,6 +121,3 @@ $sidePanelLabelFontColor: #171716; } } -.indicatorSuperscript { - top: -0.2em -} diff --git a/client/src/components/AreaDetail/areaDetail.module.scss.d.ts b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts index e45a6d8b..e72896cf 100644 --- a/client/src/components/AreaDetail/areaDetail.module.scss.d.ts +++ b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts @@ -2,23 +2,19 @@ declare namespace MapModuleScssNamespace { export interface IMapModuleScss { areaDetailContainer: string; categorization:string; - prioritized:string; - threshold:string; - nonPrioritized:string; - priority:string; - prioritization:string; + communityOfFocus:string; + communityOfFocusCircle:string; censusRow:string; - censusText: string; censusLabel:string; + censusText: string; divider:string; indicatorBoxMain:string; indicatorBoxAdditional:string; indicatorRow:string; - indicatorValue:string; indicatorName:string; - indicatorDesc:string; - indicatorBoxAdditional:string; + indicatorValue:string; indicatorSuperscript:string; + indicatorDesc:string; } } diff --git a/client/src/components/AreaDetail/index.tsx b/client/src/components/AreaDetail/index.tsx index d6222104..1583fc76 100644 --- a/client/src/components/AreaDetail/index.tsx +++ b/client/src/components/AreaDetail/index.tsx @@ -1,6 +1,6 @@ /* eslint-disable quotes */ // External Libs: -import * as React from 'react'; +import React, {useEffect} from 'react'; import {useIntl} from 'gatsby-plugin-intl'; // Components: @@ -32,30 +32,13 @@ const getSuperscriptOrdinal = (percentile: number) => { return suffixes[englishOrdinalRules.select(percentile)]; }; -// Todo VS: remove threshold data -export const getCategorization = (percentile: number) => { - let categorization; - let categoryCircleStyle; - - if (percentile >= constants.SCORE_BOUNDARY_PRIORITIZED ) { - categorization = EXPLORE_COPY.COMMUNITY.OF_FOCUS; - categoryCircleStyle = styles.prioritized; - } else if (constants.SCORE_BOUNDARY_THRESHOLD <= percentile && percentile < constants.SCORE_BOUNDARY_PRIORITIZED) { - categorization = EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS; - categoryCircleStyle = styles.threshold; - } else { - categorization = EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS; - categoryCircleStyle = styles.nonPrioritized; - } - return [categorization, categoryCircleStyle]; -}; - interface IAreaDetailProps { properties: constants.J40Properties, } const AreaDetail = ({properties}:IAreaDetailProps) => { const intl = useIntl(); + const [isCommunityFocus, setIsCommunityFocus] = React.useState(true); const score = properties[constants.SCORE_PROPERTY_HIGH] as number; const blockGroup = properties[constants.GEOID_PROPERTY]; @@ -63,6 +46,15 @@ const AreaDetail = ({properties}:IAreaDetailProps) => { const countyName = properties[constants.COUNTY_NAME]; const stateName = properties[constants.STATE_NAME]; + useEffect(() => { + if (score >= constants.SCORE_BOUNDARY_PRIORITIZED ) { + setIsCommunityFocus(true); + } else { + setIsCommunityFocus(false); + } + }, [score]); + + interface indicatorInfo { label: string, description: string, @@ -153,8 +145,6 @@ const AreaDetail = ({properties}:IAreaDetailProps) => { houseBurden, leadPaint, lifeExpect, pm25, trafficVolume, wasteWater, ]; - const [categorization, categoryCircleStyle] = getCategorization(score); - return (