@cdc/core 4.26.1 → 4.26.3

package/components/EditorPanel/sections/StyleTreatmentSection.tsx

@@ -0,0 +1,99 @@
+import { CheckBox, Select } from '../Inputs'
+
+type StyleTreatmentValue = 'legacy' | 'tp5'
+
+type StyleTreatmentSectionProps = {
+  styleTreatment: StyleTreatmentValue
+  onStyleTreatmentChange: (value: StyleTreatmentValue) => void
+  showStyleTreatment?: boolean
+  showLegacyControls?: boolean
+  border?: boolean
+  borderColorTheme?: boolean
+  accent?: boolean
+  background?: boolean
+  hideBackgroundColor?: boolean
+  showBackground?: boolean
+  showHideBackgroundColor?: boolean
+  updateField: Function
+}
+
+const StyleTreatmentSection = ({
+  styleTreatment,
+  onStyleTreatmentChange,
+  showStyleTreatment = true,
+  showLegacyControls = true,
+  border,
+  borderColorTheme,
+  accent,
+  background,
+  hideBackgroundColor,
+  showBackground = false,
+  showHideBackgroundColor = false,
+  updateField
+}: StyleTreatmentSectionProps) => {
+  const hasContent = showStyleTreatment || (showLegacyControls && styleTreatment === 'legacy')
+  if (!hasContent) return null
+
+  return (
+    <div className='cove-accordion__panel-section checkbox-group'>
+      {showStyleTreatment && (
+        <Select
+          label='Style Treatment'
+          fieldName='styleTreatment'
+          value={styleTreatment}
+          style={{ width: '100%' }}
+          options={[
+            { label: 'Legacy', value: 'legacy' },
+            { label: 'TP5', value: 'tp5' }
+          ]}
+          onChange={event => onStyleTreatmentChange(event.target.value as StyleTreatmentValue)}
+        />
+      )}
+      {showLegacyControls && styleTreatment === 'legacy' && (
+        <>
+          <CheckBox
+            value={border}
+            section='visual'
+            fieldName='border'
+            label='Display Border'
+            updateField={updateField}
+          />
+          <CheckBox
+            value={borderColorTheme}
+            section='visual'
+            fieldName='borderColorTheme'
+            label='Use Border Color Theme'
+            updateField={updateField}
+          />
+          <CheckBox
+            value={accent}
+            section='visual'
+            fieldName='accent'
+            label='Use Accent Style'
+            updateField={updateField}
+          />
+          {showBackground && (
+            <CheckBox
+              value={background}
+              section='visual'
+              fieldName='background'
+              label='Use Theme Background Color'
+              updateField={updateField}
+            />
+          )}
+          {showHideBackgroundColor && (
+            <CheckBox
+              value={hideBackgroundColor}
+              section='visual'
+              fieldName='hideBackgroundColor'
+              label='Hide Background Color'
+              updateField={updateField}
+            />
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default StyleTreatmentSection

package/components/EditorPanel/sections/VisualSection.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 import { CheckBox } from '../Inputs'
 import { HeaderThemeSelector } from '../../HeaderThemeSelector'
 import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
+import { isCoveDeveloperMode } from '../../../helpers/queryStringUtils'
 
 export interface VisualSectionConfig {
   visual?: {
@@ -10,6 +11,7 @@ export interface VisualSectionConfig {
     accent?: boolean
     background?: boolean
     hideBackgroundColor?: boolean
+    highlightWrappers?: boolean
   }
   theme?: string
 }
@@ -154,6 +156,15 @@ export const VisualSection = <TConfig extends VisualSectionConfig = VisualSectio
           updateField={updateField}
         />
       )}
+      {isCoveDeveloperMode() && (
+        <CheckBox
+          value={visual.highlightWrappers}
+          section='visual'
+          fieldName='highlightWrappers'
+          label='Highlight Layout Wrappers'
+          updateField={updateField}
+        />
+      )}
     </div>
   )
 

package/components/EditorWrapper/editor-wrapper.style.css

@@ -1,7 +1,7 @@
 .editor-wrapper {
   --editorPanelWidth: 350px;
-  position: relative;
   min-height: 80vh;
+  position: relative;
   .editor-panel {
     :is(form) {
       border-right: var(--lightGray) 1px solid;

package/components/Filters/Filters.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useMemo, useRef, useId } from 'react'
+import './filters.scss'
 import _ from 'lodash'
 import parse from 'html-react-parser'
 
@@ -210,12 +211,9 @@ const Filters: React.FC<FilterProps> = ({
   if (!hasVisibleFilters) return <></>
 
   const getClasses = () => {
-    const { visualizationType, legend } = visualizationConfig || {}
-    const baseClass = 'filters-section'
-    const conditionalClass = standaloneMap ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
+    const { legend } = visualizationConfig || {}
     const legendClass = legend && !legend.hide && legend.position === 'top' ? 'mb-0' : null
-
-    return [baseClass, conditionalClass, legendClass, 'w-100'].filter(Boolean)
+    return ['filters-section', legendClass, 'w-100'].filter(Boolean)
   }
 
   const getNestedGroup = (singleFilter: VizFilter): string[] => {

package/components/Filters/components/Tabs.tsx

@@ -1,14 +1,23 @@
 import { useEffect, useId, useState } from 'react'
 import { VizFilter } from '../../../types/VizFilter'
 
+type TabCompatibleFilter = {
+  filterStyle: string
+  values: string[]
+  active?: string | string[]
+  queuedActive?: string | string[]
+  labels?: Record<string, string>
+}
+
 type TabsProps = {
-  filter: VizFilter
+  filter: VizFilter | TabCompatibleFilter
   index: number
   changeFilterActive: Function
-  theme: string
+  theme?: string
+  loading?: boolean
 }
 
-const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActive, theme }) => {
+const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActive, loading }) => {
   const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
 
   const id = useId()
@@ -21,18 +30,19 @@ const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActi
   }, [selectedFilter])
 
   const getClassList = value => {
-    const isActive = filter.active === value
+    const activeValue = filter.queuedActive || filter.active
+    const isActive = activeValue === value
     let classList = []
     switch (filter.filterStyle) {
       case 'tab bar':
         classList = ['button__tab-bar', isActive && 'button__tab-bar--active']
         break
       case 'pill':
-        classList = ['pill', isActive && 'pill--active', theme && theme]
+        classList = ['pill', isActive && 'pill--active']
         break
       default:
         const tabSimple = filter.filterStyle === 'tab-simple' && 'tab--simple'
-        classList = ['tab', isActive && 'tab--active', theme && theme, tabSimple]
+        classList = ['tab', isActive && 'tab--active', tabSimple]
         break
     }
     return classList.filter(Boolean).join(' ')
@@ -41,9 +51,11 @@ const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActi
   const Tabs = filter.values.map((value, index) => {
     return (
       <button
+        type='button'
         key={`${value}-${outerIndex}-${index}-${id}`}
         id={`${value}-${outerIndex}-${index}-${id}`}
         className={getClassList(value)}
+        disabled={loading}
         onClick={e => {
           changeFilterActive(outerIndex, value)
           setSelectedFilter(e.target)
@@ -55,7 +67,7 @@ const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActi
           }
         }}
       >
-        {value}
+        {filter.labels?.[value] || value}
       </button>
     )
   })

package/{styles → components/Filters}/filters.scss

@@ -1,11 +1,10 @@
-@import 'v2/utils/breakpoints';
+@import '../../styles/utils/breakpoints';
 
 .filters-section {
   &__wrapper {
     flex-wrap: wrap;
     display: flex;
     gap: 1rem 1.5rem;
-    margin-bottom: 2rem;
 
     label {
       display: inherit;
@@ -107,7 +106,7 @@ div.single-filters {
   }
 }
 
-.cdc-open-viz-module {
+.cove-visualization {
   @include breakpointClass(xs) {
     .single-filters--tab-simple .tab-simple-container .tab.tab--simple {
       font-size: 0.778em;
@@ -152,6 +151,7 @@ div.single-filters {
     flex: 1 1 0px;
     padding: 10px;
     background: none;
+    border: none;
     transition: background 2s;
 
     &--active {

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -13,9 +13,10 @@ type StandAloneProps = {
   markupVariables?: MarkupVariable[]
   enableMarkupVariables?: boolean
   data?: Object[]
+  dataMetadata?: Record<string, string>
 }
 
-const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters, markupVariables = [], enableMarkupVariables = false, data = [] }) => {
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters, markupVariables = [], enableMarkupVariables = false, data = [], dataMetadata }) => {
   if (!config) return null
 
   // Helper function to process markup variables in footnote text
@@ -33,7 +34,8 @@ const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters, marku
       markupVariables,
       {
         filters,
-        isEditor: false
+        isEditor: false,
+        dataMetadata
       }
     )
 

package/components/HeaderThemeSelector/HeaderThemeSelector.css

@@ -1,3 +1,59 @@
+/* Scoped theme color classes for header theme selector circles */
+.header .color-palette button.theme-purple {
+  background: #712177;
+  border-bottom-color: #b890bb;
+}
+
+.header .color-palette button.theme-brown {
+  background: #705043;
+  border-bottom-color: #ad907b;
+}
+
+.header .color-palette button.theme-teal {
+  background: #00695c;
+  border-bottom-color: #4ebaaa;
+}
+
+.header .color-palette button.theme-pink {
+  background: #af4448;
+  border-bottom-color: #e57373;
+}
+
+.header .color-palette button.theme-orange {
+  background: #bb4d00;
+  border-bottom-color: #ffad42;
+}
+
+.header .color-palette button.theme-slate {
+  background: #29434e;
+  border-bottom-color: #7e9ba5;
+}
+
+.header .color-palette button.theme-indigo {
+  background: #26418f;
+  border-bottom-color: #92a6dd;
+}
+
+.header .color-palette button.theme-cyan {
+  background: #007b91;
+  border-bottom-color: #65b0bd;
+}
+
+.header .color-palette button.theme-green {
+  background: #4b830d;
+  border-bottom-color: #84bc49;
+}
+
+.header .color-palette button.theme-amber {
+  background: #fbab18;
+  border-bottom-color: #ffd54f;
+}
+
+.header .color-palette button.theme-blue {
+  background: #005eaa;
+  border-bottom-color: #88c3ea;
+}
+
 /* HeaderThemeSelector component styles */
 
 .header {
@@ -6,8 +62,8 @@
 
 .header .edit-label {
   display: block;
-  margin-bottom: 0.5rem;
   font-weight: 500;
+  margin-bottom: 0.5rem;
 }
 
 .header .color-palette {
@@ -20,13 +76,13 @@
 }
 
 .header .color-palette button {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
   border: 2px solid transparent;
+  border-radius: 50%;
   cursor: pointer;
-  transition: all 0.2s ease;
+  height: 30px;
   outline: none;
+  transition: all 0.2s ease;
+  width: 30px;
 }
 
 .header .color-palette button:hover {

package/components/Layout/components/Responsive.tsx

@@ -13,11 +13,17 @@ const breakpoints = [
   '1280' // xl
 ]
 
-const os =
-  navigator.userAgent.indexOf('Win') !== -1 ? 'Win' : navigator.userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
+const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : ''
+const os = userAgent.indexOf('Win') !== -1 ? 'Win' : userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
 
-const Responsive = ({ children, isEditor }) => {
+type ResponsiveProps = {
+  children: React.ReactNode
+  isEditor: boolean
+}
+
+const Responsive = ({ children, isEditor }: ResponsiveProps) => {
   const [displayPanel, setDisplayPanel] = useState(false)
+  const togglePanel = () => setDisplayPanel(p => !p)
   const [displayGrid, setDisplayGrid] = useState(false)
   const [viewportPreview, setViewportPreview] = useState(null)
   const [rotateAnimation, setRotateAnimation] = useState(false)
@@ -37,7 +43,7 @@ const Responsive = ({ children, isEditor }) => {
 
   const onKeypress = key => {
     if (!isEditor) return key
-    if (key.code === 'KeyL' && key.ctrlKey) setDisplayPanel(display => !display)
+    if (key.code === 'KeyL' && key.ctrlKey) togglePanel()
     const viewportCommandKey = os === 'MacOS' ? key.metaKey : key.altKey
     if (viewportCommandKey) {
       let keyIndex = key.key
@@ -109,9 +115,11 @@ const Responsive = ({ children, isEditor }) => {
     }
   })
 
-  const onBackClick = () => setDisplayPanel(!displayPanel)
+  const onBackClick = () => togglePanel()
 
-  if (!isEditor || !displayPanel) return children
+  if (!isEditor || !displayPanel) {
+    return <div className='cove-visualization__outer'>{children}</div>
+  }
 
   return (
     <div className='cove-editor__content' data-grid={displayGrid || null}>

package/components/Layout/components/Sidebar/components/Sidebar.tsx

@@ -40,7 +40,7 @@ const Sidebar: React.FC<SidebarProps> = props => {
   return (
     <>
       {/* mimic the editor panel title to keep the button visible. */}
-      <section className='editor-panel__toggle-wrapper p-absolute' style={{ height: '49.75px', width: '350px' }}>
+      <section className='editor-panel__toggle-wrapper' style={{ height: '49.75px', width: '350px' }}>
         <button className={getButtonClasses()} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
       </section>
       <section className={getSectionClasses()}>

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

@@ -2,20 +2,20 @@
   top: 0;
 }
 
-.cdc-editor .configure .editor-heading + .cdc-open-viz-module .editor-panel__toggle {
+.cdc-editor .configure .editor-heading + .cove-visualization .editor-panel__toggle {
   top: 12px;
   position: relative;
 }
 
-.cdc-editor .configure .cdc-open-viz-module:not(.type-dashboard) .editor-panel__toggle {
+.cdc-editor .configure .cove-visualization:not(.type-dashboard) .editor-panel__toggle {
   position: absolute;
 }
 
-.cdc-editor .configure .cdc-open-viz-module:not(.type-dashboard) .sidebar {
+.cdc-editor .configure .cove-visualization:not(.type-dashboard) .sidebar {
   position: relative;
 }
 
-.cdc-open-viz-module {
+.cove-visualization {
   .waiting {
     padding-top: 0 !important;
     padding-left: 0 !important;
@@ -26,7 +26,7 @@
     height: 100%; // take up the whole container
     top: 0;
     max-width: 350px;
-    width: 350px;
+    min-width: 0;
     background-color: var(--white);
     grid-area: panel;
 
@@ -440,6 +440,11 @@
 
       &.checkbox {
         display: flex;
+        align-items: center;
+
+        span.edit-label {
+          margin-bottom: 0;
+        }
 
         input {
           margin-left: 0;
@@ -626,9 +631,9 @@
 
     .sort-list {
       list-style: none;
+      padding: 0;
 
       > li {
-        margin-right: 0.3em;
         margin-bottom: 0.3em;
       }
     }
@@ -641,8 +646,8 @@
       background: #f1f1f1;
       padding: 0.4em 0.6em;
       font-size: 0.8em;
-      margin-bottom: 0.3em;
       cursor: move;
+      width: 100%;
     }
 
     .info {
@@ -799,12 +804,6 @@
       font-size: 0.75rem;
     }
 
-    .cove-accordion__button .cove-tooltip {
-      // display: inline-flex;
-      // right: 1.5rem;
-      // line-height: inherit;
-    }
-
     .cove-list-group__item .cove-tooltip {
       width: 100%;
       display: block;
@@ -929,15 +928,10 @@
     }
   }
 
-  &.type-dashboard {
-    .editor-panel__toggle {
-      top: 64px;
-    }
-  }
-
   .editor-panel__toggle-wrapper {
     position: absolute;
     top: 0;
+    left: 0;
   }
 
   .editor-panel__toggle {
@@ -952,7 +946,7 @@
     cursor: pointer;
     width: 25px;
     height: 25px;
-    right: 10px;
+    left: calc(100% - 35px);
     top: 50%;
     transform: translateY(-50%);
     box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;

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

@@ -1,24 +1,21 @@
 // main visualization wrapper
-import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import React, { forwardRef } from 'react'
-import { Config as DataBiteConfig } from '@cdc/data-bite/src/types/Config'
-import { Config as DataTableConfig } from '@cdc/data-table/src/types/Config'
 import './visualizations.scss'
-import { Config as WaffleChartConfig } from '@cdc/waffle-chart/src/types/Config'
-import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
-import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
-import { MapConfig } from '@cdc/map/src/types/MapConfig'
+import type { AnyVisualization } from '@cdc/core/types/Visualization'
+
+export type VisualizationShellConfig = Partial<AnyVisualization> & {
+  type?: AnyVisualization['type'] | 'dashboard'
+  theme?: string
+  visual?: {
+    highlightWrappers?: boolean
+    whiteBackground?: boolean
+  }
+}
 
 type VisualizationWrapper = {
   children: React.ReactNode
-  config:
-    | ChartConfig
-    | DataBiteConfig
-    | WaffleChartConfig
-    | MarkupIncludeConfig
-    | DashboardFilters
-    | MapConfig
-    | DataTableConfig
+  className?: string
+  config: VisualizationShellConfig
   currentViewport?: string
   imageId?: string
   isEditor: boolean
@@ -35,15 +32,17 @@ const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, r
     className
   } = props
 
+  const themeClass = config.type === 'map' ? config?.general?.headerColor || config?.theme : config?.theme
+
   const getWrappingClasses = () => {
-    let classes = ['cdc-open-viz-module', `${currentViewport}`, `${config?.theme}`]
+    let classes = ['cove-visualization', 'cdc-open-viz-module', `${currentViewport}`, `${themeClass}`]
 
     if (className) {
       classes.push(className)
     }
 
     isEditor && classes.push('spacing-wrapper')
-    isEditor && classes.push('isEditor')
+    isEditor && classes.push('is-editor')
 
     if (isEditor && showEditorPanel) {
       classes = classes.filter(item => item !== 'editor-panel--hidden')
@@ -55,9 +54,18 @@ const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, r
       classes.push('editor-panel--hidden')
     }
 
+    if (isEditor && config.visual?.highlightWrappers) {
+      classes.push('cove-highlight-wrappers')
+    }
+
     if (config.type === 'filtered-text') {
       classes.push('type-filtered-text', `font-${config.fontSize}`)
-      classes = classes.filter(item => item !== 'cove-component__content')
+      classes = classes.filter(item => item !== 'cove-visualization__body')
+      return classes
+    }
+
+    if (config.type === 'dashboard') {
+      classes.push('type-dashboard')
       return classes
     }
 
@@ -66,37 +74,31 @@ const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, r
       config?.visualizationType === 'Spark Line' && classes.push(`type-sparkline`)
       return classes
     }
+
     if (config.type === 'map') {
       classes.push(`type-map`)
-      if (config?.runtime?.editorErrorMessage.length !== 0) classes.push('type-map--has-error')
+      if (config?.runtime?.editorErrorMessage?.length) classes.push('type-map--has-error')
+      return classes
+    }
+
+    if (config.type === 'table') {
+      classes.push('type-data-table')
+      return classes
     }
 
     if (config.type === 'data-bite') {
-      classes.push('cdc-open-viz-module', 'type-data-bite', currentViewport, config.theme, `font-${config.fontSize}`)
-      if (isEditor) {
-        classes.push('is-editor')
-      }
+      classes.push('type-data-bite', `font-${config.fontSize}`)
+      return classes
     }
 
     if (config.type === 'markup-include') {
-      classes.push('markup-include', 'cdc-open-viz-module')
+      classes.push('type-markup-include')
+      return classes
     }
 
     if (config.type === 'waffle-chart') {
-      classes.push(
-        'cove',
-        'cdc-open-viz-module',
-        'type-waffle-chart',
-        currentViewport,
-        config.theme,
-        'font-' + config.overallFontSize
-      )
-
-      if (isEditor) {
-        classes.push('is-editor')
-      }
+      classes.push('type-waffle-chart', 'font-' + config.overallFontSize)
 
-      // Add TP5 style classes
       if (config.visualizationType === 'TP5 Waffle') {
         classes.push('waffle__style--tp5')
         if (config.visual?.whiteBackground) {
@@ -104,8 +106,16 @@ const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, r
         }
       }
 
-      classes.push('cove-component', 'waffle-chart')
+      if (config.visualizationType === 'TP5 Gauge') {
+        classes.push('gauge__style--tp5')
+        if (config.visual?.whiteBackground) {
+          classes.push('white-background-style')
+        }
+      }
+
+      return classes
     }
+
     return classes
   }
 
@@ -121,4 +131,6 @@ const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, r
   )
 })
 
+Visualization.displayName = 'Visualization'
+
 export default Visualization