@cdc/map 4.24.10 → 4.24.12-2

package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx

@@ -1,5 +1,11 @@
 import { useContext } from 'react'
-import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import ConfigContext from '../../../../context'
 import { type MapContext } from '../../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
@@ -41,7 +47,11 @@ const PatternSettings = ({ name }: PanelProps) => {
   }
 
   /** Updates the map pattern at a given index */
-  const handleUpdateGeoPattern = (value: string, index: number, keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label' | 'color') => {
+  const handleUpdateGeoPattern = (
+    value: string,
+    index: number,
+    keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label' | 'color'
+  ) => {
     const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
     const updatedPatterns = [...state.map.patterns]
 
@@ -68,7 +78,9 @@ const PatternSettings = ({ name }: PanelProps) => {
 
         // Log a warning if the contrast check fails
         if (!contrastCheck) {
-          console.warn(`COVE: pattern contrast check failed on ${geoData?.[state.columns.geo.name]} for ${patternData.dataKey} with:
+          console.warn(`COVE: pattern contrast check failed on ${geoData?.[state.columns.geo.name]} for ${
+            patternData.dataKey
+          } with:
             pattern color: ${patternColor}
             contrast: ${getColorContrast(currentFill, patternColor)}
           `)
@@ -78,7 +90,9 @@ const PatternSettings = ({ name }: PanelProps) => {
       })
     })
 
-    const editorErrorMessage = updatedPatterns.some(pattern => pattern.contrastCheck === false) ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.' : ''
+    const editorErrorMessage = updatedPatterns.some(pattern => pattern.contrastCheck === false)
+      ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.'
+      : ''
 
     // Update the state with the new patterns and error message
     setState(prevState => ({
@@ -116,7 +130,12 @@ const PatternSettings = ({ name }: PanelProps) => {
         <AccordionItemButton>{name}</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        {patterns.length > 0 && <Alert type={checkPatternContrasts() ? 'success' : 'danger'} message='Pattern colors must comply with <br /> <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.' />}
+        {patterns.length > 0 && (
+          <Alert
+            type={checkPatternContrasts() ? 'success' : 'danger'}
+            message='Pattern colors must comply with <br /> <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.'
+          />
+        )}
         <br />
 
         {patterns &&
@@ -133,13 +152,26 @@ const PatternSettings = ({ name }: PanelProps) => {
               <Accordion allowZeroExpanded key={`accordion-pattern--${patternIndex}`}>
                 <AccordionItem>
                   <AccordionItemHeading>
-                    <AccordionItemButton>{pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}</AccordionItemButton>
+                    <AccordionItemButton>
+                      {pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}
+                    </AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
                     <>
-                      {pattern.contrastCheck ?? true ? <Alert type='success' message='This pattern passes contrast checks' /> : <Alert type='danger' message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>' />}{' '}
+                      {pattern.contrastCheck ?? true ? (
+                        <Alert type='success' message='This pattern passes contrast checks' />
+                      ) : (
+                        <Alert
+                          type='danger'
+                          message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>'
+                        />
+                      )}{' '}
                       <label htmlFor={`pattern-dataKey--${patternIndex}`}>Data Key:</label>
-                      <select id={`pattern-dataKey--${patternIndex}`} value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}>
+                      <select
+                        id={`pattern-dataKey--${patternIndex}`}
+                        value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}
+                      >
                         {/* TODO: sort these? */}
                         {dataKeyOptions.map((d, index) => {
                           return (
@@ -151,14 +183,28 @@ const PatternSettings = ({ name }: PanelProps) => {
                       </select>
                       <label htmlFor={`pattern-dataValue--${patternIndex}`}>
                         Data Value:
-                        <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataValue')} id={`pattern-dataValue--${patternIndex}`} value={pattern.dataValue === '' ? '' : pattern.dataValue} />
+                        <input
+                          type='text'
+                          onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataValue')}
+                          id={`pattern-dataValue--${patternIndex}`}
+                          value={pattern.dataValue === '' ? '' : pattern.dataValue}
+                        />
                       </label>
                       <label htmlFor={`pattern-label--${patternIndex}`}>
                         Label (optional):
-                        <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'label')} id={`pattern-dataValue--${patternIndex}`} value={pattern.label === '' ? '' : pattern.label} />
+                        <input
+                          type='text'
+                          onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'label')}
+                          id={`pattern-dataValue--${patternIndex}`}
+                          value={pattern.label === '' ? '' : pattern.label}
+                        />
                       </label>
                       <label htmlFor={`pattern-type--${patternIndex}`}>Pattern Type:</label>
-                      <select id={`pattern-type--${patternIndex}`} value={pattern?.pattern} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}>
+                      <select
+                        id={`pattern-type--${patternIndex}`}
+                        value={pattern?.pattern}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}
+                      >
                         {patternTypes.map((patternName, index) => (
                           <option value={patternName} key={index}>
                             {patternName}
@@ -166,7 +212,11 @@ const PatternSettings = ({ name }: PanelProps) => {
                         ))}
                       </select>
                       <label htmlFor={`pattern-size--${patternIndex}`}>Pattern Size:</label>
-                      <select id={`pattern-size--${patternIndex}`} value={pattern?.size} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}>
+                      <select
+                        id={`pattern-size--${patternIndex}`}
+                        value={pattern?.size}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}
+                      >
                         {['small', 'medium', 'large'].map((size, index) => (
                           <option value={size} key={index}>
                             {size}
@@ -178,16 +228,25 @@ const PatternSettings = ({ name }: PanelProps) => {
                           Pattern Color
                           <Tooltip style={{ textTransform: 'none' }}>
                             <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                              <Icon
+                                display='question'
+                                style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                              />
                             </Tooltip.Target>
                             <Tooltip.Content>
                               <p>{`If this setting is used, it is the reponsibility of the visualization author to verify the visualization colors meet WCAG 3:1 contrast ratios.`}</p>
                             </Tooltip.Content>
                           </Tooltip>
-                          <input type='text' value={pattern.color || ''} id='patternColor' name='patternColor' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'color')} />
+                          <input
+                            type='text'
+                            value={pattern.color || ''}
+                            id='patternColor'
+                            name='patternColor'
+                            onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'color')}
+                          />
                         </label>
                       </div>
-                      <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn--remove warn'>
+                      <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn-danger'>
                         Remove Pattern
                       </Button>
                     </>
@@ -196,7 +255,7 @@ const PatternSettings = ({ name }: PanelProps) => {
               </Accordion>
             )
           })}
-        <button className='btn full-width' onClick={handleAddGeoPattern}>
+        <button className='btn btn-primary full-width mt-2' onClick={handleAddGeoPattern}>
           Add Geo Pattern
         </button>
       </AccordionItemPanel>

package/src/components/Legend/components/Legend.tsx

@@ -15,18 +15,22 @@ import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import ConfigContext from '../../../context'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
-import { type ViewportSize } from '../../../types/MapConfig'
 import { Group } from '@visx/group'
 import './index.scss'
+import { ViewportSize } from '@cdc/chart/src/types/ChartConfig'
+import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+
+const LEGEND_PADDING = 30
 
 type LegendProps = {
   skipId: string
-  currentViewport: ViewportSize
   dimensions: DimensionsType
+  containerWidthPadding: number
+  currentViewport: ViewportSize
 }
 
 const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
-  const { skipId, currentViewport, dimensions } = props
+  const { skipId, dimensions, containerWidthPadding, currentViewport } = props
 
   const {
     // prettier-ignore
@@ -42,6 +46,12 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   } = useContext(ConfigContext)
 
   const { legend } = state
+  const isLegendGradient = legend.style === 'gradient'
+  const boxDynamicallyHidden = isBelowBreakpoint('md', currentViewport)
+  const legendWrapping =
+    (legend.position === 'left' || legend.position === 'right') && isBelowBreakpoint('md', currentViewport)
+  const legendOnBottom = legend.position === 'bottom' || legendWrapping
+  const needsTopMargin = legend.hideBorder && legendOnBottom
 
   // Toggles if a legend is active and being applied to the map and data table.
   const toggleLegendActive = (i, legendLabel) => {
@@ -83,6 +93,10 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
         formattedText = '0'
       }
 
+      if (entry.max === null && entry.min === null) {
+        formattedText = 'No data'
+      }
+
       let legendLabel = formattedText
 
       if (entry.hasOwnProperty('special')) {
@@ -99,13 +113,14 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     })
   }
 
-  const legendList = () => {
-    const formattedItems = getFormattedLegendItems()
+  const legendList = (patternsOnly = false) => {
+    const formattedItems = patternsOnly ? [] : getFormattedLegendItems()
+    const patternsOnlyFont = isMobileHeightViewport(currentViewport) ? '12px' : '14px'
     let legendItems
 
     legendItems = formattedItems.map((item, idx) => {
       const handleListItemClass = () => {
-        let classes = ['legend-container__li']
+        let classes = ['legend-container__li', 'd-flex', 'align-items-center']
         if (item.disabled) classes.push('legend-container__li--disabled')
         if (item.special) classes.push('legend-container__li--special-class')
         return classes.join(' ')
@@ -126,11 +141,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           }}
           tabIndex={0}
         >
-          <LegendShape
-            shape={state.legend.style === 'boxes' ? 'square' : 'circle'}
-            viewport={viewport}
-            fill={item.color}
-          />
+          <LegendShape shape={state.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
           <span>{item.label}</span>
         </li>
       )
@@ -195,7 +206,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                   />
                 </svg>
               </span>
-              <p style={{ lineHeight: '22.4px' }}>{patternData.label || patternData.dataValue || ''}</p>
+              <p style={{ lineHeight: '22.4px', fontSize: patternsOnly ? patternsOnlyFont : '16px' }}>
+                {patternData.label || patternData.dataValue || ''}
+              </p>
             </li>
           </>
         )
@@ -204,6 +217,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
     return legendItems
   }
+  const legendListItems = legendList(isLegendGradient)
+
   const { legendClasses } = useDataVizClasses(state, viewport)
 
   const handleReset = e => {
@@ -239,13 +254,13 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
   return (
     <ErrorBoundary component='Sidebar'>
-      <div className='legends'>
+      <div className={`legends ${needsTopMargin ? 'mt-1' : ''}`}>
         <aside
           id={skipId || 'legend'}
           className={legendClasses.aside.join(' ') || ''}
           role='region'
           aria-label='Legend'
-          tabIndex={0}
+          tabIndex={isLegendGradient ? -1 : 0}
           ref={ref}
         >
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
@@ -273,14 +288,17 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
             <LegendGradient
               labels={getFormattedLegendItems().map(item => item?.label) ?? []}
               colors={getFormattedLegendItems().map(item => item?.color) ?? []}
-              values={getFormattedLegendItems().map(item => item?.value) ?? []}
               dimensions={dimensions}
-              currentViewport={currentViewport}
+              parentPaddingToSubtract={
+                containerWidthPadding + (legend.hideBorder || boxDynamicallyHidden ? 0 : LEGEND_PADDING)
+              }
               config={state}
             />
-            <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
-              {state.legend.style === 'gradient' ? '' : legendList()}
-            </ul>
+            {!!legendListItems.length && (
+              <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
+                {legendListItems}
+              </ul>
+            )}
             {(state.visual.additionalCityStyles.some(c => c.label) || state.visual.cityStyleLabel) && (
               <>
                 <hr />
@@ -315,7 +333,11 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                 </div>
               </>
             )}
-            {runtimeLegend.disabledAmt > 0 && <Button onClick={handleReset}>Reset</Button>}
+            {runtimeLegend.disabledAmt > 0 && (
+              <Button className={legendClasses.resetButton.join(' ')} onClick={handleReset}>
+                Reset
+              </Button>
+            )}
           </section>
         </aside>
         {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && (

package/src/components/Legend/components/index.scss

@@ -6,7 +6,7 @@
   }
   @include breakpointClass(md) {
     .map-container.world aside.side {
-      border-top: var(--lightGray) 1px solid;
+      border-top: var(--cool-gray-10) 1px solid;
       position: absolute;
       box-shadow: rgba(0, 0, 0, 0.2) 0 10px 18px;
     }
@@ -15,10 +15,15 @@
   aside {
     background-color: #fff;
     z-index: 6;
-    border-top: var(--lightGray) 1px solid;
+    border-top: var(--cool-gray-10) 1px solid;
+
     @include breakpointClass(md) {
-      &.bottom, &.top {
-        border: var(--lightGray) 1px solid;
+      .legend-container.legend-padding {
+        padding: 15px;
+      }
+      &.bottom,
+      &.top {
+        border: var(--cool-gray-10) 1px solid;
       }
       &.side {
         z-index: 1;
@@ -29,7 +34,7 @@
         align-self: flex-start;
         z-index: 4;
         right: 1em;
-        border: var(--lightGray) 1px solid;
+        border: var(--cool-gray-10) 1px solid;
         top: 2em;
         right: 1em;
 
@@ -65,8 +70,11 @@
     }
 
     .legend-container {
-      padding: 1em;
+      --space-between-legend-items: 0.6em;
       position: relative;
+      &.legend-padding {
+        padding-top: 15px;
+      }
       .legend-container__title {
         font-size: 1.3em;
         padding-bottom: 0;
@@ -79,17 +87,7 @@
         padding-top: 1em;
       }
       .legend-container__reset-button {
-        font-size: 0.75em;
-        right: 1em;
-        text-transform: uppercase;
-        transition: 0.2s all;
-        padding: 0.2em 0.5em;
-        border: rgba(0, 0, 0, 0.2) 1px solid;
-        padding: 0.375rem;
-        &:hover {
-          text-decoration: none;
-          transition: 0.2s all;
-        }
+        margin-top: 1em;
       }
       p {
         line-height: 1.4em;
@@ -114,23 +112,21 @@
 
         &:not(.vertical-sorted, .legend-container__ul--single-column, .single-row) {
           width: 100%;
-          @include breakpoint(sm) {
-            .legend-container__li {
-              width: 50%;
-            }
-          }
         }
         .legend-container__li {
           flex-shrink: 0;
           display: inline-block;
           padding-right: 1em;
-          padding-bottom: 1em;
+          margin-bottom: var(--space-between-legend-items);
           vertical-align: middle;
           transition: 0.1s opacity;
           display: flex;
           cursor: pointer;
           white-space: wrap;
           flex-grow: 1;
+          &:last-child {
+            margin-bottom: 0;
+          }
           @include breakpoint(md) {
             white-space: nowrap;
           }
@@ -142,16 +138,17 @@
       }
       .legend-container__ul.single-row {
         width: 100%;
+        cursor: pointer;
         list-style: none;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: flex-start;
         flex-wrap: wrap;
+        row-gap: var(--space-between-legend-items);
 
         & > li {
           margin-right: 1em;
-          margin-bottom: 1em;
           white-space: wrap;
           display: flex;
           justify-content: center;
@@ -166,6 +163,9 @@
           }
         }
       }
+      .legend-container__ul.patterns-only {
+        margin-top: 10px;
+      }
     }
 
     .bottom .legend-container__ul--single-column:not(.vertical-sorted) {

package/src/components/UsaMap/components/HexIcon.tsx

@@ -30,7 +30,13 @@ const HexIcon: React.FC<HexIconProps> = props => {
     )
   }
   return (
-    <Group top={centroid[1] - 5} left={centroid[0] - iconSize} color={textColor} textAnchor='start' key={`hex--${item.key}-${item.value}-${index}`}>
+    <Group
+      top={centroid[1] - 5}
+      left={centroid[0] - iconSize}
+      color={textColor}
+      textAnchor='start'
+      key={`hex--${item.key}-${item.value}-${index}`}
+    >
       {item.shape === 'Arrow Down' && <AiOutlineArrowDown />}
       {item.shape === 'Arrow Up' && <AiOutlineArrowUp />}
       {item.shape === 'Arrow Right' && <AiOutlineArrowRight />}

package/src/components/UsaMap/components/SingleState/SingleState.CountyOutput.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../../../context'
 import { MapContext } from '../../../../types/MapContext'
+import { getGeoFillColor } from '../../../../helpers/colors'
 
 interface CountyOutputProps {
   counties: any[]
@@ -11,7 +12,10 @@ interface CountyOutputProps {
 }
 
 const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoStrokeColor, tooltipId }) => {
-  const { applyTooltipsToGeo, applyLegendToRow, displayGeoName, state, data, geoClickHandler } = useContext<MapContext>(ConfigContext)
+  const { applyTooltipsToGeo, applyLegendToRow, displayGeoName, state, data, geoClickHandler } =
+    useContext<MapContext>(ConfigContext)
+
+  const geoFillColor = getGeoFillColor(state)
   return (
     <>
       {counties.map(county => {
@@ -50,19 +54,49 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
           }
 
           // When to add pointer cursor
-          if ((state.columns.navigate && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'hover') {
+          if (
+            (state.columns.navigate && geoData[state.columns.navigate.name]) ||
+            state.tooltips.appearanceType === 'hover'
+          ) {
             styles.cursor = 'pointer'
           }
 
           return (
-            <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[state.columns.geo.name]}`} style={styles} onClick={() => geoClickHandler(geoDisplayName, geoData)} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
-              <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
+            <g
+              key={`key--${county.id}`}
+              className={`county county--${geoDisplayName.split(' ').join('')} county--${
+                geoData[state.columns.geo.name]
+              }`}
+              style={styles}
+              onClick={() => geoClickHandler(geoDisplayName, geoData)}
+              data-tooltip-id={`tooltip__${tooltipId}`}
+              data-tooltip-html={toolTip}
+            >
+              <path
+                tabIndex={-1}
+                className={`county`}
+                stroke={geoStrokeColor}
+                d={countyPath}
+                strokeWidth={0.75 / scale}
+              />
             </g>
           )
         } else {
           return (
-            <g key={`key--${county.id}`} className={`county county--${geoDisplayName.split(' ').join('')}`} style={{ fill: '#e6e6e6' }} data-tooltip-id={`tooltip__${tooltipId}`} data-tooltip-html={toolTip}>
-              <path tabIndex={-1} className={`county`} stroke={geoStrokeColor} d={countyPath} strokeWidth={0.75 / scale} />
+            <g
+              key={`key--${county.id}`}
+              className={`county county--${geoDisplayName.split(' ').join('')}`}
+              style={{ fill: geoFillColor }}
+              data-tooltip-id={`tooltip__${tooltipId}`}
+              data-tooltip-html={toolTip}
+            >
+              <path
+                tabIndex={-1}
+                className={`county`}
+                stroke={geoStrokeColor}
+                d={countyPath}
+                strokeWidth={0.75 / scale}
+              />
             </g>
           )
         }

package/src/components/UsaMap/components/SingleState/SingleState.StateOutput.tsx

@@ -1,6 +1,7 @@
 import { useContext } from 'react'
 import { mesh, Topology } from 'topojson-client'
 import ConfigContext from '../../../../context'
+import { getGeoFillColor, getGeoStrokeColor } from '../../../../helpers/colors'
 
 type StateOutputProps = {
   topoData: Topology
@@ -15,12 +16,19 @@ const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, stateT
     return s.properties.name === state.general.statePicked.stateName
   })
 
-  const geoStrokeColor = state.general.geoBorderColor === 'darkGray' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.7)'
+  const geoStrokeColor = getGeoStrokeColor(state)
+  const geoFillColor = getGeoFillColor(state)
 
   let stateLines = path(mesh(topoData, geo[0]))
 
   return (
-    <g key={'single-state'} className='single-state' style={{ fill: '#E6E6E6' }} stroke={geoStrokeColor} strokeWidth={0.95 / scale}>
+    <g
+      key={'single-state'}
+      className='single-state'
+      style={{ fill: geoFillColor }}
+      stroke={geoStrokeColor}
+      strokeWidth={0.95 / scale}
+    >
       <path tabIndex={-1} className='state-path' d={stateLines} />
     </g>
   )

