@cdc/core 4.26.1 → 4.26.2

package/_stories/Gallery.Maps.stories.tsx

@@ -31,13 +31,15 @@ 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 () => {
@@ -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,7 +162,7 @@ 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()
   })
 

package/_stories/PageBRFSS.stories.tsx

@@ -16,7 +16,8 @@ const meta: Meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Stories for visualizations from the CDC Behavioral Risk Factor Surveillance System (BRFSS) Prevalence Data & Data Analysis Tools page (https://www.cdc.gov/brfss/brfssprevalence/index.html)'
+        component:
+          'Stories for visualizations from the CDC Behavioral Risk Factor Surveillance System (BRFSS) Prevalence Data & Data Analysis Tools page (https://www.cdc.gov/brfss/brfssprevalence/index.html)'
       }
     }
   },
@@ -93,12 +94,16 @@ const useConfigWithAbsoluteDataUrl = (configUrl: string) => {
 
               newDatasets[absoluteKey] = {
                 ...dataset,
-                dataFileName: (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
-                  ? `https://www.cdc.gov/${(dataset as any).dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
-                  : (dataset as any).dataFileName,
-                dataUrl: (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
-                  ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
-                  : (dataset as any).dataUrl
+                dataFileName:
+                  (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
+                    ? `https://www.cdc.gov/${(dataset as any).dataFileName
+                        .replace(/^(\.\.\/)+/, '')
+                        .replace(/^\//, '')}`
+                    : (dataset as any).dataFileName,
+                dataUrl:
+                  (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
+                    ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
+                    : (dataset as any).dataUrl
               }
             }
           })
@@ -140,7 +145,7 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
       const timeout = 30000 // Longer timeout for external data loading
 
       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,7 +166,7 @@ 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()
   })
 
@@ -224,15 +229,15 @@ export const All_BRFSS_Dashboards: StoryObj = {
     }
 
     return (
-      <div className="container-fluid p-4">
-        <h1 className="mb-4">BRFSS Prevalence Data - All Dashboards</h1>
+      <div className='container-fluid p-4'>
+        <h1 className='mb-4'>BRFSS Prevalence Data - All Dashboards</h1>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>Explore by Location</h2>
           <Dashboard config={locationConfig} />
         </section>
 
-        <section className="mb-5">
+        <section className='mb-5'>
           <h2>Explore by Topic</h2>
           <Dashboard config={topicConfig} />
         </section>
@@ -266,7 +271,7 @@ export const All_BRFSS_Dashboards: StoryObj = {
         const timeout = 40000
 
         const checkDashboards = () => {
-          const dashboards = canvasElement.querySelectorAll('.cove-dashboard')
+          const dashboards = canvasElement.querySelectorAll('.type-dashboard')
           if (dashboards.length >= 2) {
             resolve()
           } else if (Date.now() - startTime > timeout) {
@@ -280,7 +285,7 @@ export const All_BRFSS_Dashboards: StoryObj = {
     })
 
     await step('Verify both dashboards are present', async () => {
-      const dashboards = canvasElement.querySelectorAll('.cove-dashboard')
+      const dashboards = canvasElement.querySelectorAll('.type-dashboard')
       expect(dashboards.length).toBe(2)
     })
 

package/_stories/PageCancerRegistries.stories.tsx

@@ -16,7 +16,8 @@ const meta: Meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'Stories for visualizations from the CDC National Program of Cancer Registries (NPCR) Contact page (https://www.cdc.gov/national-program-cancer-registries/contact/index.html)'
+        component:
+          'Stories for visualizations from the CDC National Program of Cancer Registries (NPCR) Contact page (https://www.cdc.gov/national-program-cancer-registries/contact/index.html)'
       }
     }
   },
@@ -92,12 +93,16 @@ const useConfigWithAbsoluteDataUrl = (configUrl: string) => {
 
               newDatasets[absoluteKey] = {
                 ...dataset,
-                dataFileName: (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
-                  ? `https://www.cdc.gov/${(dataset as any).dataFileName.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
-                  : (dataset as any).dataFileName,
-                dataUrl: (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
-                  ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
-                  : (dataset as any).dataUrl
+                dataFileName:
+                  (dataset as any).dataFileName && !(dataset as any).dataFileName.startsWith('http')
+                    ? `https://www.cdc.gov/${(dataset as any).dataFileName
+                        .replace(/^(\.\.\/)+/, '')
+                        .replace(/^\//, '')}`
+                    : (dataset as any).dataFileName,
+                dataUrl:
+                  (dataset as any).dataUrl && !(dataset as any).dataUrl.startsWith('http')
+                    ? `https://www.cdc.gov/${(dataset as any).dataUrl.replace(/^(\.\.\/)+/, '').replace(/^\//, '')}`
+                    : (dataset as any).dataUrl
               }
             }
           })
