@cdc/core 4.26.2 → 4.26.3

package/components/_stories/Filters.stories.tsx

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

package/components/_stories/styles.scss

@@ -1,5 +1,4 @@
 @import '../../styles/base.scss';
-@import '../../styles/_variables';
 @import '../../styles/_global.scss';
 
 

package/components/elements/Button.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import LoadSpin from '../ui/LoadSpin'
 
-import '../../styles/v2/components/button.scss'
+import './button.scss'
 
 const Button = ({
   style,

package/components/elements/Card.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import '../../styles/v2/components/card.scss'
+import './card.css'
 
 const Card = ({ children, className, ...attributes }) => {
   return (

package/{styles/v2/components → components/elements}/button.scss

@@ -1,6 +1,6 @@
 @use 'sass:color';
-@import '../utils/variables';
-@import '../themes/index';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
 
 :root {
   --cove-button-primary: var(--colors-blue-vivid-60);
@@ -29,7 +29,7 @@
   }
 }
 
-.cdc-open-viz-module button.cove-button {
+.cove-visualization button.cove-button {
   display: inline-block;
   position: relative;
   min-height: 2.125rem;
@@ -42,8 +42,8 @@
   border-radius: 6px;
   border: 0;
   outline: none;
-  transition: background-color 500ms $transition-expo-out, color 500ms $transition-expo-out,
-    border-color 500ms $transition-expo-out;
+  transition: background-color 500ms var(--transition-expo-out), color 500ms var(--transition-expo-out),
+    border-color 500ms var(--transition-expo-out);
 
   &.secondary {
     background-color: var(--cove-button-secondary);
@@ -70,6 +70,7 @@
   &:disabled {
     background-color: var(--cove-button-primary-disabled);
     color: var(--cove-button-primary-disabled-font-color);
+    border: none;
     cursor: not-allowed;
   }
 
@@ -140,7 +141,7 @@
 
 .cove-button__text {
   position: relative;
-  transition: width 500ms $transition-expo-out;
+  transition: width 500ms var(--transition-expo-out);
   align-self: stretch;
 
   .cove-button__text--loading {
@@ -157,7 +158,7 @@
     top: 0;
     left: 0;
     white-space: nowrap;
-    transition: all 500ms $transition-expo-out;
+    transition: all 500ms var(--transition-expo-out);
   }
 }
 
@@ -170,6 +171,6 @@
 .cove-button__text--loading,
 .cove-button__load-spin {
   white-space: nowrap;
-  transition: all 500ms $transition-expo-out;
+  transition: all 500ms var(--transition-expo-out);
   opacity: 0;
 }

package/components/inputs/InputCheckbox.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, memo } from 'react'
 import PropTypes from 'prop-types'
 
 import Check from '../../assets/icon-check.svg'
-import '../../styles/v2/components/input/index.scss'
+import './index.scss'
 
 const InputCheckbox = memo(
   ({

package/components/inputs/InputSelect.tsx

@@ -1,4 +1,4 @@
-import '../../styles/v2/components/input/index.scss'
+import './index.scss'
 
 interface InputProps {
   label?

package/components/inputs/InputText.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, memo } from 'react'
 import { useDebounce } from 'use-debounce'
 
-import '../../styles/v2/components/input/index.scss'
+import './index.scss'
 
 const InputText = memo(({ label, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', tooltip, placeholder, i = null, min = null, max = null, className, ...attributes }) => {
   const [value, setValue] = useState(stateValue)

package/components/inputs/InputToggle.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import '../../styles/v2/components/input/index.scss'
+import './index.scss'
 
 type InputSliderProps = {
   /** Add label to the input field */

package/{styles/v2/components/input → components/inputs}/_input-check-radio.scss

@@ -79,7 +79,7 @@
   background-color: #f4f4f4;
   border-radius: 3px;
   box-shadow: inset 0 0 0 1px #c4c4c4;
-  transition: all 150ms $transition-expo-out;
+  transition: all 150ms var(--transition-expo-out);
 }
 
 .cove-input__checkbox-check {
@@ -92,6 +92,6 @@
   fill: #fff;
   pointer-events: none;
   transform: translateY(-1px);
-  transition: all 250ms $transition-expo-out;
+  transition: all 250ms var(--transition-expo-out);
   opacity: 0;
 }

package/{styles/v2/components/input → components/inputs}/_input-group.scss

@@ -65,10 +65,10 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: $baseColor;
+  color: var(--baseColor);
   text-align: center;
   white-space: nowrap;
-  background-color: $lightestGray;
-  border: 1px solid $lightGray;
+  background-color: var(--lightestGray);
+  border: 1px solid var(--lightGray);
   border-radius: 0.1875rem;
 }

package/{styles/v2/components/input → components/inputs}/_input-slider.scss

@@ -167,7 +167,7 @@
   background-color: #fff;
   box-shadow: -2px 4px 10px -7px rgb(0 0 0);
   border-radius: 100%;
-  transition: all 200ms $transition-expo-out;
+  transition: all 200ms var(--transition-expo-out);
   z-index: 2;
 }
 
@@ -179,5 +179,5 @@
   height: 100%;
   background-color: #ccc;
   border-radius: 999px;
-  transition: all 200ms $transition-expo-out;
+  transition: all 200ms var(--transition-expo-out);
 }

package/{styles/v2/components/input → components/inputs}/_input.scss

@@ -6,14 +6,14 @@
   border-style: solid !important; // intentional use of !important for CDC
   border-color: #cbcbcb !important; // intentional use of !important for CDC
   border-radius: 0.1875rem;
-  transition: border-color 200ms $transition-expo-out;
+  transition: border-color 200ms var(--transition-expo-out);
   font-family: sans-serif;
-  color: $baseColor;
+  color: var(--baseColor);
   width: 100%;
   max-width: 100%;
 
   &::placeholder {
-    transition: opacity 400ms $transition-expo-out;
+    transition: opacity 400ms var(--transition-expo-out);
     color: #b3b3b3;
     opacity: 1;
   }
@@ -42,7 +42,7 @@
   display: inline-block;
   margin-bottom: 0.5rem;
   font-size: 0.75rem;
-  color: $baseColor;
+  color: var(--baseColor);
   text-transform: uppercase;
   user-select: none;
 }
@@ -52,7 +52,7 @@
   min-height: 140px;
   max-width: 100%;
   line-height: 1.5em;
-  color: $baseColor;
+  color: var(--baseColor);
 }
 
 .cove-input--hidden {

package/{styles/v2/components/input → components/inputs}/index.scss

@@ -1,5 +1,5 @@
-@import '../../utils/variables';
-@import '../../themes/index';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
 
 @import 'input';
 @import 'input-check-radio';

package/{styles → components}/loading.scss

@@ -21,7 +21,7 @@
   }
 }
 
-.cdc-open-viz-module .loading {
+.cove-visualization .loading {
   text-align: center;
   position: absolute;
   z-index: 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%;
   }
-}
+}