@cdc/waffle-chart 4.25.11 → 4.26.2

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

@@ -420,8 +420,8 @@ export const DataSectionTests: Story = {
 }
 
 /**
- * VISUAL SECTION TESTS
- * Tests all functionality within the Visual accordion
+ * CHART SETTINGS AND VISUAL SECTION TESTS
+ * Tests functionality within the Chart Settings and Visual accordions
  */
 export const VisualSectionTests: Story = {
   args: {
@@ -431,7 +431,8 @@ export const VisualSectionTests: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     await waitForEditor(canvas)
-    await openAccordion(canvas, 'Visual')
+    // Open Chart Settings accordion first for tests 1-5
+    await openAccordion(canvas, 'Chart Settings')
     // Core helper functions used throughout the visual tests
     const waffleRoot = () => canvasElement.querySelector('.cove-waffle-chart') as HTMLElement
     const contentContainer = () => canvasElement.querySelector('.cove-component__content > div') as HTMLElement
@@ -569,6 +570,9 @@ export const VisualSectionTests: Story = {
     // TEST 6: Overall Font Size Change
     // Expectation: font-small|font-medium|font-large class changes on waffle root.
     // ============================================================================
+    // Open Visual accordion for tests 6+
+    await openAccordion(canvas, 'Visual')
+
     const overallFontClass = () => {
       const root = waffleRoot()
       if (!root) return ''
@@ -624,11 +628,8 @@ export const VisualSectionTests: Story = {
     // ============================================================================
     const contentClassSig = () => Array.from(contentContainer().classList).sort().join(' ')
 
-    // Find border checkbox by label text instead of name attribute
-    const borderCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Display Border')
-    }) as HTMLInputElement
+    // Find border checkbox by exact label text
+    const borderCheckbox = canvas.getByLabelText('Display Border') as HTMLInputElement
     expect(borderCheckbox).toBeTruthy()
     const borderWrapper = borderCheckbox.closest('label.checkbox') as HTMLElement
     expect(borderWrapper).toBeTruthy()
@@ -659,13 +660,8 @@ export const VisualSectionTests: Story = {
     // TEST 9: Theme Border Color Toggle
     // Expectation: Class 'component--has-borderColorTheme' toggles.
     // ============================================================================
-    // Find border color theme checkbox by label text
-    const borderColorThemeCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(
-      input => {
-        const label = input.closest('label')
-        return label?.textContent?.includes('Use theme border color')
-      }
-    ) as HTMLInputElement
+    // Find border color theme checkbox by exact label text
+    const borderColorThemeCheckbox = canvas.getByLabelText('Use Border Color Theme') as HTMLInputElement
     expect(borderColorThemeCheckbox).toBeTruthy()
     const borderColorThemeWrapper = borderColorThemeCheckbox.closest('label.checkbox') as HTMLElement
     expect(borderColorThemeWrapper).toBeTruthy()
@@ -682,11 +678,8 @@ export const VisualSectionTests: Story = {
     // TEST 10: Accent Style Toggle
     // Expectation: Class 'component--has-accent' toggles.
     // ============================================================================
-    // Find accent checkbox by label text
-    const accentCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Use Accent Style')
-    }) as HTMLInputElement
+    // Find accent checkbox by exact label text
+    const accentCheckbox = canvas.getByLabelText('Use Accent Style') as HTMLInputElement
     expect(accentCheckbox).toBeTruthy()
     const accentWrapper = accentCheckbox.closest('label.checkbox') as HTMLElement
     expect(accentWrapper).toBeTruthy()
@@ -703,11 +696,8 @@ export const VisualSectionTests: Story = {
     // TEST 11: Theme Background Color Toggle
     // Expectation: Class 'component--has-background' toggles.
     // ============================================================================
-    // Find background checkbox by label text
-    const backgroundCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Use Theme Background Color')
-    }) as HTMLInputElement
+    // Find background checkbox by exact label text
+    const backgroundCheckbox = canvas.getByLabelText('Use Theme Background Color') as HTMLInputElement
     expect(backgroundCheckbox).toBeTruthy()
     const backgroundWrapper = backgroundCheckbox.closest('label.checkbox') as HTMLElement
     expect(backgroundWrapper).toBeTruthy()
@@ -724,11 +714,8 @@ export const VisualSectionTests: Story = {
     // TEST 12: Hide Background Color Toggle
     // Expectation: Class 'component--hideBackgroundColor' toggles.
     // ============================================================================
-    // Find hide background checkbox by label text
-    const hideBackgroundCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(input => {
-      const label = input.closest('label')
-      return label?.textContent?.includes('Hide Background Color')
-    }) as HTMLInputElement
+    // Find hide background checkbox by exact label text
+    const hideBackgroundCheckbox = canvas.getByLabelText('Hide Background Color') as HTMLInputElement
     expect(hideBackgroundCheckbox).toBeTruthy()
     const hideBackgroundWrapper = hideBackgroundCheckbox.closest('label.checkbox') as HTMLElement
     expect(hideBackgroundWrapper).toBeTruthy()
@@ -742,3 +729,240 @@ export const VisualSectionTests: Story = {
     )
   }
 }
+
+/**
+ * TP5 GAUGE - GENERAL SECTION TESTS
+ * Tests all functionality within the General accordion for TP5 Gauge configs.
+ */
+export const TP5GaugeGeneralSectionTests: Story = {
+  args: {
+    configUrl: '/packages/waffle-chart/examples/tp5-gauge.json',
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'General')
+    await waitForPresence('.cdc-callout', canvasElement)
+
+    // ============================================================================
+    // TEST 1: Chart Type Change (TP5 Gauge <-> TP5 Waffle)
+    // Expectation: Gauge container swaps with waffle container.
+    // ============================================================================
+    const chartTypeSelect = canvas.getByLabelText(/chart type/i) as HTMLSelectElement
+    expect(chartTypeSelect).toBeTruthy()
+
+    const getChartTypeState = () => ({
+      hasGauge: !!canvasElement.querySelector('.cove-gauge-chart'),
+      hasWaffle: !!canvasElement.querySelector('.cove-waffle-chart')
+    })
+
+    await performAndAssert(
+      'TP5 Gauge to TP5 Waffle',
+      getChartTypeState,
+      async () => {
+        await userEvent.selectOptions(chartTypeSelect, 'TP5 Waffle')
+      },
+      (before, after) => before.hasGauge !== after.hasGauge && after.hasWaffle
+    )
+
+    await performAndAssert(
+      'TP5 Waffle to TP5 Gauge',
+      getChartTypeState,
+      async () => {
+        await userEvent.selectOptions(chartTypeSelect, 'TP5 Gauge')
+      },
+      (before, after) => before.hasGauge !== after.hasGauge && after.hasGauge
+    )
+
+    // ============================================================================
+    // TEST 2: Title Update
+    // Expectation: Callout heading text updates.
+    // ============================================================================
+    const titleInput = canvas.getByLabelText(/^title$/i, { selector: 'input' }) as HTMLInputElement
+    await userEvent.clear(titleInput)
+    await userEvent.type(titleInput, 'TP5 Gauge Title Update')
+
+    await performAndAssert(
+      'TP5 Gauge Title Update',
+      () => canvasElement.querySelector('.cdc-callout__heading')?.textContent?.trim() || '',
+      async () => {}, // action already performed above
+      (before, after) => after === 'TP5 Gauge Title Update'
+    )
+
+    // ============================================================================
+    // TEST 3: Show Title Toggle
+    // Expectation: Callout heading appears/disappears.
+    // ============================================================================
+    const showTitleCheckbox = canvasElement.querySelector('input[name="showTitle"]') as HTMLInputElement
+    expect(showTitleCheckbox).toBeTruthy()
+
+    const headingVisible = () => !!canvasElement.querySelector('.cdc-callout__heading')
+    const wasVisible = headingVisible()
+
+    await performAndAssert(
+      'TP5 Gauge Title Toggle',
+      headingVisible,
+      async () => {
+        await userEvent.click(showTitleCheckbox)
+      },
+      (before, after) => after !== before
+    )
+
+    await performAndAssert(
+      'TP5 Gauge Title Toggle Reset',
+      headingVisible,
+      async () => {
+        await userEvent.click(showTitleCheckbox)
+      },
+      (before, after) => after === wasVisible
+    )
+
+    // ============================================================================
+    // TEST 4: Message Update
+    // Expectation: Gauge content text updates.
+    // ============================================================================
+    const messageTextarea = canvas.getByLabelText(/message/i) as HTMLTextAreaElement
+    const newMessage = 'Updated TP5 gauge message text'
+    await userEvent.clear(messageTextarea)
+    await userEvent.type(messageTextarea, newMessage)
+    await waitForTextContent(
+      canvasElement.querySelector('.cove-gauge-chart__content .cove-waffle-chart__data--text') as HTMLElement,
+      newMessage
+    )
+
+    // ============================================================================
+    // TEST 5: Subtext Update
+    // Expectation: Subtext text updates.
+    // ============================================================================
+    const subtextInput = canvas.getByLabelText(/subtext/i) as HTMLInputElement
+    const newSubtext = 'Updated TP5 gauge subtext'
+    await userEvent.clear(subtextInput)
+    await userEvent.type(subtextInput, newSubtext)
+    await waitForTextContent(
+      canvasElement.querySelector('.cove-gauge-chart .cove-waffle-chart__subtext') as HTMLElement,
+      newSubtext
+    )
+  }
+}
+
+/**
+ * TP5 GAUGE - DATA SECTION TESTS
+ * Tests all functionality within the Data accordion for TP5 Gauge configs.
+ */
+export const TP5GaugeDataSectionTests: Story = {
+  args: {
+    configUrl: '/packages/waffle-chart/examples/tp5-gauge.json',
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Data')
+
+    const getPrimaryText = () =>
+      canvasElement.querySelector('.cove-waffle-chart__data--primary')?.textContent?.replace(/\s+/g, ' ').trim() || ''
+
+    // ============================================================================
+    // TEST 1: Data Function Change
+    // Expectation: Primary value text changes.
+    // ============================================================================
+    const dataFunctionSelect = canvasElement.querySelector('select[name="dataFunction"]') as HTMLSelectElement
+    await waitForOptionsToPopulate(dataFunctionSelect, 2)
+    const dataFunctionOptions = Array.from(dataFunctionSelect.options).map(opt => opt.value)
+    const nextFunction = dataFunctionOptions.find(opt => opt && opt !== dataFunctionSelect.value)
+    expect(nextFunction).toBeTruthy()
+
+    await performAndAssert(
+      'TP5 Gauge Data Function Change',
+      getPrimaryText,
+      async () => {
+        await userEvent.selectOptions(dataFunctionSelect, nextFunction as string)
+      },
+      (before, after) => after !== before
+    )
+
+    // ============================================================================
+    // TEST 2: Value Description Update
+    // Expectation: Primary value text includes new descriptor.
+    // ============================================================================
+    const valueDescriptionInput = canvasElement.querySelector(
+      'input[name="null-null-valueDescription"]'
+    ) as HTMLInputElement
+    expect(valueDescriptionInput).toBeTruthy()
+    const newDescription = 'out of total'
+    await userEvent.clear(valueDescriptionInput)
+    await userEvent.type(valueDescriptionInput, newDescription)
+    await performAndAssert(
+      'TP5 Gauge Value Description Update',
+      getPrimaryText,
+      async () => {}, // action already performed above
+      (before, after) => after.includes(newDescription)
+    )
+
+    // ============================================================================
+    // TEST 3: Denominator Update
+    // Expectation: Primary value text changes to include new denominator.
+    // ============================================================================
+    const denominatorInput = canvasElement.querySelector('input[name="null-null-dataDenom"]') as HTMLInputElement
+    expect(denominatorInput).toBeTruthy()
+    await performAndAssert(
+      'TP5 Gauge Denominator Update',
+      getPrimaryText,
+      async () => {
+        await userEvent.clear(denominatorInput)
+        await userEvent.type(denominatorInput, '250')
+      },
+      (before, after) => after !== before && after.includes('250')
+    )
+  }
+}
+
+/**
+ * TP5 GAUGE - VISUAL SECTION TESTS
+ * Tests all functionality within the Visual accordion for TP5 Gauge configs.
+ */
+export const TP5GaugeVisualSectionTests: Story = {
+  args: {
+    configUrl: '/packages/waffle-chart/examples/tp5-gauge.json',
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Visual')
+    await waitForPresence('.cdc-callout', canvasElement)
+
+    // ============================================================================
+    // TEST 1: White Background Toggle
+    // Expectation: Callout classes and flag visibility toggle.
+    // ============================================================================
+    const whiteBackgroundCheckbox = canvas.getByLabelText(/use white background style/i) as HTMLInputElement
+    expect(whiteBackgroundCheckbox).toBeTruthy()
+
+    const getCalloutState = () => {
+      const callout = canvasElement.querySelector('.cdc-callout') as HTMLElement
+      return {
+        classes: callout ? Array.from(callout.classList).sort().join(' ') : '',
+        hasFlag: !!canvasElement.querySelector('.cdc-callout__flag')
+      }
+    }
+
+    await performAndAssert(
+      'TP5 Gauge White Background Toggle',
+      getCalloutState,
+      async () => {
+        await userEvent.click(whiteBackgroundCheckbox)
+      },
+      (before, after) => before.classes !== after.classes || before.hasFlag !== after.hasFlag,
+      after => {
+        if (after.hasFlag) {
+          expect(after.classes.includes('cdc-callout--data')).toBe(true)
+        } else {
+          expect(after.classes.includes('cdc-callout--data')).toBe(false)
+          expect(after.classes.includes('dfe-block')).toBe(false)
+        }
+      }
+    )
+  }
+}

