@cdc/core 4.26.1 → 4.26.3

package/styles/{v2/themes → themes}/_color-definitions.scss

@@ -1,70 +1,58 @@
 @use 'sass:string';
 @use 'sass:list';
-@import './../../variables';
 
 $theme: (
-  'amber': (
-    '#fbab18',
+  'amber': ('#fbab18',
     '#ffd54f',
     '#ffecb3',
     '#fff7e1'
   ),
-  'blue': (
-    '#005eaa',
+  'blue': ('#005eaa',
     '#88c3ea',
     '#c0e9ff',
     '#edf9ff'
   ),
-  'brown': (
-    '#705043',
+  'brown': ('#705043',
     '#ad907b',
     '#d7ccc8',
     '#f2ebe8'
   ),
-  'cyan': (
-    '#007B91',
+  'cyan': ('#007B91',
     '#65b0bd',
     '#cce5e9',
     '#ebf5f6'
   ),
-  'green': (
-    '#4b830d',
+  'green': ('#4b830d',
     '#84bc49',
     '#dcedc8',
     '#f1f8e9'
   ),
-  'indigo': (
-    '#26418f',
+  'indigo': ('#26418f',
     '#92a6dd',
     '#dee8ff',
     '#f2f6ff'
   ),
-  'orange': (
-    '#bb4d00',
+  'orange': ('#bb4d00',
     '#ffad42',
     '#ffe97d',
     '#fff4cf'
   ),
-  'pink': (
-    '#af4448',
+  'pink': ('#af4448',
     '#e57373',
     '#ffc2c2',
     '#ffe7e7'
   ),
-  'purple': (
-    '#712177',
+  'purple': ('#712177',
     '#b890bb',
     '#e3d3e4',
     '#f7f2f7'
   ),
-  'slate': (
-    '#29434e',
+  'slate': ('#29434e',
     '#7e9ba5',
     '#b6c6d2',
     '#e2e8ed'
   ),
-  'teal': (
-    '#00695c',
+  'teal': ('#00695c',
     '#4ebaaa',
     '#ceece7',
     '#ebf7f5'
@@ -72,15 +60,15 @@ $theme: (
 );
 
 // .type-sparkline class used for creating sparklines
-// once v2 is released plz update html structure
-// to use .cove
-.markup-include,
-.type-waffle-chart,
-.type-data-bite,
-.type-filtered-text,
-.cdc-open-viz-module.type-chart.type-sparkline,
-.cove {
+.cove-visualization.type-markup-include,
+.cove-visualization.type-waffle-chart,
+.cove-visualization.type-data-bite,
+.cove-visualization.type-filtered-text,
+.cove-visualization.type-chart,
+.cove-visualization.type-chart.type-sparkline,
+.cove-visualization.type-map {
   @each $theme-name, $theme-colors in $theme {
+
     // Header
     .theme-#{$theme-name} {
       background-color: string.unquote(list.nth($theme-colors, 1));
@@ -90,18 +78,23 @@ $theme: (
     }
 
     &.theme-#{$theme-name} {
+
       /// area that appears underneath the title of the component.
-      .cove-component__content {
+      .cove-visualization__body {
+
         /// when there are borders on a component
         &:not(.no-borders) {
+
           /// borders are the theme color
-          &.component--has-borderColorTheme {
+          &.component--has-border-color-theme {
             border: 1px solid string.unquote(list.nth($theme-colors, 1));
           }
+
           /// using default border color to draw borders
-          &:not(.component--has-borderColorTheme) {
-            border: 1px solid $lightGray;
+          &:not(.component--has-border-color-theme) {
+            border: 1px solid var(--lightGray);
           }
+
           &.component--has-title {
             border-top: none !important;
           }
@@ -112,19 +105,22 @@ $theme: (
           border-left: 0.5rem solid string.unquote(list.nth($theme-colors, 1)) !important;
         }
 
-        /// Apply a background color
-        &.component--has-background:not(.component--hideBackgroundColor) {
+        /// Apply a background color (excluded when TP5 treatment is active)
+        &.component--has-background:not(.component--hide-background-color):not(.component--tp5-treatment) {
           background: string.unquote(list.nth($theme-colors, 3));
         }
       }
 
-      .cove-component__header {
+      .cove-visualization__title,
+      .cove-visualization__header {
         border-color: string.unquote(list.nth($theme-colors, 2));
       }
     }
 
     &.theme-#{$theme-name} {
-      .cove-component__header {
+
+      .cove-visualization__title,
+      .cove-visualization__header {
         border-color: string.unquote(list.nth($theme-colors, 2));
       }
     }
@@ -132,7 +128,7 @@ $theme: (
 }
 
 // Charts filter styles
-.cdc-open-viz-module {
+.cove-visualization {
   @each $theme-name, $theme-colors in $theme {
     &.theme-#{$theme-name} {
       .single-filters--tab .tab--active:not(.tab--simple) {
@@ -149,6 +145,14 @@ $theme: (
         background-color: string.unquote(list.nth($theme-colors, 1));
         color: #fff;
       }
+
+      .button__tab-bar--active {
+        outline: 2px solid string.unquote(list.nth($theme-colors, 1));
+      }
+
+      .apply:not([disabled]) {
+        background-color: string.unquote(list.nth($theme-colors, 1));
+      }
     }
 
     .theme-#{$theme-name} {
@@ -170,6 +174,7 @@ $theme: (
       .button__tab-bar--active {
         outline: 2px solid string.unquote(list.nth($theme-colors, 1));
       }
+
       .apply:not([disabled]) {
         background-color: string.unquote(list.nth($theme-colors, 1));
       }
@@ -239,4 +244,4 @@ $green-quaternary: #f1f8e9 !default;
 $amber-primary: #fbab18 !default;
 $amber-secondary: #ffd54f !default;
 $amber-tertiary: #ffecb3 !default;
-$amber-quaternary: #fff7e1 !default;
+$amber-quaternary: #fff7e1 !default;

package/styles/{_accessibility.scss → utils/_accessibility.scss}

@@ -1,7 +1,7 @@
 // Only frontend styles are applied in WCMS/TP
 // This helps match those styles when viewing in the editor
 .modal.cdc-cove-editor *:focus-visible,
-.cdc-open-viz-module *:focus-visible {
+.cove-visualization *:focus-visible {
   outline: dashed 2px rgb(0, 122, 153) !important;
   outline-offset: 3px !important;
   border-radius: 6px !important;

package/styles/{v2/utils → utils}/_grid.scss

@@ -3,18 +3,21 @@ $grid-gap-max: 64;
 $grid-columns: 12;
 
 @mixin create-grid-selectors($breakpoint: null) {
-  $infix: if($breakpoint == null, '', '-#{$breakpoint}');
+  $infix: if(sass($breakpoint ==null): ""; else: "-#{$breakpoint}");
 
   @for $i from 1 through $grid-columns {
     .col#{$infix}-#{$i} {
       grid-column-end: span $i;
     }
+
     .col-offset#{$infix}-#{$i} {
       grid-column-start: $i + 1;
     }
+
     .row#{$infix}-#{$i} {
       grid-row-end: span $i;
     }
+
     .row-offset#{$infix}-#{$i} {
       grid-row-start: $i + 1;
     }
@@ -23,11 +26,13 @@ $grid-columns: 12;
 
 @mixin grid-gaps() {
   $i: 0;
-  @while ($i * $grid-gap-offset) <= $grid-gap-max {
+
+  @while ($i * $grid-gap-offset) <=$grid-gap-max {
     .grid-gap-#{$i} {
       grid-gap: #{($i * $grid-gap-offset) + 'px'};
       gap: #{($i * $grid-gap-offset) + 'px'};
     }
+
     $i: $i + 1;
   }
 }
@@ -44,4 +49,4 @@ $grid-columns: 12;
   @media (min-width: $width) {
     @include create-grid-selectors($breakpoint);
   }
-}
+}

package/styles/{_global-variables.scss → utils/_properties.scss}

@@ -1,112 +1,133 @@
-$colors: (
-  'baseColor': #333,
-  'blue': #005eaa,
-  'lightestGray': #f2f2f2,
-  'gray2': #f5f5f5,
-  'lightGray': #c7c7c7,
-  'mediumGray': #565656,
-  'darkGray': #333,
-  'red': #d8000c,
-  'white': #fff,
-  'silver': #eee,
-
-  'primary': #005eaa,
-  'secondary': #88c3ea,
-  'tertiary': #c0e9ff,
-  'quaternary': #edf9ff,
-
-  'purple-primary': #712177,
-  'purple-secondary': #b890bb,
-  'purple-tertiary': #e3d3e4,
-  'purple-quaternary': #f7f2f7,
-
-  'brown-primary': #705043,
-  'brown-secondary': #ad907b,
-  'brown-tertiary': #d7ccc8,
-  'brown-quaternary': #f2ebe8,
-
-  'teal-primary': #00695c,
-  'teal-secondary': #4ebaaa,
-  'teal-tertiary': #ceece7,
-  'teal-quaternary': #ebf7f5,
-
-  'pink-primary': #af4448,
-  'pink-secondary': #e57373,
-  'pink-tertiary': #ffc2c2,
-  'pink-quaternary': #ffe7e7,
-
-  'orange-primary': #bb4d00,
-  'orange-secondary': #ffad42,
-  'orange-tertiary': #ffe97d,
-  'orange-quaternary': #fff4cf,
-
-  'slate-primary': #29434e,
-  'slate-secondary': #7e9ba5,
-  'slate-tertiary': #b6c6d2,
-  'slate-quaternary': #e2e8ed,
-
-  'indigo-primary': #26418f,
-  'indigo-secondary': #92a6dd,
-  'indigo-tertiary': #dee8ff,
-  'indigo-quaternary': #f2f6ff,
-
-  'cyan-primary': #006778,
-  'cyan-secondary': #65b0bd,
-  'cyan-tertiary': #cce5e9,
-  'cyan-quaternary': #ebf5f6,
-
-  'green-primary': #4b830d,
-  'green-secondary': #84bc49,
-  'green-tertiary': #dcedc8,
-  'green-quaternary': #f1f8e9,
-
-  'amber-primary': #fbab18,
-  'amber-secondary': #ffd54f,
-  'amber-tertiary': #ffecb3,
-  'amber-quaternary': #fff7e1,
-
-  'cool-gray-90': #1c1d1f,
-  'cool-gray-50': #71767a,
-  'cool-gray-30': #a9aeb1,
-  'cool-gray-10': #dfe1e2,
-  'colors-blue-vivid-60': #005ea2
-);
-
-@mixin theme() {
-  :root {
-    @each $key, $value in $colors {
-      --#{$key}: #{$value};
-    }
-  }
-}
-
-@include theme();
-
-:root {
-  // Spacing
-  --editorContentPadding: 30px;
-  --editorWidth: 350px;
-  --space-between-legend-item-rows: 1rem;
-  --space-between-legend-item-columns: 1.5rem;
-  // Breakpoints
-  --breakpoint-xs: 480px;
-  --breakpoint-sm: 768px;
-  --breakpoint-md: 960px;
-  --breakpoint-lg: 1170px;
-  --breakpoint-xl: 1280px;
-  // Font
-  --app-font-main: 'Nunito', sans-serif;
-  --app-font-secondary: 'Poppins', sans-serif;
-  // Font sizes
-  --legend-title-font-size: 1rem;
-  --legend-description-font-size: 1rem;
-  --legend-item-font-size: 0.889rem;
-  --download-link-font-size: 0.772rem;
-  --filter-select-font-size: 0.833rem;
-  --filter-label-font-size: 0.889rem;
-  --filter-buttons-font-size: 0.889rem;
-  --superTitle-font-size: 0.833rem;
-  --title-font-size: 1.222rem;
-  --territory-label-font-size: 0.809rem;
-  --territory-label-font-size-mobile: 0.556rem;
-}
+// ─────────────────────────────────────────────────────────────────────────────
+// CSS Custom Properties — single source of truth for all design values.
+// SCSS variables below are kept only where SCSS features require them:
+//   $cove-breakpoints — used in breakpoint mixins
+//   $blue, $red, $mediumGray — used in color.adjust() calls (migrate later)
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Required for breakpoint mixins (cannot be replaced by CSS vars)
+$cove-breakpoints: (
+  xs: 480px,
+  sm: 768px,
+  md: 960px,
+  lg: 1170px,
+  xl: 1280px
+);
+
+// Required for color.adjust() calls — to be removed in a future phase
+$blue: #005eaa;
+$red: #d8000c;
+$mediumGray: #565656;
+
+// Color map — drives the CSS custom property generation below
+$colors: (
+  'baseColor': #333,
+  'blue': #005eaa,
+  'lightestGray': #f2f2f2,
+  'gray2': #f5f5f5,
+  'lightGray': #c7c7c7,
+  'mediumGray': #565656,
+  'darkGray': #333,
+  'red': #d8000c,
+  'white': #fff,
+  'silver': #eee,
+  'primary': #005eaa,
+  'secondary': #88c3ea,
+  'tertiary': #c0e9ff,
+  'quaternary': #edf9ff,
+  'purple-primary': #712177,
+  'purple-secondary': #b890bb,
+  'purple-tertiary': #e3d3e4,
+  'purple-quaternary': #f7f2f7,
+  'brown-primary': #705043,
+  'brown-secondary': #ad907b,
+  'brown-tertiary': #d7ccc8,
+  'brown-quaternary': #f2ebe8,
+  'teal-primary': #00695c,
+  'teal-secondary': #4ebaaa,
+  'teal-tertiary': #ceece7,
+  'teal-quaternary': #ebf7f5,
+  'pink-primary': #af4448,
+  'pink-secondary': #e57373,
+  'pink-tertiary': #ffc2c2,
+  'pink-quaternary': #ffe7e7,
+  'orange-primary': #bb4d00,
+  'orange-secondary': #ffad42,
+  'orange-tertiary': #ffe97d,
+  'orange-quaternary': #fff4cf,
+  'slate-primary': #29434e,
+  'slate-secondary': #7e9ba5,
+  'slate-tertiary': #b6c6d2,
+  'slate-quaternary': #e2e8ed,
+  'indigo-primary': #26418f,
+  'indigo-secondary': #92a6dd,
+  'indigo-tertiary': #dee8ff,
+  'indigo-quaternary': #f2f6ff,
+  'cyan-primary': #006778,
+  'cyan-secondary': #65b0bd,
+  'cyan-tertiary': #cce5e9,
+  'cyan-quaternary': #ebf5f6,
+  'green-primary': #4b830d,
+  'green-secondary': #84bc49,
+  'green-tertiary': #dcedc8,
+  'green-quaternary': #f1f8e9,
+  'amber-primary': #fbab18,
+  'amber-secondary': #ffd54f,
+  'amber-tertiary': #ffecb3,
+  'amber-quaternary': #fff7e1,
+  'cool-gray-90': #1c1d1f,
+  'cool-gray-50': #71767a,
+  'cool-gray-30': #a9aeb1,
+  'cool-gray-10': #dfe1e2,
+  'colors-gray-cool-70': #3d4551,
+  'colors-blue-vivid-60': #005ea2,
+  'colors-cyan-10': #eff9fa,
+  'colors-cyan-15': #dff2f6,
+  'colors-cyan-60v': #007a99
+);
+
+@mixin theme() {
+  :root {
+    @each $key, $value in $colors {
+      --#{$key}: #{$value};
+    }
+  }
+}
+
+@include theme();
+
+:root {
+  // Spacing
+  --editorContentPadding: 30px;
+  --editorWidth: 350px;
+  --space-between-legend-item-rows: 1rem;
+  --space-between-legend-item-columns: 1.5rem;
+  // Breakpoints
+  --breakpoint-xs: 480px;
+  --breakpoint-sm: 768px;
+  --breakpoint-md: 960px;
+  --breakpoint-lg: 1170px;
+  --breakpoint-xl: 1280px;
+  // Font
+  --app-font-main: 'Nunito', sans-serif;
+  --app-font-secondary: 'Poppins', sans-serif;
+  --app-font-size: 1rem;
+
+  // Font sizes
+  --legend-title-font-size: 1rem;
+  --legend-description-font-size: 1rem;
+  --legend-item-font-size: 0.889rem;
+  --download-link-font-size: 0.772rem;
+  --filter-select-font-size: 0.833rem;
+  --filter-label-font-size: 0.889rem;
+  --filter-buttons-font-size: 0.889rem;
+  --superTitle-font-size: 0.833rem;
+  --title-font-size: 1.222rem;
+  --territory-label-font-size: 0.809rem;
+  --territory-label-font-size-mobile: 0.556rem;
+  --visualization-body-font-family: var(--app-font-main);
+  --visualization-meta-font-size: 0.889rem;
+  --visualization-body-line-height: 1.5;
+  // Transitions
+  --transition-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
+}

package/styles/{v2/utils → utils}/index.scss

@@ -1,6 +1,7 @@
-@import 'variables';
+@import 'properties';
 @import 'mixins';
 
+@import 'accessibility';
 @import 'align';
 @import 'animations';
 @import 'breakpoints';

package/types/Annotation.ts

@@ -1,4 +1,7 @@
 export type Annotation = {
+  // Positioning mode: fixed uses x/y percentages, data anchors to data point
+  anchorMode?: 'fixed' | 'data'
+
   // background opacity of annotation
   opacity: number
   // HTML text string to display in annotation
@@ -15,26 +18,22 @@ export type Annotation = {
     horizontal: boolean
     vertical: boolean
   }
-  // x value for scaling
-  xKey: string
-  // y value for scaling
-  yKey: string
-  // orignal x value of subject
-  originalX: number
-  // x of subject
+  // Data X value for data-anchored mode (timestamp, category, etc.)
+  dataX?: any
+  // x of subject (percentage 0-100)
   x: number
-  // y of object
+  // y of object (percentage 0-100)
   y: number
   // x offset of label from subject
   dx: number
   // y offset of label from subject
   dy: number
   // assigned series that the annotation should snap to
-  seriesKey: string
-  // if the dragged item should be snapped to the nearest point
-  snapToNearestPoint: boolean
+  seriesKey?: string
   // type of  connecting line from label to subject
   connectionType: 'line' | 'curve' | 'elbow' | 'none'
+  // curve control point offset for curve connection type
+  bezier?: number
   // marker type highlighting the subject
   marker: 'arrow' | 'circle'
   // should the item be snapped to the subject?

package/types/Axis.ts

@@ -27,6 +27,7 @@ export type Axis = {
   max?: string
   maxTickRotation?: number
   min?: string
+  smallestLeftAxisMax?: number
   numTicks?: number
   padding?: number
   paddingPercent?: number
@@ -37,6 +38,7 @@ export type Axis = {
   rightLabel?: string
   rightLabelOffsetSize?: number
   rightMax?: string
+  smallestRightAxisMax?: number
   rightNumTicks?: number
   sortDates?: boolean
   sortKey?: string

package/types/ComponentStyles.ts

@@ -4,4 +4,5 @@ export type ComponentStyles = {
   background: boolean
   hideBackgroundColor: boolean
   borderColorTheme: boolean
+  highlightWrappers?: boolean
 }

package/types/ConfigureData.ts

@@ -3,6 +3,7 @@ import { DataDescription } from './DataDescription'
 export type ConfigureData = {
   dataDescription: Partial<DataDescription>
   data?: Object[]
+  dataMetadata?: Record<string, string>
   formattedData?: Object[]
   dataKey: string // This is the key of the dataset in the config
 }

package/types/General.ts

@@ -1,4 +1,5 @@
 import { BoxPlot } from './BoxPlot'
+import { Palette } from './Palette'
 
 export type General = {
   boxplot: BoxPlot
@@ -12,4 +13,5 @@ export type General = {
   hideNullValue: boolean
   title: string
   annotationDropdownText?: string
+  palette?: Palette
 }

package/types/MarkupInclude.ts

@@ -18,6 +18,7 @@ export type MarkupIncludeConfig = Visualization & {
     useInlineHTML: boolean
   }
   data?: Object[]
+  dataMetadata?: Record<string, string>
   enableMarkupVariables?: boolean
   filters?: VizFilter[]
   formattedData: {}

package/types/MarkupVariable.ts

@@ -5,12 +5,13 @@ export type MarkupCondition = {
 }
 
 export type MarkupVariable = {
-  columnName: string
+  columnName?: string
   conditions: MarkupCondition[]
   name: string
   tag: string
   addCommas?: boolean
   hideOnNull?: boolean
+  metadataKey?: string
 }
 
 export type MarkupConfig = {

package/types/Palette.ts

@@ -0,0 +1,22 @@
+export type PaletteVersion = '1.0' | '2.0'
+
+export type PaletteBackup = {
+  name: string
+  type?: 'twoColor' | 'primary'
+  version?: PaletteVersion
+  isReversed?: boolean
+}
+
+export type Palette = {
+  name?: string
+  customColors?: string[]
+  customColorsOrdered?: string[]
+  version?: PaletteVersion
+  isReversed?: boolean
+  backups?: PaletteBackup[]
+}
+
+export type TwoColorConfig = {
+  palette?: string
+  isPaletteReversed?: boolean
+}

package/types/Table.ts

@@ -3,6 +3,12 @@ export type Pivot = {
   valueColumns: string[]
 }
 
+export type DefaultSort = {
+  column?: string
+  sortDirection?: 'asc' | 'desc' | 'custom'
+  customOrder?: string[]
+}
+
 export type Table = {
   caption?: string
   cellMinWidth?: number
@@ -10,6 +16,8 @@ export type Table = {
   dateDisplayFormat?: string
   showNonGeoData?: boolean
   download?: boolean
+  downloadDataLabel?: string
+  downloadImageLabel?: string
   downloadVisibleDataOnly?: boolean
   downloadImageButton?: boolean
   downloadPdfButton?: boolean
@@ -31,4 +39,5 @@ export type Table = {
   showDownloadPdfButton?: boolean
   showDownloadUrl?: boolean
   showVertical?: boolean
+  defaultSort?: DefaultSort
 }