@cdc/core 4.26.1 → 4.26.2

package/components/EditorPanel/VizFilterEditor/components/FilterOrder.tsx

@@ -3,37 +3,41 @@ import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 type FilterOrderProps = {
   orderedValues: string[]
   handleFilterOrder?: (index1: number, index2: number) => void
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
-const FilterOrder: React.FC<FilterOrderProps> = ({ orderedValues, handleFilterOrder }) => {
+
+const FilterOrder: React.FC<FilterOrderProps> = ({ orderedValues, handleFilterOrder, onNestedDragAreaHover }) => {
   return (
-    <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source?.index, destination?.index)}>
-      <Droppable droppableId='filter_order'>
-        {provided => (
-          <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
-            {orderedValues?.map((value, index) => {
-              return (
-                <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
-                  {(provided, snapshot) => (
-                    <li>
-                      <div
-                        className={snapshot.isDragging ? 'currently-dragging' : ''}
-                        style={provided.draggableProps.style}
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                      >
-                        {value}
-                      </div>
-                    </li>
-                  )}
-                </Draggable>
-              )
-            })}
-            {provided.placeholder}
-          </ul>
-        )}
-      </Droppable>
-    </DragDropContext>
+    <div onMouseEnter={() => onNestedDragAreaHover?.(true)} onMouseLeave={() => onNestedDragAreaHover?.(false)}>
+      <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source?.index, destination?.index)}>
+        <Droppable droppableId='filter_order'>
+          {provided => (
+            <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
+              {orderedValues?.map((value, index) => {
+                return (
+                  <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
+                    {(provided, snapshot) => (
+                      <li>
+                        <div
+                          className={snapshot.isDragging ? 'currently-dragging' : ''}
+                          style={provided.draggableProps.style}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                        >
+                          {value}
+                        </div>
+                      </li>
+                    )}
+                  </Draggable>
+                )
+              })}
+              {provided.placeholder}
+            </ul>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
   )
 }
 

package/components/Layout/components/Sidebar/components/sidebar.styles.scss

@@ -626,9 +626,9 @@
 
     .sort-list {
       list-style: none;
+      padding: 0;
 
       > li {
-        margin-right: 0.3em;
         margin-bottom: 0.3em;
       }
     }
@@ -641,8 +641,8 @@
       background: #f1f1f1;
       padding: 0.4em 0.6em;
       font-size: 0.8em;
-      margin-bottom: 0.3em;
       cursor: move;
+      width: 100%;
     }
 
     .info {

package/components/Layout/components/Visualization/index.tsx

@@ -71,6 +71,10 @@ const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, r
       if (config?.runtime?.editorErrorMessage.length !== 0) classes.push('type-map--has-error')
     }
 
+    if (config.type === 'table') {
+      classes.push('type-data-table')
+    }
+
     if (config.type === 'data-bite') {
       classes.push('cdc-open-viz-module', 'type-data-bite', currentViewport, config.theme, `font-${config.fontSize}`)
       if (isEditor) {
@@ -104,6 +108,13 @@ const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, r
         }
       }
 
+      if (config.visualizationType === 'TP5 Gauge') {
+        classes.push('gauge__style--tp5')
+        if (config.visual?.whiteBackground) {
+          classes.push('white-background-style')
+        }
+      }
+
       classes.push('cove-component', 'waffle-chart')
     }
     return classes

package/components/MediaControls.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-// import html2pdf from 'html2pdf.js'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import { prepareScreenshotContainer } from '@cdc/core/helpers/prepareScreenshot'

package/components/_stories/CustomColorsEditor.stories.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import CustomColorsEditor from '../CustomColorsEditor/CustomColorsEditor'
+
+const meta: Meta<typeof CustomColorsEditor> = {
+  title: 'Components/Atoms/CustomColorsEditor',
+  component: CustomColorsEditor
+}
+
+export default meta
+type Story = StoryObj<typeof CustomColorsEditor>
+
+const fiftyColors = [
+  '#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231',
+  '#911eb4', '#42d4f4', '#f032e6', '#bfef45', '#fabed4',
+  '#469990', '#dcbeff', '#9a6324', '#fffac8', '#800000',
+  '#aaffc3', '#808000', '#ffd8b1', '#000075', '#a9a9a9',
+  '#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231',
+  '#911eb4', '#42d4f4', '#f032e6', '#bfef45', '#fabed4',
+  '#469990', '#dcbeff', '#9a6324', '#fffac8', '#800000',
+  '#aaffc3', '#808000', '#ffd8b1', '#000075', '#a9a9a9',
+  '#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00',
+  '#ffff33', '#a65628', '#f781bf', '#999999', '#66c2a5'
+]
+
+const Wrapper = ({ initialColors }: { initialColors: string[] }) => {
+  const [colors, setColors] = useState(initialColors)
+  return <CustomColorsEditor colors={colors} onChange={setColors} label='Custom Color Order' />
+}
+
+export const Default: Story = {
+  render: () => <Wrapper initialColors={['#3366cc', '#dc3912', '#ff9900']} />
+}
+
+export const FiftyColors: Story = {
+  render: () => <Wrapper initialColors={fiftyColors} />
+}

package/components/_stories/DataTable.stories.tsx

@@ -45,6 +45,7 @@ export const CityState: Story = {
     tabbingId: '#asdf',
     columns: CityStateExample.columns,
     applyLegendToRow: () => ['#000'],
+    getPatternForRow: () => null,
     displayGeoName
   },
   decorators: [

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>