@cdc/map 4.25.3 → 4.25.6

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

@@ -4,6 +4,7 @@
   .map-container.world aside.side {
     border-top: 0;
   }
+
   @include breakpointClass(md) {
     .map-container.world aside.side {
       border-top: var(--cool-gray-10) 1px solid;
@@ -19,10 +20,12 @@
     border-radius: 6px;
 
     @include breakpointClass(md) {
+
       &.bottom,
       &.top {
         border: var(--cool-gray-10) 1px solid;
       }
+
       &.side {
         z-index: 1;
         box-sizing: content-box;
@@ -40,7 +43,8 @@
           display: block;
           column-count: 2;
           column-fill: balance;
-          & > li {
+
+          &>li {
             white-space: nowrap;
           }
         }
@@ -53,6 +57,7 @@
           flex-wrap: wrap;
         }
       }
+
       &.no-border {
         border: none;
       }
@@ -70,6 +75,10 @@
     .legend-container {
       position: relative;
 
+      .legend-container__li--disabled {
+        opacity: 0.4;
+      }
+
       .tspan {
         font-size: var(--legend-item-font-size) !important;
       }
@@ -79,14 +88,16 @@
         font-weight: var(--legend-title-font-weight);
         padding-bottom: 0;
         display: inline-block;
-        color: black;
       }
+
       .legend-container__description {
         font-size: var(--legend-description-font-size);
       }
+
       .legend-container__reset-button {
         margin-top: 1em;
       }
+
       p {
         line-height: 1.4em;
       }
@@ -96,9 +107,11 @@
         row-gap: var(--space-between-legend-item-rows);
         column-gap: var(--space-between-legend-item-columns);
       }
-      .legend-container__ul:not(.single-row) {
+
+
+      .legend-container__ul:not(.single-row, .legend-container__ul--single-column) {
         list-style: none;
-        display: grid;
+        display: grid !important;
         grid-template-columns: 1fr;
 
         @include breakpoint(md) {
@@ -111,25 +124,51 @@
         }
 
         &.vertical-sorted {
-          flex-direction: column;
+          // Remove the grid overrides - let the existing column rules handle this
+          display: block !important; // Switch from grid to block to enable columns
+
+          @include breakpoint(md) {
+            column-count: 2;
+            column-fill: balance;
+          }
+
+          // Add spacing between legend items in vertical sorted mode
+          .legend-container__li {
+            margin-bottom: var(--space-between-legend-item-rows);
+
+            &:last-child {
+              margin-bottom: 0; // Remove margin from last item
+            }
+          }
         }
 
         &:not(.vertical-sorted, .legend-container__ul--single-column, .single-row) {
           width: 100%;
         }
+
         .legend-container__li {
-          flex-shrink: 0;
-          display: inline-block;
+          display: flex;
+          align-items: center;
+          gap: 0.5em;
+          width: 100%;
           padding-right: 1em;
           vertical-align: middle;
           transition: 0.1s opacity;
-          display: flex;
           cursor: pointer;
-          white-space: wrap;
           flex-grow: 1;
+          white-space: nowrap; // Prevents label wrapping
+
+          .legend-item {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+          }
+
           &:last-child {
             margin-bottom: 0;
           }
+
           @include breakpoint(md) {
             white-space: nowrap;
           }
@@ -137,6 +176,7 @@
           &.legend-container__li--disabled {
             opacity: 0.4;
           }
+
           &.legend-container__li--not-disabled {
             outline: 1px solid #005ea2;
             outline-offset: 5px;
@@ -144,6 +184,7 @@
           }
         }
       }
+
       .legend-container__ul.single-row {
         width: 100%;
         cursor: pointer;
@@ -154,12 +195,13 @@
         justify-content: flex-start;
         flex-wrap: wrap;
 
-        & > li {
+        &>li {
           white-space: wrap;
           display: flex;
           justify-content: center;
           align-items: center;
           vertical-align: middle;
+
           @include breakpoint(md) {
             white-space: nowrap;
           }
@@ -169,6 +211,7 @@
           }
         }
       }
+
       .legend-container__ul.patterns-only {
         margin-top: 10px;
       }
@@ -191,19 +234,24 @@
       @include breakpointClass(md) {
         width: 25%;
         min-width: 200px;
+
         .legend-section ul {
           flex-direction: column;
+
           li {
             width: 100%;
+
             &:nth-last-of-type(-n + 2) {
               padding-bottom: 1em;
             }
+
             &:last-child {
               padding-bottom: 0;
             }
           }
         }
       }
+
       li {
         width: 100%;
       }
@@ -213,6 +261,7 @@
       .legend-container ul:not(.single-row) {
         align-items: flex-start;
         justify-content: space-between;
+
         li {
           flex-grow: 1;
           padding-right: 0.5em;
@@ -222,24 +271,29 @@
 
     .filters-section {
       padding: 0 1em 1em;
+
       .heading-3 {
         font-weight: bold;
         margin-bottom: 0.5em;
       }
+
       form {
         margin-top: 0.5em;
         line-height: 2em;
         display: flex;
         align-items: flex-end;
-        section + section {
+
+        section+section {
           margin-left: 0.75em;
         }
+
         select {
           display: block;
           font-size: 1em;
         }
       }
     }
+
     & .shape-container {
       &.single-row {
         display: flex;
@@ -248,26 +302,29 @@
         justify-content: flex-start;
         flex-wrap: wrap;
 
-        & > div {
+        &>div {
           margin-right: 2em;
         }
-        & > div:last-child {
+
+        &>div:last-child {
           margin-right: 0;
         }
       }
 
-      & > div {
+      &>div {
         display: flex;
         flex-direction: row;
       }
-      & div > svg {
+
+      & div>svg {
         width: 25px;
         height: 32px;
       }
-      & div > p {
+
+      & div>p {
         white-space: nowrap;
         margin-top: 1px;
       }
     }
   }
-}
+}

package/src/components/Modal.tsx

@@ -1,14 +1,15 @@
 import { useContext } from 'react'
-import LegendShape from '@cdc/core/components/LegendShape'
-import ConfigContext from '../context'
+import ConfigContext, { MapDispatchContext } from '../context'
 import Icon from '@cdc/core/components/ui/Icon'
+import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
+import { MapContext } from '../types/MapContext'
 
 const Modal = () => {
-  const { applyTooltipsToGeo, applyLegendToRow, content, state, currentViewport: viewport } = useContext(ConfigContext)
-  const { capitalizeLabels } = state.tooltips
+  const { content, config, currentViewport: viewport } = useContext<MapContext>(ConfigContext)
+  const { capitalizeLabels } = config.tooltips
+  const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
   const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx')
-  const type = state.general.type
-  const legendColors = applyLegendToRow(content.keyedData)
+  const dispatch = useContext(MapDispatchContext)
 
   return (
     <section
@@ -18,7 +19,16 @@ const Modal = () => {
       aria-hidden='true'
     >
       <div className='content'>{tooltip}</div>
-      <Icon display='close' alt='Close Modal' size={20} color='#000' className='modal-close' />
+      <Icon
+        display='close'
+        alt='Close Modal'
+        size={20}
+        color='#000'
+        className='modal-close'
+        onClick={() => {
+          dispatch({ type: 'SET_MODAL', payload: null })
+        }}
+      />
     </section>
   )
 }

package/src/components/NavigationMenu.tsx

@@ -24,7 +24,7 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
       navGo = 'Ir'
       break
     default:
-      navSelect = 'Select an Item'
+      navSelect = 'Select a Location'
       navGo = 'Go'
   }
 
@@ -55,15 +55,17 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
       <form onSubmit={handleSubmit} type='get'>
         <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 => (
-              <option key={key} value={key}>
-                {key}
-              </option>
-            ))}
-          </select>
+          <div className='d-flex'>
+            <select value={activeGeo} id={mapTabbingID.replace('#', '')} onChange={e => setActiveGeo(e.target.value)}>
+              {Object.keys(dropdownItems).map(key => (
+                <option key={key} value={key}>
+                  {key}
+                </option>
+              ))}
+            </select>
+            <input type='submit' value={navGo} className={`${options.headerColor} btn`} id='cdcnavmap-dropdown-go' />
+          </div>
         </label>
-        <input type='submit' value={navGo} className={`${options.headerColor} btn`} id='cdcnavmap-dropdown-go' />
       </form>
     </section>
   )

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

@@ -1,7 +1,10 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../../../context'
 import { MapContext } from '../../../../types/MapContext'
-import { getGeoFillColor } from '../../../../helpers/colors'
+import { getGeoFillColor, displayGeoName } from '../../../../helpers'
+import useApplyTooltipsToGeo from '../../../../hooks/useApplyTooltipsToGeo'
+import { applyLegendToRow } from '../../../../helpers/applyLegendToRow'
+import useGeoClickHandler, { geoClickHandler } from '././../../../../hooks/useGeoClickHandler'
 
 interface CountyOutputProps {
   counties: any[]
@@ -12,10 +15,11 @@ interface CountyOutputProps {
 }
 
 const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoStrokeColor, tooltipId }) => {
-  const { applyTooltipsToGeo, applyLegendToRow, displayGeoName, state, data, geoClickHandler } =
-    useContext<MapContext>(ConfigContext)
+  const { config, data, legendMemo, legendSpecialClassLastMemo, runtimeLegend } = useContext<MapContext>(ConfigContext)
+  const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+  const geoFillColor = getGeoFillColor(config)
+  const { geoClickHandler } = useGeoClickHandler()
 
-  const geoFillColor = getGeoFillColor(state)
   return (
     <>
       {counties.map(county => {
@@ -31,7 +35,7 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
 
         // Once we receive data for this geographic item, setup variables.
         if (geoData !== undefined) {
-          legendColors = applyLegendToRow(geoData)
+          legendColors = applyLegendToRow(geoData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
         }
 
         const geoDisplayName = displayGeoName(geoKey)
@@ -55,8 +59,8 @@ 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'
+            (config.columns.navigate && geoData[config.columns.navigate.name]) ||
+            config.tooltips.appearanceType === 'hover'
           ) {
             styles.cursor = 'pointer'
           }
@@ -65,7 +69,7 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
             <g
               key={`key--${county.id}`}
               className={`county county--${geoDisplayName.split(' ').join('')} county--${
-                geoData[state.columns.geo.name]
+                geoData[config.columns.geo.name]
               }`}
               style={styles}
               onClick={() => geoClickHandler(geoDisplayName, geoData)}

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

@@ -10,14 +10,14 @@ type StateOutputProps = {
 }
 
 const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, stateToShow }: StateOutputProps) => {
-  const { state } = useContext(ConfigContext)
+  const { config } = useContext(ConfigContext)
   if (!topoData?.objects?.states) return null
   let geo = topoData.objects.states.geometries.filter(s => {
-    return s.properties.name === state.general.statePicked.stateName
+    return s.properties.name === config.general.statePicked.stateName
   })
 
-  const geoStrokeColor = getGeoStrokeColor(state)
-  const geoFillColor = getGeoFillColor(state)
+  const geoStrokeColor = getGeoStrokeColor(config)
+  const geoFillColor = getGeoFillColor(config)
 
   let stateLines = path(mesh(topoData, geo[0]))
 

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

@@ -1,4 +1,7 @@
-import React from 'react'
+import React, { useContext } from 'react'
+
+import ConfigContext from '../../../context'
+import { isMobileTerritoryViewport } from '@cdc/core/helpers/viewports'
 
 type TerritoriesSectionProps = {
   territories: JSX.Element[]
@@ -9,6 +12,8 @@ type TerritoriesSectionProps = {
 }
 
 const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, logo, config, territoriesData }) => {
+  const { currentViewport } = useContext<MapContext>(ConfigContext)
+
   // filter territioriesData into the two groups below
   const freelyAssociatedKeys = territoriesData.filter(territory => {
     return ['US-FM', 'US-MH', 'US-PW'].includes(territory)
@@ -33,6 +38,10 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
       return a.props.label.localeCompare(b.props.label)
     })
 
+  const isMobileViewport = isMobileTerritoryViewport(currentViewport)
+  const SVG_GAP = 9
+  const SVG_WIDTH = isMobileViewport ? 30 : 45
+
   return (
     territoriesData.length > 0 && (
       <>
@@ -43,18 +52,32 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
               <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
             )}
           </div>
-          <div>
+          <div className='d-flex flex-wrap' style={{ columnGap: '1.5rem' }}>
             {(usTerritories.length > 0 || config.general.territoriesAlwaysShow) && (
-              <>
-                <h5 className='territories-label'>U.S. Territories</h5>
-                <span className='mt-1 mb-2 d-flex flex-wrap territories'>{usTerritories}</span>
-              </>
+              <div>
+                <h5 className='territories-label'>U.S. territories</h5>
+                <span
+                  className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
+                  style={{ minWidth: `${usTerritories.length * SVG_WIDTH + (usTerritories.length - 1) * SVG_GAP}px` }}
+                >
+                  {usTerritories}
+                </span>
+              </div>
             )}
             {(freelyAssociatedStates.length > 0 || config.general.territoriesAlwaysShow) && (
-              <>
-                <h5 className='territories-label'>Freely Associated States</h5>
-                <span className='mt-1 mb-2 d-flex flex-wrap territories'>{freelyAssociatedStates}</span>
-              </>
+              <div>
+                <h5 className='territories-label'>Freely associated states</h5>
+                <span
+                  className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
+                  style={{
+                    minWidth: `${
+                      freelyAssociatedStates.length * SVG_WIDTH + (freelyAssociatedStates.length - 1) * SVG_GAP
+                    }px`
+                  }}
+                >
+                  {freelyAssociatedStates}
+                </span>
+              </div>
             )}
           </div>
         </div>

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

@@ -5,6 +5,7 @@ import { MapContext } from './../../../../types/MapContext'
 import HexIcon from '../HexIcon'
 import { Text } from '@visx/text'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 
 const offsets = {
   'US-VT': [50, -8],
@@ -37,16 +38,16 @@ const TerritoryHexagon = ({
   handleShapeClick,
   label,
   stroke,
+  strokeColor,
   strokeWidth,
   territory,
   territoryData,
-  text,
   textColor,
   ...props
 }) => {
-  const { state } = useContext<MapContext>(ConfigContext)
+  const { config } = useContext<MapContext>(ConfigContext)
 
-  const isHex = state.general.displayAsHex
+  const isHex = config.general.displayAsHex
 
   // Labels
   const hexagonLabel = (geo, bgColor = '#FFFFFF', projection) => {
@@ -61,7 +62,7 @@ const TerritoryHexagon = ({
 
       return (
         <>
-          {state.hexMap.shapeGroups.map((group, groupIndex) => {
+          {config.hexMap.shapeGroups.map((group, groupIndex) => {
             return group.items.map((item, itemIndex) => {
               if (!geoData) return
               switch (item.operator) {
@@ -116,7 +117,7 @@ const TerritoryHexagon = ({
     }
 
     let x = 0,
-      y = state.hexMap.type === 'shapes' ? -10 : 5
+      y = config.hexMap.type === 'shapes' ? -10 : 5
 
     // used to nudge/move some of the labels for better readability
     if (nudges[abbr] && false === isHex) {
@@ -125,14 +126,15 @@ const TerritoryHexagon = ({
     }
 
     if (undefined === offsets[abbr] || isHex) {
-      let y = state.hexMap.type === 'shapes' ? '30%' : '50%'
+      let y = config.hexMap.type === 'shapes' ? '30%' : '50%'
       return (
         <>
           <Text
             fontSize={14}
             x={'50%'}
             y={y}
-            style={{ fill: 'currentColor', stroke: 'initial', fontWeight: 400, opacity: 1, fillOpacity: 1 }}
+            style={{ fill: 'currentColor', stroke: strokeColor, fontWeight: 900, opacity: 1, fillOpacity: 1 }}
+            paintOrder='stroke'
             textAnchor='middle'
             verticalAnchor='middle'
             onClick={handleShapeClick}
@@ -141,7 +143,7 @@ const TerritoryHexagon = ({
           >
             {abbr.substring(3)}
           </Text>
-          {state.general.displayAsHex && state.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
+          {config.general.displayAsHex && config.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
         </>
       )
     }
@@ -162,7 +164,7 @@ const TerritoryHexagon = ({
           x={4}
           strokeWidth='0'
           fontSize={13}
-          style={{ fill: '#202020' }}
+          style={{ fill: APP_FONT_COLOR }}
           alignmentBaseline='middle'
           transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
           onClick={handleShapeClick}
@@ -183,7 +185,7 @@ const TerritoryHexagon = ({
           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)}
+        {config.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
       </g>
     </svg>
   )

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

@@ -13,14 +13,14 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
   hasPattern,
   label,
   stroke,
+  strokeColor,
   strokeWidth,
   territory,
-  text,
   textColor,
   backgroundColor,
   ...props
 }) => {
-  const { state } = useContext<MapContext>(ConfigContext)
+  const { config } = useContext<MapContext>(ConfigContext)
   const { territoryData, ...otherProps } = props
   const rectanglePath =
     'M42,0.5 C42.8284271,0.5 43.5,1.17157288 43.5,2 L43.5,2 L43.5,26 C43.5,26.8284271 42.8284271,27.5 42,27.5 L42,27.5 L3,27.5 C2.17157288,27.5 1.5,26.8284271 1.5,26 L1.5,26 L1.5,2 C1.5,1.17157288 2.17157288,0.5 3,0.5 L3,0.5 Z'
@@ -41,8 +41,8 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
           dominantBaseline='middle'
           x='50%'
           y='54%'
-          fill={text}
-          style={{ stroke: 'none' }}
+          fill={textColor}
+          stroke={strokeColor}
           className='territory-text'
           paintOrder='stroke'
           onClick={handleShapeClick}
@@ -52,7 +52,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
           {label}
         </text>
 
-        {state.map.patterns.map((patternData, patternIndex) => {
+        {config.map.patterns.map((patternData, patternIndex) => {
           const patternColor = patternData.color || getContrastColor('#FFF', backgroundColor)
           const hasMatchingValues = patternData.dataValue === territoryData?.[patternData.dataKey]
 
@@ -67,6 +67,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
+                  strokeWidth={0.25}
                   complement
                 />
               )}
@@ -76,6 +77,8 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
+                  stroke={patternColor}
+                  radius={0.5}
                   complement
                 />
               )}
@@ -85,7 +88,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                   height={patternSizes[patternData?.size] ?? 6}
                   width={patternSizes[patternData?.size] ?? 6}
                   stroke={patternColor}
-                  strokeWidth={1}
+                  strokeWidth={0.75}
                   orientation={['diagonalRightToLeft']}
                 />
               )}
@@ -94,7 +97,6 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 strokeWidth={strokeWidth}
                 d={rectanglePath}
                 fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
-                color={patternData ? 'white' : textColor}
                 className={[
                   `territory-pattern-${patternData?.dataKey}`,
                   `territory-pattern-${patternData?.dataKey}--${patternData.dataValue}`
@@ -105,14 +107,10 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 dominantBaseline='middle'
                 x='50%'
                 y='54%'
-                fill={text}
-                style={{
-                  fill: patternData ? 'white' : 'black',
-                  stroke: patternData ? 'black' : textColor,
-                  strokeWidth: patternData ? 6 : 0
-                }}
+                fill={textColor}
+                stroke={strokeColor}
                 className='territory-text'
-                paint-order='stroke'
+                paintOrder='stroke'
                 onClick={handleShapeClick}
                 data-tooltip-id={dataTooltipId}
                 data-tooltip-html={dataTooltipHtml}

package/src/components/UsaMap/components/Territory/TerritoryShape.ts

@@ -1,13 +1,14 @@
 export type TerritoryShape = {
   handleShapeClick: () => void
+  backgroundColor: string
   dataTooltipHtml: string
   dataTooltipId: string
   hasPattern: boolean
   label: string
   stroke: string
+  strokeColor: string
   strokeWidth: number
   territory: string
   territoryData: object
-  text: string
   textColor: string
 }