@cdc/core 4.25.11 → 4.26.2

package/components/EditorPanel/sections/VisualSection.tsx

@@ -0,0 +1,169 @@
+import { ReactNode } from 'react'
+import { CheckBox } from '../Inputs'
+import { HeaderThemeSelector } from '../../HeaderThemeSelector'
+import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
+
+export interface VisualSectionConfig {
+  visual?: {
+    border?: boolean
+    borderColorTheme?: boolean
+    accent?: boolean
+    background?: boolean
+    hideBackgroundColor?: boolean
+  }
+  theme?: string
+}
+
+export interface VisualSectionProps<TConfig extends VisualSectionConfig = VisualSectionConfig> {
+  /** The visualization config object */
+  config: TConfig
+
+  /** Update function for individual fields */
+  updateField: UpdateFieldFunc<TConfig>
+
+  /** Update function for the entire config (used by HeaderThemeSelector) */
+  updateConfig: (config: TConfig) => void
+
+  /** Optional content to render before the standard checkboxes */
+  beforeCheckboxes?: ReactNode
+
+  /** Optional content to render after the standard checkboxes */
+  afterCheckboxes?: ReactNode
+
+  /** Position of HeaderThemeSelector. Defaults to 'before' */
+  themeSelectorPosition?: 'before' | 'after' | 'none'
+
+  /** Whether to show the border checkbox. Defaults to true */
+  showBorder?: boolean
+
+  /** Whether to show the borderColorTheme checkbox. Defaults to true */
+  showBorderColorTheme?: boolean
+
+  /** Whether to show the accent checkbox. Defaults to true */
+  showAccent?: boolean
+
+  /** Whether to show the background checkbox. Defaults to true */
+  showBackground?: boolean
+
+  /** Whether to show the hideBackgroundColor checkbox. Defaults to true */
+  showHideBackgroundColor?: boolean
+}
+
+/**
+ * Reusable Visual section component for EditorPanels
+ *
+ * Provides common visual configuration options including:
+ * - Theme selection
+ * - Border controls
+ * - Background and accent styling
+ *
+ * Note: Must be wrapped in an Accordion.Section when used
+ *
+ * @example
+ * ```tsx
+ * <Accordion.Section title='Visual'>
+ *   <VisualSection
+ *     config={config}
+ *     updateField={updateField}
+ *     updateConfig={updateConfig}
+ *     beforeCheckboxes={
+ *       <Select
+ *         value={config.fontSize}
+ *         fieldName='fontSize'
+ *         label='Font Size'
+ *         updateField={updateField}
+ *         options={['small', 'medium', 'large']}
+ *       />
+ *     }
+ *   />
+ * </Accordion.Section>
+ * ```
+ */
+export const VisualSection = <TConfig extends VisualSectionConfig = VisualSectionConfig>({
+  config,
+  updateField,
+  updateConfig,
+  beforeCheckboxes,
+  afterCheckboxes,
+  themeSelectorPosition = 'before',
+  showBorder = true,
+  showBorderColorTheme = true,
+  showAccent = true,
+  showBackground = true,
+  showHideBackgroundColor = true
+}: VisualSectionProps<TConfig>) => {
+  const visual = config.visual || {}
+  const theme = config.theme
+
+  const renderThemeSelector = () => {
+    if (themeSelectorPosition === 'none') return null
+
+    return (
+      <HeaderThemeSelector
+        selectedTheme={theme}
+        onThemeSelect={theme => updateConfig({ ...config, theme } as TConfig)}
+        label='Theme'
+      />
+    )
+  }
+
+  const renderCheckboxes = () => (
+    <div className='checkbox-group'>
+      {showBorder && (
+        <CheckBox
+          value={visual.border}
+          section='visual'
+          fieldName='border'
+          label='Display Border'
+          updateField={updateField}
+        />
+      )}
+      {showBorderColorTheme && (
+        <CheckBox
+          value={visual.borderColorTheme}
+          section='visual'
+          fieldName='borderColorTheme'
+          label='Use Border Color Theme'
+          updateField={updateField}
+        />
+      )}
+      {showAccent && (
+        <CheckBox
+          value={visual.accent}
+          section='visual'
+          fieldName='accent'
+          label='Use Accent Style'
+          updateField={updateField}
+        />
+      )}
+      {showBackground && (
+        <CheckBox
+          value={visual.background}
+          section='visual'
+          fieldName='background'
+          label='Use Theme Background Color'
+          updateField={updateField}
+        />
+      )}
+      {showHideBackgroundColor && (
+        <CheckBox
+          value={visual.hideBackgroundColor}
+          section='visual'
+          fieldName='hideBackgroundColor'
+          label='Hide Background Color'
+          updateField={updateField}
+        />
+      )}
+    </div>
+  )
+
+  return (
+    <>
+      {beforeCheckboxes}
+      {themeSelectorPosition === 'before' && renderThemeSelector()}
+      {renderCheckboxes()}
+      {themeSelectorPosition === 'after' && renderThemeSelector()}
+      {afterCheckboxes}
+    </>
+  )
+}

