@cdc/core 4.25.8 → 4.25.11

package/components/_stories/Inputs.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
-import InputSelect from '../inputs/InputSelect'
+import { Select as SelectInput } from '../EditorPanel/Inputs'
 import { useState } from 'react'
 
 const Inputs: React.FC = ({ config }: any) => {
@@ -16,7 +16,7 @@ const Inputs: React.FC = ({ config }: any) => {
   }
   return (
     <div>
-      <InputSelect label='Select' options={['apple', 'banana', 'orange']} fieldName='inputselect' updateField={updateField} />
+      <SelectInput label='Select' options={['apple', 'banana', 'orange']} fieldName='inputselect' updateField={updateField} />
     </div>
   )
 }

package/components/_stories/MultiSelect.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import MultiSelect from '../MultiSelect'
-import { userEvent, within } from '@storybook/testing-library'
+import { userEvent, within } from 'storybook/test'
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Components/Molecules/MultiSelect',
@@ -10,7 +10,7 @@ const meta: Meta<typeof MultiSelect> = {
 
 type Story = StoryObj<typeof MultiSelect>
 
-export const Primary: Story = {
+export const PrimaryTests: Story = {
   args: {
     options: [
       { value: '1', label: 'One' },

package/components/_stories/NestedDropdown.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 import NestedDropdown from '../NestedDropdown'
 import nestedDropdownStory from './_mocks/nested-dropdown.json'
 import { useState } from 'react'

package/components/_stories/Table.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import Table from '../Table'
 import { ReactNode } from 'react'

package/components/_stories/styles.scss

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

package/components/elements/_stories/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import Button from '../Button'
 

package/components/elements/_stories/Card.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import Card from '../Card'
 

package/components/inputs/InputToggle.tsx

@@ -19,6 +19,8 @@ type InputSliderProps = {
   fieldName?: string
   /** Prop drill down of the updateField function */
   updateField?: Function
+  /** Click handler function */
+  onClick?: Function
   /** Current value of the input, usually the current config option value */
   value: boolean
 }

package/components/managers/DataDesigner.tsx

@@ -22,6 +22,7 @@ type DataDesignerProps = {
 
 const DataDesigner = (props: DataDesignerProps) => {
   const { configureData, updateDescriptionProp, config, setConfig } = props
+  const firstDataRow = configureData?.data?.[0] || {}
   const hasDataOrientation = config?.visualizationType !== 'Forest Plot'
   const hasMultipleSeries = config?.visualizationType !== 'Forest Plot'
   const hasRowSelection = config?.visualizationType !== 'Forest Plot'
@@ -134,7 +135,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                 defaultValue={configureData.dataDescription.seriesKey}
               >
                 <option value=''>Choose an option</option>
-                {Object.keys(configureData.data[0]).map((value, index) => (
+                {Object.keys(firstDataRow).map((value, index) => (
                   <option value={value} key={index}>
                     {value}
                   </option>
@@ -200,7 +201,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                         defaultValue={configureData.dataDescription.seriesKey}
                       >
                         <option value=''>Choose an option</option>
-                        {Object.keys(configureData.data[0]).map((value, index) => (
+                        {Object.keys(firstDataRow).map((value, index) => (
                           <option value={value} key={index}>
                             {value}
                           </option>
@@ -218,7 +219,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                         defaultValue={configureData.dataDescription.xKey}
                       >
                         <option value=''>Choose an option</option>
-                        {Object.keys(configureData.data[0]).map((value, index) => (
+                        {Object.keys(firstDataRow).map((value, index) => (
                           <option value={value} key={index}>
                             {value}
                           </option>
@@ -264,7 +265,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                         }}
                       >
                         <option value=''>Choose an option</option>
-                        {Object.keys(configureData.data[0])
+                        {Object.keys(firstDataRow)
                           .filter(
                             value =>
                               !configureData.dataDescription.valueKeysTallSupport ||
@@ -313,7 +314,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                         }}
                       >
                         <option value=''>Choose an option</option>
-                        {Object.keys(configureData.data[0])
+                        {Object.keys(firstDataRow)
                           .filter(
                             value =>
                               !configureData.dataDescription.ignoredKeys ||
@@ -348,7 +349,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   defaultValue={'Select'}
                 >
                   <option value=''>Choose an option</option>
-                  {Object.keys(configureData.data[0]).map((value, index) => (
+                  {Object.keys(firstDataRow).map((value, index) => (
                     <option value={value} key={index}>
                       {value}
                     </option>
@@ -371,7 +372,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   defaultValue={'Select'}
                 >
                   <option value=''>Choose an option</option>
-                  {Object.keys(configureData.data[0]).map((value, index) => (
+                  {Object.keys(firstDataRow).map((value, index) => (
                     <option value={value} key={index}>
                       {value}
                     </option>
@@ -394,7 +395,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   defaultValue={'Select'}
                 >
                   <option value=''>Choose an option</option>
-                  {Object.keys(configureData.data[0]).map((value, index) => (
+                  {Object.keys(firstDataRow).map((value, index) => (
                     <option value={value} key={index}>
                       {value}
                     </option>
@@ -417,7 +418,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                   defaultValue={'Select'}
                 >
                   <option value=''>Choose an option</option>
-                  {Object.keys(configureData.data[0]).map((value, index) => (
+                  {Object.keys(firstDataRow).map((value, index) => (
                     <option value={value} key={index}>
                       {value}
                     </option>

package/components/managers/_stories/DataDesigner.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import DataDesigner from '../DataDesigner'
 

package/components/ui/Accordion.jsx

@@ -40,7 +40,7 @@ const Accordion = ({ children }) => {
                 ) : null}
               </AccordionItemButton>
             </AccordionItemHeading>
-            <AccordionItemPanel className='cove-accordion__panel'>{section.props.children}</AccordionItemPanel>
+            <AccordionItemPanel className={`cove-accordion__panel ${section.props.className || ''}`}>{section.props.children}</AccordionItemPanel>
           </AccordionItem>
         ))}
     </AccordionComponent>

package/components/ui/Tooltip.tsx

@@ -2,6 +2,7 @@ import { useId } from 'react'
 
 // Third Party
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
 import type { PlacesType } from 'react-tooltip'
 
 // Styles
@@ -44,7 +45,7 @@ const Tooltip: React.FC<ToolTipProps> & { Target; Content } = ({
         className='cove-tooltip--target'
         data-tooltip-float={float}
         data-tooltip-place={place}
-        data-tooltip-isOpen={true}
+        data-tooltip-isopen={true}
       >
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
       </a>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import Accordion from '../Accordion'
 

package/components/ui/_stories/ColorPaletteMigration.stories.mdx

@@ -0,0 +1,275 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
+import { mapColorPalettesV1, mapColorPalettesV2 } from '@cdc/core/data/colorPalettes'
+
+<Meta title="Design Systems/Color Palette Migration" />
+
+# Color Palette Migration: V1 to V2
+
+This story shows the evolution from v1 to v2 color palettes side by side. This comparison helps visualize how each v1 palette translates to the new v2 palette.
+
+## Blue Palettes
+
+### Sequential Blue Extended → Sequential Blue
+<ColorPalette>
+  <ColorItem
+    title="V1: Sequential Blue Extended"
+    colors={mapColorPalettesV1.sequential_blue_extended}
+  />
+  <ColorItem
+    title="V2: Sequential Blue"
+    colors={mapColorPalettesV2.sequential_blue}
+  />
+</ColorPalette>
+
+### Sequential Blue Green → Sequential Blue
+<ColorPalette>
+  <ColorItem
+    title="V1: Sequential Blue Green"
+    colors={mapColorPalettesV1.sequential_blue_green}
+  />
+  <ColorItem
+    title="V2: Sequential Blue"
+    colors={mapColorPalettesV2.sequential_blue}
+  />
+</ColorPalette>
+
+### Sequential Green Blue → Sequential Teal
+<ColorPalette>
+  <ColorItem
+    title="V1: Sequential Green Blue"
+    colors={mapColorPalettesV1.sequential_green_blue}
+  />
+  <ColorItem
+    title="V2: Sequential Teal"
+    colors={mapColorPalettesV2.sequential_teal}
+  />
+</ColorPalette>
+
+## Green Palettes
+
+### New V2: Sequential Green
+<ColorPalette>
+  <ColorItem
+    title="V2: Sequential Green (New)"
+    colors={mapColorPalettesV2.sequential_green}
+  />
+</ColorPalette>
+
+## Purple Palettes
+
+### Sequential Pink Purple → Sequential Purple
+<ColorPalette>
+  <ColorItem
+    title="V1: Sequential Pink Purple"
+    colors={mapColorPalettesV1.sequential_pink_purple}
+  />
+  <ColorItem
+    title="V2: Sequential Purple"
+    colors={mapColorPalettesV2.sequential_purple}
+  />
+</ColorPalette>
+
+### Sequential Red → Sequential Purple
+<ColorPalette>
+  <ColorItem
+    title="V1: Sequential Red"
+    colors={mapColorPalettesV1.sequential_red}
+  />
+  <ColorItem
+    title="V2: Sequential Purple"
+    colors={mapColorPalettesV2.sequential_purple}
+  />
+</ColorPalette>
+
+### Divergent Yellow Purple → Sequential Purple
+<ColorPalette>
+  <ColorItem
+    title="V1: Divergent Yellow Purple"
+    colors={mapColorPalettesV1.divergent_yellow_purple}
+  />
+  <ColorItem
+    title="V2: Sequential Purple"
+    colors={mapColorPalettesV2.sequential_purple}
+  />
+</ColorPalette>
+
+## Orange Palettes
+
+### Sequential Yellow Orange Red → Sequential Orange
+<ColorPalette>
+  <ColorItem
+    title="V1: Sequential Yellow Orange Red"
+    colors={mapColorPalettesV1.sequential_yellow_orange_red}
+  />
+  <ColorItem
+    title="V2: Sequential Orange"
+    colors={mapColorPalettesV2.sequential_orange}
+  />
+</ColorPalette>
+
+### Sequential Yellow Orange Brown → Sequential Orange
+<ColorPalette>
+  <ColorItem
+    title="V1: Sequential Yellow Orange Brown"
+    colors={mapColorPalettesV1.sequential_yellow_orange_brown}
+  />
+  <ColorItem
+    title="V2: Sequential Orange"
+    colors={mapColorPalettesV2.sequential_orange}
+  />
+</ColorPalette>
+
+### Sequential Orange Red → Sequential Orange
+<ColorPalette>
+  <ColorItem
+    title="V1: Sequential Orange Red"
+    colors={mapColorPalettesV1.sequential_orange_red}
+  />
+  <ColorItem
+    title="V2: Sequential Orange"
+    colors={mapColorPalettesV2.sequential_orange}
+  />
+</ColorPalette>
+
+### Sequential Orange Extended → Sequential Orange
+<ColorPalette>
+  <ColorItem
+    title="V1: Sequential Orange Extended"
+    colors={mapColorPalettesV1.sequential_orange_extended}
+  />
+  <ColorItem
+    title="V2: Sequential Orange"
+    colors={mapColorPalettesV2.sequential_orange}
+  />
+</ColorPalette>
+
+## Diverging/Special Palettes
+
+### New V2 Diverging and Special Palettes
+<ColorPalette>
+  <ColorItem
+    title="V2: Divergent Blue Cyan (New)"
+    colors={mapColorPalettesV2.divergent_blue_cyan}
+  />
+  <ColorItem
+    title="V2: Divergent Blue Purple (New)"
+    colors={mapColorPalettesV2.divergent_blue_purple}
+  />
+  <ColorItem
+    title="V2: Divergent Green Orange (New)"
+    colors={mapColorPalettesV2.divergent_green_orange}
+  />
+  <ColorItem
+    title="V2: Divergent Blue Orange (New)"
+    colors={mapColorPalettesV2.divergent_blue_orange}
+  />
+</ColorPalette>
+
+## Categorical/Qualitative Palettes
+
+### Qualitative 1 → Qualitative
+<ColorPalette>
+  <ColorItem
+    title="V1: Qualitative 1"
+    colors={mapColorPalettesV1.qualitative1}
+  />
+  <ColorItem
+    title="V2: Qualitative"
+    colors={mapColorPalettesV2.qualitative}
+  />
+</ColorPalette>
+
+### Qualitative 2 → Qualitative
+<ColorPalette>
+  <ColorItem
+    title="V1: Qualitative 2"
+    colors={mapColorPalettesV1.qualitative2}
+  />
+  <ColorItem
+    title="V2: Qualitative"
+    colors={mapColorPalettesV2.qualitative}
+  />
+</ColorPalette>
+
+### Qualitative 3 → Qualitative
+<ColorPalette>
+  <ColorItem
+    title="V1: Qualitative 3"
+    colors={mapColorPalettesV1.qualitative3}
+  />
+  <ColorItem
+    title="V2: Qualitative"
+    colors={mapColorPalettesV2.qualitative}
+  />
+</ColorPalette>
+
+### Qualitative 4 → Qualitative
+<ColorPalette>
+  <ColorItem
+    title="V1: Qualitative 4"
+    colors={mapColorPalettesV1.qualitative4}
+  />
+  <ColorItem
+    title="V2: Qualitative"
+    colors={mapColorPalettesV2.qualitative}
+  />
+</ColorPalette>
+
+### Qualitative Earth Tones → Qualitative
+<ColorPalette>
+  <ColorItem
+    title="V1: Qualitative Earth Tones"
+    colors={mapColorPalettesV1.qualitative_earth_tones}
+  />
+  <ColorItem
+    title="V2: Qualitative"
+    colors={mapColorPalettesV2.qualitative}
+  />
+</ColorPalette>
+
+### Colorblind Safe → Qualitative
+<ColorPalette>
+  <ColorItem
+    title="V1: Colorblind Safe"
+    colors={mapColorPalettesV1.colorblindsafe}
+  />
+  <ColorItem
+    title="V2: Qualitative (Colorblind-friendly)"
+    colors={mapColorPalettesV2.qualitative}
+  />
+</ColorPalette>
+
+## New V2 Palettes
+
+These are new palettes introduced in V2 that don't have direct V1 equivalents:
+
+<ColorPalette>
+  <ColorItem
+    title="V2: Sequential Green"
+    colors={mapColorPalettesV2.sequential_green}
+  />
+  <ColorItem
+    title="V2: Divergent Blue Cyan"
+    colors={mapColorPalettesV2.divergent_blue_cyan}
+  />
+  <ColorItem
+    title="V2: Divergent Blue Purple"
+    colors={mapColorPalettesV2.divergent_blue_purple}
+  />
+  <ColorItem
+    title="V2: Divergent Green Orange"
+    colors={mapColorPalettesV2.divergent_green_orange}
+  />
+  <ColorItem
+    title="V2: Divergent Blue Orange"
+    colors={mapColorPalettesV2.divergent_blue_orange}
+  />
+</ColorPalette>
+
+## Migration Notes
+
+- **Sequential palettes**: V1 had many specific sequential palettes that map to broader single-hue categories in V2
+- **Qualitative palettes**: V1 had 4 different qualitative sets that all map to a single, refined qualitative palette in V2
+- **Divergent palettes**: V2 introduces new divergent palettes for better data representation
+- **Heat maps**: V2 adds a dedicated heat map palette for specialized visualizations
+- **Colorblind accessibility**: Both versions maintain colorblind-safe options