@cdc/map 4.26.2 → 4.26.3

package/src/components/EditorPanel/components/Panels/Panel.PatternSettings-style.css

@@ -1,4 +1,4 @@
-.cdc-open-viz-module {
+.cove-visualization {
   .pattern-input__color {
     margin-top: 1rem;
   }

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

@@ -15,7 +15,7 @@ import Icon from '@cdc/core/components/ui/Icon'
 import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 import './Panel.PatternSettings-style.css'
 import Alert from '@cdc/core/components/Alert'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 
 // topojson helpers for checking color contrasts
@@ -65,7 +65,7 @@ const PatternSettings = ({ name }: PanelProps) => {
 
   /** Updates the map config with a new pattern item */
   const handleAddGeoPattern = () => {
-    const patterns = _.cloneDeep(config.map.patterns)
+    const patterns = cloneDeep(config.map.patterns)
     patterns.push({ dataKey: '', pattern: defaultPattern, contrastCheck: true })
     setConfig({
       ...config,
@@ -217,6 +217,9 @@ const PatternSettings = ({ name }: PanelProps) => {
                           handlePatternFieldUpdate('dataKey', value, patternIndex)
                         }
                       />
+                      <p className='edit-label mb-2'>
+                        Leave Data Key as &quot;Select&quot; to match this value across all columns.
+                      </p>
                       <label htmlFor={`pattern-dataValue--${patternIndex}`}>
                         Data Value:
                         <input

package/src/components/EditorPanel/components/editorPanel.styles.css

@@ -1,30 +1,30 @@
 .geo-buttons {
-  list-style: none;
   color: var(--mediumGray);
   display: grid;
+  list-style: none;
   button { width: 100% !important; }
   svg {
+    box-sizing: border-box;
     display: block;
-    max-width: 80px;
-    max-height: 40px;
     margin: 0.5em auto;
-    box-sizing: border-box;
+    max-height: 40px;
+    max-width: 80px;
     path {
       fill: currentColor;
     }
   }
   button {
+    align-items: center;
     background: transparent;
-    padding: 0.3em 0.75em;
-    display: flex;
     border: var(--lightGray) 1px solid;
-    width: 40%;
-    align-items: center;
-    margin-right: 1em;
     cursor: pointer;
-    overflow: hidden;
+    display: flex;
     flex-direction: column;
+    margin-right: 1em;
+    overflow: hidden;
+    padding: 0.3em 0.75em;
     transition: 0.2s all;
+    width: 40%;
     svg {
       display: block;
       height: 25px;
@@ -32,8 +32,8 @@
       max-width: 100%;
     }
     span {
-      text-transform: none;
       font-size: 1em;
+      text-transform: none;
     }
     &:hover {
       background: #f2f2f2;
@@ -48,13 +48,13 @@
         fill: #005eaa;
       }
       &:before {
-        content: ' ';
-        width: 5px;
         background: #005eaa;
-        left: 0;
-        top: 0;
         bottom: 0;
+        content: ' ';
+        left: 0;
         position: absolute;
+        top: 0;
+        width: 5px;
       }
     }
   }
@@ -62,24 +62,24 @@
 
 .editor-toggle {
   background: #f2f2f2;
+  border: 0;
   border-radius: 60px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
   color: #000;
+  cursor: pointer;
   font-size: 1em;
-  border: 0;
+  height: 25px;
+  left: 307px;
   position: fixed;
-  z-index: 100;
   transition: 0.1s background;
-  cursor: pointer;
   width: 25px;
-  height: 25px;
-  left: 307px;
-  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
+  z-index: 100;
   &:before {
-    top: 43%;
+    content: '\00ab';
     left: 50%;
-    transform: translate(-50%, -50%);
     position: absolute;
-    content: '\00ab';
+    top: 43%;
+    transform: translate(-50%, -50%);
   }
   &.collapsed {
     left: 1em;
@@ -93,3 +93,13 @@
   }
 }
 
+.column-section__header {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.column-section__title {
+  font-weight: 600;
+}

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

@@ -56,7 +56,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   const isLegendGradient = legend.style === 'gradient'
   const boxDynamicallyHidden = isBelowBreakpoint('md', viewport)
   const legendWrapping =
-    (legend.position === 'left' || legend.position === 'right') && isBelowBreakpoint('md', viewport)
+    (legend.position === 'left' || legend.position === 'right') &&
+    (viewport === 'md' || isBelowBreakpoint('md', viewport))
   const legendOnBottom = legend.position === 'bottom' || legendWrapping
   const needsTopMargin = legend.hideBorder && legendOnBottom
 
@@ -274,7 +275,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
   return (
     <ErrorBoundary component='Sidebar'>
-      <div className={`legends ${needsTopMargin ? 'mt-4' : ''}`}>
+      <div className={`legends ${needsTopMargin ? 'mt-4' : ''} ${legendWrapping ? 'legend-wrapped-bottom' : ''}`}>
         <aside
           id={skipId || 'legend'}
           className={legendClasses.aside.join(' ') || ''}
@@ -292,7 +293,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                       config.enableMarkupVariables && config.markupVariables?.length > 0
                         ? processMarkupVariables(legend.title, config.data || [], config.markupVariables, {
                             isEditor: false,
-                            filters: config.filters || []
+                            filters: config.filters || [],
+                            locale: config.locale,
+                            dataMetadata: config.dataMetadata
                           }).processedContent
                         : legend.title
                     )}
@@ -304,7 +307,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                       config.enableMarkupVariables && config.markupVariables?.length > 0
                         ? processMarkupVariables(legend.description, config.data || [], config.markupVariables, {
                             isEditor: false,
-                            filters: config.filters || []
+                            filters: config.filters || [],
+                            locale: config.locale,
+                            dataMetadata: config.dataMetadata
                           }).processedContent
                         : legend.description
                     )}

package/src/components/Legend/components/LegendGroup/legend.group.css

@@ -1,15 +1,15 @@
 .group-label {
-  font-weight: 500;
   font-family: Nunito, sans-serif;
   font-size: 1rem;
+  font-weight: 500;
   margin-bottom: 0.5rem;
 }
 .group-list-item {
-  list-style: none;
-  font-weight: 400;
+  cursor: pointer;
   font-size: 0.889rem;
+  font-weight: 400;
+  list-style: none;
   margin-top: 0.5rem !important;
-  cursor: pointer;
 }
 
 .group-container {
@@ -21,7 +21,7 @@
 }
 
 .legend-group-item-not-disable {
+  border-radius: 1px;
   outline: 1px solid #005ea2;
   outline-offset: 5px;
-  border-radius: 1px;
 }

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/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>
   )