@@ -139,7 +144,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
@@ -160,7 +165,7 @@ 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()
   })
 
@@ -169,11 +174,6 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
     expect(coveModules.length).toBeGreaterThan(0)
   })
 
-  await step('Verify map visualization is present', async () => {
-    const mapElement = canvasElement.querySelector('svg')
-    expect(mapElement).toBeInTheDocument()
-  })
-
   console.log(` ${storyName} dashboard rendered successfully`)
 }
 

package/_stories/PageEasternEquineEncephalitis.stories.tsx

@@ -37,18 +37,32 @@ const CONFIG_URLS = {
 type MapStory = StoryObj<typeof CdcMap>
 type DashboardStory = StoryObj<typeof Dashboard>
 
-// Helper function to test map rendering
+// Helper function to test map rendering (supports both SVG and canvas-based maps)
 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 new Promise<void>((resolve, reject) => {
+      const startTime = Date.now()
+      const timeout = 15000
+
+      const checkMap = () => {
+        const svgMap = canvasElement.querySelector('svg[role="img"]')
+        const canvasMap = canvasElement.querySelector('canvas')
+        if (svgMap || canvasMap) {
+          resolve()
+        } else if (Date.now() - startTime > timeout) {
+          reject(new Error(`Timeout: No map element (svg or canvas) found after ${timeout}ms`))
+        } else {
+          setTimeout(checkMap, 100)
+        }
+      }
+      checkMap()
+    })
   })
 
-  await step('Verify SVG element is present', async () => {
-    const svgElement = canvasElement.querySelector('svg')
-    expect(svgElement).toBeInTheDocument()
+  await step('Verify map visualization is present', async () => {
+    const svgMap = canvasElement.querySelector('svg[role="img"]')
+    const canvasMap = canvasElement.querySelector('canvas')
+    expect(svgMap || canvasMap).toBeTruthy()
   })
 
   await step('Verify COVE module wrapper is present', async () => {
@@ -67,7 +81,7 @@ const testDashboardRendering = async (canvasElement: HTMLElement, storyName: str
       const timeout = 15000
 
       const checkDashboard = () => {
-        const dashboardElement = canvasElement.querySelector('.cove-dashboard')
+        const dashboardElement = canvasElement.querySelector('.type-dashboard')
         if (dashboardElement) {
           resolve()
         } else if (Date.now() - startTime > timeout) {
@@ -81,7 +95,7 @@ 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()
   })
 
@@ -144,25 +158,25 @@ export const Connecticut_2022: MapStory = {
  */
 export const All_EEE_Visualizations: StoryObj = {
   render: () => (
-    <div className="container-fluid p-4">
-      <h1 className="mb-4">Eastern Equine Encephalitis - Historic Data</h1>
+    <div className='container-fluid p-4'>
+      <h1 className='mb-4'>Eastern Equine Encephalitis - Historic Data</h1>
 
-      <section className="mb-5">
+      <section className='mb-5'>
         <h2>Cumulative Data for 2003–2024</h2>
         <Dashboard configUrl={CONFIG_URLS.cumulativeData} />
       </section>
 
-      <section className="mb-5">
+      <section className='mb-5'>
         <h2>Explore Human Data for 2003–2024</h2>
         <Dashboard configUrl={CONFIG_URLS.exploreHumanData} />
       </section>
 
-      <section className="mb-5">
+      <section className='mb-5'>
         <h2>Explore County Level Data for 2003–2024</h2>
         <CdcMap configUrl={CONFIG_URLS.exploreCountyData} />
       </section>
 
-      <section className="mb-5">
+      <section className='mb-5'>
         <h2>Connecticut 2022 Data</h2>
         <CdcMap configUrl={CONFIG_URLS.ct2022} />
       </section>