@cdc/core 4.26.2 → 4.26.3

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/{_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/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/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

@@ -10,6 +10,7 @@ export type PaletteBackup = {
 export type Palette = {
   name?: string
   customColors?: string[]
+  customColorsOrdered?: string[]
   version?: PaletteVersion
   isReversed?: boolean
   backups?: PaletteBackup[]

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
 }

package/types/Visualization.ts

@@ -28,6 +28,7 @@ type DeprecatedVisualizationType = {
   filters: VizFilter[]
   general: General
   legend: Legend
+  locale: string
   newViz: boolean
   isResponsiveTicks: boolean
   openModal?: boolean

package/styles/_common-components.css

@@ -1,73 +0,0 @@
-/* Common component styles shared across packages */
-/* This file combines loader, warning-icon, and checkbox-group styles */
-
-/* Shared loader component */
-/* Used across: chart, dashboard, data-bite, waffle-chart packages */
-.loader {
-  width: 100%;
-  text-align: center;
-  display: inline-block;
-  animation: spin 1s linear infinite;
-}
-
-.loader::before {
-  content: '\21BB';
-}
-
-/* Shared warning icon component */
-/* TODO: Currently different panel classes on different packages */
-.accordion__button svg.warning-icon,
-.cove-accordion__button svg.warning-icon {
-  position: absolute;
-  right: 35px;
-  left: auto;
-  top: 50%;
-  transform: translateY(-50%);
-
-}
-
-.warning-icon {
-  color: #d72f00;
-  width: 15px;
-  height: 15px;
-}
-
-.warning-icon path {
-  fill: #d8000c;
-}
-
-/* Shared checkbox group component */
-/* Used across: chart, data-bite, markup-include packages */
-.checkbox-group {
-  padding: 16px;
-  border: 1px solid #c4c4c4;
-  border-radius: 8px;
-  margin-top: 8px;
-  margin-bottom: 24px;
-}
-
-.cove-accordion__panel.panel-visual .checkbox-group label.checkbox,
-.cove-accordion__panel.panel-visual .reverse-labels label.checkbox,
-.panel-visual .checkbox-group label.checkbox,
-.panel-visual .reverse-labels label.checkbox {
-  display: flex !important;
-  align-items: center !important;
-  width: 100% !important;
-  margin-bottom: 8px !important;
-}
-
-.cove-accordion__panel.panel-visual .checkbox-group label.checkbox input[type="checkbox"],
-.cove-accordion__panel.panel-visual .reverse-labels label.checkbox input[type="checkbox"],
-.panel-visual .checkbox-group label.checkbox input[type="checkbox"],
-.panel-visual .reverse-labels label.checkbox input[type="checkbox"] {
-  flex-shrink: 0 !important;
-  margin-right: 8px !important;
-}
-
-.cove-accordion__panel.panel-visual .checkbox-group label.checkbox span,
-.cove-accordion__panel.panel-visual .reverse-labels label.checkbox span,
-.panel-visual .checkbox-group label.checkbox span,
-.panel-visual .reverse-labels label.checkbox span {
-  flex: 1 !important;
-  display: inline-block !important;
-}

package/styles/_variables.scss

@@ -1,63 +0,0 @@
-$baseColor: #333;
-$blue: #005eaa;
-$lightestGray: #f2f2f2;
-$lightGray: #c7c7c7;
-$mediumGray: #565656;
-$darkGray: #333;
-$red: #d8000c;
-$white: #fff;
-
-$primary: #005eaa !default;
-$secondary: #88c3ea !default;
-$tertiary: #c0e9ff !default;
-$quaternary: #edf9ff !default;
-
-$purple-primary: #712177 !default;
-$purple-secondary: #b890bb !default;
-$purple-tertiary: #e3d3e4 !default;
-$purple-quaternary: #f7f2f7 !default;
-
-$brown-primary: #705043 !default;
-$brown-secondary: #ad907b !default;
-$brown-tertiary: #d7ccc8 !default;
-$brown-quaternary: #f2ebe8 !default;
-
-$teal-primary: #00695c !default;
-$teal-secondary: #4ebaaa !default;
-$teal-tertiary: #ceece7 !default;
-$teal-quaternary: #ebf7f5 !default;
-
-$pink-primary: #af4448 !default;
-$pink-secondary: #e57373 !default;
-$pink-tertiary: #ffc2c2 !default;
-$pink-quaternary: #ffe7e7 !default;
-
-$orange-primary: #bb4d00 !default;
-$orange-secondary: #ffad42 !default;
-$orange-tertiary: #ffe97d !default;
-$orange-quaternary: #fff4cf !default;
-
-$slate-primary: #29434e !default;
-$slate-secondary: #7e9ba5 !default;
-$slate-tertiary: #b6c6d2 !default;
-$slate-quaternary: #e2e8ed !default;
-
-$indigo-primary: #26418f !default;
-$indigo-secondary: #92a6dd !default;
-$indigo-tertiary: #dee8ff !default;
-$indigo-quaternary: #f2f6ff !default;
-
-$cyan-primary: #006778 !default;
-$cyan-secondary: #65b0bd !default;
-$cyan-tertiary: #cce5e9 !default;
-$cyan-quaternary: #ebf5f6 !default;
-
-$green-primary: #4b830d !default;
-$green-secondary: #84bc49 !default;
-$green-tertiary: #dcedc8 !default;
-$green-quaternary: #f1f8e9 !default;
-
-$amber-primary: #fbab18 !default;
-$amber-secondary: #ffd54f !default;
-$amber-tertiary: #ffecb3 !default;
-$amber-quaternary: #fff7e1 !default;

package/styles/v2/layout/_component.scss

@@ -1,21 +0,0 @@
-.cove-component {
-  border-radius: 3px;
-}
-
-.cove-component__content {
-  border: solid 1px #ccc;
-  border-top: none;
-  border-radius: 0 0 3px 3px;
-
-  &.no-borders {
-    border: none !important;
-  }
-
-  .cove-component__content:not(.component--hideBackgroundColor) {
-    background: $lightestGray;
-  }
-}
-
-.cove-component__content-wrap {
-  padding: 0 1rem 1rem;
-}

package/styles/v2/utils/_variables.scss

@@ -1,9 +0,0 @@
-$cove-breakpoints: (
-  xs: 480px,
-  sm: 768px,
-  md: 960px,
-  lg: 1170px,
-  xl: 1280px
-);
-$editorWidth: 350px;
-$transition-expo-out: cubic-bezier(0.16, 1, 0.3, 1);

package/{styles/v2/components/card.scss → components/elements/card.css}

@@ -1,7 +1,7 @@
 .cove-card {
+  background-color: #f2f2f2;
   border: 1px solid #c7c7c7;
   border-radius: 0.25rem;
-  background-color: #f2f2f2;
-  padding: 0.75rem;
   height: 100%;
+  padding: 0.75rem;
 }