@cdc/core 4.25.10 → 4.26.1

package/components/HeaderThemeSelector/HeaderThemeSelector.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import HeaderThemeSelector from '../HeaderThemeSelector'
+
+const meta: Meta<typeof HeaderThemeSelector> = {
+    title: 'Components/Atoms/HeaderThemeSelector',
+    component: HeaderThemeSelector,
+    parameters: {
+        docs: {
+            description: {
+                component: 'A reusable component for selecting header themes across different visualization types.'
+            }
+        }
+    },
+    argTypes: {
+        onThemeSelect: { action: 'theme-selected' },
+        selectedTheme: {
+            control: 'select',
+            options: [
+                'theme-blue',
+                'theme-purple',
+                'theme-brown',
+                'theme-teal',
+                'theme-pink',
+                'theme-orange',
+                'theme-slate',
+                'theme-indigo',
+                'theme-cyan',
+                'theme-green',
+                'theme-amber'
+            ]
+        }
+    }
+} satisfies Meta<typeof HeaderThemeSelector>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultHeaderColors = [
+    'theme-blue',
+    'theme-purple',
+    'theme-brown',
+    'theme-teal',
+    'theme-pink',
+    'theme-orange',
+    'theme-slate',
+    'theme-indigo',
+    'theme-cyan',
+    'theme-green',
+    'theme-amber'
+]
+
+export const Default: Story = {
+    args: {}
+}
+
+export const WithSelectedTheme: Story = {
+    args: {
+        selectedTheme: 'theme-purple'
+    }
+}
+
+export const CustomLabel: Story = {
+    args: {
+        label: 'Choose Color Theme',
+        selectedTheme: 'theme-teal'
+    }
+}
+
+export const CustomColors: Story = {
+    args: {
+        headerColors: ['theme-blue', 'theme-purple', 'theme-orange', 'theme-green'],
+        selectedTheme: 'theme-blue'
+    }
+}

package/components/HeaderThemeSelector/HeaderThemeSelector.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import './HeaderThemeSelector.css'
+
+// Default header theme colors used across all CDC Open Viz packages
+const DEFAULT_HEADER_COLORS = [
+  'theme-blue',
+  'theme-purple',
+  'theme-brown',
+  'theme-teal',
+  'theme-pink',
+  'theme-orange',
+  'theme-slate',
+  'theme-indigo',
+  'theme-cyan',
+  'theme-green',
+  'theme-amber'
+]
+
+interface HeaderThemeSelectorProps {
+  /** Array of theme color names to display. Defaults to standard CDC theme colors */
+  headerColors?: string[]
+  /** Currently selected theme */
+  selectedTheme?: string
+  /** Callback when a theme is selected */
+  onThemeSelect: (theme: string) => void
+  /** Optional label for the selector */
+  label?: string
+  /** Optional CSS class name */
+  className?: string
+}
+
+const HeaderThemeSelector: React.FC<HeaderThemeSelectorProps> = ({
+  headerColors = DEFAULT_HEADER_COLORS,
+  selectedTheme,
+  onThemeSelect,
+  label = 'Header Theme',
+  className = 'color-palette'
+}) => {
+  const handleThemeSelection = (theme: string) => (e: React.MouseEvent) => {
+    e.preventDefault()
+    onThemeSelect(theme)
+  }
+
+  return (
+    <label className='header'>
+      <span className='edit-label'>{label}</span>
+      <ul className={className}>
+        {headerColors.map(theme => (
+          <button
+            title={theme}
+            key={theme}
+            onClick={handleThemeSelection(theme)}
+            className={selectedTheme === theme ? `selected ${theme}` : theme}
+          />
+        ))}
+      </ul>
+    </label>
+  )
+}
+
+export default HeaderThemeSelector

package/components/HeaderThemeSelector/index.ts

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

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

@@ -186,6 +186,88 @@
       overflow: hidden;
     }
 
