@cdc/waffle-chart 4.26.1 → 4.26.3

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

@@ -87,12 +87,12 @@ export const GeneralSectionTests: Story = {
     // Poll for header text update
     await performAndAssert(
       'Title Update',
-      () => canvasElement.querySelector('.cove-component__header h2')?.textContent?.trim() || '',
+      () => canvasElement.querySelector('.cove-visualization__header h2')?.textContent?.trim() || '',
       async () => {}, // action already performed above
       (before, after) => after === 'Updated Waffle Chart Title E2E'
     )
 
-    const chartTitleHeader = canvasElement.querySelector('.cove-component__header h2')
+    const chartTitleHeader = canvasElement.querySelector('.cove-visualization__header h2')
     expect(chartTitleHeader).toBeTruthy()
     expect(chartTitleHeader.textContent.trim()).toBe('Updated Waffle Chart Title E2E')
 
@@ -120,7 +120,7 @@ export const GeneralSectionTests: Story = {
     )
     expect(showTitleCheckbox.checked).toBe(!wasChecked)
 
-    const chartTitleHeaderAfterToggle = canvasElement.querySelector('.cove-component__header')
+    const chartTitleHeaderAfterToggle = canvasElement.querySelector('.cove-visualization__header')
     if (showTitleCheckbox.checked) {
       expect(chartTitleHeaderAfterToggle).toBeTruthy()
       expect(chartTitleHeaderAfterToggle).not.toHaveStyle('display: none')
@@ -435,7 +435,7 @@ export const VisualSectionTests: Story = {
     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
+    const contentContainer = () => canvasElement.querySelector('.cove-visualization__body') as HTMLElement
     expect(waffleRoot()).toBeTruthy()
 
     // ============================================================================
@@ -658,7 +658,7 @@ export const VisualSectionTests: Story = {
 
     // ============================================================================
     // TEST 9: Theme Border Color Toggle
-    // Expectation: Class 'component--has-borderColorTheme' toggles.
+    // Expectation: Class 'component--has-border-color-theme' toggles.
     // ============================================================================
     // Find border color theme checkbox by exact label text
     const borderColorThemeCheckbox = canvas.getByLabelText('Use Border Color Theme') as HTMLInputElement
@@ -671,7 +671,8 @@ export const VisualSectionTests: Story = {
       async () => {
         await userEvent.click(borderColorThemeCheckbox)
       },
-      (before, after) => before !== after && (after.includes('borderColorTheme') || before.includes('borderColorTheme'))
+      (before, after) =>
+        before !== after && (after.includes('border-color-theme') || before.includes('border-color-theme'))
     )
 
     // ============================================================================
@@ -712,7 +713,7 @@ export const VisualSectionTests: Story = {
 
     // ============================================================================
     // TEST 12: Hide Background Color Toggle
-    // Expectation: Class 'component--hideBackgroundColor' toggles.
+    // Expectation: Class 'component--hide-background-color' toggles.
     // ============================================================================
     // Find hide background checkbox by exact label text
     const hideBackgroundCheckbox = canvas.getByLabelText('Hide Background Color') as HTMLInputElement
@@ -729,3 +730,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,10 @@ export const Gauge: Story = {
     <>
       <WaffleChart {...args} />
     </>
-  )
+  ),
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
 }
 
 export const Waffle_Chart_TP5_Style: Story = {
@@ -200,6 +207,9 @@ export const Waffle_Chart_TP5_Style: 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)
   }
 }
 
@@ -214,6 +224,43 @@ export const Waffle_Chart_TP5_Style_White_Background: 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)
   }
 }
 

package/src/components/EditorPanel.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, memo, useContext } from 'react'
-import _ from 'lodash'
 
 import ConfigContext from '../ConfigContext'
 
@@ -14,8 +13,9 @@ import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 import { useFilterManagement } from '@cdc/core/hooks/useFilterManagement'
 import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
 import { VisualSection } from '@cdc/core/components/EditorPanel/sections/VisualSection'
+import PanelMarkup from '@cdc/core/components/EditorPanel/components/PanelMarkup'
 
-import '@cdc/core/styles/v2/components/editor.scss'
+import '@cdc/core/components/EditorPanel/editor.scss'
 import WarningImage from '../images/warning.svg'
 
 import { DATA_OPERATORS, DATA_FUNCTIONS } from '../CdcWaffleChart'
