@cdc/core 4.26.1 → 4.26.3

package/helpers/tests/number.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { formatNumber } from '../cove/number'
+
+const baseConfig = {
+  locale: 'en-US',
+  visualizationType: 'Bar',
+  yAxis: {},
+  dataFormat: {
+    abbreviated: false,
+    bottomAbbreviated: false,
+    bottomPrefix: '',
+    bottomRoundTo: 0,
+    bottomSuffix: '',
+    bottomComas: false,
+    commas: true,
+    prefix: '$',
+    preserveOriginalDecimals: false,
+    rightPrefix: 'R$',
+    rightRoundTo: 2,
+    rightSuffix: '%',
+    rightCommas: true,
+    roundTo: 1,
+    suffix: ''
+  }
+}
+
+describe('formatNumber', () => {
+  it('applies explicit right-axis column formatting overrides', () => {
+    expect(
+      formatNumber(1234.5, 'right', false, baseConfig as any, {
+        addColPrefix: '',
+        addColSuffix: ' units',
+        addColRoundTo: 0,
+        addColCommas: false
+      })
+    ).toBe('1235 units')
+  })
+
+  it('falls back to configured right-axis formatting when no override is present', () => {
+    expect(formatNumber(1234.5, 'right', false, baseConfig as any)).toBe('R$1,234.50%')
+  })
+})

package/helpers/tests/prepareScreenshot.test.ts