package/components/Filters/Filters.tsx

@@ -5,6 +5,7 @@ import parse from 'html-react-parser'
 // CDC
 import Button from '../elements/Button'
 import MultiSelect from '../MultiSelect'
+import ComboBox from '../ComboBox'
 import { Visualization } from '../../types/Visualization'
 import { MultiSelectFilter, VizFilter } from '../../types/VizFilter'
 import { addValuesToFilters } from '../../helpers/addValuesToFilters'
@@ -14,7 +15,7 @@ import { getNestedOptions } from './helpers/getNestedOptions'
 import { getWrappingStatuses } from './helpers/filterWrapping'
 import { handleSorting } from './helpers/handleSorting'
 import { getChangedFilters } from './helpers/getChangedFilters'
-import { getUniqueValues } from '@cdc/map/src/helpers'
+import { getUniqueValues } from '../../helpers/getUniqueValues'
 import { getQueryParams, updateQueryString } from '../../helpers/queryStringUtils'
 import { applyQueuedActive } from './helpers/applyQueuedActive'
 import Tabs from './components/Tabs'
@@ -23,13 +24,14 @@ import { publishAnalyticsEvent } from '../../helpers/metrics/helpers'
 import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 
 export const VIZ_FILTER_STYLE = {
+  combobox: 'combobox',
   dropdown: 'dropdown',
+  multiSelect: 'multi-select',
   nestedDropdown: 'nested-dropdown',
   pill: 'pill',
   tab: 'tab',
   tabSimple: 'tab-simple',
-  tabBar: 'tab bar',
-  multiSelect: 'multi-select'
+  tabBar: 'tab bar'
 } as const
 
 export type VizFilterStyle = (typeof VIZ_FILTER_STYLE)[keyof typeof VIZ_FILTER_STYLE]
@@ -95,7 +97,9 @@ const Filters: React.FC<FilterProps> = ({
       eventAction: 'change',
       eventLabel: interactionLabel,
       vizTitle: getVizTitle(visualizationConfig),
-      specifics: `key: ${String(newFilters?.[index]?.columnName).toLowerCase()}, value: ${String(newFilters?.[index]?.active).toLowerCase()}`
+      specifics: `key: ${String(newFilters?.[index]?.columnName).toLowerCase()}, value: ${String(
+        newFilters?.[index]?.active
+      ).toLowerCase()}`
     })
   }
 
