@cdc/core 4.25.10 → 4.25.11

package/_stories/StoryRenderingTests.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import { performAndAssert } from '@cdc/core/helpers/testing'
+
+const ChartRenderingValidator = () => (
+  <div data-testid='chart-rendering-validator'>
+    <h2>Simple COVE Visualization Tests</h2>
+    <p>This test validates all stories load and render.</p>
+  </div>
+)
+
+const meta: Meta<typeof ChartRenderingValidator> = {
+  title: 'Testing/Story Rendering Tests',
+  component: ChartRenderingValidator,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  tags: ['!dev', '!autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof ChartRenderingValidator>
+
+/**
+ * Fetch all stories from Storybook's JSON API and filter for visualization stories
+ * @returns Promise that resolves to an array of story URLs to test
+ */
+const getVisualizationStoryUrls = async (): Promise<string[]> => {
+  let response
+  try {
+    response = await fetch('http://localhost:6006/index.json')
+  } catch (error) {
+    console.error('Error fetching visualization story URLs:', error)
+    return []
+  }
+
+  const data = await response.json()
+
+  const storyUrls: string[] = []
+
+  Object.values(data.entries).forEach((story: any) => {
+    if (story.type === 'story') {
+      const isVisualizationStory =
+        story.title.includes('Components/Templates/') &&
+        !story.name.toLowerCase().includes('test') &&
+        !story.title.includes('Guide')
+
+      if (isVisualizationStory) {
+        const iframeUrl = `http://localhost:6006/iframe.html?id=${story.id}`
+        storyUrls.push(iframeUrl)
+      }
+    }
+  })
+  return storyUrls
+}
+
+/**
+ * Convert iframe URL to Storybook story URL for better debugging
+ * @param iframeUrl - The iframe URL (e.g., 'http://localhost:6006/iframe.html?id=components-templates-chart--multiple-lines')
+ * @returns The Storybook story URL (e.g., 'http://localhost:6006/?path=/story/components-templates-chart--multiple-lines')
+ */
+const iframeUrlToStoryUrl = (iframeUrl: string): string => {
+  const url = new URL(iframeUrl)
+  const storyId = url.searchParams.get('id')
+  return `http://localhost:6006/?path=/story/${storyId}`
+}
+
+/**
+ * Test a single Storybook iframe URL for successful visualization rendering
+ * @param iframeUrl - The complete iframe URL to test (e.g., 'http://localhost:6006/iframe.html?id=...')
+ * @returns Promise that resolves with test results
+ */
+const testIframeVisualization = async (iframeUrl: string) => {
+  iframeUrl = iframeUrl
+
+  const iframe = document.createElement('iframe')
+  iframe.style.width = '1200px'
+  iframe.style.height = '800px'
+  iframe.src = iframeUrl
+  document.body.appendChild(iframe)
+
+  try {
+    await performAndAssert(
+      'Wait for iframe to load',
+      () => {
+        try {
+          const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document
+          return {
+            loaded: !!iframeDoc && iframeDoc.readyState !== 'loading',
+            readyState: iframeDoc?.readyState || 'unknown'
+          }
+        } catch (error: any) {
+          return { loaded: false, readyState: 'error', error: error.message }
+        }
+      },
+      async () => {},
+      (before, after) => {
+        return after.loaded
+      }
+    )
+
+    await performAndAssert(
+      'Wait for SVG elements to render in iframe',
+      () => {
+        try {
+          const iframeDoc = iframe?.contentDocument || iframe?.contentWindow?.document
+          if (!iframeDoc) return { svgCount: 0, hasCoveModule: false, error: 'No document access' }
+
+          const svgCount = iframeDoc.querySelectorAll('svg').length
+          const hasCoveModule = !!iframeDoc.querySelector('.cdc-open-viz-module')
+          const isDataBite = !!iframeDoc.querySelector('.bite-content')
+          const isDataTable = !!iframeDoc.querySelector('.data-table')
+
+          return { svgCount, hasCoveModule, isDataBite, isDataTable, error: null }
+        } catch (error: any) {
+          return { svgCount: 0, hasCoveModule: false, isDataBite: false, isDataTable: false, error: error.message }
+        }
+      },
+      async () => {},
+      (before, after) => {
+        return (after.svgCount > 0 && after.hasCoveModule) || after.isDataBite || after.isDataTable
+      }
+    )
+  } finally {
+    if (iframe.parentNode) {
+      document.body.removeChild(iframe)
+    }
+  }
+}
+
+export const StoryRenderingTests: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByTestId('chart-rendering-validator')).toBeInTheDocument()
+
+    const storyUrls = await getVisualizationStoryUrls()
+
+    if (storyUrls.length === 0) {
+      console.warn('No visualization stories found to test')
+      return
+    }
+
+    const results: { iframeUrl: string; storyUrl: string; success: boolean; error?: string }[] = []
+
+    for (const [i, iframeUrl] of storyUrls.entries()) {
+      const storyUrl = iframeUrlToStoryUrl(iframeUrl)
+
+      try {
+        await testIframeVisualization(iframeUrl)
+        results.push({ iframeUrl, storyUrl, success: true })
+      } catch (error: any) {
+        if (i > 0) {
+          results.push({ iframeUrl, storyUrl, success: false, error: error.message })
+        }
+      }
+    }
+
+    const failed = results.filter(r => !r.success).length
+
+    if (failed > 0) {
+      throw new Error(`${failed} out of ${storyUrls.length} visualization stories failed to render`)
+    }
+  }
+}

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -59,7 +59,9 @@ export const AdvancedEditor = ({
     chart: ['Charts', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
     dashboard: ['Dashboard', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
     map: ['Maps', 'https://www.cdc.gov/cove/index.html', <MapIcon />],
-    'markup-include': ['Markup Include', 'https://www.cdc.gov/cove/index.html', <MarkupIncludeIcon />]
+    'markup-include': ['Markup Include', 'https://www.cdc.gov/cove/index.html', <MarkupIncludeIcon />],
+    'data-bite': ['Data Bite', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
+    'waffle-chart': ['Waffle Chart', 'https://www.cdc.gov/cove/index.html', <ChartIcon />]
   }
 
   if (!config.type) return <></>

package/components/CustomColorsEditor/CustomColorsEditor.css

@@ -0,0 +1,299 @@
+.custom-colors-editor {
+  padding: 0.75rem;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  background-color: #f8f9fa;
+}
+
+.custom-colors-editor .custom-colors-label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  color: #495057;
+}
+
+.custom-colors-editor .custom-colors-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  background-color: #d1ecf1;
+  border: 1px solid #bee5eb;
+  border-radius: 0.25rem;
+  color: #0c5460;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.custom-colors-editor .custom-colors-notice .notice-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  color: #17a2b8;
+}
+
+.custom-colors-editor .custom-colors-notice strong {
+  font-weight: 600;
+}
+
+.custom-colors-editor .custom-colors-notice a {
+  color: #0c5460;
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.custom-colors-editor .custom-colors-notice a:hover {
+  color: #062a30;
+  text-decoration: none;
+}
+
+.custom-colors-editor .custom-colors-preview {
+  display: flex;
+  gap: 2px;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  min-height: 36px;
+  overflow: hidden;
+}
+
+.custom-colors-editor .custom-colors-preview .preview-swatch {
+  flex: 1;
+  min-width: 8px;
+  border-radius: 2px;
+  transition: transform 0.15s ease;
+}
+
+.custom-colors-editor .custom-colors-preview .preview-swatch:hover {
+  transform: scale(1.1);
+}
+
+.custom-colors-editor .custom-colors-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  max-height: 400px;
+  overflow-y: auto;
+  padding-right: 0.25rem;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.custom-colors-editor .custom-color-item {
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  transition: box-shadow 0.15s ease, opacity 0.15s ease;
+}
+
+.custom-colors-editor .custom-color-item.dragging {
+  opacity: 0.5;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  cursor: grabbing;
+}
+
+.custom-colors-editor .custom-color-item:hover:not(.dragging) {
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
+  border-color: #adb5bd;
+}
+
+.custom-colors-editor .color-item-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 576px) {
+  .custom-colors-editor .color-item-controls {
+    gap: 0.375rem;
+  }
+}
+
+.custom-colors-editor .color-item-drag-handle {
+  color: #adb5bd;
+  font-size: 0.875rem;
+  cursor: grab;
+  user-select: none;
+  line-height: 1;
+  flex-shrink: 0;
+  padding: 0 0.125rem;
+}
+
+.custom-colors-editor .color-item-drag-handle:active {
+  cursor: grabbing;
+}
+
+.custom-colors-editor .custom-color-item:hover .color-item-drag-handle {
+  color: #6c757d;
+}
+
+.custom-colors-editor .color-item-number {
+  font-weight: 600;
+  min-width: 24px;
+  text-align: right;
+  color: #6c757d;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+.custom-colors-editor .color-picker {
+  width: 48px;
+  height: 34px;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  padding: 2px;
+  flex-shrink: 0;
+  transition: border-color 0.15s ease;
+}
+
+.custom-colors-editor .color-picker:hover {
+  border-color: #80bdff;
+}
+
+.custom-colors-editor .color-picker:focus {
+  outline: none;
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.custom-colors-editor .color-input-wrapper {
+  flex: 1;
+  min-width: 0;
+  margin-bottom: 0;
+}
+
+/* Override TextField label wrapper styles */
+.custom-colors-editor .color-input-wrapper label {
+  margin-bottom: 0;
+}
+
+/* Hide the label text since we're passing empty string */
+.custom-colors-editor .color-input-wrapper label .edit-label {
+  display: none;
+}
+
+.custom-colors-editor .color-input-wrapper label input[type='text'] {
+  font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  text-transform: uppercase;
+}
+
+@media (max-width: 576px) {
+  .custom-colors-editor .color-input-wrapper {
+    flex-basis: 100%;
+  }
+}
+
+.custom-colors-editor .color-item-buttons {
+  display: flex;
+  gap: 0.25rem;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.custom-colors-editor .btn-move,
+.custom-colors-editor .btn-remove {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  background-color: #fff;
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+}
+
+.custom-colors-editor .btn-move:hover:not(:disabled),
+.custom-colors-editor .btn-remove:hover:not(:disabled) {
+  background-color: #e9ecef;
+  border-color: #adb5bd;
+}
+
+.custom-colors-editor .btn-move:active:not(:disabled),
+.custom-colors-editor .btn-remove:active:not(:disabled) {
+  background-color: #dee2e6;
+  transform: scale(0.95);
+}
+
+.custom-colors-editor .btn-move:disabled,
+.custom-colors-editor .btn-remove:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.custom-colors-editor .btn-remove {
+  color: #dc3545;
+  font-weight: 700;
+  font-size: 1.125rem;
+}
+
+.custom-colors-editor .btn-remove:hover:not(:disabled) {
+  background-color: #dc3545;
+  color: #fff;
+  border-color: #dc3545;
+}
+
+.custom-colors-editor .btn-add-color {
+  width: 100%;
+  padding: 0.5rem;
+  border: 2px dashed #ced4da;
+  border-radius: 0.25rem;
+  background-color: #fff;
+  color: #6c757d;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.custom-colors-editor .btn-add-color:hover:not(:disabled) {
+  border-color: #007bff;
+  color: #007bff;
+  background-color: #e7f1ff;
+}
+
+.custom-colors-editor .btn-add-color:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.custom-colors-editor .btn-add-color:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.custom-colors-editor .custom-colors-info {
+  text-align: center;
+  font-size: 0.75rem;
+  color: #6c757d;
+  margin-top: 0.5rem;
+  font-style: italic;
+}

package/components/CustomColorsEditor/CustomColorsEditor.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react'
+import { TextField } from '../EditorPanel/Inputs'
+import './CustomColorsEditor.css'
+
+interface CustomColorsEditorProps {
+  colors: string[]
+  onChange: (colors: string[]) => void
+  label?: string
+  minColors?: number
+  maxColors?: number
+}
+
+const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
+  colors = [],
+  onChange,
+  label = 'Custom Colors',
+  minColors = 1,
+  maxColors = 20
+}) => {
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null)
+
+  const handleColorChange = (index: number, newColor: string) => {
+    const newColors = [...colors]
+    newColors[index] = newColor
+    onChange(newColors)
+  }
+
+  const handleAddColor = () => {
+    if (colors.length < maxColors) {
+      // Add a new color (default to the last color or a neutral color)
+      const defaultColor = colors.length > 0 ? colors[colors.length - 1] : '#3366cc'
+      onChange([...colors, defaultColor])
+    }
+  }
+
+  const handleRemoveColor = (index: number) => {
+    if (colors.length > minColors) {
+      const newColors = colors.filter((_, i) => i !== index)
+      onChange(newColors)
+    }
+  }
+
+  const handleMoveUp = (index: number) => {
+    if (index > 0) {
+      const newColors = [...colors]
+      ;[newColors[index - 1], newColors[index]] = [newColors[index], newColors[index - 1]]
+      onChange(newColors)
+    }
+  }
+
+  const handleMoveDown = (index: number) => {
+    if (index < colors.length - 1) {
+      const newColors = [...colors]
+      ;[newColors[index], newColors[index + 1]] = [newColors[index + 1], newColors[index]]
+      onChange(newColors)
+    }
+  }
+
+  const handleDragStart = (index: number) => {
+    setDraggedIndex(index)
+  }
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault()
+  }
+
+  const handleDrop = (e: React.DragEvent, dropIndex: number) => {
+    e.preventDefault()
+
+    if (draggedIndex === null || draggedIndex === dropIndex) {
+      setDraggedIndex(null)
+      return
+    }
+
+    const newColors = [...colors]
+    const draggedColor = newColors[draggedIndex]
+    newColors.splice(draggedIndex, 1)
+    newColors.splice(dropIndex, 0, draggedColor)
+
+    onChange(newColors)
+    setDraggedIndex(null)
+  }
+
+  return (
+    <div className="custom-colors-editor">
+      <label className="custom-colors-label">{label}</label>
+
+      <div className="custom-colors-notice">
+        <svg className="notice-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+        </svg>
+        <span>
+          <strong>Accessibility Notice:</strong> When using custom colors, conduct a{' '}
+            Section 508 review to ensure adequate color contrast and accessibility compliance.{' '}
+        </span>
+      </div>
+
+      <div className="custom-colors-preview">
+        {colors.map((color, index) => (
+          <div
+            key={index}
+            className="preview-swatch"
+            style={{ backgroundColor: color }}
+            title={`Color ${index + 1}: ${color}`}
+          />
+        ))}
+      </div>
+
+      <div className="custom-colors-list">
+        {colors.map((color, index) => (
+          <div
+            key={index}
+            className={`custom-color-item ${draggedIndex === index ? 'dragging' : ''}`}
+            draggable
+            onDragStart={() => handleDragStart(index)}
+            onDragOver={(e) => handleDragOver(e, index)}
+            onDrop={(e) => handleDrop(e, index)}
+          >
+            <div className="color-item-controls">
+              <span className="color-item-drag-handle" title="Drag to reorder">
+                ⋮⋮
+              </span>
+              {/* <span className="color-item-number">{index + 1}.</span> */}
+
+              {/* <input
+                type="color"
+                value={color}
+                onChange={(e) => handleColorChange(index, e.target.value)}
+                className="color-picker"
+                title="Click to change color"
+                aria-label={`Color picker for color ${index + 1}`}
+              /> */}
+
+              <div className="color-input-wrapper">
+                <TextField
+                  type="text"
+                  value={color}
+                  label=""
+                  section="colors"
+                  subsection={null}
+                  fieldName={`color-${index}`}
+                  updateField={(section, subsection, fieldName, value) => {
+                    handleColorChange(index, value)
+                  }}
+                  placeholder="#000000"
+                  maxLength={15}
+                  className="color-text-input"
+                />
+              </div>
+
+              <div className="color-item-buttons">
+                <button
+                  type="button"
+                  onClick={() => handleMoveUp(index)}
+                  disabled={index === 0}
+                  className="btn-move"
+                  title="Move up"
+                  aria-label="Move color up"
+                >
+                  ↑
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => handleMoveDown(index)}
+                  disabled={index === colors.length - 1}
+                  className="btn-move"
+                  title="Move down"
+                  aria-label="Move color down"
+                >
+                  ↓
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => handleRemoveColor(index)}
+                  disabled={colors.length <= minColors}
+                  className="btn-remove"
+                  title="Remove color"
+                  aria-label="Remove color"
+                >
+                  ×
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <button
+        type="button"
+        onClick={handleAddColor}
+        disabled={colors.length >= maxColors}
+        className="btn-add-color"
+      >
+        + Add Color
+      </button>
+
+      <div className="custom-colors-info">
+        {colors.length} color{colors.length !== 1 ? 's' : ''}
+        {colors.length < minColors && ` (minimum ${minColors} required)`}
+        {colors.length >= maxColors && ` (maximum reached)`}
+      </div>
+    </div>
+  )
+}
+
+export default CustomColorsEditor

package/components/CustomColorsEditor/index.ts

@@ -0,0 +1 @@
+export { default as CustomColorsEditor } from './CustomColorsEditor'

package/components/DataTable/DataTableStandAlone.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import { ViewPort } from '../../types/ViewPort'
-import Footnotes from '../../types/Footnotes'
-import EditorWrapper from '../EditorWrapper/EditorWrapper'
+import EditorWrapper from '../EditorWrapper'
 import DataTable from './DataTable'
 import DataTableEditorPanel from './components/DataTableEditorPanel'
 import Filters from '../Filters'
@@ -73,7 +72,13 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
         viewport={viewport || 'lg'}
         interactionLabel={interactionLabel}
       />
-      <FootnotesStandAlone config={config.footnotes} filters={config.filters?.filter(f => f.filterFootnotes)} />
+      <FootnotesStandAlone
+        config={config.footnotes}
+        filters={config.filters?.filter(f => f.filterFootnotes)}
+        markupVariables={config['markupVariables']}
+        enableMarkupVariables={config['enableMarkupVariables']}
+        data={config.data}
+      />
     </>
   )
 }