@cdc/core 4.26.1 → 4.26.3

package/components/managers/DataDesigner.tsx

@@ -9,7 +9,7 @@ import {
   DATA_TABLE_SINGLE_ROW,
   DATA_TABLE_MULTI_ROW
 } from '../../templates/dataDesignerTables'
-import '../../styles/v2/components/data-designer.scss'
+import './data-designer.scss'
 import { ConfigureData } from '../../types/ConfigureData'
 
 type DataDesignerProps = {

package/{styles/v2/components → components/managers}/data-designer.scss

@@ -1,5 +1,4 @@
-@import '../utils/variables';
-@import '../themes/color-definitions';
+@import '../../styles/utils/properties';
 
 .cove-modal__content {
   .dataset-selector-container {
@@ -59,7 +58,7 @@
       right: 0;
       bottom: 0;
       left: 0;
-      border: 1px solid $lightGray;
+      border: 1px solid var(--lightGray);
       border-radius: 0.25rem;
     }
   }
@@ -82,20 +81,20 @@
   table {
     font-size: 0.8rem;
     background-color: #fff;
-    border: 1px solid $lightGray;
+    border: 1px solid var(--lightGray);
     border-collapse: collapse;
 
     th {
       color: white;
       text-align: left;
-      background-color: $primary;
+      background-color: var(--primary);
     }
 
     th,
     td {
       padding: 0 5px;
-      border-top: 1px solid $lightGray;
-      border-bottom: 1px solid $lightGray;
+      border-top: 1px solid var(--lightGray);
+      border-bottom: 1px solid var(--lightGray);
     }
   }
 }

package/components/ui/Accordion.jsx

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types'
 import Icon from './Icon'
 import Tooltip from './Tooltip'
 
-import '../../styles/v2/components/accordion.scss'
+import './accordion.scss'
 import './accordion.styles.css'
 
 //Define the "slots" to be populated by subcomponents

package/components/ui/Icon.tsx

