@cdc/core 4.25.8 → 4.25.11

package/components/Footnotes/Footnotes.tsx

@@ -1,25 +1,35 @@
-import { Footnote } from '../../types/Footnotes'
-import './footnotes.css'
-
-type FootnotesProps = {
-  footnotes: Footnote[]
-}
-
-const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
-  return (
-    <footer className='col-12 m-3 mt-1 mb-0'>
-      <ul className='cove-footnotes'>
-        {footnotes.map((note, i) => {
-          return (
-            <li key={`${note.symbol || 'footnote-'}${i}`} className='mb-1'>
-              {note.symbol && <span className='me-1'>{note.symbol}</span>}
-              {note.text}
-            </li>
-          )
-        })}
-      </ul>
-    </footer>
-  )
-}
-
-export default Footnotes
+import { Footnote } from '../../types/Footnotes'
+import parse from 'html-react-parser'
+import './footnotes.css'
+
+type FootnotesProps = {
+  footnotes: Footnote[]
+}
+
+const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
+  // Convert newlines to <br> tags and parse HTML
+  const processFootnoteText = (text: string) => {
+    if (!text) return ''
+    // Convert newline characters to <br> tags
+    const textWithBreaks = text.replace(/\n/g, '<br>')
+    // Parse HTML (html-react-parser handles sanitization)
+    return parse(textWithBreaks)
+  }
+
+  return (
+    <footer className='col-12 m-3 mt-1 mb-0'>
+      <ul className='cove-footnotes'>
+        {footnotes.map((note, i) => {
+          return (
+            <li key={`${note.symbol || 'footnote-'}${i}`} className='mb-1'>
+              {note.symbol && <span className='me-1'>{note.symbol}</span>}
+              {processFootnoteText(note.text)}
+            </li>
+          )
+        })}
+      </ul>
+    </footer>
+  )
+}
+
+export default Footnotes

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/Legend/Legend.Gradient.tsx