@@ -57,7 +57,8 @@ const EditorPanel = memo(props => {
   const approvedWaffleChartOptions = [
     { value: 'Waffle', label: 'Waffle' },
     { value: 'TP5 Waffle', label: 'TP5 Style Waffle' },
-    { value: 'Gauge', label: 'Gauge' }
+    { value: 'Gauge', label: 'Gauge' },
+    { value: 'TP5 Gauge', label: 'TP5 Style Gauge' }
   ]
 
   const editorContent = (
@@ -70,15 +71,6 @@ const EditorPanel = memo(props => {
           updateField={updateField}
           options={approvedWaffleChartOptions}
         />
-        {config.visualizationType === 'Gauge' && (
-          <Select
-            value={config.visualizationSubType}
-            fieldName='visualizationSubType'
-            label='Chart Subtype'
-            updateField={updateField}
-            options={['Linear']}
-          />
-        )}
         <TextField
           value={config.title}
           fieldName='title'
@@ -128,6 +120,28 @@ const EditorPanel = memo(props => {
             </Tooltip>
           }
         />
+        <Select
+          value={config.locale}
+          fieldName='locale'
+          label='Language for dates and numbers'
+          updateField={updateField}
+          options={[
+            { value: 'en-US', label: 'English (en-US)' },
+            { value: 'es-MX', label: 'Spanish (es-MX)' }
+          ]}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  Change the language (locale) for this visualization to alter the way dates and numbers are formatted.
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
       </Accordion.Section>
 
       <Accordion.Section
@@ -263,7 +277,7 @@ const EditorPanel = memo(props => {
             </div>
           </li>
         </ul>
-        {config.visualizationType === 'Gauge' && (
+        {(config.visualizationType === 'Gauge' || config.visualizationType === 'TP5 Gauge') && (
           <>
             <hr className='cove-accordion__divider' />
             <div className='cove-accordion__panel-section reverse-labels'>
@@ -344,8 +358,8 @@ const EditorPanel = memo(props => {
           Add Filter
         </Button>
       </Accordion.Section>
-      <Accordion.Section title='Chart Settings'>
-        {config.visualizationType !== 'Gauge' && (
+      {config.visualizationType !== 'Gauge' && config.visualizationType !== 'TP5 Gauge' && (
+        <Accordion.Section title='Chart Settings'>
           <Select
             value={config.shape}
             fieldName='shape'
@@ -353,62 +367,62 @@ const EditorPanel = memo(props => {
             updateField={updateField}
             options={['circle', 'square', 'person']}
           />
-        )}
-        {config.visualizationType !== 'Gauge' && config.visualizationType !== 'TP5 Waffle' && (
-          <>
-            <div
-              className='cove-accordion__panel-row cove-accordion__small-inputs'
-              style={{ marginTop: '1rem', marginBottom: '1rem' }}
-            >
-              <div className='cove-accordion__panel-col'>
-                <TextField
-                  type='number'
-                  value={config.nodeWidth}
-                  fieldName='nodeWidth'
-                  label='Width'
-                  updateField={updateField}
-                />
+          {config.visualizationType !== 'TP5 Waffle' && (
+            <>
+              <div
+                className='cove-accordion__panel-row cove-accordion__small-inputs'
+                style={{ marginTop: '1rem', marginBottom: '1rem' }}
+              >
+                <div className='cove-accordion__panel-col'>
+                  <TextField
+                    type='number'
+                    value={config.nodeWidth}
+                    fieldName='nodeWidth'
+                    label='Width'
+                    updateField={updateField}
+                  />
+                </div>
+                <div className='cove-accordion__panel-col'>
+                  <TextField
+                    type='number'
+                    value={config.nodeSpacer}
+                    fieldName='nodeSpacer'
+                    label='Spacer'
+                    updateField={updateField}
+                  />
+                </div>
               </div>
-              <div className='cove-accordion__panel-col'>
-                <TextField
-                  type='number'
-                  value={config.nodeSpacer}
-                  fieldName='nodeSpacer'
-                  label='Spacer'
+
+              <div className='cove-input-group'>
+                <Select
+                  value={config.orientation}
+                  fieldName='orientation'
+                  label='Layout'
                   updateField={updateField}
+                  options={['horizontal', 'vertical']}
                 />
               </div>
-            </div>
-
-            <div className='cove-input-group'>
-              <Select
-                value={config.orientation}
-                fieldName='orientation'
-                label='Layout'
-                updateField={updateField}
-                options={['horizontal', 'vertical']}
-              />
-            </div>
 
-            <div className='cove-input-group'>
-              <label>
-                <span className='edit-label column-heading cove-input__label'>Data Point Font Size</span>
-              </label>
-              <div className='cove-accordion__panel-row cove-accordion__small-inputs align-center'>
-                <div className='cove-accordion__panel-col'>
-                  <TextField type='number' value={config.fontSize} fieldName='fontSize' updateField={updateField} />
-                </div>
-                <div className='cove-accordion__panel-col' style={{ display: 'flex', alignItems: 'center' }}>
-                  <label className='accordion__panel-label--muted'> default (50px)</label>
+              <div className='cove-input-group'>
+                <label>
+                  <span className='edit-label column-heading cove-input__label'>Data Point Font Size</span>
+                </label>
+                <div className='cove-accordion__panel-row cove-accordion__small-inputs align-center'>
+                  <div className='cove-accordion__panel-col'>
+                    <TextField type='number' value={config.fontSize} fieldName='fontSize' updateField={updateField} />
+                  </div>
+                  <div className='cove-accordion__panel-col' style={{ display: 'flex', alignItems: 'center' }}>
+                    <label className='accordion__panel-label--muted'> default (50px)</label>
+                  </div>
                 </div>
               </div>
-            </div>
-          </>
-        )}
-      </Accordion.Section>
+            </>
+          )}
+        </Accordion.Section>
+      )}
 
       {/* Visual section for TP5 style */}
-      {config.visualizationType === 'TP5 Waffle' && (
+      {(config.visualizationType === 'TP5 Waffle' || config.visualizationType === 'TP5 Gauge') && (
         <Accordion.Section title='Visual'>
           <CheckBox
             value={config.visual?.whiteBackground}
@@ -421,7 +435,7 @@ const EditorPanel = memo(props => {
       )}
 
       {/* Visual section for other styles */}
-      {config.visualizationType !== 'TP5 Waffle' && (
+      {config.visualizationType !== 'TP5 Waffle' && config.visualizationType !== 'TP5 Gauge' && (
         <Accordion.Section title='Visual'>
           <VisualSection
             config={config}
@@ -439,6 +453,18 @@ const EditorPanel = memo(props => {
           />
         </Accordion.Section>
       )}
+      <Accordion.Section title='Markup Variables'>
+        <PanelMarkup
+          name='Markup Variables'
+          markupVariables={config.markupVariables || []}
+          data={data}
+          enableMarkupVariables={config.enableMarkupVariables || false}
+          onMarkupVariablesChange={variables => updateField(null, null, 'markupVariables', variables)}
+          onToggleEnable={enabled => updateField(null, null, 'enableMarkupVariables', enabled)}
+          withAccordion={false}
+          dataMetadata={config.dataMetadata}
+        />
+      </Accordion.Section>
     </Accordion>
   )
 

package/src/data/initial-state.js

@@ -53,5 +53,7 @@ export default {
       'theme-green': '#4b830d',
       'theme-amber': '#fbab18'
     }
-  }
+  },
+  markupVariables: [],
+  enableMarkupVariables: false
 }

package/src/scss/main.scss

@@ -1,16 +1,9 @@
-@import '@cdc/core/styles/accessibility';
+@import '@cdc/core/styles/utils/accessibility';
 @import 'waffle-chart';
 
-.cdc-open-viz-module.type-waffle-chart {
-  .cove-component__content:not(.component--has-background, .component--hideBackgroundColor) {
+.cove-visualization.type-waffle-chart {
+  .cove-visualization__body:not(.component--has-background, .component--hide-background-color) {
     background-color: white;
   }
 
-  &.is-editor .cove-component {
-    padding-left: 350px;
-  }
-
-  &.is-editor .cove-editor__content .cove-component {
-    padding-left: 0px;
-  }
 }