@cdc/core 4.26.1 → 4.26.3

package/_stories/Gallery.Charts.stories.tsx

@@ -41,7 +41,7 @@ const testChartRendering = 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()
   })
 
@@ -50,42 +50,42 @@ const testChartRendering = async (canvasElement: HTMLElement, storyName: string)
 
 // Bar Charts
 export const Bar_Chart_Time_Based: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Example_Bar_Chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Example_Bar_Chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bar Chart Time Based')
   }
 }
 
 export const Bar_Chart_Categorical: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-category-bar-char.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-category-bar-char.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bar Chart Categorical')
   }
 }
 
 export const Bar_Chart_With_Highlighted_Value: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/bar-chart-with-highlighte.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/bar-chart-with-highlighte.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bar Chart With Highlighted Value')
   }
 }
 
 export const Bar_Chart_With_Confidence_Intervals: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Example_Bar_CI_1.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Example_Bar_CI_1.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bar Chart With Confidence Intervals')
   }
 }
 
 export const Bar_Chart_With_Suppressed_Values: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/bar-chart-with-suppressed-values.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/bar-chart-with-suppressed-values.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bar Chart With Suppressed Values')
   }
 }
 
 export const Horizontal_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Horizontal_Bar_Chart_Viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Horizontal_Bar_Chart_Viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Horizontal Bar Chart')
   }
@@ -93,14 +93,14 @@ export const Horizontal_Bar_Chart: Story = {
 
 // Box and Whiskers Plots
 export const Box_Plot_With_Outliers: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/box-plot-outliers.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/box-plot-outliers.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Box Plot With Outliers')
   }
 }
 
 export const Horizontal_Box_Plot: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/horizontal-box-plot.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/horizontal-box-plot.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Horizontal Box Plot')
   }
@@ -108,7 +108,7 @@ export const Horizontal_Box_Plot: Story = {
 
 // Bump Chart
 export const Bump_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/bump-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/bump-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Bump Chart')
   }
@@ -116,14 +116,14 @@ export const Bump_Chart: Story = {
 
 // Combo Bar/Line Charts
 export const Combo_Bar_And_Area: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Combo_Bar_Line_Viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Combo_Bar_Line_Viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Combo Bar And Area')
   }
 }
 
 export const Epi_Style_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-epi-style-bar-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-epi-style-bar-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Epi Style Bar Chart')
   }
@@ -131,7 +131,7 @@ export const Epi_Style_Bar_Chart: Story = {
 
 // Deviation Bar Chart
 export const Deviation_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-deviation-bar-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-deviation-bar-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Deviation Bar Chart')
   }
@@ -139,14 +139,14 @@ export const Deviation_Bar_Chart: Story = {
 
 // Forecast Charts
 export const Forecast_Chart_Single_CI: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/forecast-chart-one-CI.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/forecast-chart-one-CI.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Forecast Chart Single CI')
   }
 }
 
 export const Forecast_Chart_Multiple_CIs: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/forecast-chart-2-CIs.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/forecast-chart-2-CIs.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Forecast Chart Multiple CIs')
   }
@@ -154,42 +154,42 @@ export const Forecast_Chart_Multiple_CIs: Story = {
 
 // Line Charts
 export const Line_Chart_Standard: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Line_Chart_Viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart Standard')
   }
 }
 
 export const Line_Chart_With_Regions: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Line_Chart_Regions_Viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Regions_Viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart With Regions')
   }
 }
 
 export const Line_Chart_Isolated: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Line_Chart_Isolated.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Isolated.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart Isolated')
   }
 }
 
 export const Line_Chart_Line_Weights: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Line_Chart_Line_Weights.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Line_Weights.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart Line Weights')
   }
 }
 
 export const Line_Chart_With_Open_Circles: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/line-chart-with-open-circles.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/line-chart-with-open-circles.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart With Open Circles')
   }
 }
 
 export const Line_Chart_With_Suppression: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/line-chart-with-suppression.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/line-chart-with-suppression.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Line Chart With Suppression')
   }
@@ -197,7 +197,7 @@ export const Line_Chart_With_Suppression: Story = {
 
 // Lollipop Bar Chart
 export const Lollipop_Horizontal_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/lollipop-style-horizontal-bar-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/lollipop-style-horizontal-bar-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Lollipop Horizontal Bar Chart')
   }
