@cdc/core 4.26.1 → 4.26.3

package/types/Visualization.ts

@@ -11,6 +11,7 @@ import { General } from './General'
 import { Runtime } from './Runtime'
 import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 import Footnotes from './Footnotes'
+import { TwoColorConfig } from './Palette'
 
 // This was originally created as a catchall for the different types of visualizations.
 // Currently it includes properties that ares specific to one Visualization type.
@@ -27,6 +28,7 @@ type DeprecatedVisualizationType = {
   filters: VizFilter[]
   general: General
   legend: Legend
+  locale: string
   newViz: boolean
   isResponsiveTicks: boolean
   openModal?: boolean
@@ -44,6 +46,11 @@ type DeprecatedVisualizationType = {
   visualizationType: string
   xAxis: Axis
   preliminaryData: { type: 'effect' | 'suppression'; value: string }[]
+  twoColor?: TwoColorConfig
+  /** @deprecated Legacy v1 palette name - use general.palette.name instead */
+  palette?: string
+  /** @deprecated Legacy v1 color name - use general.palette.name instead */
+  color?: string
 }
 
 type StatefulProperties = {

package/_stories/StoryRenderingTests.stories.tsx

@@ -1,164 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { within, expect } from 'storybook/test'
-import { performAndAssert } from '@cdc/core/helpers/testing'
-
-const ChartRenderingValidator = () => (
-  <div data-testid='chart-rendering-validator'>
-    <h2>Simple COVE Visualization Tests</h2>
-    <p>This test validates all stories load and render.</p>
-  </div>
-)
-
-const meta: Meta<typeof ChartRenderingValidator> = {
-  title: 'Testing/Story Rendering Tests',
-  component: ChartRenderingValidator,
-  parameters: {
-    layout: 'fullscreen'
-  },
-  tags: ['!dev', '!autodocs']
-}
-
-export default meta
-type Story = StoryObj<typeof ChartRenderingValidator>
-
-/**
- * Fetch all stories from Storybook's JSON API and filter for visualization stories
- * @returns Promise that resolves to an array of story URLs to test
- */
-const getVisualizationStoryUrls = async (): Promise<string[]> => {
-  let response
-  try {
-    response = await fetch('http://localhost:6006/index.json')
-  } catch (error) {
-    console.error('Error fetching visualization story URLs:', error)
-    return []
-  }
-
-  const data = await response.json()
-
-  const storyUrls: string[] = []
-
-  Object.values(data.entries).forEach((story: any) => {
-    if (story.type === 'story') {
-      const isVisualizationStory =
-        story.title.includes('Components/Templates/') &&
-        !story.name.toLowerCase().includes('test') &&
-        !story.title.includes('Guide')
-
-      if (isVisualizationStory) {
-        const iframeUrl = `http://localhost:6006/iframe.html?id=${story.id}`
-        storyUrls.push(iframeUrl)
-      }
-    }
-  })
-  return storyUrls
-}
-
-/**
- * Convert iframe URL to Storybook story URL for better debugging
- * @param iframeUrl - The iframe URL (e.g., 'http://localhost:6006/iframe.html?id=components-templates-chart--multiple-lines')
- * @returns The Storybook story URL (e.g., 'http://localhost:6006/?path=/story/components-templates-chart--multiple-lines')
- */
-const iframeUrlToStoryUrl = (iframeUrl: string): string => {
-  const url = new URL(iframeUrl)
-  const storyId = url.searchParams.get('id')
-  return `http://localhost:6006/?path=/story/${storyId}`
-}
-
-/**
- * Test a single Storybook iframe URL for successful visualization rendering
- * @param iframeUrl - The complete iframe URL to test (e.g., 'http://localhost:6006/iframe.html?id=...')
- * @returns Promise that resolves with test results
- */
-const testIframeVisualization = async (iframeUrl: string) => {
-  iframeUrl = iframeUrl
-
-  const iframe = document.createElement('iframe')
-  iframe.style.width = '1200px'
-  iframe.style.height = '800px'
-  iframe.src = iframeUrl
-  document.body.appendChild(iframe)
-
-  try {
-    await performAndAssert(
-      'Wait for iframe to load',
-      () => {
-        try {
-          const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document
-          return {
-            loaded: !!iframeDoc && iframeDoc.readyState !== 'loading',
-            readyState: iframeDoc?.readyState || 'unknown'
-          }
-        } catch (error: any) {
-          return { loaded: false, readyState: 'error', error: error.message }
-        }
-      },
-      async () => {},
-      (before, after) => {
-        return after.loaded
-      }
-    )
-
-    await performAndAssert(
-      'Wait for SVG elements to render in iframe',
-      () => {
-        try {
-          const iframeDoc = iframe?.contentDocument || iframe?.contentWindow?.document
-          if (!iframeDoc) return { svgCount: 0, hasCoveModule: false, error: 'No document access' }
-
-          const svgCount = iframeDoc.querySelectorAll('svg').length
-          const hasCoveModule = !!iframeDoc.querySelector('.cdc-open-viz-module')
-          const isDataBite = !!iframeDoc.querySelector('.bite-content')
-          const isDataTable = !!iframeDoc.querySelector('.data-table')
-
-          return { svgCount, hasCoveModule, isDataBite, isDataTable, error: null }
-        } catch (error: any) {
-          return { svgCount: 0, hasCoveModule: false, isDataBite: false, isDataTable: false, error: error.message }
-        }
-      },
-      async () => {},
-      (before, after) => {
-        return (after.svgCount > 0 && after.hasCoveModule) || after.isDataBite || after.isDataTable
-      }
-    )
-  } finally {
-    if (iframe.parentNode) {
-      document.body.removeChild(iframe)
-    }
-  }
-}
-
-export const StoryRenderingTests: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByTestId('chart-rendering-validator')).toBeInTheDocument()
-
-    const storyUrls = await getVisualizationStoryUrls()
-
-    if (storyUrls.length === 0) {
-      console.warn('No visualization stories found to test')
-      return
-    }
-
-    const results: { iframeUrl: string; storyUrl: string; success: boolean; error?: string }[] = []
-
-    for (const [i, iframeUrl] of storyUrls.entries()) {
-      const storyUrl = iframeUrlToStoryUrl(iframeUrl)
-
-      try {
-        await testIframeVisualization(iframeUrl)
-        results.push({ iframeUrl, storyUrl, success: true })
-      } catch (error: any) {
-        if (i > 0) {
-          results.push({ iframeUrl, storyUrl, success: false, error: error.message })
-        }
-      }
-    }
-
-    const failed = results.filter(r => !r.success).length
-
-    if (failed > 0) {
-      throw new Error(`${failed} out of ${storyUrls.length} visualization stories failed to render`)
-    }
-  }
-}