@@ -202,6 +206,9 @@ const Filters: React.FC<FilterProps> = ({
 
   if (visualizationConfig?.filters?.length === 0) return <></>
 
+  const hasVisibleFilters = filters?.some(filter => filter.showDropdown !== false)
+  if (!hasVisibleFilters) return <></>
+
   const getClasses = () => {
     const { visualizationType, legend } = visualizationConfig || {}
     const baseClass = 'filters-section'
@@ -216,6 +223,12 @@ const Filters: React.FC<FilterProps> = ({
     return (singleFilter.queuedActive || [singleFilter.active, singleFilter.subGrouping?.active]) as [string, string]
   }
 
+  // Don't render filter section if all filters are hidden
+  const allFiltersHidden = vizFiltersWithValues.every(filter => filter.showDropdown === false)
+  if (allFiltersHidden) {
+    return null
+  }
+
   return (
     <section className={getClasses().join(' ')}>
       {visualizationConfig.filterIntro && (
@@ -235,7 +248,9 @@ const Filters: React.FC<FilterProps> = ({
               'form-group',
               mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
             ]
-            const mobileExempt = ['nested-dropdown', 'multi-select', VIZ_FILTER_STYLE.tabSimple].includes(filterStyle)
+            const mobileExempt = ['nested-dropdown', 'multi-select', 'combobox', VIZ_FILTER_STYLE.tabSimple].includes(
+              filterStyle
+            )
             const { isDropdown } = wrappingFilters[columnName] || {}
             const showDefaultDropdown =
               ((filterStyle === 'dropdown' || mobileFilterStyle) && !mobileExempt) || isDropdown
@@ -302,6 +317,17 @@ const Filters: React.FC<FilterProps> = ({
                     handleSelectedItems={value => changeFilterActive(outerIndex, value)}
                   />
                 )}
+                {filterStyle === 'combobox' && (
+                  <ComboBox
+                    options={singleFilter.values.map(v => ({ value: v, label: v }))}
+                    fieldName={outerIndex}
+                    updateField={(_section, _subSection, fieldName, value) => {
+                      changeFilterActive(fieldName, value)
+                    }}
+                    selected={(singleFilter.queuedActive || singleFilter.active) as string}
+                    label={label}
+                  />
+                )}
               </div>
             )
           })}

package/components/Filters/helpers/getNestedOptions.ts

@@ -8,9 +8,10 @@ type GetOptionsMemoParams = {
 }
 
 export const getNestedOptions = ({ orderedValues, values, subGrouping }: GetOptionsMemoParams): NestedOptions => {
+  if (!values?.length && !orderedValues?.length) return []
   // keep custom ordered value order
   const filteredValues = orderedValues?.length
-    ? orderedValues.filter(orderedValue => values.includes(orderedValue))
+    ? orderedValues.filter(orderedValue => values?.includes(orderedValue))
     : values
   const options: NestedOptions = filteredValues.map<[ValueTextPair, ValueTextPair[]]>(value => {
     if (!subGrouping) return [[value], []]

package/components/Filters/helpers/handleSorting.ts

@@ -2,7 +2,7 @@ import _ from 'lodash'
 
 export const handleSorting = singleFilter => {
   const singleFilterValues = _.cloneDeep(singleFilter.values)
-  if (singleFilter.order === 'cust' && singleFilter.filterStyle !== 'nested-dropdown') {
+  if (singleFilter.order === 'cust') {
     singleFilter.values = singleFilter.orderedValues?.length ? singleFilter.orderedValues : singleFilterValues
     return singleFilter
   }

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);
     }
@@ -544,9 +626,9 @@
 
     .sort-list {
       list-style: none;
+      padding: 0;
 
       > li {
-        margin-right: 0.3em;
         margin-bottom: 0.3em;
       }
     }
@@ -559,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

@@ -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
@@ -64,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) {
@@ -89,6 +100,21 @@ 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')
+        }
+      }
+
+      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/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/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/MediaControls.tsx

@@ -1,7 +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'
+import { prepareScreenshotContainer } from '@cdc/core/helpers/prepareScreenshot'
 
 const buttonText = {
   pdf: 'Download PDF',
@@ -35,7 +35,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}]`)
 
@@ -58,22 +58,13 @@ const generateMedia = (state, type, elementToCapture, interactionLabel) => {
   // 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()}-${timestamp}`
-      )
+    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()}-${timestamp}`
-      )
+    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()}-${timestamp}`
-      )
+    if (state?.title) return `${state.title.replace(/\s+/g, '-').toLowerCase()}-${timestamp}`
 
     return 'no-title'
   }
@@ -82,18 +73,13 @@ const generateMedia = (state, type, elementToCapture, interactionLabel) => {
 
   switch (type) {
     case 'image':
-      const container = document.createElement('div')
-
-      // 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));
+      // 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')
@@ -119,10 +105,10 @@ const generateMedia = (state, type, elementToCapture, interactionLabel) => {
                 el.className.search(/download-buttons|download-links|data-table-container/) !== -1,
               useCORS: true,
               scale: 2, // Better quality
-              allowTaint: true,
+              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,
@@ -163,13 +149,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]}
@@ -177,6 +173,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
@@ -238,6 +262,7 @@ const MediaControls = () => null
 MediaControls.Section = Section
 MediaControls.Link = Link
 MediaControls.Button = Button
+MediaControls.DownloadLink = DownloadLink
 MediaControls.generateMedia = generateMedia
 
 export default MediaControls

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/components/ui/Icon.tsx

@@ -36,6 +36,7 @@ import iconTable from '../../assets/icon-table.svg'
 import iconSankey from '../../assets/icon-sankey.svg'
 import iconRotateLeft from '../../assets/icon-rotate-left.svg'
 import iconCommand from '../../assets/icon-command.svg'
+import iconMagnifyingGlass from '../../assets/icon-magnifying-glass.svg'
 
 import '../../styles/v2/components/icon.scss'
 
@@ -75,7 +76,8 @@ const iconHash = {
   table: iconTable,
   sankey: iconSankey,
   rotateLeft: iconRotateLeft,
-  command: iconCommand
+  command: iconCommand,
+  magnifyingGlass: iconMagnifyingGlass
 }
 
 export type IconType = keyof typeof iconHash