@@ -205,14 +205,14 @@ export const Lollipop_Horizontal_Bar_Chart: Story = {
 
 // Pie and Donut Charts
 export const Pie_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Example_Pie_viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Example_Pie_viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Pie Chart')
   }
 }
 
 export const Donut_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Donut-Chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Donut-Chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Donut Chart')
   }
@@ -220,50 +220,43 @@ export const Donut_Chart: Story = {
 
 // Scatter Plots
 export const Scatter_Plot_Negative_Trend: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/scatter-plot-negative-trend.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/scatter-plot-negative-trend.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Scatter Plot Negative Trend')
   }
 }
 
 export const Scatter_Plot_Multi_Series: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/scatter-plot-multi-series.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/scatter-plot-multi-series.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Scatter Plot Multi Series')
   }
 }
 
 export const Scatter_Plot_Nonlinear_Trend: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/scatter-plot-nonlinear-trend.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/scatter-plot-nonlinear-trend.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Scatter Plot Nonlinear Trend')
   }
 }
 
 // Sparklines
-export const Sparkline_Dashboard: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/sparkline-dash.json" />,
-  play: async ({ canvasElement }) => {
-    await testChartRendering(canvasElement, 'Sparkline Dashboard')
-  }
-}
-
 export const Sparkline_2016_Outreach_Var2: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/2016-outreach-2.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/2016-outreach-2.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Sparkline 2016 Outreach Var2')
   }
 }
 
 export const Sparkline_2016_Outreach_Var3: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/2016-outreach-3.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/2016-outreach-3.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Sparkline 2016 Outreach Var3')
   }
 }
 
 export const Sparkline_2016_Outreach_Var4: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/2016-outreach-4.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/2016-outreach-4.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Sparkline 2016 Outreach Var4')
   }
@@ -271,21 +264,21 @@ export const Sparkline_2016_Outreach_Var4: Story = {
 
 // Stacked Area Charts
 export const Stacked_Area_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-stacked-area-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-stacked-area-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Stacked Area Chart')
   }
 }
 
 export const Area_Chart_With_Annotations: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/area-chart-with-annotations_1.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/area-chart-with-annotations_1.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Area Chart With Annotations')
   }
 }
 
 export const Area_Chart_With_Categorical_Axis: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-area-chart-with-cat-axis.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-area-chart-with-cat-axis.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Area Chart With Categorical Axis')
   }
@@ -293,14 +286,14 @@ export const Area_Chart_With_Categorical_Axis: Story = {
 
 // Stacked Bar Charts
 export const Stacked_Horizontal_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-stacked-horizontal-chart.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-stacked-horizontal-chart.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Stacked Horizontal Bar Chart')
   }
 }
 
 export const Stacked_Vertical_Bar_Chart: Story = {
-  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/Stacked_Bar_Viz.json" />,
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Stacked_Bar_Viz.json' />,
   play: async ({ canvasElement }) => {
     await testChartRendering(canvasElement, 'Stacked Vertical Bar Chart')
   }

package/_stories/Gallery.DataBite.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { within, expect } from 'storybook/test'
+import { within, expect, waitFor } from 'storybook/test'
 import DataBite from '@cdc/data-bite'
 
 // Fallback step function for test descriptions
@@ -31,12 +31,11 @@ const testDataBiteRendering = async (canvasElement: HTMLElement, storyName: stri
   const canvas = within(canvasElement)
 
   await step('Wait for data bite to render', async () => {
-    const dataBiteElement = await canvas.findByRole('img', { hidden: true }, { timeout: 10000 })
-    expect(dataBiteElement).toBeInTheDocument()
+    await waitFor(() => expect(canvasElement.querySelector('.bite-content')).toBeInTheDocument(), { timeout: 10000 })
   })
 
   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()
   })
 
@@ -44,28 +43,36 @@ const testDataBiteRendering = async (canvasElement: HTMLElement, storyName: stri
 }
 
 export const Data_Bite_Circle_Average: Story = {
-  render: () => <DataBite configUrl="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json" />,
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json' />
+  ),
   play: async ({ canvasElement }) => {
     await testDataBiteRendering(canvasElement, 'Data Bite Circle Average')
   }
 }
 
 export const Data_Bite_Text_Max_Pic: Story = {
-  render: () => <DataBite configUrl="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json" />,
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json' />
+  ),
   play: async ({ canvasElement }) => {
     await testDataBiteRendering(canvasElement, 'Data Bite Text Max Pic')
   }
 }
 
 export const Data_Bite_Circle_Sum: Story = {
-  render: () => <DataBite configUrl="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json" />,
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json' />
+  ),
   play: async ({ canvasElement }) => {
     await testDataBiteRendering(canvasElement, 'Data Bite Circle Sum')
   }
 }
 
 export const Data_Bite_Text_Average_Pic: Story = {
-  render: () => <DataBite configUrl="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json" />,
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json' />
+  ),
   play: async ({ canvasElement }) => {
     await testDataBiteRendering(canvasElement, 'Data Bite Text Average Pic')
   }

