@cdc/waffle-chart 4.25.10 → 4.26.1

package/src/CdcWaffleChart.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useReducer, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react'
 
 // visx
 import { Circle, Bar } from '@visx/shape'
@@ -13,6 +13,7 @@ import ResizeObserver from 'resize-observer-polyfill'
 import { Config } from './types/Config'
 import getViewport from '@cdc/core/helpers/getViewport'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import { DATA_OPERATORS } from '@cdc/core/helpers/constants'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Loading from '@cdc/core/components/Loading'
@@ -29,6 +30,13 @@ import './scss/main.scss'
 import Title from '@cdc/core/components/ui/Title'
 import Layout from '@cdc/core/components/Layout'
 
+// images
+import CalloutFlag from './images/callout-flag.svg?url'
+
+// TP5 Style Constants
+const TP5_NODE_WIDTH = 13
+const TP5_NODE_SPACER = 3
+
 type CdcWaffleChartProps = {
   configUrl?: string
   config?: Config
@@ -67,7 +75,7 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
   const gaugeColor = config.visual.colors[config.theme]
   let dataFontSize = config.fontSize ? { fontSize: config.fontSize + 'px' } : null
 
-  const calculateData = useCallback(() => {
+  const [dataPercentage, waffleDenominator, waffleNumerator] = useMemo(() => {
     //If either the column or function aren't set, do not calculate
     if (!dataColumn || !dataFunction) {
       return ''
@@ -239,26 +247,26 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
       applyPrecision(waffleNumerator)
     ]
   }, [
-    dataColumn,
-    dataFunction,
     config.data,
     filters,
+    dataColumn,
+    dataFunction,
     dataConditionalColumn,
     dataConditionalOperator,
     dataConditionalComparate,
     customDenom,
+    dataDenom,
     dataDenomColumn,
     dataDenomFunction,
-    roundToPlace,
-    dataDenom
+    roundToPlace
   ])
 
-  const [dataPercentage, waffleDenominator, waffleNumerator] = calculateData()
-
   const buildWaffle = useCallback(() => {
     let waffleData = []
-    let nodeWidthNum = parseInt(nodeWidth, 10)
-    let nodeSpacerNum = parseInt(nodeSpacer, 10)
+    // Use standardized values for TP5 style
+    const isTP5 = config.visualizationType === 'TP5 Waffle'
+    let nodeWidthNum = isTP5 ? TP5_NODE_WIDTH : parseInt(nodeWidth, 10)
+    let nodeSpacerNum = isTP5 ? TP5_NODE_SPACER : parseInt(nodeSpacer, 10)
 
     const calculatePos = (shape, axis, index, width, spacer) => {
       let mod = axis === 'x' ? index % 10 : axis === 'y' ? Math.floor(index / 10) : null
@@ -271,7 +279,8 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
         x: calculatePos(shape, 'x', i, nodeWidthNum, nodeSpacerNum),
         y: calculatePos(shape, 'y', i, nodeWidthNum, nodeSpacerNum),
         color: config.visual.colors[theme],
-        opacity: i + 1 > 100 - Math.round(dataPercentage) ? 1 : 0.35
+        opacity: i + 1 > 100 - Math.round(dataPercentage) ? 1 : 0.2,
+        isFilled: i + 1 > 100 - Math.round(dataPercentage)
       }
       waffleData.push(newNode)
     }
@@ -281,25 +290,37 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
         <Bar
           className='cdc-waffle-chart__node'
           style={{ transitionDelay: `${0.1 * key}ms` }}
-          x={node.x}
-          y={node.y}
-          width={nodeWidthNum}
-          height={nodeWidthNum}
-          fill={node.color}
-          fillOpacity={node.opacity}
+          x={isTP5 && !node.isFilled ? node.x + 1 : node.x}
+          y={isTP5 && !node.isFilled ? node.y + 1 : node.y}
+          width={isTP5 && !node.isFilled ? nodeWidthNum - 2 : nodeWidthNum}
+          height={isTP5 && !node.isFilled ? nodeWidthNum - 2 : nodeWidthNum}
+          fill={isTP5 ? (node.isFilled ? '#009EC1' : '#DFF2F6') : node.color}
+          fillOpacity={isTP5 ? 1 : node.opacity}
+          stroke={isTP5 ? (!node.isFilled ? '#009EC1' : undefined) : undefined}
+          strokeWidth={isTP5 ? (!node.isFilled ? 1 : 0) : 0}
           key={key}
         />
       ) : node.shape === 'person' ? (
         <path
+          className='cdc-waffle-chart__node'
           style={{
-            transform: `translateX(${node.x + nodeWidthNum / 4}px) translateY(${node.y}px) scale(${nodeWidthNum / 20})`
+            transform: isTP5
+              ? `translateX(${node.x}px) translateY(${node.y + nodeWidthNum * 0.1}px) scale(${
+                  (nodeWidthNum * 0.8) / 448
+                })`
+              : `translateX(${node.x + nodeWidthNum / 4}px) translateY(${node.y}px) scale(${nodeWidthNum / 20})`,
+            transitionDelay: `${0.1 * key}ms`
           }}
-          fill={node.color}
-          fillOpacity={node.opacity}
+          fill={isTP5 ? (node.isFilled ? '#009EC1' : 'transparent') : node.color}
+          fillOpacity={isTP5 ? 1 : node.opacity}
+          stroke={isTP5 ? (!node.isFilled ? '#009EC1' : undefined) : undefined}
+          strokeWidth={isTP5 ? (!node.isFilled ? 448 / nodeWidthNum : 0) : 0}
           key={key}
-          d='M3.75,0a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,3.75,0M5.625,5.625H5.18125a3.433,3.433,0,0,1-2.8625,0H1.875A1.875,1.875,
-                          0,0,0,0,7.5v5.3125a.9375.9375,0,0,0,.9375.9375h.625v5.3125A.9375.9375,0,0,0,2.5,20H5a.9375.9375,0,0,0,
-                          .9375-.9375V13.75h.625A.9375.9375,0,0,0,7.5,12.8125V7.5A1.875,1.875,0,0,0,5.625,5.625Z'
+          d={
+            isTP5
+              ? 'M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'
+              : 'M3.75,0a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,3.75,0M5.625,5.625H5.18125a3.433,3.433,0,0,1-2.8625,0H1.875A1.875,1.875,0,0,0,0,7.5v5.3125a.9375.9375,0,0,0,.9375.9375h.625v5.3125A.9375.9375,0,0,0,2.5,20H5a.9375.9375,0,0,0,.9375-.9375V13.75h.625A.9375.9375,0,0,0,7.5,12.8125V7.5A1.875,1.875,0,0,0,5.625,5.625Z'
+          }
         ></path>
       ) : (
         <Circle
@@ -307,18 +328,28 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
           style={{ transitionDelay: `${0.1 * key}ms` }}
           cx={node.x}
           cy={node.y}
-          r={nodeWidthNum / 2}
-          fill={node.color}
-          fillOpacity={node.opacity}
+          r={isTP5 && !node.isFilled ? nodeWidthNum / 2 - 1 : nodeWidthNum / 2}
+          fill={isTP5 ? (node.isFilled ? '#009EC1' : '#DFF2F6') : node.color}
+          fillOpacity={isTP5 ? 1 : node.opacity}
+          stroke={isTP5 ? (!node.isFilled ? '#009EC1' : undefined) : undefined}
+          strokeWidth={isTP5 ? (!node.isFilled ? 1 : 0) : 0}
           key={key}
         />
       )
     )
-  }, [theme, dataPercentage, shape, nodeWidth, nodeSpacer])
+  }, [theme, dataPercentage, shape, nodeWidth, nodeSpacer, config.visualizationType, config.visual?.whiteBackground])
 
   const setRatio = useCallback(() => {
-    return nodeWidth * 10 + nodeSpacer * 9
-  }, [nodeWidth, nodeSpacer])
+    const isTP5 = config.visualizationType === 'TP5 Waffle'
+    const width = isTP5 ? TP5_NODE_WIDTH : nodeWidth
+    const spacer = isTP5 ? TP5_NODE_SPACER : nodeSpacer
+    return width * 10 + spacer * 9
+  }, [nodeWidth, nodeSpacer, config.visualizationType])
+
+  const setSvgSize = useCallback(() => {
+    // Add 2px padding to account for strokes on edges
+    return setRatio() + 2
+  }, [nodeWidth, nodeSpacer, config.visualizationType])
 
   const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
 