@@ -38,7 +38,7 @@ 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'
+import './icon.scss'
 
 const iconHash = {
   caretUp: iconCaretUp,

package/components/ui/LoadSpin.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import '../../styles/v2/components/loadspin.scss'
+import './loadspin.scss'
 
 const LoadSpin = ({ color = '#fff', opacity = 100, size = 100, className }) => {
   const n = 8

package/components/ui/Modal.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { useGlobalContext } from '../GlobalContext'
 import Icon from './Icon'
 
-import '../../styles/v2/components/modal.scss'
+import './modal.scss'
 
 //Define the "slots" to be populated by subcomponents
 const ModalHeader = () => null

package/components/ui/Overlay.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 
 import { useGlobalContext } from '../GlobalContext'
 
-import '../../styles/v2/components/overlay.scss'
+import './overlay.scss'
 
 const Overlay = ({ disableBgClose, children, override = null }) => {
   //Access global modal state

package/components/ui/Title/index.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import Title from './index'
+
+const baseConfig = {
+  type: 'chart',
+  theme: 'theme-blue'
+} as any
+
+describe('Title', () => {
+  it('does not add legacy bottom margin classes for wrapped visualizations', () => {
+    render(<Title title='Wrapped title' titleStyle='legacy' config={baseConfig} />)
+
+    expect(screen.getByRole('banner')).not.toHaveClass('mb-3')
+  })
+
+  it('keeps legacy dashboard title spacing classes', () => {
+    render(<Title title='Dashboard title' titleStyle='legacy' config={baseConfig} isDashboard={true} />)
+
+    expect(screen.getByRole('banner')).toHaveClass('mb-3')
+  })
+
+  it('renders legacy custom header markup via modern shim wrapper', () => {
+    const legacyHeaderTitle =
+      '<header class="cove-component__header component__header theme-blue mb-0"><h2>Medicaid Coverage of Cessation Treatments, 2024-Q2</h2></header>'
+
+    const { container } = render(<Title title={legacyHeaderTitle} titleStyle='small' config={baseConfig} />)
+
+    expect(container.querySelector('.cove-title__legacy-shim')).toBeInTheDocument()
+    expect(container.querySelector('.cove-title h3')).not.toBeInTheDocument()
+    expect(container.querySelector('header.cove-component__header.component__header')).toBeInTheDocument()
+  })
+})

package/components/ui/Title/index.tsx

@@ -19,6 +19,7 @@ type HeaderProps = {
 
 const Title = (props: HeaderProps) => {
   const {
+    config,
     isDashboard,
     title,
     superTitle,
@@ -29,6 +30,10 @@ const Title = (props: HeaderProps) => {
     noContent = false
   } = props
 
+  // Temporary visual verification gate for the legacy title shim.
+  const SHOW_SHIM_TITLE = false
+  const shimThemeClass = props.theme || config?.theme || 'theme-blue'
+
   if (titleStyle === 'large' || titleStyle === 'small') {
     const TitleElement = titleStyle === 'large' ? 'h2' : 'h3'
 
@@ -47,17 +52,29 @@ const Title = (props: HeaderProps) => {
   }
 
   // LEGACY BLOCKY HEADER (Original design with colored backgrounds)
-  const updatedClasses = ['cove-component__header', 'component__header', 'mb-3', ...classes]
+  const updatedClasses = [
+    'cove-visualization__title',
+    'cove-visualization__header',
+    ...(isDashboard ? ['mb-3'] : []),
+    ...classes
+  ]
 
   return (
     title &&
     showTitle && (
-      <header className={updatedClasses.join(' ')} style={props.style}>
-        {superTitle && <sup>{parse(superTitle)}</sup>}
-        <h2>
-          {parse(title)} {isDashboard}
-        </h2>
-      </header>
+      <>
+        <header className={updatedClasses.join(' ')} style={props.style}>
+          {superTitle && <sup>{parse(superTitle)}</sup>}
+          <h2>
+            {parse(title)} {isDashboard}
+          </h2>
+        </header>
+        {SHOW_SHIM_TITLE && (
+          <div className='cove-title__legacy-preview'>
+            <header class="cove-component__header component__header theme-blue mb-0"><h2>Medicaid Coverage of Cessation Treatments, 2024-Q2</h2></header>
+          </div>
+        )}
+      </>
     )
   )
 }

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

@@ -1,27 +1,28 @@
-.cdc-open-viz-module header.cove-component__header {
-  position: relative;
-  padding: 1rem;
-  margin: 0;
+.cove-visualization header.cove-visualization__title,
+.cove-visualization header.cove-visualization__header {
+
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
   color: var(--white);
+  margin: 0;
+  padding: 1rem;
+  position: relative;
 
-  & > sup {
-    font-size: var(--superTitle-font-size);
+  &>sup {
     font-family: var(--app-font-secondary);
+    font-size: var(--superTitle-font-size);
     font-weight: 500;
     text-transform: uppercase;
     top: 0;
   }
 
   h2 {
-    font-size: var(--title-font-size);
-    font-family: var(--app-font-secondary);
     color: var(--white);
+    font-family: var(--app-font-secondary);
+    font-size: var(--title-font-size);
     margin: 0;
   }
 
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-
   &.mb-0 {
     margin-bottom: 0 !important;
   }
@@ -35,8 +36,8 @@
   }
 
   &:not(:empty) {
-    border-bottom-width: 4px;
     border-bottom-style: solid;
+    border-bottom-width: 4px;
   }
 
   &.bite-header {
@@ -47,42 +48,52 @@
     background: #712177;
     border-bottom-color: #b890bb;
   }
+
   &.theme-brown {
     background: #705043;
     border-bottom-color: #ad907b;
   }
+
   &.theme-teal {
     background: #00695c;
     border-bottom-color: #4ebaaa;
   }
+
   &.theme-pink {
     background: #af4448;
     border-bottom-color: #e57373;
   }
+
   &.theme-orange {
     background: #bb4d00;
     border-bottom-color: #ffad42;
   }
+
   &.theme-slate {
     background: #29434e;
     border-bottom-color: #7e9ba5;
   }
+
   &.theme-indigo {
     background: #26418f;
     border-bottom-color: #92a6dd;
   }
+
   &.theme-cyan {
     background: #007b91;
     border-bottom-color: #65b0bd;
   }
+
   &.theme-green {
     background: #4b830d;
     border-bottom-color: #84bc49;
   }
+
   &.theme-amber {
     background: #fbab18;
     border-bottom-color: #ffd54f;
   }
+
   &.theme-blue {
     background: #005eaa;
     border-bottom-color: #88c3ea;
@@ -93,48 +104,131 @@
   }
 }
 
-.type-sparkline.type-chart .cove-component__header {
+.type-sparkline.type-chart .cove-visualization__title,
+.type-sparkline.type-chart .cove-visualization__header {
   margin: 0px !important;
 }
 
+/* ============================================================================
+   LEGACY SHIM PREVIEW
+   ============================================================================ */
+
+header.cove-component__header {
+  border-bottom-style: solid;
+  border-bottom-width: 4px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  color: var(--white);
+  margin: 0;
+  padding: 1rem;
+  position: relative;
+
+  h2 {
+    color: var(--white);
+    font-family: var(--app-font-secondary);
+    font-size: var(--title-font-size);
+    margin: 0;
+  }
+
+  &.theme-purple {
+    background: #712177;
+    border-bottom-color: #b890bb;
+  }
+
+  &.theme-brown {
+    background: #705043;
+    border-bottom-color: #ad907b;
+  }
+
+  &.theme-teal {
+    background: #00695c;
+    border-bottom-color: #4ebaaa;
+  }
+
+  &.theme-pink {
+    background: #af4448;
+    border-bottom-color: #e57373;
+  }
+
+  &.theme-orange {
+    background: #bb4d00;
+    border-bottom-color: #ffad42;
+  }
+
+  &.theme-slate {
+    background: #29434e;
+    border-bottom-color: #7e9ba5;
+  }
+
+  &.theme-indigo {
+    background: #26418f;
+    border-bottom-color: #92a6dd;
+  }
+
+  &.theme-cyan {
+    background: #007b91;
+    border-bottom-color: #65b0bd;
+  }
+
+  &.theme-green {
+    background: #4b830d;
+    border-bottom-color: #84bc49;
+  }
+
+  &.theme-amber {
+    background: #fbab18;
+    border-bottom-color: #ffd54f;
+  }
+
+  &.theme-blue {
+    background: #005eaa;
+    border-bottom-color: #88c3ea;
+  }
+
+  &.mb-0 {
+    margin-bottom: 0 !important;
+  }
+}
+
 /* ============================================================================
    MODERN TITLE
    ============================================================================ */
 
-.cdc-open-viz-module .cove-title--small {
+.cove-visualization .cove-title--small {
   margin-bottom: 0.75rem;
 }
 
-.cdc-open-viz-module .cove-title--large {
+.cove-visualization .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;
+.cove-visualization .cove-title--no-content {
   margin-bottom: 0;
+  margin-top: 1rem;
 }
 
-.cdc-open-viz-module .cove-title h2 {
+.cove-visualization .cove-title h2 {
+  border-bottom: 1px solid var(--cool-gray-10);
   color: #0b4778;
-  font-size: 1.95rem;
   font-family: var(--app-font-secondary);
-  border-bottom: 1px solid var(--cool-gray-10);
+  font-size: 1.95rem;
   font-weight: 300;
 }
 
-.cdc-open-viz-module .cove-title h3 {
-  font-size: 1.5rem;
+.cove-visualization .cove-title h3 {
   font-family: var(--app-font-secondary);
+  font-size: 1.5rem;
 }
 
-.cdc-open-viz-module .cove-title sup {
+.cove-visualization .cove-title sup {
+  color: #666;
   font-family: var(--app-font-secondary);
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
-  color: #666;
+
   sup {
     font-size: 75%;
   }
-}
+}

package/components/ui/Tooltip.tsx

@@ -6,7 +6,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 import type { PlacesType } from 'react-tooltip'
 
 // Styles
-import '../../styles/v2/components/ui/tooltip.scss'
+import './tooltip.scss'
 
 const TooltipTarget = children => children
 const TooltipContent = children => children

package/components/ui/_stories/Title.stories.tsx

@@ -6,7 +6,7 @@ const meta: Meta = {
   component: Title,
   decorators: [
     Story => (
-      <div className='cdc-open-viz-module'>
+      <div className='cove-visualization'>
         <Story />
       </div>
     )

package/{styles/v2/components → components/ui}/accordion.scss

@@ -1,5 +1,5 @@
-@import '../utils/variables';
-@import '../themes/index';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
 
 .cove {
   .cove-accordion__item {
@@ -14,7 +14,7 @@
   }
 
   .cove-accordion__heading {
-    background: $lightestGray;
+    background: var(--lightestGray);
   }
 
   .cove-accordion__button {

package/components/ui/accordion.styles.css

@@ -5,13 +5,13 @@
 }
 
 .accordion__button {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   cursor: pointer;
   font-size: 1em;
   padding: 0.3em 1em;
-  width: 100%;
-  text-align: left;
   position: relative;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  text-align: left;
+  width: 100%;
 }
 
 .accordion__panel:first-child {
@@ -19,31 +19,31 @@
 }
 
 .accordion__button:before {
-  display: inline-block;
+  border-bottom: 2px solid currentColor;
+  border-right: 2px solid currentColor;
   content: '';
+  display: inline-block;
   height: 7px;
-  width: 7px;
   margin-right: 1em;
-  border-bottom: 2px solid currentColor;
-  border-right: 2px solid currentColor;
-  transform: rotate(-45deg) translateY(-50%);
-  right: 0;
   position: absolute;
+  right: 0;
   top: 50%;
+  transform: rotate(-45deg) translateY(-50%);
   transition: 0.1s all;
+  width: 7px;
 }
 
 .accordion__button[aria-expanded='true']::before,
 .accordion__button[aria-selected='true']::before {
-  transform: rotate(45deg) translateY(-50%);
   margin-right: 1.3em;
+  transform: rotate(45deg) translateY(-50%);
   transition: 0.1s all;
 }
 
 .accordion__panel {
+  animation: fadein 0.2s ease-in;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   padding: 1em 1.25em 2em;
-  animation: fadein 0.2s ease-in;
 }
 
 .accordion__panel h5 {

package/{styles/v2/components → components/ui}/modal.scss

@@ -1,5 +1,5 @@
-@import '../utils/variables';
-@import '../themes/index';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
 
 .cove-overlay {
   .cove-modal {

package/{styles/v2/components → components/ui}/overlay.scss

@@ -1,5 +1,5 @@
-@import '../utils/variables';
-@import '../themes/index';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
 
 .cove-overlay {
   display: flex;
@@ -14,21 +14,21 @@
 
   &.animate-in {
     .cove-overlay__bg {
-      animation: fadeIn 400ms $transition-expo-out 0s 1 forwards;
+      animation: fadeIn 400ms var(--transition-expo-out) 0s 1 forwards;
     }
 
     .cove-overlay__container {
-      animation: fadeInUp 700ms $transition-expo-out 50ms 1 forwards;
+      animation: fadeInUp 700ms var(--transition-expo-out) 50ms 1 forwards;
     }
   }
 
   &.animate-out {
     .cove-overlay__bg {
-      animation: fadeOut 400ms $transition-expo-out 0s 1 forwards;
+      animation: fadeOut 400ms var(--transition-expo-out) 0s 1 forwards;
     }
 
     .cove-overlay__container {
-      animation: fadeOut 400ms $transition-expo-out 0s 1 forwards;
+      animation: fadeOut 400ms var(--transition-expo-out) 0s 1 forwards;
       transform: translateY(0);
     }
   }

package/{styles/v2/components → components}/ui/tooltip.scss

@@ -11,7 +11,7 @@
 
 // Namespace to cove project, inconveniently using two different classes.
 .cove,
-.cdc-open-viz-module {
+.cove-visualization {
   // todo: move to a utils folder.
   .capitalize {
     text-transform: capitalize;

package/{styles → components}/waiting.scss

@@ -1,25 +1,31 @@
-.cdc-open-viz-module {
-  @import 'v2/utils/mixins';
+.cove-visualization {
+  @import '../styles/utils/mixins';
+
   .waiting {
     &.collapsed {
       padding: 2em !important;
     }
+
     @include emptyState;
     align-items: flex-start;
     padding-top: 250px;
+
     .waiting-container {
       max-width: 400px;
     }
+
     h3 {
       font-size: 1.3rem;
       font-weight: 600;
       margin-bottom: 0.3rem;
     }
+
     p {
       font-size: 1em;
+
       strong {
         font-weight: bold;
       }
     }
   }
-}
+}

package/data/colorPalettes.ts

@@ -1,9 +1,22 @@
-import { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2 } from './mapColorPalettes'
-import { chartColorPalettes, sequentialPalettes, colorPalettesChart, colorPalettesChartV1, colorPalettesChartV2, twoColorPalette } from './chartColorPalettes'
-
+import { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2, sequentialZeroColors } from './mapColorPalettes'
+import {
+  chartColorPalettes,
+  sequentialPalettes,
+  colorPalettesChart,
+  colorPalettesChartV1,
+  colorPalettesChartV2,
+  twoColorPalette
+} from './chartColorPalettes'
 
 // Re-export map palettes (already processed in mapColorPalettes.ts)
-export { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2 }
+export { mapColorPalettes, mapColorPalettesV1, mapColorPalettesV2, sequentialZeroColors }
 
 // Re-export chart palettes (already processed in chartColorPalettes.ts)
-export { chartColorPalettes, sequentialPalettes, colorPalettesChart, colorPalettesChartV1, colorPalettesChartV2, twoColorPalette }
+export {
+  chartColorPalettes,
+  sequentialPalettes,
+  colorPalettesChart,
+  colorPalettesChartV1,
+  colorPalettesChartV2,
+  twoColorPalette
+}

package/data/mapColorPalettes.ts

@@ -43,3 +43,13 @@ export const mapColorPalettes = {
 
 export const mapColorPalettesV1 = mapColorPalettes.v1
 export const mapColorPalettesV2 = mapColorPalettes.v2
+
+// Lighter colors (first palette color 75% toward white) for zero-value categories in v2 sequential palettes
+// Used when: categorical map, gradient legend, first category value is "0", palette not reversed
+export const sequentialZeroColors: Record<string, string> = {
+  sequential_blue: '#F6F9FD',
+  sequential_teal: '#F9FEFE',
+  sequential_purple: '#F8F4F7',
+  sequential_orange: '#FFF8F5',
+  sequential_green: '#F5FEFD'
+}