@cdc/map 4.24.12-2 → 4.25.1

package/src/components/Legend/components/LegendItem.Hex.tsx

@@ -3,7 +3,7 @@ import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react
 import parse from 'html-react-parser'
 
 const LegendItemHex = props => {
-  const { state, viewport } = props
+  const { state, currentViewport: viewport } = props
 
   const getItemShape = shape => {
     switch (shape) {
@@ -27,8 +27,12 @@ const LegendItemHex = props => {
       return (
         <aside id='legend' className={legendClasses.aside.join(' ')} role='region' aria-label='Legend' tabIndex={0}>
           <section className={legendClasses.section.join(' ')} aria-label='Map Legend'>
-            {shapeGroup.legendTitle && <h3 className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</h3>}
-            {shapeGroup.legendDescription && <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>}
+            {shapeGroup.legendTitle && (
+              <h3 className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</h3>
+            )}
+            {shapeGroup.legendDescription && (
+              <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>
+            )}
 
             <ul className={legendClasses.ul.join(' ')} aria-label='Legend items' style={{ listStyle: 'none' }}>
               {shapeGroup.items.map((item, itemIndex) => {

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

@@ -16,11 +16,9 @@
     background-color: #fff;
     z-index: 6;
     border-top: var(--cool-gray-10) 1px solid;
+    border-radius: 6px;
 
     @include breakpointClass(md) {
-      .legend-container.legend-padding {
-        padding: 15px;
-      }
       &.bottom,
       &.top {
         border: var(--cool-gray-10) 1px solid;
@@ -70,21 +68,21 @@
     }
 
     .legend-container {
-      --space-between-legend-items: 0.6em;
       position: relative;
-      &.legend-padding {
-        padding-top: 15px;
+
+      .tspan {
+        font-size: var(--legend-item-font-size) !important;
       }
+
       .legend-container__title {
-        font-size: 1.3em;
+        font-size: var(--legend-title-font-size);
+        font-weight: var(--legend-title-font-weight);
         padding-bottom: 0;
         display: inline-block;
+        color: black;
       }
-      .legend-container__title + p,
-      .legend-container__title + ul,
-      p + ul,
-      p + p {
-        padding-top: 1em;
+      .legend-container__description {
+        font-size: var(--legend-description-font-size);
       }
       .legend-container__reset-button {
         margin-top: 1em;
@@ -92,11 +90,17 @@
       p {
         line-height: 1.4em;
       }
+
+      .legend-container__ul {
+        line-height: 1;
+        row-gap: var(--space-between-legend-item-rows);
+        column-gap: var(--space-between-legend-item-columns);
+      }
       .legend-container__ul:not(.single-row) {
         list-style: none;
-        padding-top: 1em;
         display: grid;
         grid-template-columns: 1fr;
+
         @include breakpoint(md) {
           grid-template-columns: 1fr 1fr;
         }
@@ -117,7 +121,6 @@
           flex-shrink: 0;
           display: inline-block;
           padding-right: 1em;
-          margin-bottom: var(--space-between-legend-items);
           vertical-align: middle;
           transition: 0.1s opacity;
           display: flex;
@@ -134,6 +137,11 @@
           &.legend-container__li--disabled {
             opacity: 0.4;
           }
+          &.legend-container__li--not-disabled {
+            outline: 1px solid #005ea2;
+            outline-offset: 5px;
+            border-radius: 1px;
+          }
         }
       }
       .legend-container__ul.single-row {
@@ -145,10 +153,8 @@
         align-items: center;
         justify-content: flex-start;
         flex-wrap: wrap;
-        row-gap: var(--space-between-legend-items);
 
         & > li {
-          margin-right: 1em;
           white-space: wrap;
           display: flex;
           justify-content: center;

package/src/components/Modal.tsx

@@ -4,18 +4,19 @@ import ConfigContext from '../context'
 import Icon from '@cdc/core/components/ui/Icon'
 
 const Modal = () => {
-  const { applyTooltipsToGeo, capitalize, applyLegendToRow, viewport, type, content } = useContext(ConfigContext)
-
+  const { applyTooltipsToGeo, applyLegendToRow, content, state, currentViewport: viewport } = useContext(ConfigContext)
+  const { capitalizeLabels } = state.tooltips
   const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx')
-
+  const type = state.general.type
   const legendColors = applyLegendToRow(content.keyedData)
 
   return (
     <section
-      className={capitalize ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport}
+      className={
+        capitalizeLabels ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport
+      }
       aria-hidden='true'
     >
-      {type === 'data' && <LegendShape fill={legendColors[0]} />}
       <div className='content'>{tooltip}</div>
       <Icon display='close' alt='Close Modal' size={20} color='#000' className='modal-close' />
     </section>

package/src/components/NavigationMenu.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
+import ConfigContext from '../context'
 
 const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoName, mapTabbingID }) => {
+  const { state } = useContext(ConfigContext)
   const [activeGeo, setActiveGeo] = useState('')
-
   const [dropdownItems, setDropdownItems] = useState({})
 
   const handleSubmit = event => {
@@ -10,7 +11,7 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
     if (activeGeo !== '') {
       const urlString = data[dropdownItems[activeGeo]][columns.navigate.name]
 
-      navigationHandler(urlString)
+      navigationHandler(state.general.navigationTarget, urlString)
     }
   }
 
@@ -55,7 +56,7 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
         <label htmlFor={mapTabbingID.replace('#', '')}>
           <div className='select-heading'>{navSelect}</div>
           <select value={activeGeo} id={mapTabbingID.replace('#', '')} onChange={e => setActiveGeo(e.target.value)}>
-            {Object.keys(dropdownItems).map((key, i) => (
+            {Object.keys(dropdownItems).map(key => (
               <option key={key} value={key}>
                 {key}
               </option>

package/src/components/UsaMap/components/TerritoriesSection.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+type TerritoriesSectionProps = {
+  territories: JSX.Element[]
+  logo: string
+  config: any
+}
+
+const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, logo, config }) => {
+  const usTerritories = territories
+    .filter(territory => {
+      return ['US-AS', 'US-GU', 'US-MP', 'US-PR', 'US-VI'].includes(territory?.props?.territory)
+    })
+    .sort((a, b) => {
+      return a.props.territory.localeCompare(b.props.territory)
+    })
+
+  const freelyAssociatedStates = territories
+    .filter(territory => {
+      return ['US-FM', 'US-MH', 'US-PW'].includes(territory?.props?.territory)
+    })
+    .sort((a, b) => {
+      return a.props.territory.localeCompare(b.props.territory)
+    })
+
+  return (
+    territories.length > 0 && (
+      <>
+        {/* Temporarily make the max width fit the image width */}
+        <div>
+          <div className='d-flex mt-4'>
+            {'data' === config.general.type && logo && (
+              <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
+            )}
+          </div>
+          <div>
+            {usTerritories.length > 0 && (
+              <>
+                <h5 className='territories-label'>U.S. Territories</h5>
+                <span className='mt-1 mb-2 d-flex flex-wrap territories'>{usTerritories}</span>
+              </>
+            )}
+            {freelyAssociatedStates.length > 0 && (
+              <>
+                <h5 className='territories-label'>Freely Associated States</h5>
+                <span className='mt-1 mb-2 d-flex flex-wrap territories'>{freelyAssociatedStates}</span>
+              </>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  )
+}
+
+export default TerritoriesSection

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -22,6 +22,7 @@ import {
   createShapeProperties
 } from '../helpers/shapes'
 import { getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
 
 const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
@@ -137,7 +138,6 @@ const CountyMap = props => {
       data,
       displayGeoName,
       geoClickHandler,
-      handleMapAriaLabels,
       runtimeFilters,
       runtimeLegend,
       setState,

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -1,17 +1,23 @@
 import { useState, useEffect, memo, useContext } from 'react'
-import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 // 3rd party
 import { geoCentroid } from 'd3-geo'
 import { feature } from 'topojson-client'
 import { Mercator } from '@visx/geo'
 
-// cdc
+// Cdc Components
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import topoJSON from '../data/us-regions-topo-2.json'
 import ConfigContext from '../../../context'
 import Annotation from '../../Annotation'
+
+// Data
+import topoJSON from '../data/us-regions-topo-2.json'
+import { supportedTerritories } from '../../../data/supported-geos'
+
+// Helpers
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
 
@@ -40,9 +46,7 @@ const UsaRegionMap = props => {
     data,
     displayGeoName,
     geoClickHandler,
-    handleMapAriaLabels,
     state,
-    supportedTerritories,
     tooltipId
   } = useContext(ConfigContext)
 
@@ -150,8 +154,8 @@ const UsaRegionMap = props => {
         <line
           x1={centroid[0]}
           y1={centroid[1]}
-          x2={centroid[0] + dx}
-          y2={centroid[1] + dy}
+          x2={centroid[0] + x}
+          y2={centroid[1] + y}
           stroke='rgba(0,0,0,.5)'
           strokeWidth={1}
         />
@@ -161,7 +165,7 @@ const UsaRegionMap = props => {
           fontSize={13}
           style={{ fill: '#202020' }}
           alignmentBaseline='middle'
-          transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
+          transform={`translate(${centroid[0] + x}, ${centroid[1] + y})`}
         >
           {abbr.substring(3)}
         </text>

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

@@ -15,6 +15,8 @@ import { MapContext } from '../../../types/MapContext'
 import useStateZoom from '../../../hooks/useStateZoom'
 import { Text } from '@visx/text'
 import { getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
+import { titleCase } from '../../../helpers/titleCase'
 
 // SVG ITEMS
 const WIDTH = 880
@@ -29,8 +31,6 @@ const SingleStateMap = props => {
     geoClickHandler,
     applyLegendToRow,
     displayGeoName,
-    handleMapAriaLabels,
-    titleCase,
     setSharedFilterValue,
     isFilterValueSupported,
     runtimeFilters,

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -5,6 +5,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 // United States Topojson resources
 import topoJSON from '../data/us-topo.json'
 import hexTopoJSON from '../data/us-hex-topo.json'
+import { supportedTerritories } from '../../../data/supported-geos'
 
 import { geoCentroid, geoPath } from 'd3-geo'
 import { feature } from 'topojson-client'
@@ -17,15 +18,16 @@ import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import HexIcon from './HexIcon'
 import { patternSizes } from '../helpers/patternSizes'
 import Annotation from '../../Annotation'
-
 import Territory from './Territory'
-import { cityKeys } from '../../../data/supported-geos'
 
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
 import { MapContext } from '../../../types/MapContext'
-import { checkColorContrast, getContrastColor, getColorContrast } from '@cdc/core/helpers/cove/accessibility'
+import { checkColorContrast, getContrastColor, outlinedTextColor } from '@cdc/core/helpers/cove/accessibility'
 import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
+import { titleCase } from '../../../helpers/titleCase'
+import TerritoriesSection from './TerritoriesSection'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -61,11 +63,8 @@ const UsaMap = () => {
       data,
       displayGeoName,
       geoClickHandler,
-      handleMapAriaLabels,
       setSharedFilterValue,
       state,
-      supportedTerritories,
-      titleCase,
       tooltipId,
       handleDragStateChange,
       mapId,
@@ -521,12 +520,11 @@ const UsaMap = () => {
 
     if (undefined === abbr) return null
 
-    let textColor = getContrastColor('#FFF', bgColor)
-
-    // always make HI black since it is off to the side
+    // HI background is always white since it is off to the side
     if (abbr === 'US-HI' && !general.displayAsHex) {
-      textColor = '#000'
+      bgColor = '#FFF'
     }
+    const { textColor, strokeColor } = outlinedTextColor(bgColor)
 
     let x = 0,
       y = hexMap.type === 'shapes' && general.displayAsHex ? -10 : 5
@@ -540,7 +538,16 @@ const UsaMap = () => {
     if (undefined === offsets[abbr] || isHex) {
       return (
         <g transform={`translate(${centroid})`} tabIndex={-1}>
-          <text x={x} y={y} fontSize={14} strokeWidth='0' style={{ fill: textColor }} textAnchor='middle'>
+          <text
+            x={x}
+            y={y}
+            fontSize={14}
+            strokeWidth='0'
+            // paintOrder='stroke' // PENDING DEV-9278: Adds a stroke around the text potentially for 508 compliance
+            // stroke={strokeColor}
+            style={{ fill: textColor }}
+            textAnchor='middle'
+          >
             {abbr.substring(3)}
           </text>
         </g>
@@ -562,8 +569,10 @@ const UsaMap = () => {
         <text
           x={4}
           strokeWidth='0'
+          // paintOrder='stroke' // PENDING DEV-9278: Adds a stroke around the text potentially for 508 compliance
+          // stroke={strokeColor}
           fontSize={13}
-          style={{ fill: '#202020' }}
+          style={{ fill: textColor }}
           alignmentBaseline='middle'
           transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
         >
@@ -588,22 +597,7 @@ const UsaMap = () => {
         {annotations.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
       </svg>
 
-      {territories.length > 0 && (
-        <>
-          {/* Temporarily make the max width fit the image width */}
-          <div>
-            <div className='d-flex mt-2'>
-              <h5>{general.territoriesLabel}</h5>
-              {'data' === general.type && logo && (
-                <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
-              )}
-            </div>
-            <div>
-              <span className='mt-1 mb-2 d-flex flex-wrap territories'>{territories}</span>
-            </div>
-          </div>
-        </>
-      )}
+      <TerritoriesSection territories={territories} logo={logo} config={state} />
     </ErrorBoundary>
   )
 }

package/src/components/WorldMap/WorldMap.tsx

@@ -12,6 +12,9 @@ import BubbleList from '../BubbleList'
 import ConfigContext from '../../context'
 import ZoomControls from '../ZoomControls'
 import { getGeoFillColor, getGeoStrokeColor } from '../../helpers/colors'
+import { supportedCountries } from '../../data/supported-geos'
+import { handleMapAriaLabels } from '../../helpers/handleMapAriaLabels'
+import { titleCase } from '../../helpers/titleCase'
 
 const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 
@@ -26,7 +29,6 @@ const WorldMap = () => {
     displayGeoName,
     generateRuntimeData,
     geoClickHandler,
-    handleMapAriaLabels,
     hasZoom,
     position,
     setFilteredCountryCode,
@@ -34,11 +36,7 @@ const WorldMap = () => {
     setRuntimeData,
     setState,
     state,
-    supportedCountries,
-    titleCase,
     tooltipId,
-    setScale,
-    setTranslate
   } = useContext(ConfigContext)
 
   // TODO Refactor - state should be set together here to avoid rerenders

package/src/context.ts

@@ -4,17 +4,12 @@ import { MapConfig } from './types/MapConfig'
 type MapContext = {
   applyLegendToRow
   applyTooltipsToGeo
-  closeModal
-  columnsInData
-  currentViewport
   data
-  displayDataAsText
   displayGeoName
   filteredCountryCode
   generateColorsArray
   generateRuntimeData
   geoClickHandler
-  handleMapAriaLabels
   handleCircleClick: Function
   hasZoom
   innerContainerRef
@@ -22,7 +17,6 @@ type MapContext = {
   isDebug
   isEditor
   loadConfig
-  navigationHandler
   position
   resetLegendToggles
   runtimeFilters
@@ -37,13 +31,7 @@ type MapContext = {
   setSharedFilterValue
   setState
   state: MapConfig
-  supportedCities
-  supportedCounties
-  supportedCountries
-  supportedTerritories
-  titleCase
   tooltipId: string
-  viewport
 }
 
 const ConfigContext = createContext({} as MapContext)

package/src/data/initial-state.js

@@ -1,6 +1,7 @@
 export default {
   annotations: [],
   general: {
+    navigationTarget: '_self',
     noStateFoundMessage: 'Map Unavailable',
     annotationDropdownText: 'Annotations',
     geoBorderColor: 'darkGray',
@@ -11,8 +12,7 @@ export default {
     showDownloadButton: false,
     showDownloadMediaButton: false,
     displayAsHex: false,
-    displayStateLabels: false,
-    territoriesLabel: 'Territories',
+    displayStateLabels: true,
     territoriesAlwaysShow: false,
     language: 'en',
     geoType: 'single-state',

package/src/data/supported-geos.js

@@ -537,6 +537,9 @@ export const supportedTerritories = {
 // prettier-ignore
 export const supportedCities = {
   'ALASKA NATIVE TRIBAL HEALTH CONSORTIUM': [-149.8067, 61.1827],
+  'ALBANY, NEW YORK': [-73.9665676, 42.6679788],
+  'ALBANY, NY': [-73.9665676, 42.6679788],
+  'ALBANY': [-73.9665676, 42.6679788],
   'ALBUQUERQUE': [-106.650421, 35.084385],
   'ALEXANDRIA': [-77.0469, 38.8048],
   'AMERICAN INDIAN CANCER FOUNDATION': [-93.1777, 45.0119],
@@ -568,6 +571,7 @@ export const supportedCities = {
   'COLUMBUS': [-82.998795, 39.961178],
   'CORPUS CHRISTI': [-97.396378, 27.800583],
   'DALLAS': [-96.796989, 32.776665],
+  'DC': [-77.036873, 38.907192],
   'DENVER': [-104.990250, 39.739235],
   'DETROIT': [-83.045753, 42.331429],
   'DISTRICT OF COLUMBIA': [-77.036873, 38.907192],
@@ -601,10 +605,16 @@ export const supportedCities = {
   'IRVINE': [-117.826508, 33.684566],
   'IRVING': [-96.948891, 32.814018],
   'JACKSONVILLE': [-81.655647, 30.332184],
+  'JAMAICA PLAINS, MA': [-71.1382393, 42.308217],
+  'JAMAICA PLAINS, MARYLAND': [-71.1382393, 42.308217],
+  'JAMAICA PLAINS': [-71.1382393, 42.308217],
   'JERSEY CITY': [-74.077644, 40.728157],
   'KANSAS CITY': [-94.578568, 39.099728],
   'KAW NATION OF OKLAHOMA': [-96.8633, 36.7669],
   'LAKEVIEW': [-104.9903, 39.7392],
+  'LANSING, MI': [-84.6418571, 42.721154],
+  'LANSING, MICHIGAN': [-84.6418571, 42.721154],
+  'LANSING': [-84.6418571, 42.721154],
   'LAREDO': [-99.507553, 27.503561],
   'LAS VEGAS': [-115.139832, 36.169941],
   'LEXINGTON': [-84.503716, 38.040585],
@@ -638,6 +648,9 @@ export const supportedCities = {
   'NORTHWEST PORTLAND AREA INDIAN HEALTH BOARD': [-122.6863, 45.5076],
   'OAKLAND': [-122.271111, 37.804363],
   'OKLAHOMA CITY': [-97.516426, 35.467560],
+  'OLYMPIA, WA': [-122.9382403, 47.0394791],
+  'OLYMPIA, WASHINGTON': [-122.9382403, 47.0394791],
+  'OLYMPIA': [-122.9382403, 47.0394791],
   'OMAHA': [-95.934502, 41.256538],
   'ORLANDO': [-81.379234, 28.538336],
   'PASADENA':[-95.209099,29.691063],
@@ -650,7 +663,10 @@ export const supportedCities = {
   'PROVO, UTAH': [-111.6585, 40.2338],
   'RALEIGH': [-78.638176, 35.779591],
   'RENO': [-119.813805, 39.529633],
-  'RICHMOND': [-77.436050, 37.540726],
+  'RICHMOND, CA': [-122.4248668, 37.9559018],
+  'RICHMOND, CALIFORNIA': [-122.4248668, 37.9559018],
+  'RICHMOND, VA': [-77.436050, 37.540726],
+  'RICHMOND, VIRGINIA': [-77.436050, 37.540726],
   'RIVERSIDE': [-117.375496, 33.980602],
   'ROUND ROCK, TEXAS': [-97.6789, 30.5083],
   'ROUND ROCK, TX': [-97.6789, 30.5083],
@@ -663,7 +679,6 @@ export const supportedCities = {
   'SALEM, MASSACHUSETTS': [-70.8955, 42.5197],
   'SALEM, OR': [-123.0351, 44.9429],
   'SALEM, OREGON': [-123.0351, 44.9429],
-  'SALEM, OREGON': [-123.0351, 44.9429],
   'SALT LAKE CITY': [-112.0605644, 40.7767833],
   'SALUDA, VA': [-76.5950, 37.6064],
   'SALUDA, VIRGINIA': [-76.5950, 37.6064],
@@ -686,7 +701,13 @@ export const supportedCities = {
   'ST. PETERSBURG': [-82.640289, 27.767601],
   'STOCKTON': [-121.290779, 37.957703],
   'SYRACUSE': [-76.1742992, 43.0352913],
+  'TALLAHASSEE, FL': [-84.253917, 30.467056],
+  'TALLAHASSEE, FLORIDA': [-84.253917, 30.467056],
+  'TALLAHASSEE': [-84.253917, 30.467056],
   'TAMPA': [-82.457176, 27.950575],
+  'TAYLORSVILLE, UT': [-111.9702728, 40.658078],
+  'TAYLORSVILLE, UTAH': [-111.9702728, 40.658078],
+  'TAYLORSVILLE': [-111.9702728, 40.658078],
   'TOLEDO': [-83.537865, 41.652805],
   'TUCSON': [-110.974709, 32.222607],
   'TULSA': [-95.992775, 36.153980],
@@ -695,7 +716,6 @@ export const supportedCities = {
   'VIRGINIA BEACH': [-75.977982, 36.852924],
   'WARREN': [-80.8184, 41.2376],
   'WASHINGTON D.C.': [-77.036873, 38.907192],
-  'DC': [-77.036873, 38.907192],
   'WASHINGTON DC.': [-77.036873, 38.907192],
   'WASHINGTON DC': [-77.036873, 38.907192],
   'WICHITA': [-97.330055, 37.687176],

package/src/helpers/applyColorToLegend.ts

@@ -1,7 +1,7 @@
 import colorPalettes from '@cdc/core/data/colorPalettes'
 import chroma from 'chroma-js'
-import { isOlderVersion } from '@cdc/core/helpers/ver/versionNeedsUpdate'
 import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import isOlderVersion from '@cdc/core/helpers/isOlderVersion'
 
 /**
  * applyColorToLegend
@@ -45,7 +45,7 @@ export const applyColorToLegend = (legendIdx: number, config: ChartConfig, resul
 
     // Special Classes (No Data)
     if (result[legendIdx].special) {
-      if (isOlderVersion(config.version, '4.24.11')) {
+      if (!config?.migrations?.addColorMigration) {
         const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses)
         return specialClassColors[legendIdx]
       } else {
@@ -57,7 +57,7 @@ export const applyColorToLegend = (legendIdx: number, config: ChartConfig, resul
     if (config.color.includes('qualitative')) return mapColorPalette[colorIdx]
 
     // If the current version is newer than 4.24.10, use the color palette
-    if (!isOlderVersion(config.version, '4.24.12')) {
+    if (!config?.migrations?.addColorMigration) {
       if (config.customColors) return mapColorPalette[legendIdx - specialClasses.length]
     }
 

package/src/helpers/closeModal.ts

@@ -0,0 +1,9 @@
+export const closeModal = ({ target }, modal: string, setModal: Function) => {
+  if (
+    'string' === typeof target.className &&
+    (target.className.includes('modal-close') || target.className.includes('modal-background')) &&
+    null !== modal
+  ) {
+    setModal(null)
+  }
+}