package/_stories/Gallery.Maps.stories.tsx

@@ -31,17 +31,19 @@ const testMapRendering = async (canvasElement: HTMLElement, storyName: string) =
   const canvas = within(canvasElement)
 
   await step('Wait for map to render', async () => {
-    const mapElement = await canvas.findByRole('img', { hidden: true }, { timeout: 10000 })
+    const mapElement = await canvas
+      .findByRole('img', { hidden: true }, { timeout: 10000 })
+      .catch(() => canvasElement.querySelector('canvas'))
     expect(mapElement).toBeInTheDocument()
   })
 
-  await step('Verify SVG element is present', async () => {
-    const svgElement = canvasElement.querySelector('svg')
-    expect(svgElement).toBeInTheDocument()
+  await step('Verify SVG or canvas element is present', async () => {
+    const vizElement = canvasElement.querySelector('svg, canvas')
+    expect(vizElement).toBeInTheDocument()
   })
 
   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()
   })
 
@@ -50,14 +52,14 @@ const testMapRendering = async (canvasElement: HTMLElement, storyName: string) =
 
 // Bubble Maps
 export const Bubble_Map_World: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/example-Bubble-Map-world.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/example-Bubble-Map-world.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Bubble Map World')
   }
 }
 
 export const Bubble_Map_US: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/Example-Bubble-US-Data-Map.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/Example-Bubble-US-Data-Map.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Bubble Map US')
   }
@@ -65,14 +67,16 @@ export const Bubble_Map_US: Story = {
 
 // Categorical Maps
 export const Categorical_Map_With_Special_Classes: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/data-files/Scale-Based-Categorical-Map-With-Special-Classes.json" />,
+  render: () => (
+    <CdcMap configUrl='https://www.cdc.gov/cove/data-files/Scale-Based-Categorical-Map-With-Special-Classes.json' />
+  ),
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Categorical Map With Special Classes')
   }
 }
 
 export const Qualitative_Categorical_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/data-files/qualitative-map.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/data-files/qualitative-map.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Qualitative Categorical Map')
   }
@@ -80,7 +84,7 @@ export const Qualitative_Categorical_Map: Story = {
 
 // Custom Layer Map
 export const Custom_Layer_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/custom-layer-map.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/custom-layer-map.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Custom Layer Map')
   }
@@ -88,14 +92,14 @@ export const Custom_Layer_Map: Story = {
 
 // Filterable Data Maps
 export const Map_Multiple_Filters: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/map-multiple-filters.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/map-multiple-filters.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Map Multiple Filters')
   }
 }
 
 export const Map_Tab_Filters: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/map-tab-filters.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/map-tab-filters.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Map Tab Filters')
   }
@@ -103,7 +107,7 @@ export const Map_Tab_Filters: Story = {
 
 // Geocode Map
 export const US_Geocode_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/example-u-s-geo-code-dat.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/example-u-s-geo-code-dat.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'US Geocode Map')
   }
@@ -111,7 +115,7 @@ export const US_Geocode_Map: Story = {
 
 // HHS Region Map
 export const HHS_Regions_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/example-hhs-regions-data.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/example-hhs-regions-data.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'HHS Regions Map')
   }
@@ -119,21 +123,21 @@ export const HHS_Regions_Map: Story = {
 
 // Hex Maps
 export const Standard_Hex_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/Hex_Map.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/Hex_Map.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Standard Hex Map')
   }
 }
 
 export const Hex_Map_With_Filter: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/example-hex-map-with-filter.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/example-hex-map-with-filter.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Hex Map With Filter')
   }
 }
 
 export const Hex_Map_With_Arrows: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/Hex_Map_Arrows.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/Hex_Map_Arrows.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Hex Map With Arrows')
   }
@@ -141,7 +145,7 @@ export const Hex_Map_With_Arrows: Story = {
 
 // Map with Cities
 export const US_Map_With_Cities: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/city-data-map-example.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/city-data-map-example.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'US Map With Cities')
   }
