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

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;
-}
 
-.censusLabel {
+  .communityOfFocus {
-  @include sidePanelLabelStyle;
-}
-
-.priority {
     display: flex;
-}
 
-.prioritized {
+    .communityOfFocusCircle {
       @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;
   }  
+}
+
+
 
 //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
-}

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;
+    communityOfFocus:string;
-    threshold:string;
+    communityOfFocusCircle:string;
-    nonPrioritized:string;
-    priority:string;
-    prioritization:string;
     censusRow:string;
-    censusText: string;
     censusLabel:string;
+    censusText: string;
     divider:string;
     indicatorBoxMain:string;
     indicatorBoxAdditional:string;
     indicatorRow:string;
-    indicatorValue:string;
     indicatorName:string;
-    indicatorDesc:string;
+    indicatorValue:string;
-    indicatorBoxAdditional:string;
     indicatorSuperscript:string;
+    indicatorDesc:string;
   }
 }
 

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<boolean>(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 (
     <aside className={styles.areaDetailContainer} data-cy={'aside'}>
       <ul className={styles.censusRow}>
@@ -162,31 +152,36 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
           <span className={styles.censusLabel}>
             {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.CENSUS_BLOCK_GROUP)}
           </span>
-          <span className={styles.censusText}>{blockGroup}</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>
+          <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>
+          <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>
+          <span className={styles.censusText}>{` ${population.toLocaleString()}`}</span>
         </li>
       </ul>
       <div className={styles.categorization}>
-        <div className={styles.priority}>
+        <div className={styles.communityOfFocus}>
-          <div className={categoryCircleStyle} />
+          {isCommunityFocus ?
-          <h3>{categorization}</h3>
+            <>
+              <div className={styles.communityOfFocusCircle} />
+              <h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
+            </> :
+          <h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
+          }
         </div>
         <p className={"secondary"}>version {METHODOLOGY_COPY.VERSION_NUMBER}</p>
       </div>

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

@@ -18,13 +18,17 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
         <span>
           County:
         </span>
-        <span />
+        <span>
+           undefined
+        </span>
       </li>
       <li>
         <span>
           State: 
         </span>
-        <span />
+        <span>
+           undefined
+        </span>
       </li>
       <li>
         <span>

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import {render} from '@testing-library/react';
-import AreaDetail, {getCategorization, readablePercentile} from '..';
+import AreaDetail, {readablePercentile} from '..';
 import {LocalizedComponent} from '../../../test/testHelpers';
 
 import * as constants from '../../../data/constants';
-import * as EXPLORE_COPY from '../../../data/copy/explore';
 
 describe('rendering of the AreaDetail', () => {
   const properties = {
@@ -22,8 +21,7 @@ describe('rendering of the AreaDetail', () => {
       <LocalizedComponent>
         <AreaDetail properties={properties}/>
       </LocalizedComponent>,
-  )
+  );
-  ;
 
   it('checks if various text fields are visible', () => {
     expect(asFragment()).toMatchSnapshot();
@@ -36,17 +34,3 @@ describe('tests the readablePercentile function', () => {
   expect(readablePercentile(.123)).toEqual(12);
   expect(readablePercentile(.789)).toEqual(79);
 });
-
-describe('tests the getCategorization function', () => {
-  it(`should equal Community of focus for value >= ${constants.SCORE_BOUNDARY_LOW}`, () => {
-    expect(getCategorization(.756)).toEqual([EXPLORE_COPY.COMMUNITY.OF_FOCUS, undefined]);
-  });
-
-  it(`should equal Threshold for .60 <= value < ${constants.SCORE_BOUNDARY_THRESHOLD}`, () => {
-    expect(getCategorization(.65)).toEqual([EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS, undefined]);
-  });
-
-  it(`should equal Non-prioritized for value < ${constants.SCORE_BOUNDARY_PRIORITIZED}`, () => {
-    expect(getCategorization(.53)).toEqual([EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS, undefined]);
-  });
-});

client/src/components/MapLegend/mapLegend.module.scss

@@ -19,10 +19,8 @@ $alertInfoColor: #e7f6f8;
 .colorSwatch {
   flex: 1 0 2rem; 
   box-sizing: border-box;
-  height: 1.7rem;
+  height: 2rem;
-  width: 1.7rem;
   margin: 2rem 1.5rem 2rem 0;
   border-radius: 50%;
   background-color: $max-color;
-  border: 2px solid $featureSelectBorderColor;
 }