@cdc/map 4.26.2 → 4.26.3

package/src/_stories/CdcMap.Editor.stories.tsx

@@ -356,7 +356,7 @@ export const GeneralSectionTests: Story = {
     expect(showTitleCheckbox).toBeTruthy()
 
     const getTitleVisibility = () => {
-      const titleElement = canvasElement.querySelector('.cove-title, header.cove-component__header')
+      const titleElement = canvasElement.querySelector('.cove-title, header.cove-visualization__header')
       return {
         isPresent: Boolean(titleElement)
       }
@@ -414,7 +414,7 @@ export const GeneralSectionTests: Story = {
 
     const getTitleStyleVisual = () => {
       const coveTitleElement = canvasElement.querySelector('.cove-title')
-      const legacyTitleElement = canvasElement.querySelector('header.cove-component__header')
+      const legacyTitleElement = canvasElement.querySelector('header.cove-visualization__header')
 
       // For modern titles, check for h2 (large) or h3 (small) elements
       const hasH2 = Boolean(coveTitleElement?.querySelector('h2'))
@@ -1738,7 +1738,7 @@ export const FiltersSectionTests: Story = {
         const labelText = labels.join(',')
 
         // Verify filter dropdown is rendered
-        const vizContainer = canvasElement.querySelector('.cdc-open-viz-module')
+        const vizContainer = canvasElement.querySelector('.cove-visualization')
         const filterSelect = Array.from(vizContainer?.querySelectorAll('select') || []).find(select => {
           const options = Array.from(select.options).map(opt => opt.value)
           return options.includes('Alabama')
@@ -2189,22 +2189,29 @@ export const VisualSectionTests: StoryObj<typeof CdcMap> = {
     await performAndAssert(
       'Header Theme → Select purple theme',
       () => {
-        const innerContainer = canvasElement.querySelector('.cdc-map-inner-container')
-        const currentTheme = Array.from(innerContainer?.classList || []).find(cls => cls.startsWith('theme-'))
+        // Check via the HeaderThemeSelector's selected button state
+        const colorPalettes = canvasElement.querySelectorAll('.color-palette')
+        const themeColorPalette = Array.from(colorPalettes).find(palette =>
+          Array.from(palette.querySelectorAll('button')).some(btn => btn.classList.contains('theme-purple'))
+        )
+        const selectedThemeBtn = themeColorPalette?.querySelector('button.selected') as HTMLElement | null
         return {
-          currentTheme: currentTheme || ''
+          currentTheme: selectedThemeBtn
+            ? Array.from(selectedThemeBtn.classList).find(cls => cls.startsWith('theme-')) || ''
+            : ''
         }
       },
       async () => {
-        // Find the color palette and click on the purple theme button
-        const colorPalette = canvasElement.querySelector('.color-palette')
-        const purpleTheme = Array.from(colorPalette?.querySelectorAll('button') || []).find(button =>
-          button.classList.contains('theme-purple')
-        ) as HTMLElement
+        // Find the header theme selector and click purple
+        const colorPalettes = canvasElement.querySelectorAll('.color-palette')
+        const themeColorPalette = Array.from(colorPalettes).find(palette =>
+          Array.from(palette.querySelectorAll('button')).some(btn => btn.classList.contains('theme-purple'))
+        )
+        const purpleTheme = themeColorPalette?.querySelector('button.theme-purple') as HTMLElement
         await userEvent.click(purpleTheme)
       },
       (before, after) => {
-        // After clicking, the header should have the purple theme
+        // After clicking, the purple theme button should be selected
         return after.currentTheme === 'theme-purple'
       }
     )
@@ -2220,7 +2227,7 @@ export const VisualSectionTests: StoryObj<typeof CdcMap> = {
     await performAndAssert(
       'Show Title → Toggle off',
       () => {
-        const titleElement = canvasElement.querySelector('.cove-title, header.cove-component__header')
+        const titleElement = canvasElement.querySelector('.cove-title, header.cove-visualization__header')
         return {
           isPresent: Boolean(titleElement)
         }
@@ -2237,7 +2244,7 @@ export const VisualSectionTests: StoryObj<typeof CdcMap> = {
     await performAndAssert(
       'Show Title → Toggle back on',
       () => {
-        const titleElement = canvasElement.querySelector('.cove-title, header.cove-component__header')
+        const titleElement = canvasElement.querySelector('.cove-title, header.cove-visualization__header')
         return {
           isPresent: Boolean(titleElement)
         }
@@ -2742,6 +2749,108 @@ export const PatternSettingsSectionTests: Story = {
       (before, after) => after.patternPathCount > 0
     )
 
+    await performAndAssert(
+      'Pattern Settings → Broad match with blank dataKey (value 55)',
+      () => {
+        const allSvgs = canvasElement.querySelectorAll('svg')
+        let patternPathCount = 0
+
+        allSvgs.forEach(svg => {
+          const allPaths = Array.from(svg.querySelectorAll('path'))
+          patternPathCount += allPaths.filter(path => path.getAttribute('fill')?.startsWith('url(#')).length
+        })
+
+        return { patternPathCount }
+      },
+      async () => {
+        const dataKeySelect = canvasElement.querySelector('select[name^="pattern-dataKey--"]') as HTMLSelectElement
+        const dataValueInput = canvasElement.querySelector('input[id^="pattern-dataValue--"]') as HTMLInputElement
+        if (!dataKeySelect || !dataValueInput) throw new Error('Pattern data controls not found')
+
+        await userEvent.selectOptions(dataKeySelect, '')
+        await userEvent.clear(dataValueInput)
+        await userEvent.type(dataValueInput, '55')
+        await userEvent.tab()
+      },
+      (before, after) => after.patternPathCount > 0
+    )
+
+    await performAndAssert(
+      'Pattern Settings → Specific match beats broad match',
+      () => {
+        const allSvgs = canvasElement.querySelectorAll('svg')
+        const patternTypeById: Record<string, 'lines' | 'circles' | 'waves' | 'unknown'> = {}
+        const appliedRatePatternTypes = new Set<string>()
+
+        allSvgs.forEach(svg => {
+          const patterns = svg.querySelectorAll('pattern')
+          patterns.forEach(pattern => {
+            const patternId = pattern.getAttribute('id')
+            if (!patternId) return
+
+            if (pattern.querySelector('circle')) patternTypeById[patternId] = 'circles'
+            else if (pattern.querySelector('line')) patternTypeById[patternId] = 'lines'
+            else if (pattern.querySelector('path')) patternTypeById[patternId] = 'waves'
+            else patternTypeById[patternId] = 'unknown'
+          })
+
+          const ratePatternNodes = Array.from(svg.querySelectorAll('path.pattern-geoKey--Rate')).filter(node =>
+            node.getAttribute('fill')?.startsWith('url(#')
+          )
+
+          ratePatternNodes.forEach(node => {
+            const fill = node.getAttribute('fill')
+            const match = fill?.match(/^url\(#(.+)\)$/)
+            const patternId = match?.[1]
+            if (!patternId) return
+            appliedRatePatternTypes.add(patternTypeById[patternId] || 'unknown')
+          })
+        })
+
+        return {
+          hasRateCircle: appliedRatePatternTypes.has('circles'),
+          hasRateWave: appliedRatePatternTypes.has('waves')
+        }
+      },
+      async () => {
+        const firstDataKey = canvasElement.querySelector('select[name="pattern-dataKey--0"]') as HTMLSelectElement
+        const firstDataValue = canvasElement.querySelector('input[id="pattern-dataValue--0"]') as HTMLInputElement
+        const firstPatternType = canvasElement.querySelector('select[name="pattern-type--0"]') as HTMLSelectElement
+        if (!firstDataKey || !firstDataValue || !firstPatternType) {
+          throw new Error('First pattern controls not found')
+        }
+        await userEvent.selectOptions(firstDataKey, 'Rate')
+        await userEvent.clear(firstDataValue)
+        await userEvent.type(firstDataValue, '55')
+        await userEvent.selectOptions(firstPatternType, 'circles')
+
+        const buttons = Array.from(canvasElement.querySelectorAll('button'))
+        const addPatternButton = buttons.find(btn => btn.textContent?.includes('Add Geo Pattern'))
+        if (!addPatternButton) throw new Error('Add Geo Pattern button not found')
+        await userEvent.click(addPatternButton)
+
+        const accordionButtons = Array.from(canvasElement.querySelectorAll('.accordion__button'))
+        const selectColumnButtons = accordionButtons.filter(btn => btn.textContent?.includes('Select Column'))
+        const secondPatternAccordionButton = selectColumnButtons[selectColumnButtons.length - 1] as HTMLElement
+        if (!secondPatternAccordionButton) throw new Error('Second pattern accordion not found')
+        await userEvent.click(secondPatternAccordionButton)
+
+        const secondDataKey = canvasElement.querySelector('select[name="pattern-dataKey--1"]') as HTMLSelectElement
+        const secondDataValue = canvasElement.querySelector('input[id="pattern-dataValue--1"]') as HTMLInputElement
+        const secondPatternType = canvasElement.querySelector('select[name="pattern-type--1"]') as HTMLSelectElement
+
+        if (!secondDataKey || !secondDataValue || !secondPatternType) {
+          throw new Error('Second pattern controls not found')
+        }
+
+        await userEvent.selectOptions(secondDataKey, '')
+        await userEvent.clear(secondDataValue)
+        await userEvent.type(secondDataValue, '55')
+        await userEvent.selectOptions(secondPatternType, 'waves')
+      },
+      (before, after) => after.hasRateCircle && !after.hasRateWave
+    )
+
     await performAndAssert(
       'Pattern Settings → Pattern remains after hover',
       () => {
@@ -3135,6 +3244,70 @@ export const SmallMultiplesSectionTests: Story = {
   }
 }
 
+export const WorldDataMapZoomControlsTest: Story = {
+  args: {
+    ...DEFAULT_ARGS
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await waitForEditor(canvas)
+    await waitForPresence('.map-container', canvasElement)
+    await openAccordion(canvas, 'Type')
+
+    const getZoomControlsState = () => {
+      const zoomControls = canvasElement.querySelector('.zoom-controls')
+      const zoomInButton = canvasElement.querySelector('button[aria-label="Zoom In"]')
+      const zoomOutButton = canvasElement.querySelector('button[aria-label="Zoom Out"]')
+      const mapContainer = canvasElement.querySelector('.map-container')
+
+      return {
+        hasZoomControls: Boolean(zoomControls),
+        hasZoomInButton: Boolean(zoomInButton),
+        hasZoomOutButton: Boolean(zoomOutButton),
+        mapClasses: mapContainer ? Array.from(mapContainer.classList) : []
+      }
+    }
+
+    const worldButton = Array.from(canvasElement.querySelectorAll('.geo-buttons button')).find(button =>
+      button.textContent?.trim().toLowerCase().includes('world')
+    ) as HTMLButtonElement
+    expect(worldButton).toBeTruthy()
+
+    await performAndAssert(
+      'World Data Map → Switch geo type to world',
+      getZoomControlsState,
+      async () => {
+        await userEvent.click(worldButton)
+      },
+      (before, after) => !before.mapClasses.includes('world') && after.mapClasses.includes('world')
+    )
+
+    const mapTypeSelect = canvas.getByLabelText(/Map Type/i) as HTMLSelectElement
+    await performAndAssert(
+      'World Data Map → Switch type to data',
+      getZoomControlsState,
+      async () => {
+        await userEvent.selectOptions(mapTypeSelect, 'data')
+      },
+      (_before, after) => after.mapClasses.includes('world')
+    )
+
+    const allowMapZoomingCheckbox = canvas.getByLabelText(/Allow Map Zooming/i) as HTMLInputElement
+    expect(allowMapZoomingCheckbox).toBeTruthy()
+
+    await performAndAssert(
+      'World Data Map → Enable map zooming',
+      getZoomControlsState,
+      async () => {
+        await userEvent.click(allowMapZoomingCheckbox)
+      },
+      (before, after) =>
+        !before.hasZoomControls && after.hasZoomControls && after.hasZoomInButton && after.hasZoomOutButton
+    )
+  }
+}
+
 // ==========================================================================
 // MULTI-COUNTRY MAP TESTS
 // ==========================================================================

package/src/_stories/CdcMap.stories.tsx

@@ -5,6 +5,7 @@ import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 import EqualNumberOptInExample from './_mock/DEV-7286.json'
 import EqualNumberMap from './_mock/equal-number.json'
 import MultiState from './_mock/multi-state.json'
+import MultiStateShowUnselected from './_mock/multi-state-show-unselected.json'
 import MultiCountry from './_mock/multi-country.json'
 import MultiCountryHide from './_mock/multi-country-hide.json'
 import SingleStateWithFilters from './_mock/DEV-8942.json'
@@ -42,7 +43,7 @@ const testMapRendering = async (canvasElement: HTMLElement, storyName: string) =
   })
 
   await step('Verify COVE module wrapper is present', async () => {
-    const coveModule = canvasElement.querySelector('.cdc-open-viz-module')
+    const coveModule = canvasElement.querySelector('.cove-visualization')
     expect(coveModule).toBeInTheDocument()
   })
 }
@@ -149,6 +150,15 @@ export const Multi_State: Story = {
   }
 }
 
+export const Multi_State_Show_Unselected: Story = {
+  args: {
+    config: MultiStateShowUnselected
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
 export const Multi_Country: Story = {
   args: {
     config: MultiCountry

package/src/_stories/Map.HTMLInDataTable.stories.tsx

@@ -0,0 +1,385 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import CdcMapComponent from '../CdcMapComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import usaStateGradient from './_mock/usa-state-gradient.json'
+
+const meta: Meta<typeof CdcMapComponent> = {
+  title: 'Components/Templates/Map/HTML in Data Table',
+  component: CdcMapComponent,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Demonstrates map data tables with colored legend circles rendered inline next to location names, and HTML content in a notes column.'
+      }
+    }
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof CdcMapComponent>
+
+const data = [
+  { STATE: 'Overall', Rate: '55', Location: 'Vehicle', URL: 'https://www.cdc.gov', Notes: '' },
+  {
+    STATE: 'Alabama',
+    Rate: 130,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Rate increased <strong>8%</strong> from prior year'
+  },
+  {
+    STATE: 'Alaska',
+    Rate: 40,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Remote regions excluded from <em>survey</em>'
+  },
+  { STATE: 'American Samoa', Rate: 55, Location: 'Home', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Arizona',
+    Rate: 0,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#d54309;">⚠ Below target</span> — outreach underway'
+  },
+  {
+    STATE: 'Arkansas',
+    Rate: 60,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'See <a href="https://www.cdc.gov" target="_blank">CDC report</a> for details'
+  },
+  {
+    STATE: 'California',
+    Rate: 30,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<strong>Leading state</strong> in program participation'
+  },
+  {
+    STATE: 'Colorado',
+    Rate: 40,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Data validated by <em>state health dept</em>'
+  },
+  {
+    STATE: 'Connecticut',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#2e8540;">✓ Target achieved</span>'
+  },
+  { STATE: 'Deleware', Rate: '57', Location: 'Home', URL: 'https://www.cdc.gov/', Notes: '' },
+  { STATE: 'DC', Rate: 60, Location: 'Home', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Florida',
+    Rate: 30,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Excludes <em>federal facilities</em>'
+  },
+  {
+    STATE: 'Georgia',
+    Rate: 40,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Improved <strong>12 points</strong> since 2021'
+  },
+  {
+    STATE: 'Hawaii',
+    Rate: 57,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Island populations surveyed <em>separately</em>'
+  },
+  {
+    STATE: 'Idaho',
+    Rate: 60,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Rural adjustment applied — see <strong>methodology</strong>'
+  },
+  {
+    STATE: 'Illinois',
+    Rate: 30,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Chicago metro reported <em>independently</em>'
+  },
+  {
+    STATE: 'Indiana',
+    Rate: 40,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Rate includes <strong>all age groups</strong>'
+  },
+  {
+    STATE: 'Iowa',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Consistent with <em>national average</em>'
+  },
+  {
+    STATE: 'Kansas',
+    Rate: 57,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Data from <strong>Q3 2023</strong> survey'
+  },
+  {
+    STATE: 'Kentucky',
+    Rate: 60,
+    Location: 'NA',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#d54309;">Below regional median</span>'
+  },
+  {
+    STATE: 'Louisiana',
+    Rate: 30,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Post-storm data collection <em>delayed</em>'
+  },
+  {
+    STATE: 'Maine',
+    Rate: 40,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Coastal counties weighted <strong>separately</strong>'
+  },
+  { STATE: 'Marshall Islands', Rate: 55, Location: 'Home', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Maryland',
+    Rate: 57,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Includes DC metro area <em>overlap</em>'
+  },
+  {
+    STATE: 'Massachusetts',
+    Rate: 60,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#2e8540;">✓ Highest in region</span>'
+  },
+  {
+    STATE: 'Michigan',
+    Rate: 12,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#d54309;">⚠ Significant decline</span> noted'
+  },
+  { STATE: 'Micronesia', Rate: 65, Location: 'Vehicle', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Minnesota',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Tribal nations surveyed <em>separately</em>'
+  },
+  {
+    STATE: 'Mississippi',
+    Rate: 57,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Additional outreach <strong>planned for 2024</strong>'
+  },
+  {
+    STATE: 'Montana',
+    Rate: 60,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Large geographic area — <em>sample size limited</em>'
+  },
+  { STATE: 'Montana', Rate: 30, Location: 'Vehicle', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Nebraska',
+    Rate: 40,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Rate stable over <strong>3-year period</strong>'
+  },
+  {
+    STATE: 'Nevada',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Las Vegas metro excluded from <em>rural rate</em>'
+  },
+  {
+    STATE: 'New Hampshire',
+    Rate: 57,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Highest participation in <strong>New England</strong>'
+  },
+  {
+    STATE: 'New Jersey',
+    Rate: 60,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Dense population — <em>high confidence interval</em>'
+  },
+  {
+    STATE: 'New Mexico',
+    Rate: 12,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#d54309;">Below target</span> — tribal programs expanding'
+  },
+  {
+    STATE: 'New York',
+    Rate: 40,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'NYC data reported <em>separately</em>'
+  },
+  {
+    STATE: 'North Carolina',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Urban/rural split — see <strong>supplemental table</strong>'
+  },
+  {
+    STATE: 'North Dakota',
+    Rate: 57,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Oil field worker population <em>adjusted</em>'
+  },
+  { STATE: 'Northern Mariana Islands', Rate: '60', Location: 'Home', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Ohio',
+    Rate: 88,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#2e8540;">✓ Above national average</span>'
+  },
+  {
+    STATE: 'Oklahoma',
+    Rate: 40,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Native American populations <em>surveyed separately</em>'
+  },
+  {
+    STATE: 'Oregon',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Coast vs inland rates <strong>vary significantly</strong>'
+  },
+  { STATE: 'Palau', Rate: 15, Location: 'School', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Pennsylvania',
+    Rate: 60,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Philadelphia metro weighted <em>separately</em>'
+  },
+  { STATE: 'Puerto Rico', Rate: 30, Location: 'Work', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Rhode Island',
+    Rate: 40,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<strong>Smallest state</strong> — high confidence in data'
+  },
+  {
+    STATE: 'South Carolina',
+    Rate: 55,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Rate improved after <em>2022 initiative</em>'
+  },
+  {
+    STATE: 'South Dakota',
+    Rate: 86,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#2e8540;">✓ Above target</span>'
+  },
+  {
+    STATE: 'Tennessee',
+    Rate: 60,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Nashville metro drives <strong>overall rate</strong>'
+  },
+  {
+    STATE: 'Texas',
+    Rate: 30,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Border region data <em>collected separately</em>'
+  },
+  { STATE: 'Utah', Rate: 54, Location: 'Work', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Vermont',
+    Rate: 40,
+    Location: 'Home',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Near-complete <em>population coverage</em>'
+  },
+  { STATE: 'Virgin Islands', Rate: 55, Location: 'School', URL: 'https://www.cdc.gov/', Notes: '' },
+  {
+    STATE: 'Virginia',
+    Rate: 57,
+    Location: 'School',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Northern VA excluded — see <em>DC metro</em>'
+  },
+  {
+    STATE: 'Washington',
+    Rate: 62,
+    Location: 'Work',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#2e8540;">✓ Strong program outcomes</span>'
+  },
+  {
+    STATE: 'West Virginia',
+    Rate: 25,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: '<span style="color:#d54309;">⚠ Lowest in region</span>'
+  },
+  {
+    STATE: 'Wyoming',
+    Rate: 43,
+    Location: 'Vehicle',
+    URL: 'https://www.cdc.gov/',
+    Notes: 'Smallest population — <strong>widest confidence interval</strong>'
+  }
+]
+
+export const USAStateMap: Story = {
+  name: 'USA State Map',
+  args: {
+    config: {
+      ...usaStateGradient,
+      data,
+      table: {
+        ...usaStateGradient.table,
+        expanded: true
+      },
+      columns: {
+        ...usaStateGradient.columns,
+        Notes: {
+          name: 'Notes',
+          label: 'Notes',
+          dataTable: true,
+          tooltip: false
+        }
+      }
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}