@@ -149,14 +153,14 @@ export const US_Map_With_Cities: Story = {
 
 // Navigation-Only Maps
 export const US_Navigation_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/us-nav-map.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/us-nav-map.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'US Navigation Map')
   }
 }
 
 export const World_Navigation_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/world-nav-map-example.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/world-nav-map-example.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'World Navigation Map')
   }
@@ -164,21 +168,21 @@ export const World_Navigation_Map: Story = {
 
 // Numeric Maps
 export const Equal_Interval_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/equal-interval-map.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/equal-interval-map.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Equal Interval Map')
   }
 }
 
 export const Equal_Number_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/equal-number-map.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/equal-number-map.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Equal Number Map')
   }
 }
 
 export const Equal_Number_Map_New_Quantile: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/equal-number-map_new_quantile.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/equal-number-map_new_quantile.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Equal Number Map New Quantile')
   }
@@ -186,28 +190,33 @@ export const Equal_Number_Map_New_Quantile: Story = {
 
 // Single State Maps
 export const Single_State_Map_Counties: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/example-data-map-counties.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/example-data-map-counties.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Single State Map Counties')
   }
 }
 
+/*
+Commented out because the config is pointing at a data file on wcms-wp.cdc.gov which is not accessible.
 export const Single_State_With_Census_Toggle: Story = {
   render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/single-state-map-with-census-toggle.json" />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Single State With Census Toggle')
   }
 }
+*/
 
 export const Single_State_Filter_With_Zoom: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/single-state-filter-change-with-zoom.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/single-state-filter-change-with-zoom.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Single State Filter With Zoom')
   }
 }
 
 export const Multi_State_County_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/multistate-county-map.json" />,
+  render: () => (
+    <CdcMap configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/multistate-county-map.json' />
+  ),
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'Multi State County Map')
   }
@@ -215,7 +224,7 @@ export const Multi_State_County_Map: Story = {
 
 // US County Map
 export const US_County_Level_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/US-County-Level-Map.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/US-County-Level-Map.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'US County Level Map')
   }
@@ -223,7 +232,7 @@ export const US_County_Level_Map: Story = {
 
 // World Map
 export const World_Data_Map: Story = {
-  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/world-data-map-example.json" />,
+  render: () => <CdcMap configUrl='https://www.cdc.gov/cove/examples/world-data-map-example.json' />,
   play: async ({ canvasElement }) => {
     await testMapRendering(canvasElement, 'World Data Map')
   }

package/_stories/Gallery.WaffleChart.stories.tsx

@@ -54,7 +54,7 @@ const testWaffleChartRendering = async (canvasElement: HTMLElement, storyName: s
   })
 
   await step('Verify waffle chart container is present', async () => {
-    const waffleContainer = canvasElement.querySelector('.cove-waffle-chart')
+    const waffleContainer = canvasElement.querySelector('.cove-waffle-chart, .cove-gauge-chart')
     expect(waffleContainer).toBeInTheDocument()
   })
 

package/_stories/PageART.stories.tsx

@@ -16,7 +16,8 @@ const meta: Meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Stories for visualizations from the CDC ART (Assisted Reproductive Technology) Surveillance State-Specific page (https://www.cdc.gov/art/php/surveillance-state-specific/index.html)'
+        component:
+          'Stories for visualizations from the CDC ART (Assisted Reproductive Technology) Surveillance State-Specific page (https://www.cdc.gov/art/php/surveillance-state-specific/index.html)'
       }
     }
   },
@@ -140,7 +141,7 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
       const timeout = 20000
 
       const checkDashboard = () => {
-        const dashboardElement = canvasElement.querySelector('.cove-dashboard')
+        const dashboardElement = canvasElement.querySelector('.type-dashboard')
         const loadingDiv = canvasElement.querySelector('div')
 
         // Log current state for debugging
@@ -161,12 +162,12 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
   })
 
   await step('Verify dashboard wrapper is present', async () => {
-    const dashboard = canvasElement.querySelector('.cove-dashboard')
+    const dashboard = canvasElement.querySelector('.type-dashboard')
     expect(dashboard).toBeInTheDocument()
   })
 
   await step('Verify at least one visualization rendered', async () => {
-    const coveModules = canvasElement.querySelectorAll('.cdc-open-viz-module')
+    const coveModules = canvasElement.querySelectorAll('.cove-visualization')
     expect(coveModules.length).toBeGreaterThan(0)
   })