@@ -70,7 +70,7 @@ const LegendGradient = ({
     const lastTick = index === labels.length - 1
 
     return (
-      <Group top={MARGIN}>
+      <Group key={`tick-${index}`} top={MARGIN}>
         {!lastTick && !isLinearBlocks && <line x1={xPositionX} x2={xPositionX} y1={30} y2={boxHeight} stroke='black' />}
         <Text
           angle={-tickRotation}
@@ -123,9 +123,8 @@ const LegendGradient = ({
               const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
               const xPosition = index * segmentWidth + MARGIN + getTickSeparatorsAdjustment(index)
               return (
-                <Group>
+                <Group key={`color-block-${index}`}>
                   <rect
-                    key={index}
                     x={xPosition}
                     y={MARGIN}
                     width={segmentWidth}
@@ -142,10 +141,9 @@ const LegendGradient = ({
               const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
               const xPosition = separatorAfter * segmentWidth + MARGIN + getTickSeparatorsAdjustment(separatorAfter - 1)
               return (
-                <Group>
+                <Group key={`separator-${index}`}>
                   {/* Separators block */}
                   <rect
-                    key={index}
                     x={xPosition}
                     y={MARGIN / 2}
                     width={separatorSize}
@@ -157,7 +155,6 @@ const LegendGradient = ({
 
                   {/* Dotted dividing line */}
                   <line
-                    key={index}
                     x1={xPosition + separatorSize / 2}
                     x2={xPosition + separatorSize / 2}
                     y1={-3}

package/components/LegendShape.tsx

@@ -1,24 +1,142 @@
 import React from 'react'
 
+interface PatternInfo {
+  pattern: string
+  patternId: string
+  size?: string
+  color?: string
+}
+
 interface LegendShapeProps {
   fill: string
   borderColor?: string
   display?: 'inline-block' | 'block' | 'inline'
   shape?: 'circle' | 'square'
+  patternInfo?: PatternInfo
 }
 
 const LegendShape: React.FC<LegendShapeProps> = props => {
-  const { fill, borderColor, display = 'inline-block', shape = 'circle' } = props
+  const { fill, borderColor, display = 'inline-block', shape = 'circle', patternInfo } = props
   const dimensions = { width: '1em', height: '1em' }
   const isCircleOrSquare = ['circle', 'square'].includes(shape)
+
+  // If pattern is provided, use SVG with pattern fill
+  if (patternInfo) {
+    const sizes = {
+      small: '8',
+      medium: '10',
+      large: '12'
+    }
+
+    const patternSize = sizes[patternInfo.size as keyof typeof sizes] || '10'
+    // Use the exact pattern color from config, with a reliable fallback
+    const patternColor = patternInfo.color || '#212529'
+
+    return (
+      <span className={`legend-item ${isCircleOrSquare ? 'me-2' : ''}`} style={{ display, verticalAlign: 'middle', width: dimensions.width, height: dimensions.height }}>
+        <svg width="100%" height="100%" viewBox="0 0 16 16" className="legend-shape-svg">
+          {/* Pattern definitions */}
+          <defs>
+            {patternInfo.pattern === 'waves' && (
+              <pattern
+                id={patternInfo.patternId}
+                patternUnits="userSpaceOnUse"
+                width={patternSize}
+                height={patternSize}
+              >
+                <path
+                  d={`M0,${parseInt(patternSize) / 2} Q${parseInt(patternSize) / 4},0 ${parseInt(patternSize) / 2},${parseInt(patternSize) / 2} T${patternSize},${parseInt(patternSize) / 2}`}
+                  stroke={patternColor}
+                  strokeWidth="0.25"
+                  fill="none"
+                />
+              </pattern>
+            )}
+            {patternInfo.pattern === 'circles' && (
+              <pattern
+                id={patternInfo.patternId}
+                patternUnits="userSpaceOnUse"
+                width={patternSize}
+                height={patternSize}
+              >
+                <circle
+                  cx={parseInt(patternSize) / 2}
+                  cy={parseInt(patternSize) / 2}
+                  r="1.25"
+                  fill={patternColor}
+                />
+              </pattern>
+            )}
+            {patternInfo.pattern === 'lines' && (
+              <pattern
+                id={patternInfo.patternId}
+                patternUnits="userSpaceOnUse"
+                width={patternSize}
+                height={patternSize}
+              >
+                <line
+                  x1="0"
+                  y1="0"
+                  x2={patternSize}
+                  y2={patternSize}
+                  stroke={patternColor}
+                  strokeWidth="0.75"
+                />
+              </pattern>
+            )}
+          </defs>
+
+          {shape === 'circle' ? (
+            <circle
+              fill={fill}
+              r={7.5}
+              cx={8}
+              cy={8}
+              stroke={borderColor || 'rgba(0,0,0,.3)'}
+              strokeWidth={1}
+            />
+          ) : (
+            <rect
+              fill={fill}
+              width={15}
+              height={15}
+              x={0.5}
+              y={0.5}
+              stroke={borderColor || 'rgba(0,0,0,.3)'}
+              strokeWidth={1}
+            />
+          )}
+          {shape === 'circle' ? (
+            <circle
+              fill={`url(#${patternInfo.patternId})`}
+              r={7.5}
+              cx={8}
+              cy={8}
+              stroke='none'
+            />
+          ) : (
+            <rect
+              fill={`url(#${patternInfo.patternId})`}
+              width={15}
+              height={15}
+              x={0.5}
+              y={0.5}
+              stroke='none'
+            />
+          )}
+        </svg>
+      </span>
+    )
+  }
+
+  // Default solid color shape
   const styles = {
     borderRadius: shape === 'circle' ? '50%' : '0px',
-    verticalAlign: 'middle',
     display: display,
     height: dimensions.height,
     width: dimensions.width,
     border: borderColor ? `${borderColor} 1px solid` : 'rgba(0,0,0,.3) 1px solid',
-    backgroundColor: fill
+    backgroundColor: fill,
   }
 
   return <span className={`legend-item ${isCircleOrSquare ? 'me-2' : ''}`} style={styles} />

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

@@ -1,6 +1,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'
 
 const buttonText = {
   pdf: 'Download PDF',
@@ -38,63 +39,99 @@ const generateMedia = (state, type, elementToCapture, interactionLabel) => {
   // Identify Selector
   const baseSvg = document.querySelector(`[data-download-id=${elementToCapture}]`)
 
+  // Extract title from different state structures
+  const getTitle = state => {
+    if (state?.dashboard?.title) return state.dashboard.title
+    if (state?.general?.title) return state.general.title
+    if (state?.title) return state.title
+    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
+
+        // Fix select elements to show their current selected values before screenshot
+        const selectElements = container.querySelectorAll('select')
+        const originalSelects = baseSvg.querySelectorAll('select')
+
+        selectElements.forEach((select, index) => {
+          const originalSelect = originalSelects[index]
+          if (originalSelect && originalSelect.value) {
+            select.value = originalSelect.value
+            // Also update the visual display for browsers that don't update immediately
+            const selectedOption = select.querySelector(`option[value="${originalSelect.value}"]`) as HTMLOptionElement
+            if (selectedOption) {
+              selectedOption.selected = true
+            }
+          }
+        })
+
         import(/* webpackChunkName: "html2canvas" */ 'html2canvas').then(mod => {
           mod
             .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
               saveImageAs(canvas.toDataURL(), filename + '.png')
-              publishAnalyticsEvent(`${state.type}_image_downloaded`, 'click', interactionLabel, `${state.type}`)
+              publishAnalyticsEvent({
+                vizType: state.type,
+                vizSubType: getVizSubType(state),
+                eventType: `image_download`,
+                eventAction: 'click',
+                eventLabel: interactionLabel,
+                vizTitle: getTitle(state)
+              })
             })
         })
       }
@@ -151,7 +188,14 @@ const Link = ({ config, dashboardDataConfig, interactionLabel }) => {
         title={buttonText.link}
         target='_blank'
         onClick={() => {
-          publishAnalyticsEvent('data_viewed', 'click', `${unknown}`)
+          publishAnalyticsEvent({
+            vizType: config.type,
+            vizSubType: getVizSubType(config),
+            eventType: 'clicked_data_link_to_view',
+            eventAction: 'click',
+            eventLabel: interactionLabel,
+            vizTitle: getVizTitle(config)
+          })
         }}
       >
         {buttonText.link}
@@ -166,7 +210,14 @@ const Link = ({ config, dashboardDataConfig, interactionLabel }) => {
       title='Link to view full data set'
       target='_blank'
       onClick={() => {
-        publishAnalyticsEvent('data_viewed', 'click', `${interactionLabel}`)
+        publishAnalyticsEvent({
+          vizType: config.type,
+          vizSubType: getVizSubType(config),
+          eventType: 'data_viewed',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config)
+        })
       }}
     >
       {buttonText.link}