@@ -21,7 +21,7 @@ describe('prepareClonedElements', () => {
         <div class="dfe-section">
           <h2>Title</h2>
           <p>Text</p>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Viz Content</div>
+          <div class="cove-visualization" data-download-id="viz1">Viz Content</div>
         </div>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -39,7 +39,7 @@ describe('prepareClonedElements', () => {
         <div class="dfe-section">
           <h2>Perfect Title</h2>
           <p>Perfect description</p>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
         </div>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -59,7 +59,7 @@ describe('prepareClonedElements', () => {
         <div class="dfe-section">
           <h2>Emergency Department Visits</h2>
           <p>Weekly percent of total visits.</p>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
         </div>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -78,7 +78,7 @@ describe('prepareClonedElements', () => {
         <div class="dfe-section">
           <h3>Emergency Department Visits by Age</h3>
           <p>Weekly percent of total visits.</p>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
         </div>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -98,7 +98,7 @@ describe('prepareClonedElements', () => {
           <h2>By Age</h2>
           <h3>Emergency Department Visits by Age</h3>
           <p>Weekly percent of total visits.</p>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
         </div>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -118,7 +118,7 @@ describe('prepareClonedElements', () => {
           <p>First paragraph.</p>
           <p>Second paragraph.</p>
           <p>Third paragraph.</p>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
         </div>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -138,8 +138,8 @@ describe('prepareClonedElements', () => {
       const container = createDOM(`
         <div class="dfe-section">
           <h2>Title</h2>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart 1</div>
-          <div class="cdc-open-viz-module" data-download-id="viz2">Chart 2</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart 1</div>
+          <div class="cove-visualization" data-download-id="viz2">Chart 2</div>
         </div>
       `)
       const viz2 = container.querySelector('[data-download-id="viz2"]') as HTMLElement
@@ -154,9 +154,9 @@ describe('prepareClonedElements', () => {
       const container = createDOM(`
         <div class="dfe-section">
           <h2>First Chart</h2>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart 1</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart 1</div>
           <h2>Second Chart</h2>
-          <div class="cdc-open-viz-module" data-download-id="viz2">Chart 2</div>
+          <div class="cove-visualization" data-download-id="viz2">Chart 2</div>
         </div>
       `)
       const viz2 = container.querySelector('[data-download-id="viz2"]') as HTMLElement
@@ -172,11 +172,11 @@ describe('prepareClonedElements', () => {
     it('should ignore heading inside another viz', () => {
       const container = createDOM(`
         <div class="dfe-section">
-          <div class="cdc-open-viz-module" data-download-id="viz1">
+          <div class="cove-visualization" data-download-id="viz1">
             <h2>Title Inside Viz1</h2>
             <div>Chart 1</div>
           </div>
-          <div class="cdc-open-viz-module" data-download-id="viz2">Chart 2</div>
+          <div class="cove-visualization" data-download-id="viz2">Chart 2</div>
         </div>
       `)
       const viz2 = container.querySelector('[data-download-id="viz2"]') as HTMLElement
@@ -191,9 +191,9 @@ describe('prepareClonedElements', () => {
       const container = createDOM(`
         <div class="dfe-section">
           <h2>Title</h2>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart 1</div>
-          <div class="cdc-open-viz-module" data-download-id="viz2">Chart 2</div>
-          <div class="cdc-open-viz-module" data-download-id="viz3">Chart 3</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart 1</div>
+          <div class="cove-visualization" data-download-id="viz2">Chart 2</div>
+          <div class="cove-visualization" data-download-id="viz3">Chart 3</div>
         </div>
       `)
       const viz3 = container.querySelector('[data-download-id="viz3"]') as HTMLElement
@@ -207,11 +207,11 @@ describe('prepareClonedElements', () => {
     it('should prefer H3 over H2 between two vizs', () => {
       const container = createDOM(`
         <div class="dfe-section">
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart 1</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart 1</div>
           <h2>Section</h2>
           <h3>Subsection</h3>
           <p>Description</p>
-          <div class="cdc-open-viz-module" data-download-id="viz2">Chart 2</div>
+          <div class="cove-visualization" data-download-id="viz2">Chart 2</div>
         </div>
       `)
       const viz2 = container.querySelector('[data-download-id="viz2"]') as HTMLElement
@@ -231,10 +231,10 @@ describe('prepareClonedElements', () => {
           <div class="dfe-section">
             <h2>Previous Section</h2>
             <p>Previous content</p>
-            <div class="cdc-open-viz-module" data-download-id="viz0">Other viz</div>
+            <div class="cove-visualization" data-download-id="viz0">Other viz</div>
           </div>
           <div class="dfe-section">
-            <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+            <div class="cove-visualization" data-download-id="viz1">Chart</div>
           </div>
         </div>
       `)
@@ -253,7 +253,7 @@ describe('prepareClonedElements', () => {
         <div class="some-container">
           <h2>Title</h2>
           <p>Description</p>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
         </div>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -272,7 +272,7 @@ describe('prepareClonedElements', () => {
         <div class="outer-container">
           <h2>Title Above Section</h2>
           <section>
-            <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+            <div class="cove-visualization" data-download-id="viz1">Chart</div>
           </section>
         </div>
       `)
@@ -289,7 +289,7 @@ describe('prepareClonedElements', () => {
         <div class="dfe-section">
           <h2>Outer Title</h2>
           <section>
-            <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+            <div class="cove-visualization" data-download-id="viz1">Chart</div>
           </section>
         </div>
       `)
@@ -307,7 +307,7 @@ describe('prepareClonedElements', () => {
         <section>
           <h2>Section Title</h2>
           <p>Description</p>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
         </section>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -325,7 +325,7 @@ describe('prepareClonedElements', () => {
       const container = createDOM(`
         <div class="dfe-section">
           <p>Some paragraph without heading</p>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
         </div>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -341,7 +341,7 @@ describe('prepareClonedElements', () => {
       const container = createDOM(`
         <div class="dfe-section">
           <h2>Title</h2>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
           <p>Content after viz should not be included</p>
         </div>
       `)
@@ -358,7 +358,7 @@ describe('prepareClonedElements', () => {
       const container = createDOM(`
         <div class="dfe-section">
           <h2>Direct H2 Child</h2>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
         </div>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -375,7 +375,7 @@ describe('prepareClonedElements', () => {
           <div class="heading-wrapper">
             <h2>Nested H2</h2>
           </div>
-          <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+          <div class="cove-visualization" data-download-id="viz1">Chart</div>
         </div>
       `)
       const viz = container.querySelector('[data-download-id="viz1"]') as HTMLElement
@@ -394,7 +394,7 @@ describe('prepareClonedElements', () => {
           <p>Description</p>
           <div class="outer-wrapper">
             <div class="inner-wrapper">
-              <div class="cdc-open-viz-module" data-download-id="viz1">Chart</div>
+              <div class="cove-visualization" data-download-id="viz1">Chart</div>
             </div>
           </div>
         </div>

package/helpers/tests/testStandaloneBuild.ts

@@ -1,12 +1,11 @@
-import fs from 'fs'
-import path from 'path'
-import { execSync } from 'child_process'
-import os from 'os'
-import { fileURLToPath } from 'url'
+import fs from 'node:fs'
+import path from 'node:path'
+import { exec } from 'node:child_process'
+import os from 'node:os'
+import { promisify } from 'node:util'
+
+const execAsync = promisify(exec)
 
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-const packagesDir = path.join(__dirname, '..', 'packages')
 
 function copyDirSync(src, dest) {
   fs.mkdirSync(dest, { recursive: true })
@@ -23,39 +22,50 @@ function copyDirSync(src, dest) {
 
 // Tests if a package can be built in isolation
 // See DOCS/PACKAGE_DEPENDENCIES.md for more details
-export function testStandaloneBuild(pkgDir) {
+export async function testStandaloneBuild(pkgDir) {
   pkgDir = pkgDir.replace('/src', '')
   const pkgName = pkgDir.split('/')[pkgDir.split('/').length - 1]
   const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), `cdc-open-viz-${pkgName}-`))
   copyDirSync(pkgDir, tmpDir)
 
-  let coreTarballPath = null
+  let tarballDir = null
 
   try {
-    execSync('npm install --include=dev', { cwd: tmpDir })
+    await execAsync('npm install --include=dev', { cwd: tmpDir })
 
-    // Pack core into tmp directory with unique name then install from package tarball
-    const coreDir = path.join(pkgDir, '..', 'core')
+    // Pack all local @cdc/* packages and install them to ensure version consistency.
+    // This prevents mismatches between npm-published packages and the current local source
+    // (e.g. a published @cdc/map referencing a path in @cdc/core that has since changed).
+    const packagesDir = path.join(pkgDir, '..')
     const uniqueId = `${Date.now()}-${Math.random().toString(36).substring(7)}`
-    const uniqueTarballDir = fs.mkdtempSync(path.join(os.tmpdir(), `cdc-pack-${uniqueId}-`))
-    const packOutput = execSync(`npm pack --pack-destination="${uniqueTarballDir}"`, {
-      cwd: coreDir,
-      encoding: 'utf-8'
-    })
-    const tarballName = packOutput.trim().split('\n').pop()
-    coreTarballPath = path.join(uniqueTarballDir, tarballName)
-    execSync(`npm install "${coreTarballPath}"`, { cwd: tmpDir, stdio: 'inherit' })
-
-    execSync('npm run build', { cwd: tmpDir })
+    tarballDir = fs.mkdtempSync(path.join(os.tmpdir(), `cdc-pack-${uniqueId}-`))
+
+    const tarballs: string[] = []
+    for (const entry of fs.readdirSync(packagesDir, { withFileTypes: true })) {
+      if (!entry.isDirectory()) continue
+      const localPkgDir = path.join(packagesDir, entry.name)
+      const pkgJsonPath = path.join(localPkgDir, 'package.json')
+      if (!fs.existsSync(pkgJsonPath)) continue
+      const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf-8'))
+      if (!pkgJson.name?.startsWith('@cdc/')) continue
+      const { stdout: packOutput } = await execAsync(`npm pack --pack-destination="${tarballDir}"`, {
+        cwd: localPkgDir
+      })
+      const tarballName = packOutput.trim().split('\n').pop()
+      tarballs.push(path.join(tarballDir, tarballName))
+    }
+
+    await execAsync(`npm install ${tarballs.map(t => `"${t}"`).join(' ')}`, { cwd: tmpDir })
+
+    await execAsync('npm run build', { cwd: tmpDir })
     return true
   } catch (err) {
     console.error(`❌ Isolated build for ${pkgName} package failed`)
     console.error(err.message)
     return false
   } finally {
-    if (coreTarballPath && fs.existsSync(coreTarballPath)) {
-      const uniqueTarballDir = path.dirname(coreTarballPath)
-      fs.rmSync(uniqueTarballDir, { recursive: true, force: true })
+    if (tarballDir && fs.existsSync(tarballDir)) {
+      fs.rmSync(tarballDir, { recursive: true, force: true })
     }
     fs.rmSync(tmpDir, { recursive: true, force: true })
   }

package/helpers/tests/useDataVizClasses.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import useDataVizClasses from '../useDataVizClasses'
+
+describe('useDataVizClasses', () => {
+  it('maps supported visual settings to wrapper classes for non-chart visualizations', () => {
+    const { contentClasses } = useDataVizClasses({
+      type: 'data-bite',
+      showTitle: true,
+      title: 'Example',
+      visualizationType: 'Bar',
+      visual: {
+        border: false,
+        borderColorTheme: true,
+        accent: true,
+        background: true,
+        hideBackgroundColor: true,
+        tp5Treatment: true
+      }
+    })
+
+    expect(contentClasses).not.toContain('component--has-legacy-border')
+    expect(contentClasses).toContain('component--has-border-color-theme')
+    expect(contentClasses).toContain('component--has-accent')
+    expect(contentClasses).toContain('component--has-background')
+    expect(contentClasses).toContain('component--hide-background-color')
+    expect(contentClasses).toContain('component--tp5-treatment')
+    expect(contentClasses).not.toContain('component--tp5-treatment-background')
+  })
+
+  it('does not add background wrapper classes for chart and map visualizations', () => {
+    const { contentClasses: chartClasses } = useDataVizClasses({
+      type: 'chart',
+      visualizationType: 'Bar',
+      visual: {
+        background: true,
+        hideBackgroundColor: true
+      }
+    })
+
+    const { contentClasses: mapClasses } = useDataVizClasses({
+      type: 'map',
+      visual: {
+        background: true,
+        hideBackgroundColor: true
+      }
+    })
+
+    expect(chartClasses).not.toContain('component--has-background')
+    expect(chartClasses).not.toContain('component--hide-background-color')
+    expect(mapClasses).not.toContain('component--has-background')
+    expect(mapClasses).not.toContain('component--hide-background-color')
+  })
+
+  it('adds an explicit class when the legacy border checkbox is enabled', () => {
+    const { contentClasses } = useDataVizClasses({
+      type: 'chart',
+      visualizationType: 'Bar',
+      visual: {
+        border: true
+      }
+    })
+
+    expect(contentClasses).toContain('component--has-legacy-border')
+    expect(contentClasses).not.toContain('no-borders')
+  })
+})

package/helpers/tests/visualizationWrapperUsage.test.ts

@@ -0,0 +1,57 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+const repoRoot = path.resolve(__dirname, '../../../..')
+
+const wrapperEntrypoints = [
+  'packages/chart/src/CdcChartComponent.tsx',
+  'packages/map/src/CdcMapComponent.tsx',
+  'packages/data-bite/src/CdcDataBite.tsx',
+  'packages/data-table/src/CdcDataTable.tsx',
+  'packages/filtered-text/src/CdcFilteredText.jsx',
+  'packages/waffle-chart/src/CdcWaffleChart.tsx',
+  'packages/markup-include/src/CdcMarkupInclude.tsx',
+  'packages/dashboard/src/CdcDashboardComponent.tsx'
+]
+
+const visualizationContentEntrypoints = [
+  'packages/data-table/src/CdcDataTable.tsx',
+  'packages/filtered-text/src/CdcFilteredText.jsx',
+  'packages/markup-include/src/CdcMarkupInclude.tsx',
+  'packages/data-bite/src/CdcDataBite.tsx',
+  'packages/waffle-chart/src/CdcWaffleChart.tsx',
+  'packages/chart/src/CdcChartComponent.tsx',
+  'packages/map/src/CdcMapComponent.tsx'
+]
+
+describe('visualization wrapper usage', () => {
+  it.each(wrapperEntrypoints)('%s uses the shared VisualizationContainer shell', filePath => {
+    const source = fs.readFileSync(path.join(repoRoot, filePath), 'utf8')
+
+    expect(source).toContain('VisualizationContainer')
+    expect(source).toContain('<VisualizationContainer')
+  })
+
+  it.each(visualizationContentEntrypoints)('%s uses the shared VisualizationContent inner shell', filePath => {
+    const source = fs.readFileSync(path.join(repoRoot, filePath), 'utf8')
+
+    expect(source).toContain('VisualizationContent')
+    expect(source).toContain('<VisualizationContent')
+  })
+
+  it.each(visualizationContentEntrypoints)('%s does not opt into legacy wrapper merge flags', filePath => {
+    const source = fs.readFileSync(path.join(repoRoot, filePath), 'utf8')
+
+    expect(source).not.toContain('mergeInnerBody')
+    expect(source).not.toContain('mergeBodyWrap')
+    expect(source).not.toContain('wrapBody=')
+  })
+
+  it('packages/map/src/CdcMapComponent.tsx uses the shared VisualizationContent header slot for the title', () => {
+    const source = fs.readFileSync(path.join(repoRoot, 'packages/map/src/CdcMapComponent.tsx'), 'utf8')
+
+    expect(source).toContain('header={')
+    expect(source).toContain("<Title")
+  })
+})

package/helpers/useDataVizClasses.ts

@@ -2,6 +2,7 @@ import { isBelowBreakpoint } from './viewports'
 
 export default function useDataVizClasses(config, viewport = null) {
   const {
+    type,
     legend,
     lineDatapointStyle,
     showTitle,
@@ -23,8 +24,8 @@ export default function useDataVizClasses(config, viewport = null) {
     lineDatapointClass = ' chart-line--always'
   }
 
-  let innerContainerClasses = ['cove-component__inner']
-  let contentClasses = ['cove-component__content']
+  let innerContainerClasses = []
+  let contentClasses = []
 
   if (visualizationType === 'Spark Line' || visualizationType === 'chart') {
     if (title && showTitle) contentClasses.push('component--has-title')
@@ -32,22 +33,27 @@ export default function useDataVizClasses(config, viewport = null) {
 
   showTitle && contentClasses.push('component--has-title')
   title &&
+    showTitle &&
     visualizationType !== 'chart' &&
     visualizationType !== 'Spark Line' &&
     contentClasses.push('component--has-title')
   subtext && innerContainerClasses.push('component--has-subtext')
   biteStyle && innerContainerClasses.push(`bite__style--${biteStyle}`)
-  general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
+  general?.isCompactStyle && innerContainerClasses.push(`component--is-compact-style`)
 
+  visual?.border && contentClasses.push('component--has-legacy-border')
   !visual?.border && contentClasses.push('no-borders')
   visualizationType === 'Spark Line' && contentClasses.push('sparkline')
-  visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme')
+  visual?.borderColorTheme && contentClasses.push('component--has-border-color-theme')
   visual?.accent && contentClasses.push('component--has-accent')
-  visual?.background && contentClasses.push('component--has-background')
-  visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor')
+  if (type !== 'chart' && type !== 'map') {
+    visual?.background && contentClasses.push('component--has-background')
+    visual?.hideBackgroundColor && contentClasses.push('component--hide-background-color')
+  }
+  visual?.tp5Treatment && contentClasses.push('component--tp5-treatment')
 
   // ! these two will be retired.
-  shadow && innerContainerClasses.push('shadow')
+  shadow && type !== 'data-bite' && innerContainerClasses.push('shadow')
   config?.visual?.roundedBorders && innerContainerClasses.push('bite--has-rounded-borders')
 
   let sparkLineStyles = {

package/helpers/vegaConfig.ts

@@ -1,6 +1,6 @@
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import { formatDate } from '@cdc/core/helpers/cove/date.js'
-import { _ } from 'lodash'
+import _ from 'lodash'
 import { compile as vegaLiteCompile } from 'vega-lite'
 import { parse as vegaParse, View as vegaView } from 'vega'