@cdc/data-bite 4.26.1 → 4.26.3

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

@@ -100,7 +100,7 @@ export const GeneralSectionTests: Story = {
       return {
         hasSvg: !!svg,
         textCount: textElements.length,
-        containerClasses: canvasElement.querySelector('.cdc-open-viz-module')?.className || ''
+        containerClasses: canvasElement.querySelector('.cove-visualization')?.className || ''
       }
     }
 
@@ -145,7 +145,7 @@ export const GeneralSectionTests: Story = {
 
     await performAndAssert(
       'Title Update',
-      () => canvasElement.querySelector('.cove-component__header')?.textContent?.trim() || '',
+      () => canvasElement.querySelector('.cove-visualization__header')?.textContent?.trim() || '',
       async () => {}, // action already performed above
       (before, after) => after === 'Updated Data Bite Title'
     )
@@ -158,7 +158,7 @@ export const GeneralSectionTests: Story = {
     expect(showTitleCheckbox).toBeTruthy()
 
     const getTitleVisibility = () => {
-      const titleElement = canvasElement.querySelector('.cove-component__header') as HTMLElement
+      const titleElement = canvasElement.querySelector('.cove-visualization__header') as HTMLElement
       return titleElement && titleElement.offsetParent !== null
     }
 
@@ -702,7 +702,7 @@ export const VisualSectionTests: Story = {
     // TEST 3: Display Border Toggle
     // Expectation: Border styling changes when toggled (classes or computed styles)
     // ============================================================================
-    const contentContainer = () => canvasElement.querySelector('.cove-component__content') as HTMLElement
+    const contentContainer = () => canvasElement.querySelector('.cove-visualization__body') as HTMLElement
     expect(contentContainer()).toBeTruthy()
 
     // Note: Border checkbox uses name="border", other checkboxes use similar simple names
@@ -736,7 +736,7 @@ export const VisualSectionTests: Story = {
 
     // Test border checkbox with comprehensive boolean testing AND visual validation
     const getBorderVisualState = () => {
-      const element = canvasElement.querySelector('.cove-component__content')
+      const element = canvasElement.querySelector('.cove-visualization__body')
       return {
         classes: Array.from(element!.classList).sort().join(' '),
         hasNoBordersClass: element!.classList.contains('no-borders'),
@@ -792,14 +792,14 @@ export const VisualSectionTests: Story = {
 
     // Test remaining checkboxes with comprehensive boolean testing AND visual validation
     const getGeneralVisualState = () => {
-      const element = canvasElement.querySelector('.cove-component__content')
+      const element = canvasElement.querySelector('.cove-visualization__body')
       return {
         classes: Array.from(element!.classList).sort().join(' '),
         // Check for specific component classes that these controls add
         hasAccentClass: element!.classList.contains('component--has-accent'),
         hasBackgroundClass: element!.classList.contains('component--has-background'),
-        hasBorderColorThemeClass: element!.classList.contains('component--has-borderColorTheme'),
-        hideBackgroundColorClass: element!.classList.contains('component--hideBackgroundColor'),
+        hasBorderColorThemeClass: element!.classList.contains('component--has-border-color-theme'),
+        hideBackgroundColorClass: element!.classList.contains('component--hide-background-color'),
         themeClass: Array.from(element!.classList).find(cls => cls.includes('theme-')) || 'no-theme',
         backgroundStyle: getComputedStyle(element!).backgroundColor
       }

package/src/_stories/DataBite.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import DataBite from '../CdcDataBite'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
+import { expect } from 'storybook/test'
 
 const meta: Meta<typeof DataBite> = {
   title: 'Components/Templates/Data Bite',
@@ -21,24 +23,36 @@ type Story = StoryObj<typeof DataBite>
 export const Data_Bite_Circle_Average: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json'
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Data_Bite_Text_Max_Pic: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json'
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Data_Bite_Circle_Sum: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json'
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Data_Bite_Text_Average_Pic: Story = {
   args: {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json'
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -53,6 +67,9 @@ export const Data_Bite_TP5_Style: Story = {
           'TP5 Style - A new layout style that displays the data value and message side by side, centered. The title appears above, and subtext appears below the message. On mobile devices, the message wraps below the data value. This style mimics the CDC Template Package 5.0 callout component design.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -67,6 +84,20 @@ export const Data_Bite_TP5_White_Background: Story = {
           'TP5 Style with White Background - This variant uses a white background with a 1px border and 6px border radius, providing a cleaner look while maintaining the TP5 layout style.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Data_Bite_With_Metadata: Story = {
+  args: {
+    configUrl: '/packages/data-bite/tests/fixtures/data-bite-config-with-metadata.json'
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    const subtext = await waitForPresence('.bite-subtext', canvasElement)
+    expect(subtext?.textContent).toContain('January 15, 2026')
   }
 }
 
@@ -83,5 +114,8 @@ export const Editor_Mode_Basic: Story = {
           'Basic editor mode rendering. For comprehensive editor testing with interactions, see "Data Bite/Editor Tests" stories.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }