@cdc/core 4.25.11 → 4.26.2

package/components/ui/Title/index.tsx

@@ -13,12 +13,40 @@ type HeaderProps = {
   ariaLevel?: number
   config: Visualization
   theme?: string
+  titleStyle: 'legacy' | 'large' | 'small'
+  noContent?: boolean
 }
 
 const Title = (props: HeaderProps) => {
-  const { isDashboard, title, superTitle, classes = [], showTitle = true, ariaLevel = 2 } = props
+  const {
+    isDashboard,
+    title,
+    superTitle,
+    classes = [],
+    showTitle = true,
+    ariaLevel = 2,
+    titleStyle,
+    noContent = false
+  } = props
 
-  // standard classes every vis should have
+  if (titleStyle === 'large' || titleStyle === 'small') {
+    const TitleElement = titleStyle === 'large' ? 'h2' : 'h3'
+
+    return (
+      title &&
+      showTitle && (
+        <div
+          className={`cove-title cove-title--${titleStyle}${noContent ? ' cove-title--no-content' : ''}`}
+          style={props.style}
+        >
+          {superTitle && <sup>{parse(superTitle)}</sup>}
+          <TitleElement>{parse(title)}</TitleElement>
+        </div>
+      )
+    )
+  }
+
+  // LEGACY BLOCKY HEADER (Original design with colored backgrounds)
   const updatedClasses = ['cove-component__header', 'component__header', 'mb-3', ...classes]
 
   return (

package/components/ui/Title/title.styles.css

@@ -96,3 +96,45 @@
 .type-sparkline.type-chart .cove-component__header {
   margin: 0px !important;
 }
+
+/* ============================================================================
+   MODERN TITLE
+   ============================================================================ */
+
+.cdc-open-viz-module .cove-title--small {
+  margin-bottom: 0.75rem;
+}
+
+.cdc-open-viz-module .cove-title--large {
+  margin-bottom: 1.33rem;
+}
+
+/* Used in dashboards to more closely associate a title-only component with the content below it */
+.cdc-open-viz-module .cove-title--no-content {
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+.cdc-open-viz-module .cove-title h2 {
+  color: #0b4778;
+  font-size: 1.95rem;
+  font-family: var(--app-font-secondary);
+  border-bottom: 1px solid var(--cool-gray-10);
+  font-weight: 300;
+}
+
+.cdc-open-viz-module .cove-title h3 {
+  font-size: 1.5rem;
+  font-family: var(--app-font-secondary);
+}
+
+.cdc-open-viz-module .cove-title sup {
+  font-family: var(--app-font-secondary);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #666;
+  sup {
+    font-size: 75%;
+  }
+}

package/data/colorPalettes.ts

@@ -1,9 +1,22 @@
-import { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2 } from './mapColorPalettes'
-import { chartColorPalettes, sequentialPalettes, colorPalettesChart, colorPalettesChartV1, colorPalettesChartV2, twoColorPalette } from './chartColorPalettes'
-
+import { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2, sequentialZeroColors } from './mapColorPalettes'
+import {
+  chartColorPalettes,
+  sequentialPalettes,
+  colorPalettesChart,
+  colorPalettesChartV1,
+  colorPalettesChartV2,
+  twoColorPalette
+} from './chartColorPalettes'
 
 // Re-export map palettes (already processed in mapColorPalettes.ts)
-export { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2 }
+export { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2, sequentialZeroColors }
 
 // Re-export chart palettes (already processed in chartColorPalettes.ts)
-export { chartColorPalettes, sequentialPalettes, colorPalettesChart, colorPalettesChartV1, colorPalettesChartV2, twoColorPalette }
+export {
+  chartColorPalettes,
+  sequentialPalettes,
+  colorPalettesChart,
+  colorPalettesChartV1,
+  colorPalettesChartV2,
+  twoColorPalette
+}

package/data/mapColorPalettes.ts

@@ -43,3 +43,13 @@ export const mapColorPalettes = {
 
 export const mapColorPalettesV1 = mapColorPalettes.v1
 export const mapColorPalettesV2 = mapColorPalettes.v2
+
+// Lighter colors (first palette color 75% toward white) for zero-value categories in v2 sequential palettes
+// Used when: categorical map, gradient legend, first category value is "0", palette not reversed
+export const sequentialZeroColors: Record<string, string> = {
+  sequential_blue: '#F6F9FD',
+  sequential_teal: '#F9FEFE',
+  sequential_purple: '#F8F4F7',
+  sequential_orange: '#FFF8F5',
+  sequential_green: '#F5FEFD'
+}

package/devTemplate/dev.js

@@ -0,0 +1,235 @@
+// Dev template JavaScript
+// Handles config URL params, visualization reloading, and sidebar
+
+// Apply config override from ?config= URL parameter (must happen before React loads)
+const params = new URLSearchParams(window.location.search)
+const configParam = params.get('config')
+let editorEnabled = params.get('editor') === 'true'
+const previewEnabled = params.get('preview') === 'true'
+
+if (configParam) {
+  document.querySelector('.react-container').setAttribute('data-config', configParam)
+}
+if (editorEnabled) {
+  document.querySelector('.react-container').setAttribute('data-editor', 'true')
+}
+
+// Load the visualization component
+await import('./src/index')
+
+// Reload visualization without page refresh
+window.reloadVisualization = async configUrl => {
+  const wrapper = document.getElementById('viz-wrapper')
+  const editorAttr = editorEnabled ? ' data-editor="true"' : ''
+  wrapper.innerHTML = `<div class="react-container" data-config="${configUrl}"${editorAttr}></div>`
+  await import(/* @vite-ignore */ `./src/index?t=${Date.now()}`)
+}
+
+// Initialize sidebar by default (hide with ?sidebar=false, or for editor package)
+// __COVE_PACKAGE_NAME__ is injected by Vite's define option in generateViteConfig.js
+const sidebarDisabled = params.get('sidebar') === 'false' || __COVE_PACKAGE_NAME__ === 'CdcEditor'
+if (sidebarDisabled) {
+  // Remove sidebar margin (the inline script in the HTML template pre-allocates it for ?sidebar!=false,
+  // but CdcEditor also disables the sidebar without that param)
+  document.body.style.marginLeft = ''
+}
+if (!sidebarDisabled) {
+  document.body.classList.add('has-sidebar')
+
+  // Fetch examples list
+  const response = await fetch('/__examples')
+  const examples = await response.json()
+
+  // Get current config
+  const currentConfig = configParam || '/examples/default.json'
+
+  // Build sidebar HTML
+  const sidebarRoot = document.getElementById('dev-sidebar-root')
+
+  // Build a recursive tree structure for arbitrary nesting depth
+  const buildTree = files => {
+    const tree = { files: [], dirs: {} }
+    files.forEach(file => {
+      const parts = file.split('/')
+      if (parts.length === 1) {
+        tree.files.push(file)
+      } else {
+        const dir = parts[0]
+        if (!tree.dirs[dir]) tree.dirs[dir] = []
+        tree.dirs[dir].push(parts.slice(1).join('/'))
+      }
+    })
+    // Recursively build subtrees for each directory
+    Object.keys(tree.dirs).forEach(dir => {
+      tree.dirs[dir] = buildTree(tree.dirs[dir])
+    })
+    return tree
+  }
+
+  const tree = buildTree(examples)
+
+  const caseInsensitiveSort = (a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' })
+
+  // Recursive function to render tree at any depth
+  const renderTree = (node, pathPrefix) => {
+    let html = ''
+
+    // Render files at this level
+    node.files.sort(caseInsensitiveSort).forEach(file => {
+      const configPath = pathPrefix + file
+      const isActive = configPath === currentConfig ? ' active' : ''
+      html += `<button class="dev-sidebar-item${isActive}" data-config="${configPath}">${file}</button>`
+    })
+
+    // Render subdirectories recursively
+    Object.keys(node.dirs)
+      .sort(caseInsensitiveSort)
+      .forEach(dir => {
+        const dirPath = pathPrefix + dir + '/'
+        const isOpen = currentConfig.startsWith(dirPath) ? ' open' : ''
+        html += `<div class="dev-sidebar-folder${isOpen}" data-folder-path="${dirPath}">${dir}</div>`
+        html += '<div class="dev-sidebar-folder-contents">'
+        html += renderTree(node.dirs[dir], dirPath)
+        html += '</div>'
+      })
+
+    return html
+  }
+
+  // Format package name for display (e.g., "CdcChart" -> "Chart", "CdcMap" -> "Map")
+  const formatPackageName = name => {
+    if (!name) return ''
+    return name
+      .replace(/^Cdc/, '')
+      .replace(/([A-Z])/g, ' $1')
+      .trim()
+  }
+  const packageDisplayName = formatPackageName(__COVE_PACKAGE_NAME__)
+
+  const editorToggleClass = editorEnabled ? ' active' : ''
+  const previewToggleClass = previewEnabled ? ' active' : ''
+  let html = '<nav class="dev-sidebar">'
+  html += `<div class="dev-sidebar-header"><span>${packageDisplayName} Examples</span><div class="dev-sidebar-toggles"><button class="dev-sidebar-toggle${previewToggleClass}" id="dev-preview-toggle" title="Toggle CDC Page Preview"><svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 1.5h7l3.5 3.5V14a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5z"/><path d="M10 1.5V5h3.5"/></svg></button><button class="dev-sidebar-toggle dev-sidebar-editor-toggle${editorToggleClass}" id="dev-editor-toggle" title="Toggle Editor">⚙</button></div></div>`
+  html +=
+    '<div class="dev-sidebar-search"><input type="text" id="dev-sidebar-search-input" placeholder="Search examples..." /></div>'
+  html += '<div class="dev-sidebar-tree">'
+  html += renderTree(tree, '/examples/')
+  html += '</div></nav>'
+  sidebarRoot.innerHTML = html
+
+  // Search functionality
+  const searchInput = document.getElementById('dev-sidebar-search-input')
+  searchInput.addEventListener('input', e => {
+    const query = e.target.value.toLowerCase()
+    const items = sidebarRoot.querySelectorAll('.dev-sidebar-item')
+    const folders = sidebarRoot.querySelectorAll('.dev-sidebar-folder')
+
+    if (!query) {
+      // Reset: show all items, collapse folders (except those with active item)
+      items.forEach(item => (item.style.display = ''))
+      folders.forEach(folder => {
+        folder.style.display = ''
+        if (!folder.nextElementSibling?.querySelector('.active')) {
+          folder.classList.remove('open')
+        }
+      })
+      return
+    }
+
+    // Split query into tokens - all must match (in any order)
+    const tokens = query.split(/\s+/).filter(t => t)
+    const matchesAllTokens = text => tokens.every(token => text.includes(token))
+
+    // First pass: find folders that match the query
+    const matchingFolderPaths = new Set()
+    folders.forEach(folder => {
+      const folderName = folder.textContent.toLowerCase()
+      if (matchesAllTokens(folderName)) {
+        matchingFolderPaths.add(folder.dataset.folderPath)
+      }
+    })
+
+    // Filter items: show if item matches OR is inside a matching folder
+    items.forEach(item => {
+      const configPath = item.dataset.config
+      const itemMatches = matchesAllTokens(item.textContent.toLowerCase())
+      const inMatchingFolder = [...matchingFolderPaths].some(folderPath => configPath.startsWith(folderPath))
+      item.style.display = itemMatches || inMatchingFolder ? '' : 'none'
+    })
+
+    // Show/hide folders based on whether they match or have visible children
+    folders.forEach(folder => {
+      const folderPath = folder.dataset.folderPath
+      const folderMatches = matchingFolderPaths.has(folderPath)
+      const contents = folder.nextElementSibling
+      const hasVisibleChildren = contents?.querySelector('.dev-sidebar-item:not([style*="display: none"])')
+      folder.style.display = folderMatches || hasVisibleChildren ? '' : 'none'
+      if (folderMatches || hasVisibleChildren) {
+        folder.classList.add('open')
+      }
+    })
+  })
+
+  // Click handlers for files
+  sidebarRoot.querySelectorAll('.dev-sidebar-item').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const configPath = btn.dataset.config
+
+      // Update active state
+      sidebarRoot.querySelectorAll('.dev-sidebar-item').forEach(b => b.classList.remove('active'))
+      btn.classList.add('active')
+
+      // Update URL without reload - keep clean if selecting default
+      const url = new URL(window.location)
+      if (configPath === '/examples/default.json') {
+        url.searchParams.delete('config')
+      } else {
+        url.searchParams.set('config', configPath)
+      }
+      history.pushState({}, '', url.toString().replace(/%2F/g, '/'))
+
+      // Reload visualization
+      await window.reloadVisualization(configPath)
+    })
+  })
+
+  // Click handlers for folders
+  sidebarRoot.querySelectorAll('.dev-sidebar-folder').forEach(folder => {
+    folder.addEventListener('click', () => {
+      folder.classList.toggle('open')
+    })
+  })
+
+  // Editor toggle handler
+  const editorToggle = document.getElementById('dev-editor-toggle')
+  editorToggle.addEventListener('click', async () => {
+    editorEnabled = !editorEnabled
+    editorToggle.classList.toggle('active', editorEnabled)
+
+    // Update URL
+    const url = new URL(window.location)
+    if (editorEnabled) {
+      url.searchParams.set('editor', 'true')
+    } else {
+      url.searchParams.delete('editor')
+    }
+    history.pushState({}, '', url.toString().replace(/%2F/g, '/'))
+
+    // Reload visualization with new editor state
+    const currentConfig =
+      document.querySelector('.react-container')?.getAttribute('data-config') || '/examples/default.json'
+    await window.reloadVisualization(currentConfig)
+  })
+
+  // Preview toggle handler - full page reload since server needs to serve different HTML
+  const previewToggle = document.getElementById('dev-preview-toggle')
+  previewToggle.addEventListener('click', () => {
+    const url = new URL(window.location)
+    if (previewEnabled) {
+      url.searchParams.delete('preview')
+    } else {
+      url.searchParams.set('preview', 'true')
+    }
+    window.location.href = url.toString().replace(/%2F/g, '/')
+  })
+}

package/devTemplate/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <style>
+      body {
+        margin: 0;
+        border-top: none !important;
+        min-height: calc(100vh + 1px);
+      }
+      /* {{PACKAGE_CSS}} */
+      /* {{SIDEBAR_CSS}} */
+    </style>
+    <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
+  </head>
+  <body>
+    <script>
+      if (new URLSearchParams(location.search).get('sidebar') !== 'false') document.body.style.marginLeft = '240px'
+    </script>
+    <div id="dev-sidebar-root"></div>
+    <div id="viz-wrapper">
+      <div class="react-container" data-config="/examples/default.json"></div>
+    </div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module">
+      // {{DEV_JS}}
+    </script>
+  </body>
+</html>