@@ -359,76 +390,108 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
     )
   }
 
+  // Render waffle chart content (without title)
+  const renderChartContent = () => (
+    <>
+      {!config.newViz && config.runtime && config.runtime.editorErrorMessage && (
+        <Error updateConfig={updateConfig} config={config} />
+      )}
+      {config.newViz && showConfigConfirm && <Confirm updateConfig={updateConfig} config={config} />}
+      <div className='cove-component__content-wrap p-0'>
+        {config.visualizationType === 'Gauge' && (
+          <div className={`cove-gauge-chart${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
+            <div className='cove-gauge-chart__chart'>
+              <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
+                {prefix ? prefix : ' '}
+                {config.showPercent ? dataPercentage : waffleNumerator}
+                {suffix ? suffix + ' ' : ' '} {config.valueDescription}{' '}
+                {config.showDenominator && waffleDenominator ? waffleDenominator : ' '}
+              </div>
+              <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
+              <svg height={config.gauge.height + 4} width={'100%'} style={{ overflow: 'visible' }}>
+                <Group top={2} left={2}>
+                  <foreignObject
+                    style={{ border: '1px solid black' }}
+                    x={0}
+                    y={0}
+                    width={config.gauge.width}
+                    height={config.gauge.height}
+                    fill='#fff'
+                  />
+                  <Bar x={0} y={0} width={xScale(waffleNumerator)} height={config.gauge.height} fill={gaugeColor} />
+                </Group>
+              </svg>
+              <div className={'cove-waffle-chart__subtext subtext'}>{parse(subtext)}</div>
+            </div>
+          </div>
+        )}
+        {config.visualizationType !== 'Gauge' && (
+          <div
+            className={`cove-waffle-chart${orientation === 'vertical' ? ' cove-waffle-chart--verical' : ''}${
+              config.overallFontSize ? ' font-' + config.overallFontSize : ''
+            }`}
+          >
+            <div className='cove-waffle-chart__chart' style={{ width: setRatio() }}>
+              <svg width={setSvgSize()} height={setSvgSize()} style={{ display: 'block' }}>
+                <Group top={1} left={1}>
+                  {buildWaffle()}
+                </Group>
+              </svg>
+            </div>
+            {(dataPercentage || content) && (
+              <div className='cove-waffle-chart__data'>
+                {dataPercentage && (
+                  <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
+                    {prefix ? prefix : null}
+                    {dataPercentage}
+                    {suffix ? suffix : null}
+                  </div>
+                )}
+                <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
+
+                {subtext && <div className='cove-waffle-chart__subtext subtext fst-italic'>{parse(subtext)}</div>}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  )
+
+  // TP5 Style: render with callout wrapper inside cove-component__content
+  if (config.visualizationType === 'TP5 Waffle') {
+    const calloutClasses = ['cdc-callout', 'd-flex', 'flex-column']
+    if (!config.visual?.whiteBackground) {
+      calloutClasses.push('dfe-block', 'cdc-callout--data')
+    }
+
+    return (
+      <div className='cove-component__content p-0 border-0'>
+        <div className={calloutClasses.join(' ')}>
+          {!config.visual?.whiteBackground && (
+            <img src={CalloutFlag} alt='' className='cdc-callout__flag' aria-hidden='true' />
+          )}
+          {config.showTitle && title && title.trim() && (
+            <h3 className='cdc-callout__heading fw-bold flex-shrink-0'>{parse(title)}</h3>
+          )}
+          <div className='w-100 mw-100 overflow-hidden'>{renderChartContent()}</div>
+        </div>
+        {link && link}
+      </div>
+    )
+  }
+
+  // Original Style: Regular title and content
   return (
     <div className='cove-component__content'>
       <Title
         showTitle={config.showTitle}
         title={title}
+        titleStyle='legacy'
         config={config}
         classes={['chart-title', `${config.theme}`, 'mb-0']}
       />
-      <div className={contentClasses.join(' ')}>
-        {!config.newViz && config.runtime && config.runtime.editorErrorMessage && (
-          <Error updateConfig={updateConfig} config={config} />
-        )}
-        {config.newViz && showConfigConfirm && <Confirm updateConfig={updateConfig} config={config} />}
-        <div className='cove-component__content-wrap'>
-          {config.visualizationType === 'Gauge' && (
-            <div className={`cove-gauge-chart${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
-              <div className='cove-gauge-chart__chart'>
-                <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
-                  {prefix ? prefix : ' '}
-                  {config.showPercent ? dataPercentage : waffleNumerator}
-                  {suffix ? suffix + ' ' : ' '} {config.valueDescription}{' '}
-                  {config.showDenominator && waffleDenominator ? waffleDenominator : ' '}
-                </div>
-                <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
-                <svg height={config.gauge.height} width={'100%'}>
-                  <Group>
-                    <foreignObject
-                      style={{ border: '1px solid black' }}
-                      x={0}
-                      y={0}
-                      width={config.gauge.width}
-                      height={config.gauge.height}
-                      fill='#fff'
-                    />
-                    <Bar x={0} y={0} width={xScale(waffleNumerator)} height={config.gauge.height} fill={gaugeColor} />
-                  </Group>
-                </svg>
-                <div className={'cove-waffle-chart__subtext subtext'}>{parse(subtext)}</div>
-              </div>
-            </div>
-          )}
-          {config.visualizationType !== 'Gauge' && (
-            <div
-              className={`cove-waffle-chart${orientation === 'vertical' ? ' cove-waffle-chart--verical' : ''}${
-                config.overallFontSize ? ' font-' + config.overallFontSize : ''
-              }`}
-            >
-              <div className='cove-waffle-chart__chart' style={{ width: setRatio() }}>
-                <svg width={setRatio()} height={setRatio()}>
-                  <Group>{buildWaffle()}</Group>
-                </svg>
-              </div>
-              {(dataPercentage || content) && (
-                <div className='cove-waffle-chart__data'>
-                  {dataPercentage && (
-                    <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
-                      {prefix ? prefix : null}
-                      {dataPercentage}
-                      {suffix ? suffix : null}
-                    </div>
-                  )}
-                  <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
-
-                  {subtext && <div className='cove-waffle-chart__subtext subtext'>{parse(subtext)}</div>}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
+      <div className={contentClasses.join(' ')}>{renderChartContent()}</div>
       {link && link}
     </div>
   )
@@ -522,21 +585,17 @@ const CdcWaffleChart = ({
   let content = <Loading />
 
   if (loading === false) {
-    let body = (
-      <Layout.Responsive isEditor={isEditor}>
-        <WaffleChart
-          config={config}
-          isEditor={isEditor}
-          showConfigConfirm={showConfigConfirm}
-          updateConfig={updateConfig}
-        />
-      </Layout.Responsive>
-    )
-
     content = (
       <>
-        {isEditor && <EditorPanel showConfigConfirm={showConfigConfirm}>{body}</EditorPanel>}
-        {!isEditor && body}
+        {isEditor && <EditorPanel showConfigConfirm={showConfigConfirm} />}
+        <Layout.Responsive isEditor={isEditor}>
+          <WaffleChart
+            config={config}
+            isEditor={isEditor}
+            showConfigConfirm={showConfigConfirm}
+            updateConfig={updateConfig}
+          />
+        </Layout.Responsive>
       </>
     )
   }
@@ -579,18 +638,5 @@ export const DATA_FUNCTIONS = [
   DATA_FUNCTION_SUM
 ]
 
-export const DATA_OPERATOR_LESS = '<'
-export const DATA_OPERATOR_GREATER = '>'
-export const DATA_OPERATOR_LESSEQUAL = '<='
-export const DATA_OPERATOR_GREATEREQUAL = '>='
-export const DATA_OPERATOR_EQUAL = '='
-export const DATA_OPERATOR_NOTEQUAL = '≠'
-
-export const DATA_OPERATORS = [
-  DATA_OPERATOR_LESS,
-  DATA_OPERATOR_GREATER,
-  DATA_OPERATOR_LESSEQUAL,
-  DATA_OPERATOR_GREATEREQUAL,
-  DATA_OPERATOR_EQUAL,
-  DATA_OPERATOR_NOTEQUAL
-]
+// Re-export DATA_OPERATORS for backward compatibility
+export { DATA_OPERATORS }

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

@@ -100,8 +100,12 @@ export const GeneralSectionTests: Story = {
     // TEST 3: Show Title Toggle
     // Expectation: Header region appears / disappears (DOM visibility change).
     // ============================================================================
-    const showTitleCheckbox = canvasElement.querySelector('input[name*="showTitle"]') as HTMLInputElement
-    const checkboxWrapper = showTitleCheckbox?.closest('.cove-input__checkbox--small')
+    // Find show title checkbox by label text
+    const showTitleCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(input => {
+      const label = input.closest('label')
+      return label?.textContent?.includes('show title')
+    }) as HTMLInputElement
+    const checkboxWrapper = showTitleCheckbox?.closest('label.checkbox')
     expect(showTitleCheckbox).toBeTruthy()
     expect(checkboxWrapper).toBeTruthy()
 
@@ -110,7 +114,7 @@ export const GeneralSectionTests: Story = {
       'Title Toggle',
       () => showTitleCheckbox.checked,
       async () => {
-        await userEvent.click(checkboxWrapper as HTMLElement)
+        await userEvent.click(showTitleCheckbox)
       },
       (before, after) => after === !wasChecked
     )
@@ -128,7 +132,7 @@ export const GeneralSectionTests: Story = {
       'Title Toggle Reset',
       () => showTitleCheckbox.checked,
       async () => {
-        await userEvent.click(checkboxWrapper as HTMLElement)
+        await userEvent.click(showTitleCheckbox)
       },
       (before, after) => after === wasChecked
     )
@@ -253,7 +257,15 @@ export const DataSectionTests: Story = {
       'Clear Conditional Value',
       getValueText,
       async () => {
+        // Clear the conditional column to fully reset the filter
+        const conditionalColumnSelect = canvasElement.querySelector(
+          'select[name="dataConditionalColumn"]'
+        ) as HTMLSelectElement
+        await userEvent.selectOptions(conditionalColumnSelect, '')
         await userEvent.clear(conditionalValueInput)
+        conditionalValueInput.blur() // Trigger change event
+        // Wait for debounced input processing (TextField uses 500ms debounce)
+        await new Promise(resolve => setTimeout(resolve, 600))
       },
       (before, after) => after !== before
     )
@@ -312,7 +324,7 @@ export const DataSectionTests: Story = {
       'Custom Denominator Toggle',
       getValueText,
       async () => {
-        await userEvent.click(customDenomWrapper)
+        await userEvent.click(customDenomCheckbox)
       },
       (before, after) => after !== before
     )
@@ -404,38 +416,12 @@ export const DataSectionTests: Story = {
       },
       (before, after) => after !== before && after.endsWith('deaths')
     )
-
-    // ============================================================================
-    // TEST 16: Add Filter (state = Alaska)
-    // Expectation: Primary value text changes after filter applied.
-    // ============================================================================
-    const addFilterButton = Array.from(canvasElement.querySelectorAll('button')).find(
-      b => (b as HTMLButtonElement).textContent?.trim() === 'Add Filter'
-    ) as HTMLButtonElement
-    await performAndAssert(
-      'Add Filter',
-      getValueText,
-      async () => {
-        await userEvent.click(addFilterButton)
-
-        await waitForPresence('.filters-list .edit-block:last-of-type', canvasElement)
-
-        const newFilter = canvasElement.querySelector('.filters-list .edit-block:last-of-type') as HTMLElement
-        const [colSelect, valSelect] = Array.from(newFilter.querySelectorAll('select')) as HTMLSelectElement[]
-        await userEvent.selectOptions(colSelect, 'state')
-
-        await waitForOptionsToPopulate(valSelect)
-
-        await userEvent.selectOptions(valSelect, 'Alaska')
-      },
-      (before, after) => after !== before
-    )
   }
 }
 
 /**
- * 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: {
@@ -445,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
@@ -583,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 ''
@@ -618,7 +608,7 @@ export const VisualSectionTests: Story = {
       return node?.getAttribute('fill') || ''
     }
 
-    const themeButtons = Array.from(canvasElement.querySelectorAll('.color-palette li')) as HTMLElement[]
+    const themeButtons = Array.from(canvasElement.querySelectorAll('.color-palette button')) as HTMLElement[]
     expect(themeButtons.length).toBeGreaterThan(1)
     await performAndAssert(
       'Theme Change',
@@ -638,9 +628,10 @@ export const VisualSectionTests: Story = {
     // ============================================================================
     const contentClassSig = () => Array.from(contentContainer().classList).sort().join(' ')
 
-    const borderCheckbox = canvasElement.querySelector('input[name="visual-null-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('.cove-input__checkbox--small') as HTMLElement
+    const borderWrapper = borderCheckbox.closest('label.checkbox') as HTMLElement
     expect(borderWrapper).toBeTruthy()
     const borderStyleSig = () => {
       const el = contentContainer()
@@ -656,7 +647,7 @@ export const VisualSectionTests: Story = {
       'Border Toggle',
       borderStyleSig,
       async () => {
-        await userEvent.click(borderWrapper)
+        await userEvent.click(borderCheckbox)
       },
       (before, after) =>
         before.classes !== after.classes ||
@@ -669,17 +660,16 @@ export const VisualSectionTests: Story = {
     // TEST 9: Theme Border Color Toggle
     // Expectation: Class 'component--has-borderColorTheme' toggles.
     // ============================================================================
-    const borderColorThemeCheckbox = canvasElement.querySelector(
-      'input[name="visual-null-borderColorTheme"]'
-    ) 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('.cove-input__checkbox--small') as HTMLElement
+    const borderColorThemeWrapper = borderColorThemeCheckbox.closest('label.checkbox') as HTMLElement
     expect(borderColorThemeWrapper).toBeTruthy()
     await performAndAssert(
       'Border Color Theme Toggle',
       contentClassSig,
       async () => {
-        await userEvent.click(borderColorThemeWrapper)
+        await userEvent.click(borderColorThemeCheckbox)
       },
       (before, after) => before !== after && (after.includes('borderColorTheme') || before.includes('borderColorTheme'))
     )
@@ -688,15 +678,16 @@ export const VisualSectionTests: Story = {
     // TEST 10: Accent Style Toggle
     // Expectation: Class 'component--has-accent' toggles.
     // ============================================================================
-    const accentCheckbox = canvasElement.querySelector('input[name="visual-null-accent"]') 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('.cove-input__checkbox--small') as HTMLElement
+    const accentWrapper = accentCheckbox.closest('label.checkbox') as HTMLElement
     expect(accentWrapper).toBeTruthy()
     await performAndAssert(
       'Accent Toggle',
       contentClassSig,
       async () => {
-        await userEvent.click(accentWrapper)
+        await userEvent.click(accentCheckbox)
       },
       (before, after) => before !== after
     )
@@ -705,15 +696,16 @@ export const VisualSectionTests: Story = {
     // TEST 11: Theme Background Color Toggle
     // Expectation: Class 'component--has-background' toggles.
     // ============================================================================
-    const backgroundCheckbox = canvasElement.querySelector('input[name="visual-null-background"]') 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('.cove-input__checkbox--small') as HTMLElement
+    const backgroundWrapper = backgroundCheckbox.closest('label.checkbox') as HTMLElement
     expect(backgroundWrapper).toBeTruthy()
     await performAndAssert(
       'Background Toggle',
       contentClassSig,
       async () => {
-        await userEvent.click(backgroundWrapper)
+        await userEvent.click(backgroundCheckbox)
       },
       (before, after) => before !== after
     )
@@ -722,17 +714,16 @@ export const VisualSectionTests: Story = {
     // TEST 12: Hide Background Color Toggle
     // Expectation: Class 'component--hideBackgroundColor' toggles.
     // ============================================================================
-    const hideBackgroundCheckbox = canvasElement.querySelector(
-      'input[name="visual-null-hideBackgroundColor"]'
-    ) 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('.cove-input__checkbox--small') as HTMLElement
+    const hideBackgroundWrapper = hideBackgroundCheckbox.closest('label.checkbox') as HTMLElement
     expect(hideBackgroundWrapper).toBeTruthy()
     await performAndAssert(
       'Hide Background Toggle',
       contentClassSig,
       async () => {
-        await userEvent.click(hideBackgroundWrapper)
+        await userEvent.click(hideBackgroundCheckbox)
       },
       (before, after) => before !== after
     )