@cdc/core 4.25.10 → 4.25.11

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -1,17 +1,45 @@
 import Footnotes from './Footnotes'
-import FootnotesConfig from '../../types/Footnotes'
+import FootnotesConfig, { Footnote } from '../../types/Footnotes'
 import _ from 'lodash'
 import { useMemo } from 'react'
 import { filterVizData } from '../../helpers/filterVizData'
 import { VizFilter } from '../../types/VizFilter'
+import { MarkupVariable } from '../../types/MarkupVariable'
+import { processMarkupVariables } from '../../helpers/markupProcessor'
 
 type StandAloneProps = {
   config: FootnotesConfig
   filters?: VizFilter[]
+  markupVariables?: MarkupVariable[]
+  enableMarkupVariables?: boolean
+  data?: Object[]
 }
 
-const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters }) => {
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters, markupVariables = [], enableMarkupVariables = false, data = [] }) => {
   if (!config) return null
+
+  // Helper function to process markup variables in footnote text
+  const processFootnoteText = (text: string): string => {
+    if (!enableMarkupVariables || !markupVariables || markupVariables.length === 0) {
+      return text
+    }
+
+    // Use data from props if available, otherwise use config.data
+    const footnoteData = data.length > 0 ? data : config.data || []
+
+    const { processedContent } = processMarkupVariables(
+      text,
+      footnoteData,
+      markupVariables,
+      {
+        filters,
+        isEditor: false
+      }
+    )
+
+    return processedContent
+  }
+
   // get the api footnotes from the config
   const apiFootnotes = useMemo(() => {
     // If filters exist and should filter footnotes, apply them, otherwise use data as-is
@@ -20,13 +48,21 @@ const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters }) =>
       const { symbolColumn, textColumn, orderColumn } = config.dynamicFootnotes
       const _data = configData.map(row => _.pick(row, [symbolColumn, textColumn, orderColumn]))
       _data.sort((a, b) => a[orderColumn] - b[orderColumn])
-      return _data.map(row => ({ symbol: row[symbolColumn], text: row[textColumn] }))
+      return _data.map(row => ({
+        symbol: row[symbolColumn],
+        text: processFootnoteText(row[textColumn])
+      }))
     }
     return []
-  }, [config.dynamicFootnotes, config.data, filters])
+  }, [config.dynamicFootnotes, config.data, filters, markupVariables, enableMarkupVariables, data])
 
-  // get static footnotes from the config.footnotes
-  const staticFootnotes = config.staticFootnotes || []
+  // get static footnotes from the config.footnotes and process their text
+  const staticFootnotes: Footnote[] = useMemo(() => {
+    return (config.staticFootnotes || []).map(footnote => ({
+      ...footnote,
+      text: processFootnoteText(footnote.text)
+    }))
+  }, [config.staticFootnotes, markupVariables, enableMarkupVariables, data, filters])
 
   return <Footnotes footnotes={[...apiFootnotes, ...staticFootnotes]} />
 }

package/components/HeaderThemeSelector/HeaderThemeSelector.css

@@ -0,0 +1,43 @@
+/* HeaderThemeSelector component styles */
+
+.header {
+  margin-bottom: 1rem;
+}
+
+.header .edit-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.header .color-palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.header .color-palette button {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.header .color-palette button:hover {
+  transform: scale(1.1);
+}
+
+.header .color-palette button.selected {
+  border-color: #000;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+.header .color-palette button:focus {
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+}

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/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/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

@@ -47,50 +47,50 @@ 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()
+        `${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()
+        `${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()
+        `${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'
+
+      // Simple configurable padding (main fix for spacing issues)
+      const downloadPadding = state.downloadImagePadding !== undefined ? state.downloadImagePadding : (!state.showTitle ? 35 : 0)
+      if (downloadPadding > 0) {
+        container.style.padding = `${downloadPadding}px`
       }
-      container.appendChild(baseSvg.cloneNode(true)) // Clone baseSvg to avoid modifying the original
+
+      container.appendChild(baseSvg.cloneNode(true));
 
       const downloadImage = async () => {
         document.body.appendChild(container) // Append container to the DOM
@@ -116,7 +116,10 @@ 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

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