@cdc/waffle-chart 4.26.1 → 4.26.2

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

@@ -729,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,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

@@ -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'
@@ -263,7 +255,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 +336,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 +345,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 +413,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}

package/src/scss/waffle-chart.scss

@@ -18,7 +18,7 @@
       justify-items: center;
       align-items: flex-start;
 
-      & > svg {
+      &>svg {
         margin: 0.7em 0;
       }
     }
@@ -96,6 +96,7 @@
 }
 
 @at-root {
+
   .cove-waffle-chart.font-small,
   .cove-gauge-chart.font-small #{&} {
     .cove-waffle-chart__data--primary {
@@ -135,6 +136,7 @@
   &.waffle__style--tp5 {
     .cove-component__content {
       background: none !important;
+      container-type: inline-size;
     }
 
     .cdc-callout {
@@ -167,8 +169,21 @@
     }
 
     .cove-waffle-chart {
+      align-items: flex-start;
       padding: 0;
       row-gap: 1rem;
+      flex-wrap: nowrap;
+    }
+
+    // Container query: wrap when width is less than 576px
+    @container (max-width: 576px) {
+      .cove-waffle-chart {
+        flex-wrap: wrap;
+
+        .cove-waffle-chart__chart {
+          width: 100% !important;
+        }
+      }
     }
 
     .cove-waffle-chart__chart {
@@ -190,9 +205,11 @@
       margin-top: 0.5rem;
       font-size: 1rem;
     }
+
     .cove-waffle-chart__subtext {
       font-size: 1rem;
     }
+
     .cove-waffle-chart__data--primary {
       font-size: 2rem;
       color: var(--colors-cyan-60v);
@@ -212,4 +229,120 @@
       }
     }
   }
+
+  // TP5 Style for Gauge Chart
+  &.gauge__style--tp5 {
+    .cove-component__content {
+      background: none !important;
+      container-type: inline-size;
+    }
+
+    .cdc-callout {
+      box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+      margin: 0 !important;
+      padding: 1.5rem;
+      background-color: var(--colors-cyan-10, #eff9fa);
+      border: 1px solid var(--colors-cyan-15, #dff2f6);
+      position: relative;
+      border-radius: 0.25rem;
+      gap: 0.5rem;
+    }
+
+    .cdc-callout__flag {
+      position: absolute;
+      top: -0.25rem;
+      right: 1.08rem;
+      width: 1.85rem;
+      height: auto;
+    }
+
+    .cdc-callout__heading {
+      font-family: var(--fonts-nunito) !important;
+      width: 100%;
+      font-size: 1.1rem;
+    }
+
+    .cove-gauge-chart {
+      padding: 0;
+    }
+
+    .cove-gauge-chart__chart {
+      width: 100%;
+    }
+
+    .cove-gauge-chart__chart>svg {
+      display: block;
+      width: 100%;
+    }
+
+    .cove-gauge-chart__body {
+      flex-wrap: nowrap;
+      gap: 1rem;
+      row-gap: 0.5rem;
+      margin-bottom: 0.5rem;
+      align-items: flex-start; // Align to top instead of center when content varies
+    }
+
+    // Container query: wrap when width is less than 576px
+    @container (max-width: 576px) {
+      .cove-gauge-chart__body {
+        flex-wrap: wrap;
+
+        .cove-gauge-chart__value-section {
+          width: 100%;
+        }
+      }
+    }
+
+    .cove-gauge-chart__value-section {
+      width: auto;
+      padding-top: 1px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+    }
+
+    .cove-gauge-chart__content {
+      font-size: 1rem;
+      min-height: 1rem; // Ensure minimum height even when empty
+    }
+
+    .cove-waffle-chart__data--primary {
+      font-size: 2rem;
+      color: var(--colors-cyan-60v);
+      font-weight: 400;
+      line-height: 1;
+    }
+
+    .cove-waffle-chart__data--text {
+      margin-top: 0;
+      font-size: 1rem;
+    }
+
+    .cove-waffle-chart__subtext {
+      font-size: 1rem;
+      margin-top: auto;
+    }
+
+    // White background variant (when "Use White Background Style" is checked)
+    &.white-background-style {
+      .cove-component__content {
+        background: white !important;
+      }
+
+      .cdc-callout {
+        background: transparent !important;
+        border: 1px solid #009ec1 !important;
+        box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+      }
+    }
+  }
 }
+
+// Center gauge value when there's no message (standalone only, not in dashboard rows)
+.type-waffle-chart.gauge__style--tp5:not(.row *) {
+  .cove-gauge-chart__body.d-flex.justify-content-center {
+    justify-content: center;
+    width: 100%;
+  }
+}

package/src/store/chart.reducer.ts

@@ -3,7 +3,7 @@ import ChartActions from './chart.actions'
 
 type ChartState = {
   config?: Config
-  container: any
+  container: HTMLElement | null
   coveLoadedHasRan: boolean
   loading: boolean
   preview: boolean

package/src/types/Config.ts

@@ -40,6 +40,6 @@ export type Config = {
     whiteBackground?: boolean
   }
   visualizationSubType: 'linear' | ''
-  visualizationType: 'Gauge' | 'Waffle' | 'TP5 Waffle'
+  visualizationType: 'Gauge' | 'Waffle' | 'TP5 Waffle' | 'TP5 Gauge'
   version: Version
 }