package/src/_stories/WaffleChart.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import WaffleChart from '../CdcWaffleChart'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof WaffleChart> = {
   title: 'Components/Templates/WaffleChart',
@@ -105,7 +106,10 @@ export const Person: Story = {
     <>
       <WaffleChart {...args} />
     </>
-  )
+  ),
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
 }
 
 export const Gauge: Story = {
@@ -186,7 +190,78 @@ export const Gauge: Story = {
     <>
       <WaffleChart {...args} />
     </>
-  )
+  ),
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Waffle_Chart_TP5_Style: Story = {
+  args: {
+    configUrl: '/packages/waffle-chart/examples/tp5-style.json'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TP5 Style - A new layout style that displays the waffle chart in a callout component with a blue background and icon. The title appears inside the callout header. This style mimics the CDC Template Package 5.0 callout component design and includes an optional white background variant.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Waffle_Chart_TP5_Style_White_Background: Story = {
+  args: {
+    configUrl: '/packages/waffle-chart/examples/tp5-style-white.json'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TP5 Style with White Background - The white background variant of the TP5 style features a white background with a teal border instead of the default blue background. The icon remains visible in this variant.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const TP5_Gauge: Story = {
+  args: {
+    configUrl: '/packages/waffle-chart/examples/tp5-gauge.json'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TP5 Gauge - A TP5 callout-style gauge with a blue background, callout flag, and title inside the callout header.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const TP5_Gauge_White_Background: Story = {
+  args: {
+    configUrl: '/packages/waffle-chart/examples/tp5-gauge-white.json'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TP5 Gauge with White Background - The white background variant of the TP5 gauge features a white callout with a teal border and no callout flag.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
 }
 
 export default meta