@cdc/waffle-chart 4.25.11 → 4.26.1

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()

package/src/_stories/WaffleChart.stories.tsx

@@ -189,4 +189,32 @@ export const Gauge: Story = {
   )
 }
 
+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.'
+      }
+    }
+  }
+}
+
+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.'
+      }
+    }
+  }
+}
+
 export default meta

package/src/components/EditorPanel.jsx

@@ -1,10 +1,9 @@
-import React, { useState, useEffect, memo, useContext } from 'react'
-import cloneConfig from '@cdc/core/helpers/cloneConfig'
+import React, { useEffect, memo, useContext } from 'react'
 import _ from 'lodash'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 import ConfigContext from '../ConfigContext'
 
+import { EditorPanel as BaseEditorPanel } from '@cdc/core/components/EditorPanel/EditorPanel'
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 import Accordion from '@cdc/core/components/ui/Accordion'
 import Button from '@cdc/core/components/elements/Button'
@@ -12,8 +11,9 @@ import Icon from '@cdc/core/components/ui/Icon'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
-import Layout from '@cdc/core/components/Layout'
-import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
+import { useFilterManagement } from '@cdc/core/hooks/useFilterManagement'
+import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
+import { VisualSection } from '@cdc/core/components/EditorPanel/sections/VisualSection'
 
 import '@cdc/core/styles/v2/components/editor.scss'
 import WarningImage from '../images/warning.svg'
