@cdc/map 4.26.2 → 4.26.4

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

@@ -31,10 +31,12 @@ const LegendItemHex = props => {
         <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>
+              <h3 className={[...legendClasses.title, 'cove-prose'].join(' ')}>{parse(shapeGroup.legendTitle)}</h3>
             )}
             {shapeGroup.legendDescription && (
-              <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>
+              <p className={[...legendClasses.description, 'cove-prose'].join(' ')}>
+                {parse(shapeGroup.legendDescription)}
+              </p>
             )}
 
             <ul className={legendClasses.ul.join(' ')} aria-label='Legend items' style={{ listStyle: 'none' }}>

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

@@ -1,4 +1,4 @@
-@import '@cdc/core/styles/v2/utils/breakpoints';
+@import '@cdc/core/styles/utils/breakpoints';
 
 .cdc-map-inner-container {
   .map-container.world aside.side {
@@ -30,8 +30,6 @@
         z-index: 1;
         box-sizing: content-box;
         max-width: 450px;
-        margin-top: 2em;
-        margin-bottom: 2em;
         align-self: flex-start;
         z-index: 4;
         right: 1em;
@@ -126,6 +124,7 @@
         &--pattern {
           cursor: default;
         }
+
         &:focus {
           outline: none;
         }

package/src/components/NavigationMenu.tsx

@@ -47,7 +47,8 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
     const processedDropdown = {}
 
     Object.keys(data).forEach(val => {
-      const fullName = displayGeoName(val)
+      const displayOverride = data[val]?.[columns.geo?.displayColumn]
+      const fullName = displayGeoName(val, displayOverride)
 
       processedDropdown[fullName] = val
     })

package/src/components/SmallMultiples/SmallMultiples.css

@@ -1,13 +1,13 @@
 .small-multiples-container {
-  width: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .small-multiples-grid {
   display: grid;
-  width: 100%;
   flex: 1;
+  width: 100%;
 }
 
 .small-multiple-tile {
@@ -20,13 +20,13 @@
 }
 
 .tile-title {
-  margin: 0;
   font-weight: 700;
-  text-align: left;
   line-height: 1.3;
+  margin: 0;
+  text-align: left;
 }
 
 .tile-map {
-  width: 100%;
   flex-shrink: 0;
+  width: 100%;
 }

package/src/components/SmallMultiples/SynchronizedTooltip.tsx

@@ -88,7 +88,7 @@ const SynchronizedTooltip: React.FC<SynchronizedTooltipProps> = ({ tileTooltipId
   return (
     <div
       ref={tooltipRef}
-      className='tooltip tooltip-test'
+      className='tooltip tooltip-test cove-prose'
       style={{
         position: 'fixed',
         left: `${tooltipState.x + 10}px`,

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

@@ -4,6 +4,8 @@ import ConfigContext from '../../../../context'
 import { getGeoStrokeColor } from '../../../../helpers/colors'
 import { getStatesPicked } from '../../../../helpers/getStatesPicked'
 
+const GRAYED_OUT_COLOR = '#d3d3d3'
+
 type StateOutputProps = {
   topoData: Topology
   path: any
@@ -15,29 +17,42 @@ const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, runtim
   const { config } = useContext(ConfigContext)
   if (!topoData?.states) return null
 
-  // Use filter-aware state selection instead of direct config access
   const statesPickedData = getStatesPicked(config, runtimeData)
   const stateNames = statesPickedData.map(sp => sp.stateName)
 
-  const statesPicked = topoData.states.filter(s => {
-    return stateNames.includes(s.properties.name)
-  })
+  const showUnselected = config.general.hideUnselectedStates === false
+
+  const selectedStates = topoData.states.filter(s => stateNames.includes(s.properties.name))
+  const unselectedStates = showUnselected ? topoData.states.filter(s => !stateNames.includes(s.properties.name)) : []
 
   const geoStrokeColor = getGeoStrokeColor(config)
 
-  const stateLines = statesPicked.map(s => path(s.geometry))
-
-  return stateLines.map((line, index) => (
-    <g
-      key={`single-state-${index}`}
-      className='single-state'
-      style={{ fill: 'transparent', pointerEvents: 'none' }}
-      stroke={geoStrokeColor}
-      strokeWidth={2 / scale}
-    >
-      <path tabIndex={-1} className='state-path' d={line} />
-    </g>
-  ))
+  return (
+    <>
+      {unselectedStates.map((s, index) => (
+        <g
+          key={`unselected-state-${index}`}
+          className='single-state unselected'
+          style={{ fill: GRAYED_OUT_COLOR, opacity: 0.3, pointerEvents: 'none' }}
+          stroke={geoStrokeColor}
+          strokeWidth={1 / scale}
+        >
+          <path tabIndex={-1} className='state-path' d={path(s.geometry)} />
+        </g>
+      ))}
+      {selectedStates.map((s, index) => (
+        <g
+          key={`single-state-${index}`}
+          className='single-state'
+          style={{ fill: 'transparent', pointerEvents: 'none' }}
+          stroke={geoStrokeColor}
+          strokeWidth={2 / scale}
+        >
+          <path tabIndex={-1} className='state-path' d={path(s.geometry)} />
+        </g>
+      ))}
+    </>
+  )
 }
 
 export default StateOutput

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

@@ -39,6 +39,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
     })
 
   const isMobileViewport = isMobileTerritoryViewport(vizViewport)
+  const useCompactTerritorySpacing = isMobileViewport || currentViewport === 'sm' || currentViewport === 'md'
   const SVG_GAP = 9
   const SVG_WIDTH = isMobileViewport ? 30 : 45
 
@@ -59,7 +60,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
                   U.S. territories
                 </span>
                 <span
-                  className={`${isMobileViewport ? 'mt-1 mb-3' : 'mt-2 mb-4'} d-flex territories`}
+                  className={`${useCompactTerritorySpacing ? 'mt-1 mb-3' : 'mt-2 '} d-flex territories`}
                   style={
                     {
                       minWidth: `${usTerritories.length * SVG_WIDTH + (usTerritories.length - 1) * SVG_GAP}px`,
@@ -78,7 +79,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
                   Freely associated states
                 </span>
                 <span
-                  className={`${isMobileViewport ? 'mt-1 mb-3' : 'mt-2 mb-4'} d-flex territories`}
+                  className={`${useCompactTerritorySpacing ? 'mt-1 mb-3' : 'mt-2'} d-flex territories`}
                   style={
                     {
                       minWidth: `${

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

@@ -6,7 +6,7 @@ import { patternSizes } from '../../helpers/patternSizes'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { sanitizeToSvgId } from '@cdc/core/helpers/cove/string'
 import { type TerritoryShape } from './TerritoryShape'
-import { patternValuesMatch } from '../../../../helpers/patternMatching'
+import { getMatchingPatternForRow } from '../../../../helpers/getMatchingPatternForRow'
 
 const TerritoryRectangle: React.FC<TerritoryShape> = ({
   dataTooltipId,
@@ -73,14 +73,19 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
           {label}
         </text>
 
-        {config.map?.patterns?.map((patternData, patternIndex) => {
+        {(() => {
+          const matchedPattern = getMatchingPatternForRow(territoryData, config.map?.patterns)
+
+          if (!matchedPattern) {
+            return null
+          }
+
+          const { pattern: patternData, patternIndex, matchedDataKey } = matchedPattern
           const patternColor = patternData.color || getContrastColor('#FFF', backgroundColor)
-          const hasMatchingValues = patternValuesMatch(patternData.dataValue, territoryData?.[patternData.dataKey])
           const sanitizedTerritory = sanitizeToSvgId(territory || label)
-          const sanitizedDataKey = sanitizeToSvgId(patternData?.dataKey || '')
+          const sanitizedDataKey = sanitizeToSvgId(matchedDataKey)
           const patternId = `${mapId}--territory-${sanitizedTerritory}-${sanitizedDataKey}--${patternIndex}`
 
-          if (!hasMatchingValues) return null
           if (!patternData.pattern) return null
 
           return (
@@ -123,8 +128,8 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 fill={`url(#${patternId})`}
                 style={{ pointerEvents: 'none' }}
                 className={[
-                  `territory-pattern-${patternData?.dataKey}`,
-                  `territory-pattern-${patternData?.dataKey}--${patternData.dataValue}`
+                  `territory-pattern-${matchedDataKey}`,
+                  `territory-pattern-${matchedDataKey}--${patternData.dataValue}`
                 ].join(' ')}
               />
               <text
@@ -144,7 +149,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
               </text>
             </>
           )
-        })}
+        })()}
       </g>
     </svg>
   )