@cdc/core 4.25.11 → 4.26.1

package/_stories/Gallery.Charts.stories.tsx

@@ -0,0 +1,307 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import Chart from '@cdc/chart'
+
+// Fallback step function for test descriptions
+const step = async (description: string, fn: () => Promise<void> | void) => {
+  console.log(`▶ ${description}`)
+  await fn()
+  console.log(`✓ ${description}`)
+}
+
+const meta: Meta = {
+  title: 'Regression Tests/Gallery/Charts',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Chart visualization examples from the CDC COVE Gallery'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+// Helper function to test chart rendering
+const testChartRendering = async (canvasElement: HTMLElement, storyName: string) => {
+  const canvas = within(canvasElement)
+
+  await step('Wait for chart to render', async () => {
+    const svgElement = await canvas.findByRole('img', { hidden: true }, { timeout: 10000 })
+    expect(svgElement).toBeInTheDocument()
+  })
+
+  await step('Verify chart SVG is present', async () => {
+    const chartSvg = canvasElement.querySelector('svg')
+    expect(chartSvg).toBeInTheDocument()
+  })
+
+  await step('Verify COVE module wrapper is present', async () => {
+    const coveModule = canvasElement.querySelector('.cdc-open-viz-module')
+    expect(coveModule).toBeInTheDocument()
+  })
+
+  console.log(` ${storyName} chart rendered successfully`)
+}
+
+// Bar Charts
+export const Bar_Chart_Time_Based: Story = {
+  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" />,
+  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" />,
+  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" />,
+  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" />,
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Horizontal Bar Chart')
+  }
+}
+
+// Box and Whiskers Plots
+export const Box_Plot_With_Outliers: Story = {
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Horizontal Box Plot')
+  }
+}
+
+// Bump Chart
+export const Bump_Chart: Story = {
+  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/bump-chart.json" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Bump Chart')
+  }
+}
+
+// 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" />,
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Epi Style Bar Chart')
+  }
+}
+
+// Deviation Bar Chart
+export const Deviation_Bar_Chart: Story = {
+  render: () => <Chart configUrl="https://www.cdc.gov/cove/examples/example-deviation-bar-chart.json" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Deviation Bar Chart')
+  }
+}
+
+// Forecast Charts
+export const Forecast_Chart_Single_CI: Story = {
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Forecast Chart Multiple CIs')
+  }
+}
+
+// Line Charts
+export const Line_Chart_Standard: Story = {
+  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" />,
+  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" />,
+  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" />,
+  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" />,
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Line Chart With Suppression')
+  }
+}
+
+// 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" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Lollipop Horizontal Bar Chart')
+  }
+}
+
+// Pie and Donut Charts
+export const Pie_Chart: Story = {
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Donut Chart')
+  }
+}
+
+// Scatter Plots
+export const Scatter_Plot_Negative_Trend: Story = {
+  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" />,
+  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" />,
+  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" />,
+  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" />,
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Sparkline 2016 Outreach Var4')
+  }
+}
+
+// Stacked Area Charts
+export const Stacked_Area_Chart: Story = {
+  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" />,
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Area Chart With Categorical Axis')
+  }
+}
+
+// Stacked Bar Charts
+export const Stacked_Horizontal_Bar_Chart: Story = {
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Stacked Vertical Bar Chart')
+  }
+}

package/_stories/Gallery.DataBite.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import DataBite from '@cdc/data-bite'
+
+// Fallback step function for test descriptions
+const step = async (description: string, fn: () => Promise<void> | void) => {
+  console.log(`▶ ${description}`)
+  await fn()
+  console.log(`✓ ${description}`)
+}
+
+const meta: Meta = {
+  title: 'Regression Tests/Gallery/Data Bites',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Data Bite visualization examples from the CDC COVE Gallery'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+
+type Story = StoryObj<typeof DataBite>
+
+// Helper function to test data bite rendering
+const testDataBiteRendering = async (canvasElement: HTMLElement, storyName: string) => {
+  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 step('Verify COVE module wrapper is present', async () => {
+    const coveModule = canvasElement.querySelector('.cdc-open-viz-module')
+    expect(coveModule).toBeInTheDocument()
+  })
+
+  console.log(` ${storyName} data bite rendered successfully`)
+}
+
+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" />,
+  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" />,
+  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" />,
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testDataBiteRendering(canvasElement, 'Data Bite Text Average Pic')
+  }
+}

package/_stories/Gallery.Maps.stories.tsx

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import CdcMap from '@cdc/map'
+
+// Fallback step function for test descriptions
+const step = async (description: string, fn: () => Promise<void> | void) => {
+  console.log(`▶ ${description}`)
+  await fn()
+  console.log(`✓ ${description}`)
+}
+
+const meta: Meta = {
+  title: 'Regression Tests/Gallery/Maps',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Map visualization examples from the CDC COVE Gallery'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+
+type Story = StoryObj<typeof CdcMap>
+
+// Helper function to test map rendering
+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 })
+    expect(mapElement).toBeInTheDocument()
+  })
+
+  await step('Verify SVG element is present', async () => {
+    const svgElement = canvasElement.querySelector('svg')
+    expect(svgElement).toBeInTheDocument()
+  })
+
+  await step('Verify COVE module wrapper is present', async () => {
+    const coveModule = canvasElement.querySelector('.cdc-open-viz-module')
+    expect(coveModule).toBeInTheDocument()
+  })
+
+  console.log(` ${storyName} map rendered successfully`)
+}
+
+// Bubble Maps
+export const Bubble_Map_World: Story = {
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Bubble Map US')
+  }
+}
+
+// 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" />,
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Qualitative Categorical Map')
+  }
+}
+
+// Custom Layer Map
+export const Custom_Layer_Map: Story = {
+  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/custom-layer-map.json" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Custom Layer Map')
+  }
+}
+
+// Filterable Data Maps
+export const Map_Multiple_Filters: Story = {
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Map Tab Filters')
+  }
+}
+
+// Geocode Map
+export const US_Geocode_Map: Story = {
+  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')
+  }
+}
+
+// HHS Region Map
+export const HHS_Regions_Map: Story = {
+  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/example-hhs-regions-data.json" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'HHS Regions Map')
+  }
+}
+
+// Hex Maps
+export const Standard_Hex_Map: Story = {
+  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" />,
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Hex Map With Arrows')
+  }
+}
+
+// Map with Cities
+export const US_Map_With_Cities: Story = {
+  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/city-data-map-example.json" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'US Map With Cities')
+  }
+}
+
+// Navigation-Only Maps
+export const US_Navigation_Map: Story = {
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'World Navigation Map')
+  }
+}
+
+// Numeric Maps
+export const Equal_Interval_Map: Story = {
+  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" />,
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Equal Number Map New Quantile')
+  }
+}
+
+// Single State Maps
+export const Single_State_Map_Counties: Story = {
+  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/example-data-map-counties.json" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Single State Map Counties')
+  }
+}
+
+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" />,
+  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" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'Multi State County Map')
+  }
+}
+
+// US County Map
+export const US_County_Level_Map: Story = {
+  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/US-County-Level-Map.json" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'US County Level Map')
+  }
+}
+
+// World Map
+export const World_Data_Map: Story = {
+  render: () => <CdcMap configUrl="https://www.cdc.gov/cove/examples/world-data-map-example.json" />,
+  play: async ({ canvasElement }) => {
+    await testMapRendering(canvasElement, 'World Data Map')
+  }
+}