+    .editor-field-item {
+      position: relative;
+      padding: 5px;
+      background-color: #fff;
+      border: 1px solid #ccc;
+      margin-bottom: 10px;
+
+      &:last-child {
+        padding-bottom: 5px;
+      }
+
+      &__header {
+        width: 100%;
+        background-color: #f5f5f5;
+        border: 1px solid #ccc;
+        display: flex;
+        align-items: center;
+        padding: 5px;
+        padding-left: 5px !important;
+
+        .cove-icon {
+          flex-shrink: 0;
+          padding-right: 5px;
+          margin-right: 10px;
+        }
+
+        .btn {
+          flex-shrink: 0;
+        }
+      }
+
+      &__name {
+        margin-left: 0.5rem;
+        user-select: none;
+        flex: 1;
+      }
+
+      &__content {
+        padding: 10px;
+        background-color: #fff;
+      }
+
+      &__remove-wrapper {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 10px;
+
+        .btn {
+          border: 1px solid red;
+          border-radius: 10px;
+        }
+      }
+    }
+
+    .draggable-field-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      .currently-dragging {
+        opacity: 0.8;
+      }
+
+      .editor-field-item {
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
+
+        &__header .cove-icon {
+          cursor: grab;
+        }
+      }
+    }
+
+    .filters-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
     .accordion__heading {
       background: var(--lightestGray);
     }

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

@@ -11,7 +11,14 @@ import { MapConfig } from '@cdc/map/src/types/MapConfig'
 
 type VisualizationWrapper = {
   children: React.ReactNode
-  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters | MapConfig | DataTableConfig
+  config:
+    | ChartConfig
+    | DataBiteConfig
+    | WaffleChartConfig
+    | MarkupIncludeConfig
+    | DashboardFilters
+    | MapConfig
+    | DataTableConfig
   currentViewport?: string
   imageId?: string
   isEditor: boolean
@@ -89,6 +96,14 @@ const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, r
         classes.push('is-editor')
       }
 
+      // Add TP5 style classes
+      if (config.visualizationType === 'TP5 Waffle') {
+        classes.push('waffle__style--tp5')
+        if (config.visual?.whiteBackground) {
+          classes.push('white-background-style')
+        }
+      }
+
       classes.push('cove-component', 'waffle-chart')
     }
     return classes

package/components/Layout/components/Visualization/visualizations.scss

@@ -34,6 +34,13 @@
       left: 0;
       width: 100% !important;
       grid-area: content;
+      padding: 1rem;
+
+      // Prevent double padding on nested .cove-component__content divs
+      // (e.g., in markup-include, waffle-chart, filtered-text)
+      .cove-component__content {
+        padding: 0;
+      }
     }
   }
 }

package/components/Layout/styles/editor.scss

@@ -1,5 +1,6 @@
+@import '../../../styles/v2/utils/variables';
+
 $editorAnimationTimer: 400ms;
-$editorWidth: 350px;
 $mediumGray: #e6e6e6;
 
 @import 'editor-grid-view.scss';

package/components/Legend/Legend.Gradient.tsx

@@ -4,7 +4,7 @@ import { type MapConfig } from '@cdc/map/src/types/MapConfig'
 import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { getTextWidth } from '../../helpers/getTextWidth'
 import { DimensionsType } from '../../types/Dimensions'
-import useLegendSeparators from '@cdc/map/src/hooks/useLegendSeparators'
+import useLegendSeparators from '../../hooks/useLegendSeparators'
 
 const MARGIN = 1
 const BORDER_SIZE = 1

package/components/Loader/Loader.tsx

