@cdc/core 4.25.11 → 4.26.1

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);
     }

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

@@ -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}]`)
 
@@ -58,22 +59,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 +74,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 +106,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 +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]}
@@ -177,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
@@ -238,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/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

package/components/ui/Title/index.tsx

@@ -13,12 +13,40 @@ type HeaderProps = {
   ariaLevel?: number
   config: Visualization
   theme?: string
+  titleStyle: 'legacy' | 'large' | 'small'
+  noContent?: boolean
 }
 
 const Title = (props: HeaderProps) => {
-  const { isDashboard, title, superTitle, classes = [], showTitle = true, ariaLevel = 2 } = props
+  const {
+    isDashboard,
+    title,
+    superTitle,
+    classes = [],
+    showTitle = true,
+    ariaLevel = 2,
+    titleStyle,
+    noContent = false
+  } = props
 
-  // standard classes every vis should have
+  if (titleStyle === 'large' || titleStyle === 'small') {
+    const TitleElement = titleStyle === 'large' ? 'h2' : 'h3'
+
+    return (
+      title &&
+      showTitle && (
+        <div
+          className={`cove-title cove-title--${titleStyle}${noContent ? ' cove-title--no-content' : ''}`}
+          style={props.style}
+        >
+          {superTitle && <sup>{parse(superTitle)}</sup>}
+          <TitleElement>{parse(title)}</TitleElement>
+        </div>
+      )
+    )
+  }
+
+  // LEGACY BLOCKY HEADER (Original design with colored backgrounds)
   const updatedClasses = ['cove-component__header', 'component__header', 'mb-3', ...classes]
 
   return (

package/components/ui/Title/title.styles.css

@@ -96,3 +96,45 @@
 .type-sparkline.type-chart .cove-component__header {
   margin: 0px !important;
 }
+
+/* ============================================================================
+   MODERN TITLE
+   ============================================================================ */
+
+.cdc-open-viz-module .cove-title--small {
+  margin-bottom: 0.75rem;
+}
+
+.cdc-open-viz-module .cove-title--large {
+  margin-bottom: 1.33rem;
+}
+
+/* Used in dashboards to more closely associate a title-only component with the content below it */
+.cdc-open-viz-module .cove-title--no-content {
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+.cdc-open-viz-module .cove-title h2 {
+  color: #0b4778;
+  font-size: 1.95rem;
+  font-family: var(--app-font-secondary);
+  border-bottom: 1px solid var(--cool-gray-10);
+  font-weight: 300;
+}
+
+.cdc-open-viz-module .cove-title h3 {
+  font-size: 1.5rem;
+  font-family: var(--app-font-secondary);
+}
+
+.cdc-open-viz-module .cove-title sup {
+  font-family: var(--app-font-secondary);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #666;
+  sup {
+    font-size: 75%;
+  }
+}

package/dist/cove-main.css

@@ -552,9 +552,6 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   justify-content: flex-end;
   line-height: 1;
 }
-.cdc-open-viz-module .download-links.brush-active {
-  margin-top: 2em;
-}
 .cdc-open-viz-module .download-links a:not(:last-child) {
   margin-right: 10px;
 }
@@ -1903,6 +1900,32 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   margin-bottom: 24px;
 }
 
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox,
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox,
+.panel-visual .checkbox-group label.checkbox,
+.panel-visual .reverse-labels label.checkbox {
+  display: flex !important;
+  align-items: center !important;
+  width: 100% !important;
+  margin-bottom: 8px !important;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox input[type=checkbox],
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox input[type=checkbox],
+.panel-visual .checkbox-group label.checkbox input[type=checkbox],
+.panel-visual .reverse-labels label.checkbox input[type=checkbox] {
+  flex-shrink: 0 !important;
+  margin-right: 8px !important;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox span,
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox span,
+.panel-visual .checkbox-group label.checkbox span,
+.panel-visual .reverse-labels label.checkbox span {
+  flex: 1 !important;
+  display: inline-block !important;
+}
+
 :root {
   --cove-tooltip-bg: #fff;
   --cove-tooltip-color: black;