@cdc/core 4.26.2 → 4.26.3

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,41 +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) {
@@ -115,8 +113,9 @@ const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, r
         }
       }
 
-      classes.push('cove-component', 'waffle-chart')
+      return classes
     }
+
     return classes
   }
 
@@ -132,4 +131,6 @@ const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, r
   )
 })
 
+Visualization.displayName = 'Visualization'
+
 export default Visualization

package/components/Layout/components/Visualization/visualizations.scss

@@ -1,46 +1,263 @@
-.cdc-open-viz-module {
-  .cdc-chart-inner-container .cove-component__content {
-    padding: 0 0 27px 0 !important;
-  }
-  &.isEditor {
+.cove-visualization {
+  &.is-editor {
     overflow: auto;
     display: grid;
+    position: relative;
     transition: grid-template-columns 400ms ease-in-out;
     min-height: 100vh;
 
     .editor-panel__toggle {
-      transition: left 400ms ease-in-out;
+      transition: left 400ms ease-in-out, background 0.1s;
     }
 
     .sidebar {
-      transition: left 400ms ease-in-out;
+      overflow: hidden;
+    }
+
+    // Override dashboard's .editor-panel absolute positioning that conflicts with the grid layout.
+    // .cove-visualization.type-dashboard scopes .editor-panel { position: absolute } (specificity 0,3,0),
+    // so we need 4 classes here (specificity 0,4,0) to win.
+    .editor-panel.sidebar {
+      position: static;
+      z-index: auto;
+      overflow: hidden;
+      top: auto;
+      bottom: auto;
+      width: auto;
     }
 
     &.editor-panel--visible {
       grid-template-areas: 'panel content';
       grid-template-columns: 350px calc(100% - 350px);
-      overflow: hidden;
+
+      .cove-visualization__outer {
+        overflow: hidden;
+      }
     }
 
     &.editor-panel--hidden {
       grid-template-areas: 'panel content';
       grid-template-columns: 0px 100%;
+      overflow: hidden;
     }
 
     .cove-editor__content,
-    .cove-component__content {
+    .cove-visualization__outer,
+    .cove-visualization__inner {
       grid-area: content;
       position: relative;
       left: 0;
       width: 100% !important;
-      grid-area: content;
+    }
+
+    .cove-editor__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;
-      }
+    .cove-visualization__outer {
+      padding: 1rem;
     }
   }
 }
+
+// Developer highlight tool — only active when .is-editor + config.visual.highlightWrappers
+// Enabled via ?isCoveDeveloper=true URL param + "Highlight Layout Wrappers" checkbox
+.cove-visualization.is-editor.cove-highlight-wrappers {
+  outline: 2px dashed #0050d8;
+  position: relative;
+
+  &::before {
+    background: #0050d8;
+    color: #fff;
+    content: 'cove-visualization';
+    font-family: monospace;
+    font-size: 10px;
+    line-height: 1;
+    padding: 2px 4px;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+  }
+
+  .cove-visualization__outer {
+    outline: 2px dashed #00a91c;
+    position: relative;
+
+    &::before {
+      background: #00a91c;
+      color: #fff;
+      content: '__outer';
+      font-family: monospace;
+      font-size: 10px;
+      line-height: 1;
+      padding: 2px 4px;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 9999;
+    }
+  }
+
+  .cove-visualization__inner {
+    outline: 2px dashed #e52207;
+    position: relative;
+
+    &::before {
+      background: #e52207;
+      color: #fff;
+      content: '__inner';
+      font-family: monospace;
+      font-size: 10px;
+      line-height: 1;
+      padding: 2px 4px;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 9999;
+    }
+  }
+
+  .cove-visualization__title,
+  .cove-visualization__header {
+    outline: 2px dashed #8a2be2;
+    position: relative;
+
+    &::before {
+      background: #8a2be2;
+      color: #fff;
+      content: '__title';
+      font-family: monospace;
+      font-size: 10px;
+      line-height: 1;
+      padding: 2px 4px;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 9999;
+    }
+  }
+
+  .cove-visualization__body {
+    outline: 2px dashed #e52207;
+    position: relative;
+
+    &::before {
+      background: #e52207;
+      color: #fff;
+      content: '__body';
+      font-family: monospace;
+      font-size: 10px;
+      line-height: 1;
+      padding: 2px 4px;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 9999;
+    }
+  }
+
+  .cove-visualization__message {
+    outline: 2px dashed #0050d8;
+    position: relative;
+
+    &::before {
+      background: #0050d8;
+      color: #fff;
+      content: '__message';
+      font-family: monospace;
+      font-size: 10px;
+      line-height: 1;
+      padding: 2px 4px;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 9999;
+    }
+  }
+
+  .cove-visualization__body-wrap {
+    outline: 2px dashed #e66f0e;
+    position: relative;
+
+    &::before {
+      background: #e66f0e;
+      color: #fff;
+      content: '__body-wrap';
+      font-family: monospace;
+      font-size: 10px;
+      line-height: 1;
+      padding: 2px 4px;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 9999;
+    }
+  }
+
+}
+
+.cove-visualization {
+  font-size: var(--app-font-size);
+
+  .cove-visualization__body,
+  .cove-visualization__body-wrap,
+  .cove-visualization__message-section,
+  .cove-visualization__content-section,
+  .cove-visualization__body-subtext-section,
+  .cove-visualization__body-footer-section,
+  .cove-visualization__subtext-section {
+    color: var(--baseColor);
+    font-family: var(--visualization-body-font-family, var(--app-font-main));
+    line-height: var(--visualization-body-line-height, 1.5);
+  }
+
+  .cove-visualization__content-section,
+  .cove-visualization__message-section,
+  .cove-visualization__body-subtext-section,
+  .cove-visualization__body-footer-section,
+  .cove-visualization__subtext-section {
+    width: 100%;
+  }
+
+  .cove-visualization__title~.cove-visualization__body .cove-visualization__body-wrap,
+  .cove-visualization__body.component--has-legacy-border .cove-visualization__body-wrap,
+  .cove-visualization__body.component--has-border-color-theme .cove-visualization__body-wrap,
+  .cove-visualization__body.component--has-background .cove-visualization__body-wrap {
+    padding-top: var(--cove-visualization-section-gap, 1.5rem);
+    padding-bottom: var(--cove-visualization-section-gap, 1.5rem);
+  }
+
+  .cove-visualization__body.component--has-legacy-border .cove-visualization__content-section,
+  .cove-visualization__body.component--has-border-color-theme .cove-visualization__content-section,
+  .cove-visualization__body.component--has-background .cove-visualization__content-section {
+    padding-inline: 0;
+  }
+
+  &.type-data-bite .cove-visualization__body-wrap {
+    padding-top: var(--cove-visualization-section-gap, 1.5rem);
+    padding-bottom: var(--cove-visualization-section-gap, 1.5rem);
+  }
+
+  .cove-visualization__body-wrap {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--cove-visualization-section-gap, 1.5rem);
+
+    // Prevent content margins from stacking with row-gap
+    >*> :first-child {
+      margin-top: 0;
+    }
+
+    >*> :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/components/Layout/components/VisualizationContainer.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import VisualizationContainer from './VisualizationContainer'
+
+describe('VisualizationContainer', () => {
+  it('renders the shared outer shell contract for dashboard wrappers', () => {
+    const { container } = render(
+      <VisualizationContainer
+        config={{ type: 'dashboard', theme: 'theme-blue' }}
+        currentViewport='md'
+        imageId='dashboard-image'
+        isEditor={false}
+        renderResponsive={false}
+      >
+        <div>Dashboard body</div>
+      </VisualizationContainer>
+    )
+
+    const shell = container.querySelector('.cove-visualization')
+
+    expect(shell).toHaveClass('cdc-open-viz-module', 'type-dashboard', 'md', 'theme-blue')
+    expect(shell).toHaveAttribute('data-download-id', 'dashboard-image')
+    expect(shell?.querySelector('.cove-visualization__outer')).toBeNull()
+  })
+
+  it('renders the editor panel and responsive wrapper when enabled', () => {
+    const { container } = render(
+      <VisualizationContainer
+        config={{ type: 'chart', showEditorPanel: true }}
+        currentViewport='lg'
+        editorPanel={<div data-testid='editor-panel'>Editor Panel</div>}
+        isEditor={true}
+      >
+        <div>Chart body</div>
+      </VisualizationContainer>
+    )
+
+    expect(screen.getByTestId('editor-panel')).toBeInTheDocument()
+    expect(container.querySelector('.cove-visualization')).toHaveClass('type-chart', 'is-editor', 'editor-panel--visible')
+    expect(container.querySelector('.cove-visualization__outer')).toBeInTheDocument()
+  })
+
+  it('hides the editor panel class when editor panels are disabled in config', () => {
+    const { container } = render(
+      <VisualizationContainer config={{ type: 'map', showEditorPanel: false }} isEditor={true}>
+        <div>Map body</div>
+      </VisualizationContainer>
+    )
+
+    expect(container.querySelector('.cove-visualization')).toHaveClass('editor-panel--hidden')
+  })
+
+  it('uses the map header theme on the shared visualization shell', () => {
+    const { container } = render(
+      <VisualizationContainer
+        config={{ type: 'map', general: { headerColor: 'theme-purple' } }}
+        currentViewport='lg'
+        isEditor={false}
+      >
+        <div>Map body</div>
+      </VisualizationContainer>
+    )
+
+    expect(container.querySelector('.cove-visualization')).toHaveClass('type-map', 'theme-purple')
+  })
+})

package/components/Layout/components/VisualizationContainer.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react'
+import Responsive from './Responsive'
+import Visualization, { type VisualizationShellConfig } from './Visualization'
+
+type VisualizationContainerProps = {
+  children: React.ReactNode
+  className?: string
+  config: VisualizationShellConfig
+  currentViewport?: string
+  editorPanel?: React.ReactNode
+  imageId?: string
+  isEditor: boolean
+  renderResponsive?: boolean
+}
+
+const VisualizationContainer = forwardRef<HTMLDivElement, VisualizationContainerProps>(
+  ({ children, className, config, currentViewport, editorPanel, imageId, isEditor, renderResponsive = true }, ref) => {
+    return (
+      <Visualization
+        ref={ref}
+        config={config}
+        isEditor={isEditor}
+        showEditorPanel={config?.showEditorPanel}
+        currentViewport={currentViewport}
+        imageId={imageId}
+        className={className}
+      >
+        {isEditor && editorPanel}
+        {renderResponsive ? <Responsive isEditor={isEditor}>{children}</Responsive> : children}
+      </Visualization>
+    )
+  }
+)
+
+VisualizationContainer.displayName = 'VisualizationContainer'
+
+export default VisualizationContainer