@@ -12,7 +12,7 @@ type LoaderProps = {
 
 const Spinner = ({ spinnerType }: { spinnerType: SpinnerType }) => (
   <div className={`spinner-border ${spinnerType}`} role='status'>
-    <span className='sr-only'>Loading...</span>
+    <span className='sr-only' style={{ display: 'none' }}>Loading...</span>
   </div>
 )
 

package/components/MediaControls.tsx

@@ -2,6 +2,7 @@ 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'
 
 const buttonText = {
   pdf: 'Download PDF',
@@ -35,7 +36,7 @@ const saveImageAs = (uri, filename) => {
   }
 }
 
-const generateMedia = (state, type, elementToCapture, interactionLabel) => {
+const generateMedia = (state, type, elementToCapture, interactionLabel, includeContextInDownload = false) => {
   // Identify Selector
   const baseSvg = document.querySelector(`[data-download-id=${elementToCapture}]`)
 
@@ -47,53 +48,39 @@ const generateMedia = (state, type, elementToCapture, interactionLabel) => {
     return undefined
   }
 
+  // Generate timestamp once for consistency
+  const date = new Date()
+  const day = date.getDate()
+  const month = date.getMonth() + 1
+  const year = date.getFullYear()
+  const timestamp = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
+
   // Handles different state title locations between components
   // Apparently some packages use state.title where others use state.general.title
   const handleFileName = state => {
     // dashboard titles
-    if (state?.dashboard?.title)
-      return (
-        state.dashboard.title.replace(/\s+/g, '-').toLowerCase() +
-        '-' +
-        date.getDate() +
-        date.getMonth() +
-        date.getFullYear()
-      )
+    if (state?.dashboard?.title) return `${state.dashboard.title.replace(/\s+/g, '-').toLowerCase()}-${timestamp}`
 
     // map titles
-    if (state?.general?.title)
-      return (
-        state.general.title.replace(/\s+/g, '-').toLowerCase() +
-        '-' +
-        date.getDate() +
-        date.getMonth() +
-        date.getFullYear()
-      )
+    if (state?.general?.title) return `${state.general.title.replace(/\s+/g, '-').toLowerCase()}-${timestamp}`
 
     // chart titles
-    if (state?.title)
-      return (
-        state.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
-      )
+    if (state?.title) return `${state.title.replace(/\s+/g, '-').toLowerCase()}-${timestamp}`
 
     return 'no-title'
   }
 
-  // Construct filename with timestamp
-  const date = new Date()
   const filename = handleFileName(state)
 
   switch (type) {
     case 'image':
-      const container = document.createElement('div')
-      // On screenshots without a title (like some charts), add padding around the chart svg
-      if (!state.showTitle) {
-        container.style.padding = '35px'
-      }
-      container.appendChild(baseSvg.cloneNode(true)) // Clone baseSvg to avoid modifying the original
+      // Prepare screenshot container with all cloning, styling, and transformations
+      const container = prepareScreenshotContainer(baseSvg, includeContextInDownload, elementToCapture)
 
       const downloadImage = async () => {
-        document.body.appendChild(container) // Append container to the DOM
+        // Append to main element if exists, otherwise body
+        const targetElement = document.querySelector('main') || document.body
+        targetElement.appendChild(container)
 
         // Fix select elements to show their current selected values before screenshot
         const selectElements = container.querySelectorAll('select')
@@ -116,10 +103,13 @@ const generateMedia = (state, type, elementToCapture, interactionLabel) => {
             .default(container, {
               ignoreElements: el =>
                 el.className?.indexOf &&
-                el.className.search(/download-buttons|download-links|data-table-container/) !== -1
+                el.className.search(/download-buttons|download-links|data-table-container/) !== -1,
+              useCORS: true,
+              scale: 2, // Better quality
+              allowTaint: true
             })
             .then(canvas => {
-              document.body.removeChild(container) // Clean up container
+              targetElement.removeChild(container) // Clean up container from wherever we appended it
               saveImageAs(canvas.toDataURL(), filename + '.png')
               publishAnalyticsEvent({
                 vizType: state.type,
@@ -160,13 +150,23 @@ const generateMedia = (state, type, elementToCapture, interactionLabel) => {
   }
 }
 
-const Button = ({ state, text, type, title, elementToCapture, interactionLabel = '' }) => {
+// Button component for Dashboard downloads (renders as actual button)
+const Button = ({
+  state,
+  text,
+  type,
+  title,
+  elementToCapture,
+  interactionLabel = '',
+  includeContextInDownload = false
+}) => {
   const buttonClasses = ['btn', 'btn-primary']
+
   return (
     <button
       className={buttonClasses.join(' ')}
       title={title}
-      onClick={() => generateMedia(state, type, elementToCapture, interactionLabel)}
+      onClick={() => generateMedia(state, type, elementToCapture, interactionLabel, includeContextInDownload)}
       style={{ lineHeight: '1.4em' }}
     >
       {buttonText[type]}
@@ -174,6 +174,34 @@ const Button = ({ state, text, type, title, elementToCapture, interactionLabel =
   )
 }
 
+// DownloadLink component for Chart/Map downloads (renders as text link)
+const DownloadLink = ({
+  state,
+  type,
+  title,
+  elementToCapture,
+  interactionLabel = '',
+  includeContextInDownload = false
+}) => {
+  const vizType = state?.type === 'map' ? 'Map' : 'Chart'
+  const format = type === 'pdf' ? 'PDF' : 'PNG'
+  const linkText = `Download ${vizType} (${format})`
+
+  return (
+    <a
+      role='button'
+      onClick={() => generateMedia(state, type, elementToCapture, interactionLabel, includeContextInDownload)}
+      aria-label={title}
+      title={title}
+      className={`no-border`}
+      style={{ cursor: 'pointer' }}
+      data-html2canvas-ignore
+    >
+      {linkText}
+    </a>
+  )
+}
+
 // Link to CSV/JSON data
 const Link = ({ config, dashboardDataConfig, interactionLabel }) => {
   let dataConfig = dashboardDataConfig || config
@@ -235,6 +263,7 @@ const MediaControls = () => null
 MediaControls.Section = Section
 MediaControls.Link = Link
 MediaControls.Button = Button
+MediaControls.DownloadLink = DownloadLink
 MediaControls.generateMedia = generateMedia
 
 export default MediaControls

package/components/PaletteConversionModal.tsx

@@ -43,11 +43,14 @@ const PaletteConversionModal: React.FC<PaletteConversionModalProps> = ({
         <div
           className='modal-header'
           style={{
-            padding: '20px 20px 0 20px',
-            borderBottom: '1px solid #e0e0e0'
+            padding: '15px',
+            borderBottom: '1px solid #e0e0e0',
+            backgroundColor: '#005eaa',
+            display: 'flex',
+            justifyContent: 'center',
           }}
         >
-          <h3 style={{ margin: '0 0 20px 0' }}>Color Palette Conversion</h3>
+          <h3 style={{ color: 'white', textAlign: 'center' }}>Color Palette Conversion</h3>
         </div>
 
         <div className='modal-body' style={{ padding: '20px' }}>
@@ -84,4 +87,4 @@ const PaletteConversionModal: React.FC<PaletteConversionModalProps> = ({
   )
 }
 
-export default PaletteConversionModal
+export default PaletteConversionModal

package/components/PaletteSelector/PaletteSelector.css

@@ -2,9 +2,28 @@
 /* Shared styles for palette color swatches across all visualization types */
 
 .color-palette {
-  /* Button-based palette selector (used by charts) */
+  display: flex;
 }
 
+/* List item-based palette selector (used by maps) */
+.color-palette li {
+  width: 1.5em;
+  height: 1.5em;
+  display: inline-block;
+  margin-right: 0.5em;
+  cursor: pointer;
+  border: rgba(0, 0, 0, 0.3) 3px solid;
+}
+
+.color-palette li.active {
+  border: rgba(0, 0, 0, 0.8) 3px solid;
+}
+
+.color-palette li.selected {
+  border: black 2px solid;
+}
+
+/* Button-based palette selector (used by charts) */
 .color-palette button:not(.selected) {
   border: var(--cool-gray-30) 2px solid !important;
 }
@@ -13,13 +32,37 @@
   border: black 2px solid !important;
 }
 
-/* List item-based palette selector (used by maps) */
-.color-palette li {
-  border: var(--cool-gray-30) 2px solid;
+.color-palette a {
+  display: inline-block;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
 }
 
-.color-palette li.selected {
-  border: black 2px solid;
+/* Series list variant */
+.color-palette.series-list {
+  flex-direction: column;
+  padding: 0;
+  border: none;
+}
+
+.color-palette.series-list li {
+  padding: 0.3em 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: auto;
+  height: auto;
+  border: 0;
+}
+
+.color-palette.series-list li:not(:last-child) {
+  border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
+}
+
+/* Header variant */
+.header .color-palette li {
+  width: 1.5em;
+  height: 1.5em;
+  display: inline-block;
 }
 
 /* Developer rollback component styles */

package/components/Table/components/Cell.tsx

@@ -1,7 +1,28 @@
 const Cell = ({ children, style, isBold = false, ariaLabel }) => {
+  // Use whiteSpace from style prop, defaulting to 'pre-line' for backwards compatibility
+  const whiteSpace = style?.whiteSpace || 'pre-line'
+
+  const contentWrapperStyle = {
+    whiteSpace: whiteSpace as any,
+    lineHeight: '1.4',
+    display: 'block' as const,
+    margin: 0,
+    padding: 0,
+    wordBreak: 'break-word' as const
+  }
+
+  // Only include aria-label if it has a value
+  const ariaProps = ariaLabel ? { 'aria-label': ariaLabel } : {}
+
+  // Keep whiteSpace on td style so it can be detected by tests and for proper rendering
+  const tdStyle = { ...style }
+  delete tdStyle.textOverflow
+
   return (
-    <td aria-label={ariaLabel} tabIndex={0} role='gridcell' style={style}>
-      {isBold ? <strong>{children}</strong> : children}
+    <td {...ariaProps} role='gridcell' style={tdStyle}>
+      <div style={contentWrapperStyle}>
+        {isBold ? <strong>{children}</strong> : children}
+      </div>
     </td>
   )
 }

package/components/Table/components/Row.tsx

@@ -16,8 +16,7 @@ type RowProps = {
 }
 
 const Row: FC<RowProps> = props => {
-  const { childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, preliminaryData, rightAlignedCols } = props
-  const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
+  const { childRow, rowKey, cellMinWidth = 0, isTotal, preliminaryData, rightAlignedCols, wrapColumns } = props
   const minWidth = cellMinWidth + 'px'
   const isHtmlString = (str: any): str is string => typeof str === 'string' && /<\/?[a-z][\s\S]*>/i.test(str)
   const isReactNode = (val: any): boolean => React.isValidElement(val) || typeof val === 'object'
@@ -32,6 +31,9 @@ const Row: FC<RowProps> = props => {
           {}
 
         const textAlign = rightAlignedCols && rightAlignedCols[i] ? 'right' : ''
+        // Set whiteSpace based on wrapColumns prop (default to wrapping for backwards compatibility)
+        const whiteSpace = wrapColumns === false ? 'nowrap' : 'normal'
+
         // handle Parsing
         let content: ReactNode
         if (isHtmlString(child)) {
@@ -46,7 +48,7 @@ const Row: FC<RowProps> = props => {
           <Cell
             ariaLabel={style?.color ? 'suppressed data' : ''}
             key={rowKey + '__' + i}
-            style={{ whiteSpace, minWidth, textAlign, textOverflow: 'ellipsis', ...style }}
+            style={{ minWidth, textAlign, whiteSpace, ...style }}
             isBold={isTotal}
           >
             {content}

package/components/_stories/Filters.stories.tsx

@@ -8,7 +8,14 @@ import { Visualization } from '../../types/Visualization'
 
 const meta: Meta<typeof Filters> = {
   title: 'Components/Molecules/Visualization Filters',
-  component: Filters
+  component: Filters,
+  decorators: [
+    Story => (
+      <div className='cdc-open-viz-module'>
+        <Story />
+      </div>
+    )
+  ]
 }
 
 type Story = StoryObj<typeof Filters>
@@ -54,4 +61,16 @@ export const Tab: Story = generateConfig('tab')
 
 export const TabBar: Story = generateConfig('tab bar')
 
+export const WithApplyButton: Story = {
+  args: {
+    config: {
+      filters: generateFilters('dropdown'),
+      data: animalData,
+      filterBehavior: 'Apply Button',
+      type: 'chart'
+    } as any,
+    setFilters: () => {}
+  }
+}
+
 export default meta