package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { geoCentroid, geoPath } from 'd3-geo'
+import { geoCentroid } from 'd3-geo'
 import ConfigContext from './../../../../context'
 import { MapContext } from './../../../../types/MapContext'
 import HexIcon from '../HexIcon'
@@ -31,7 +31,19 @@ const nudges = {
 
 // todo: combine hexagonLabel & geoLabel functions
 // todo: move geoLabel functions outside of components for reusability
-const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territory, territoryData, ...props }) => {
+const TerritoryHexagon = ({
+  dataTooltipHtml,
+  dataTooltipId,
+  handleShapeClick,
+  label,
+  stroke,
+  strokeWidth,
+  territory,
+  territoryData,
+  text,
+  textColor,
+  ...props
+}) => {
   const { state } = useContext<MapContext>(ConfigContext)
 
   const isHex = state.general.displayAsHex
@@ -115,7 +127,17 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
       let y = state.hexMap.type === 'shapes' ? '30%' : '50%'
       return (
         <>
-          <Text fontSize={14} x={'50%'} y={y} style={{ fill: 'currentColor', stroke: 'initial', fontWeight: 400, opacity: 1, fillOpacity: 1 }} textAnchor='middle' verticalAnchor='middle'>
+          <Text
+            fontSize={14}
+            x={'50%'}
+            y={y}
+            style={{ fill: 'currentColor', stroke: 'initial', fontWeight: 400, opacity: 1, fillOpacity: 1 }}
+            textAnchor='middle'
+            verticalAnchor='middle'
+            onClick={handleShapeClick}
+            data-tooltip-id={dataTooltipId}
+            data-tooltip-html={dataTooltipHtml}
+          >
             {abbr.substring(3)}
           </Text>
           {state.general.displayAsHex && state.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
@@ -127,21 +149,44 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
 
     return (
       <g>
-        <line x1={centroid[0]} y1={centroid[1]} x2={centroid[0] + dx} y2={centroid[1] + dy} stroke='rgba(0,0,0,.5)' strokeWidth={1} />
-        <text x={4} strokeWidth='0' fontSize={13} style={{ fill: '#202020' }} alignmentBaseline='middle' transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}>
+        <line
+          x1={centroid[0]}
+          y1={centroid[1]}
+          x2={centroid[0] + dx}
+          y2={centroid[1] + dy}
+          stroke='rgba(0,0,0,.5)'
+          strokeWidth={1}
+        />
+        <text
+          x={4}
+          strokeWidth='0'
+          fontSize={13}
+          style={{ fill: '#202020' }}
+          alignmentBaseline='middle'
+          transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
+          onClick={handleShapeClick}
+          data-tooltip-id={dataTooltipId}
+          data-tooltip-html={dataTooltipHtml}
+        >
           {abbr.substring(3)}
         </text>
       </g>
     )
   }
 
-  return territoryData && (
-    <svg viewBox='0 0 45 51' className='territory-wrapper--hex'>
-      <g {...props}>
-        <polygon stroke={stroke} strokeWidth={strokeWidth} points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702' />
-        {state.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
-      </g>
-    </svg>
+  return (
+    territoryData && (
+      <svg viewBox='-1 -1 46 53' className='territory-wrapper--hex'>
+        <g {...props} data-tooltip-html={dataTooltipHtml} data-tooltip-id={dataTooltipId} onClick={handleShapeClick}>
+          <polygon
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702'
+          />
+          {state.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
+        </g>
+      </svg>
+    )
   )
 }