package/helpers/embedCodeGenerator.ts

@@ -1,109 +0,0 @@
-/**
- * Generates iframe embed code for COVE visualizations
- * Used by editor's "Share with Partners" feature
- */
-
-interface EmbedCodeOptions {
-  configUrl: string
-  width?: string
-  height?: string
-  embedBaseUrl?: string
-  helperScriptUrl?: string
-  /** Additional URL parameters (e.g., filter values, hide flags) */
-  urlParams?: Record<string, string>
-}
-
-/**
- * Detect if we're in development mode
- */
-export function isDevMode(): boolean {
-  if (typeof window === 'undefined') return false
-  return window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
-}
-
-/**
- * Get default embed base URL based on environment
- * Returns full absolute URL including protocol and host
- */
-export function getDefaultEmbedBaseUrl(): string {
-  if (isDevMode()) {
-    return 'http://localhost:8080'
-  }
-  return 'https://www.cdc.gov/TemplatePackage/contrib/widgets/openVizWrapper/dist/embed/embed.html'
-}
-
-/**
- * Get embed path (without protocol/host) for same-origin usage
- * Use this for preview iframes on the same domain
- */
-export function getEmbedPath(): string {
-  if (isDevMode()) {
-    return '/'
-  }
-  return '/TemplatePackage/contrib/widgets/openVizWrapper/dist/embed/embed.html'
-}
-
-/**
- * Get default embed helper script URL based on environment
- */
-export function getDefaultHelperScriptUrl(): string {
-  if (isDevMode()) {
-    return 'http://localhost:8080/src/embed-helper/index.js'
-  }
-  return 'https://www.cdc.gov/TemplatePackage/contrib/widgets/openVizWrapper/dist/embed/embed-helper.js'
-}
-
-/**
- * Get default generator base URL based on environment
- */
-export function getDefaultGeneratorBaseUrl(): string {
-  if (isDevMode()) {
-    return 'http://localhost:8080/generator.html'
-  }
-  return 'https://www.cdc.gov/TemplatePackage/contrib/widgets/openVizWrapper/dist/embed/generator.html'
-}
-
-/**
- * Generate basic iframe embed code for partners
- *
- * @param options.configUrl - URL to the published config JSON
- * @param options.width - iframe width (default: "100%")
- * @param options.height - iframe height (default: "300")
- * @param options.embedBaseUrl - Base URL for embed page (auto-detected by environment)
- * @param options.helperScriptUrl - URL for embed-helper.js (auto-detected by environment)
- * @param options.urlParams - Additional URL parameters (e.g., filter values, hide flags)
- * @returns HTML string with iframe and script tag
- */
-export function generateEmbedCode(options: EmbedCodeOptions): string {
-  const {
-    configUrl,
-    width = '100%',
-    height = '300',
-    embedBaseUrl = getDefaultEmbedBaseUrl(),
-    helperScriptUrl = getDefaultHelperScriptUrl(),
-    urlParams = {}
-  } = options
-
-  // Construct embed page URL with config parameter and any additional params
-  const params = new URLSearchParams()
-  params.set('configUrl', configUrl)
-
-  // Add any additional URL parameters (filters, hide flags, etc.)
-  Object.entries(urlParams).forEach(([key, value]) => {
-    if (value) params.set(key, value)
-  })
-
-  const embedUrl = `${embedBaseUrl}?${params.toString()}`
-
-  // Generate iframe code
-  const iframeCode = `<iframe src="${embedUrl}"
-data-cove-embed
-width="${width}"
-height="${height}"
-frameborder="0"
-title="CDC Data Visualization"
-></iframe>
-<script src="${helperScriptUrl}"></script>`
-
-  return iframeCode
-}

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;
 }