@@ -23,27 +23,16 @@ import { DATA_OPERATORS, DATA_FUNCTIONS } from '../CdcWaffleChart'
 const EditorPanel = memo(props => {
   const { config, updateConfig, loading, data, setParentConfig, isDashboard } = useContext(ConfigContext)
   const { showConfigConfirm } = props
-  const [displayPanel, setDisplayPanel] = useState(true)
   const inputSelectStyle = condition => (condition ? { backgroundColor: '#ffd2d2', color: '#d8000c' } : {})
 
   const updateField = updateFieldFactory(config, updateConfig, true)
 
-  useEffect(() => {
-    // Pass up to Editor if needed
-    if (setParentConfig) {
-      const newConfig = convertStateToConfig()
-      setParentConfig(newConfig)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config])
-
-  useEffect(() => {
-    if (!showConfigConfirm) {
-      let newConfig = { ...config }
-      delete newConfig.newViz
-      updateConfig(newConfig)
-    }
-  }, [])
+  // Filters
+  const { addNewFilter, removeFilter, updateFilterProp, getFilterColumnValues } = useFilterManagement(
+    config,
+    updateConfig,
+    data
+  )
 
   useEffect(() => {
     //Verify comparate data type
@@ -61,70 +50,15 @@ const EditorPanel = memo(props => {
     }
   }, [config.dataConditionalOperator, config.dataConditionalComparate])
 
-  const onBackClick = () => {
-    setDisplayPanel(!displayPanel)
-    updateConfig({
-      ...config,
-      showEditorPanel: !displayPanel
-    })
-
-    // if (isDashboard) {
-    //   updateConfig({ ...config, editing: false })
-    // } else {
-    //   setDisplayPanel(!displayPanel)
-    // }
-  }
-
-  const convertStateToConfig = () => {
-    let strippedState = cloneConfig(config)
-    delete strippedState.newViz
-    delete strippedState.runtime
-
-    return strippedState
-  }
-
-  const addNewFilter = () => {
-    let filters = config.filters ? [...config.filters] : []
-    filters.push({ values: [] })
-    updateConfig({ ...config, filters })
-  }
-
-  const removeFilter = index => {
-    let filters = [...config.filters]
-    filters.splice(index, 1)
-    updateConfig({ ...config, filters })
-  }
-
-  const updateFilterProp = (name, index, value) => {
-    let filters = [...config.filters]
-    filters[index][name] = value
-    updateConfig({ ...config, filters })
-  }
-
-  const getColumns = (filter = true) => {
-    let columns = {}
-
-    data.map(row => Object.keys(row).forEach(columnName => (columns[columnName] = true)))
-
-    return Object.keys(columns)
-  }
-
-  const getFilterColumnValues = index => {
-    let filterDataOptions = []
-    const filterColumnName = config.filters[index].columnName
-    if (data && filterColumnName) {
-      data.forEach(function (row) {
-        if (undefined !== row[filterColumnName] && -1 === filterDataOptions.indexOf(row[filterColumnName])) {
-          filterDataOptions.push(row[filterColumnName])
-        }
-      })
-      filterDataOptions.sort()
-    }
-    return filterDataOptions
-  }
+  // Extract column names from data with memoization (replaces getColumns)
+  const columns = useDataColumns(data)
   //visualizationType
 
-  const approvedWaffleChartOptions = ['Waffle', 'Gauge']
+  const approvedWaffleChartOptions = [
+    { value: 'Waffle', label: 'Waffle' },
+    { value: 'TP5 Waffle', label: 'TP5 Style Waffle' },
+    { value: 'Gauge', label: 'Gauge' }
+  ]
 
   const editorContent = (
     <Accordion>
@@ -210,7 +144,7 @@ const EditorPanel = memo(props => {
               label='Data Column'
               updateField={updateField}
               initial='Select'
-              options={getColumns()}
+              options={columns}
             />
           </div>
 
@@ -237,7 +171,7 @@ const EditorPanel = memo(props => {
                   fieldName='dataConditionalColumn'
                   updateField={updateField}
                   initial='Select'
-                  options={getColumns()}
+                  options={columns}
                 />
               </div>
               <div className='cove-accordion__panel-col'>
@@ -297,7 +231,7 @@ const EditorPanel = memo(props => {
                 label='Data Column'
                 updateField={updateField}
                 initial='Select'
-                options={getColumns()}
+                options={columns}
               />
               <Select
                 value={config.dataDenomFunction || ''}
@@ -387,7 +321,7 @@ const EditorPanel = memo(props => {
                 <Select
                   label='Column'
                   value={filter.columnName || ''}
-                  options={getColumns()}
+                  options={columns}
                   initial='- Select Option -'
                   onChange={e => {
                     updateFilterProp('columnName', index, e.target.value)
@@ -410,7 +344,7 @@ const EditorPanel = memo(props => {
           Add Filter
         </Button>
       </Accordion.Section>
-      <Accordion.Section title='Visual' className='panel-visual'>
+      <Accordion.Section title='Chart Settings'>
         {config.visualizationType !== 'Gauge' && (
           <Select
             value={config.shape}
@@ -420,133 +354,110 @@ const EditorPanel = memo(props => {
             options={['circle', 'square', 'person']}
           />
         )}
-        {config.visualizationType !== 'Gauge' && (
-          <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 !== '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}
+                />
+              </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'>
-          {config.visualizationType !== 'Gauge' && (
-            <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>
-        </div>
-
-        <Select
-          value={config.overallFontSize}
-          fieldName='overallFontSize'
-          label='Overall Font Size'
-          updateField={updateField}
-          options={['small', 'medium', 'large']}
-        />
-
-        <HeaderThemeSelector
-          selectedTheme={config.theme}
-          onThemeSelect={theme => updateConfig({ ...config, theme })}
-          label='Theme'
-        />
+          </>
+        )}
+      </Accordion.Section>
 
-        <div className='cove-accordion__panel-section reverse-labels'>
-          <CheckBox
-            value={config.visual.border}
-            section='visual'
-            fieldName='border'
-            label='Display Border'
-            updateField={updateField}
-          />
-          <CheckBox
-            value={config.visual.borderColorTheme}
-            section='visual'
-            fieldName='borderColorTheme'
-            label='Use theme border color'
-            updateField={updateField}
-          />
-          <CheckBox
-            value={config.visual.accent}
-            section='visual'
-            fieldName='accent'
-            label='Use Accent Style'
-            updateField={updateField}
-          />
+      {/* Visual section for TP5 style */}
+      {config.visualizationType === 'TP5 Waffle' && (
+        <Accordion.Section title='Visual'>
           <CheckBox
-            value={config.visual.background}
+            value={config.visual?.whiteBackground}
             section='visual'
-            fieldName='background'
-            label='Use Theme Background Color'
+            fieldName='whiteBackground'
+            label='Use White Background Style'
             updateField={updateField}
           />
-          <CheckBox
-            value={config.visual.hideBackgroundColor}
-            section='visual'
-            fieldName='hideBackgroundColor'
-            label='Hide Background Color'
+        </Accordion.Section>
+      )}
+
+      {/* Visual section for other styles */}
+      {config.visualizationType !== 'TP5 Waffle' && (
+        <Accordion.Section title='Visual'>
+          <VisualSection
+            config={config}
             updateField={updateField}
+            updateConfig={updateConfig}
+            beforeCheckboxes={
+              <Select
+                value={config.overallFontSize}
+                fieldName='overallFontSize'
+                label='Overall Font Size'
+                updateField={updateField}
+                options={['small', 'medium', 'large']}
+              />
+            }
           />
-        </div>
-      </Accordion.Section>
+        </Accordion.Section>
+      )}
     </Accordion>
   )
 
-  if (loading) return null
-
   return (
-    <ErrorBoundary component='EditorPanel'>
-      <>
-        <Layout.Sidebar
-          displayPanel={displayPanel}
-          onBackClick={onBackClick}
-          isDashboard={isDashboard}
-          title='Configure Waffle Chart'
-          showEditorPanel={displayPanel}
-        >
-          <>
-            {editorContent}
-            <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
-          </>
-        </Layout.Sidebar>
-        {props.children}
-      </>
-    </ErrorBoundary>
+    <BaseEditorPanel
+      config={config}
+      updateConfig={updateConfig}
+      loading={loading}
+      setParentConfig={setParentConfig}
+      isDashboard={isDashboard}
+      title='Configure Waffle Chart'
+    >
+      {({ convertStateToConfig }) => (
+        <>
+          {editorContent}
+          <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
+        </>
+      )}
+    </BaseEditorPanel>
   )
 })
 

package/src/images/callout-flag.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="481.000000pt" height="563.000000pt" viewBox="0 0 481.000000 563.000000" preserveAspectRatio="xMidYMid meet">
+  <g transform="translate(0.000000,563.000000) scale(0.100000,-0.100000)" fill="#2c7a99" stroke="none">
+    <path d="M890 5514 c-161 -43 -308 -201 -354 -381 -14 -55 -16 -314 -16 -2527 0 -2015 2 -2466 13 -2466 7 0 51 14 97 30 47 17 92 33 100 35 8 2 16 4 18 5 1 2 7 4 12 5 6 1 11 3 13 4 1 2 13 4 26 7 14 2 30 9 38 15 7 6 13 8 13 4 0 -4 7 -2 15 5 8 7 15 10 15 6 0 -3 17 1 38 10 49 21 856 293 905 305 21 5 45 13 55 19 9 5 40 16 67 24 28 8 162 52 299 99 l249 85 151 -53 c83 -29 253 -90 379 -134 264 -94 556 -198 974 -346 164 -58 308 -110 321 -115 13 -6 27 -10 33 -10 11 0 8 4951 -4 4994 -22 80 -84 183 -152 252 -75 76 -141 114 -233 133 -38 8 -477 11 -1535 10 -1268 0 -1490 -3 -1537 -15z m2687 -1570 c49 -31 82 -134 64 -201 -10 -37 -41 -64 -422 -369 -227 -181 -430 -341 -452 -356 -43 -30 -84 -35 -136 -17 -17 6 -156 107 -309 224 l-277 213 -40 -31 c-50 -39 -318 -259 -325 -267 -3 -3 -27 -24 -55 -45 -27 -22 -55 -44 -61 -50 -86 -77 -253 -202 -277 -207 -20 -4 -53 -1 -84 8 -69 19 -105 64 -111 140 -6 70 8 100 69 149 105 84 134 107 168 133 19 15 92 74 164 132 71 58 144 116 162 130 86 68 114 90 187 150 124 102 156 120 206 120 23 0 57 -7 75 -16 18 -9 145 -103 282 -209 283 -217 293 -224 303 -210 4 6 42 39 86 74 43 35 88 71 100 81 31 27 153 127 231 190 37 30 111 91 164 135 142 119 217 145 288 99z m-1431 -983 c60 -44 59 -29 62 -601 3 -596 4 -589 -70 -638 -76 -49 -171 -29 -228 50 l-30 41 0 526 c0 591 -3 569 75 623 35 25 48 28 100 25 44 -2 69 -9 91 -26z m1252 15 c37 -19 67 -55 81 -95 8 -25 10 -183 9 -555 -3 -579 -1 -555 -71 -603 -67 -45 -144 -35 -211 27 l-41 39 -3 543 -2 544 23 35 c46 68 149 99 215 65z m-610 -343 c71 -57 71 -57 71 -448 0 -322 -1 -353 -19 -392 -27 -60 -83 -95 -155 -95 -63 -1 -95 16 -132 72 -23 33 -23 36 -23 407 0 406 -1 401 57 455 34 32 54 38 116 34 35 -2 57 -11 85 -33z m-1313 -142 c54 -24 92 -71 100 -124 4 -23 5 -159 3 -302 -3 -293 -3 -293 -82 -343 -66 -41 -160 -30 -207 24 -34 40 -39 84 -39 361 0 303 3 322 61 366 53 39 105 45 164 18z"/>
+  </g>
+</svg>

package/src/scss/waffle-chart.scss

@@ -1,6 +1,5 @@
 // Remove custom theme mixin - use core styles instead
 
-
 .type-dashboard .type-waffle-chart .cove-component__content {
   padding-top: 0;
 }
@@ -19,7 +18,7 @@
       justify-items: center;
       align-items: flex-start;
 
-      &>svg {
+      & > svg {
         margin: 0.7em 0;
       }
     }
@@ -97,7 +96,6 @@
 }
 
 @at-root {
-
   .cove-waffle-chart.font-small,
   .cove-gauge-chart.font-small #{&} {
     .cove-waffle-chart__data--primary {
@@ -130,4 +128,88 @@
       font-size: 20px;
     }
   }
-}
+}
+
+// TP5 Style for Waffle Chart
+.type-waffle-chart {
+  &.waffle__style--tp5 {
+    .cove-component__content {
+      background: none !important;
+    }
+
+    .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;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .cdc-callout__icon {
+      position: absolute;
+      font-family: var(--icons-cdc);
+      top: -0.65rem;
+      right: 1rem;
+      font-size: 2rem;
+      color: var(--colors-cyan-60v);
+    }
+
+    .cdc-callout__flag {
+      position: absolute;
+      top: -0.25rem;
+      right: 1.08rem;
+      width: 1.85rem;
+      height: auto;
+    }
+
+    .cove-waffle-chart {
+      padding: 0;
+      row-gap: 1rem;
+    }
+
+    .cove-waffle-chart__chart {
+      margin-bottom: 0;
+    }
+
+    .cove-waffle-chart__data {
+      margin-bottom: 0;
+      align-content: flex-start;
+    }
+
+    .cdc-callout__heading {
+      font-family: var(--fonts-nunito) !important;
+      width: 100%;
+      font-size: 1.1rem;
+    }
+
+    .cove-waffle-chart__data--text {
+      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);
+      font-weight: 400;
+    }
+
+    // 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%);
+      }
+    }
+  }
+}

package/src/test/CdcWaffleChart.test.jsx

@@ -7,5 +7,5 @@ describe('Waffle Chart', () => {
     const pkgDir = path.join(__dirname, '..')
     const result = testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
-  })
+  }, 300000)
 })