@cdc/core 4.25.8 → 4.25.11

package/components/PaletteConversionModal.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import Button from '@cdc/core/components/elements/Button'
+
+interface PaletteConversionModalProps {
+  onConfirm: () => void
+  onCancel: () => void
+  onReturnToV1: () => void
+  paletteName?: string
+}
+
+const PaletteConversionModal: React.FC<PaletteConversionModalProps> = ({
+  onConfirm,
+  onCancel,
+  onReturnToV1,
+  paletteName
+}) => {
+  return (
+    <div
+      className='modal-overlay'
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 9999
+      }}
+    >
+      <div
+        className='modal-content'
+        style={{
+          backgroundColor: 'white',
+          borderRadius: '8px',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+          maxWidth: '500px',
+          margin: '20px'
+        }}
+      >
+        <div
+          className='modal-header'
+          style={{
+            padding: '15px',
+            borderBottom: '1px solid #e0e0e0',
+            backgroundColor: '#005eaa',
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
+          <h3 style={{ color: 'white', textAlign: 'center' }}>Color Palette Conversion</h3>
+        </div>
+
+        <div className='modal-body' style={{ padding: '20px' }}>
+          <p>
+            <strong>
+              Your visualization uses an outdated color palette and will be updated to a new, improved palette.
+            </strong>
+          </p>
+          <br />
+          <p>
+            These new palettes provide improved accessibility and consistency across visualizations. If your previous
+            colors are important for approvals, do not save your visualizations with the new palette.
+          </p>
+          <br />
+        </div>
+
+        <div
+          className='modal-footer'
+          style={{
+            padding: '20px',
+            borderTop: '1px solid #e0e0e0',
+            display: 'flex',
+            gap: '10px',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button secondary onClick={onReturnToV1} style={{ marginRight: 'auto' }}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm}>Convert to New Palette</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PaletteConversionModal

package/components/PaletteSelector/DeveloperPaletteRollback.tsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import _ from 'lodash'
+import { isCoveDeveloperMode } from '../../helpers/queryStringUtils'
+import { 
+  hasPaletteBackup, 
+  getOriginalPaletteName, 
+  rollbackPaletteToOriginal,
+  hasTwoColorPaletteBackup,
+  getOriginalTwoColorPaletteName,
+  rollbackTwoColorPaletteToOriginal
+} from '../../helpers/palettes/utils'
+import './PaletteSelector.css'
+
+interface DeveloperPaletteRollbackProps {
+  config: any
+  updateConfig: (newConfig: any) => void
+  className?: string
+}
+
+const DeveloperPaletteRollback: React.FC<DeveloperPaletteRollbackProps> = ({
+  config,
+  updateConfig,
+  className = ''
+}) => {
+  // Only show if developer mode is enabled
+  if (!isCoveDeveloperMode()) {
+    return null
+  }
+
+  // Check for both regular and two-color palette backups
+  const hasRegularBackup = hasPaletteBackup(config)
+  const hasTwoColorBackup = hasTwoColorPaletteBackup(config)
+  
+  // Only show if there's backup data available
+  if (!hasRegularBackup && !hasTwoColorBackup) {
+    return null
+  }
+
+  const originalPaletteName = getOriginalPaletteName(config)
+  const originalTwoColorPaletteName = getOriginalTwoColorPaletteName(config)
+  const currentPaletteName = config?.general?.palette?.name || config?.palette || config?.color
+  const currentTwoColorPaletteName = config?.twoColor?.palette
+
+  const handleRollback = () => {
+    // Determine which type of rollback to perform and show appropriate confirmation
+    let confirmMessage = ''
+    let fromName = ''
+    let toName = ''
+    
+    if (hasTwoColorBackup) {
+      // Two-color palette rollback
+      fromName = currentTwoColorPaletteName
+      toName = originalTwoColorPaletteName
+      confirmMessage = `Are you sure you want to rollback the palette from "${fromName}" to "${toName}"?\n\nThis will restore the original v1 palette configuration.`
+    } else if (hasRegularBackup) {
+      // Regular palette rollback  
+      fromName = currentPaletteName
+      toName = originalPaletteName
+      confirmMessage = `Are you sure you want to rollback the palette from "${fromName}" to "${toName}"?\n\nThis will restore the original palette configuration and remove the migrated structure.`
+    }
+
+    const confirmRollback = window.confirm(confirmMessage)
+
+    if (confirmRollback) {
+      const configCopy = _.cloneDeep(config)
+      console.log('Config before rollback:', JSON.stringify(configCopy, null, 2))
+      
+      let success = false
+      
+      if (hasTwoColorBackup) {
+        success = rollbackTwoColorPaletteToOriginal(configCopy)
+        console.log('Two-color rollback success:', success)
+      } else if (hasRegularBackup) {
+        const rolledBackConfig = rollbackPaletteToOriginal(configCopy)
+        success = !!rolledBackConfig
+        console.log('Regular rollback success:', success)
+      }
+      
+      console.log('Config after rollback:', JSON.stringify(configCopy, null, 2))
+
+      if (success) {
+        updateConfig(configCopy)
+      } else {
+        alert('Rollback failed: No backup data available')
+      }
+    }
+  }
+
+  // Determine display text based on available backups
+  const displayPaletteName = hasTwoColorBackup ? originalTwoColorPaletteName : originalPaletteName
+  const infoText = hasTwoColorBackup 
+    ? `Developer Mode: Two-color palette migrated from "${originalTwoColorPaletteName}"`
+    : `Developer Mode: Migrated from "${originalPaletteName}"`
+
+  return (
+    <div className={`developer-palette-rollback ${className}`}>
+      <div className="rollback-info">
+        <small className="text-muted">
+          {infoText}
+        </small>
+      </div>
+      <button
+        type="button"
+        className="btn btn-sm btn-outline-warning"
+        onClick={handleRollback}
+        title={`Rollback to original palette: ${displayPaletteName}`}
+      >
+        Rollback Palette
+      </button>
+    </div>
+  )
+}
+
+export default DeveloperPaletteRollback

package/components/PaletteSelector/PaletteSelector.css

@@ -0,0 +1,94 @@
+/* PaletteSelector component styles */
+/* Shared styles for palette color swatches across all visualization types */
+
+.color-palette {
+  display: flex;
+}
+
+/* List item-based palette selector (used by maps) */
+.color-palette li {
+  width: 1.5em;
+  height: 1.5em;
+  display: inline-block;
+  margin-right: 0.5em;
+  cursor: pointer;
+  border: rgba(0, 0, 0, 0.3) 3px solid;
+}
+
+.color-palette li.active {
+  border: rgba(0, 0, 0, 0.8) 3px solid;
+}
+
+.color-palette li.selected {
+  border: black 2px solid;
+}
+
+/* Button-based palette selector (used by charts) */
+.color-palette button:not(.selected) {
+  border: var(--cool-gray-30) 2px solid !important;
+}
+
+.color-palette button.selected {
+  border: black 2px solid !important;
+}
+
+.color-palette a {
+  display: inline-block;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
+}
+
+/* Series list variant */
+.color-palette.series-list {
+  flex-direction: column;
+  padding: 0;
+  border: none;
+}
+
+.color-palette.series-list li {
+  padding: 0.3em 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: auto;
+  height: auto;
+  border: 0;
+}
+
+.color-palette.series-list li:not(:last-child) {
+  border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
+}
+
+/* Header variant */
+.header .color-palette li {
+  width: 1.5em;
+  height: 1.5em;
+  display: inline-block;
+}
+
+/* Developer rollback component styles */
+.developer-palette-rollback {
+  margin: 8px 0;
+  padding: 8px;
+  border: 1px dashed #ffc107;
+  border-radius: 4px;
+  background-color: #fffbf0;
+}
+
+.developer-palette-rollback .rollback-info {
+  margin-bottom: 4px;
+}
+
+.developer-palette-rollback .rollback-info small {
+  color: #856404;
+  font-size: 0.75rem;
+}
+
+.developer-palette-rollback button {
+  font-size: 0.75rem;
+  padding: 2px 8px;
+}
+
+.developer-palette-rollback button:hover {
+  background-color: #ffc107;
+  color: #212529;
+}

package/components/PaletteSelector/PaletteSelector.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { getPaletteAccessor } from '../../helpers/getPaletteAccessor'
+import './PaletteSelector.css'
+
+interface PaletteSelectorProps {
+  palettes: string[]
+  colorPalettes: any
+  config: any
+  onPaletteSelect: (palette: string) => void
+  selectedPalette?: string
+  colorIndices?: [number, number, number]
+  className?: string
+  element?: 'button' | 'li'
+  minColorsForFilter?: (palette: string, paletteAccessor: any, config: any) => boolean
+  getItemClassName?: (palette: string) => string
+}
+
+const PaletteSelector: React.FC<PaletteSelectorProps> = ({
+  palettes,
+  colorPalettes,
+  config,
+  onPaletteSelect,
+  selectedPalette,
+  colorIndices = [2, 3, 5],
+  className = 'color-palette',
+  element = 'button',
+  minColorsForFilter,
+  getItemClassName
+}) => {
+
+  const handlePaletteSelection = (palette: string) => (e: React.MouseEvent) => {
+    if (element === 'button') {
+      e.preventDefault()
+    }
+    onPaletteSelect(palette)
+  }
+
+  const getSelectedClass = (palette: string) => {
+    if (getItemClassName) {
+      return getItemClassName(palette)
+    }
+    return selectedPalette === palette ? 'selected' : ''
+  }
+
+  const renderPaletteColors = (palette: string) => {
+    const [colorOneIndex, colorTwoIndex, colorThreeIndex] = colorIndices
+
+    // Use the enhanced getPaletteAccessor to get the specific palette colors
+    const paletteColors = getPaletteAccessor(colorPalettes, config, palette)
+
+    if (!paletteColors || !Array.isArray(paletteColors)) {
+      return (
+        <>
+          <span style={{ backgroundColor: '#ccc' }}></span>
+          <span style={{ backgroundColor: '#ccc' }}></span>
+          <span style={{ backgroundColor: '#ccc' }}></span>
+        </>
+      )
+    }
+
+    const colorOne = {
+      backgroundColor: paletteColors[colorOneIndex] || '#ccc'
+    }
+
+    const colorTwo = {
+      backgroundColor: paletteColors[colorTwoIndex] || '#ccc'
+    }
+
+    const colorThree = {
+      backgroundColor: paletteColors[colorThreeIndex] || '#ccc'
+    }
+
+    return (
+      <>
+        <span style={colorOne}></span>
+        <span style={colorTwo}></span>
+        <span style={colorThree}></span>
+      </>
+    )
+  }
+
+  const Container = element === 'li' ? 'ul' : 'div'
+
+  return (
+    <Container className={className}>
+      {palettes.map(palette => {
+        // Apply custom filter if provided
+        if (minColorsForFilter) {
+          const paletteColors = getPaletteAccessor(colorPalettes, config, palette)
+          if (!minColorsForFilter(palette, paletteColors, config)) {
+            return null
+          }
+        }
+
+        const Element = element
+
+        return (
+          <Element
+            key={palette}
+            title={palette}
+            onClick={handlePaletteSelection(palette)}
+            className={getSelectedClass(palette)}
+          >
+            {renderPaletteColors(palette)}
+          </Element>
+        )
+      })}
+    </Container>
+  )
+}
+
+export default PaletteSelector

package/components/PaletteSelector/index.ts

@@ -0,0 +1,2 @@
+export { default as PaletteSelector } from './PaletteSelector'
+export { default as DeveloperPaletteRollback } from './DeveloperPaletteRollback'

package/components/RichTooltip/RichTooltip.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
 import './richTooltip.css'
 
 const RichTooltip = ({ linkText, href = null, tooltipOpacity = 100, tooltipContent }) => {

package/components/Table/Table.tsx

@@ -46,8 +46,10 @@ const Table = ({
   const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 2 } : {}
   const isGroupedMatrix = !Array.isArray(childrenMatrix)
 
+  const { cellMinWidth, ...tableAttrs } = tableOptions
+
   return (
-    <table {...tableOptions}>
+    <table {...tableAttrs}>
       <caption className='visually-hidden'>{caption}</caption>
       {noData ? (
         <tr>

package/components/Table/components/Cell.tsx

@@ -1,7 +1,28 @@
 const Cell = ({ children, style, isBold = false, ariaLabel }) => {
+  // Use whiteSpace from style prop, defaulting to 'pre-line' for backwards compatibility
+  const whiteSpace = style?.whiteSpace || 'pre-line'
+
+  const contentWrapperStyle = {
+    whiteSpace: whiteSpace as any,
+    lineHeight: '1.4',
+    display: 'block' as const,
+    margin: 0,
+    padding: 0,
+    wordBreak: 'break-word' as const
+  }
+
+  // Only include aria-label if it has a value
+  const ariaProps = ariaLabel ? { 'aria-label': ariaLabel } : {}
+
+  // Keep whiteSpace on td style so it can be detected by tests and for proper rendering
+  const tdStyle = { ...style }
+  delete tdStyle.textOverflow
+
   return (
-    <td aria-label={ariaLabel} tabIndex={0} role='gridcell' style={style}>
-      {isBold ? <strong>{children}</strong> : children}
+    <td {...ariaProps} role='gridcell' style={tdStyle}>
+      <div style={contentWrapperStyle}>
+        {isBold ? <strong>{children}</strong> : children}
+      </div>
     </td>
   )
 }

package/components/Table/components/Row.tsx

@@ -16,8 +16,7 @@ type RowProps = {
 }
 
 const Row: FC<RowProps> = props => {
-  const { childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, preliminaryData, rightAlignedCols } = props
-  const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
+  const { childRow, rowKey, cellMinWidth = 0, isTotal, preliminaryData, rightAlignedCols, wrapColumns } = props
   const minWidth = cellMinWidth + 'px'
   const isHtmlString = (str: any): str is string => typeof str === 'string' && /<\/?[a-z][\s\S]*>/i.test(str)
   const isReactNode = (val: any): boolean => React.isValidElement(val) || typeof val === 'object'
@@ -32,6 +31,9 @@ const Row: FC<RowProps> = props => {
           {}
 
         const textAlign = rightAlignedCols && rightAlignedCols[i] ? 'right' : ''
+        // Set whiteSpace based on wrapColumns prop (default to wrapping for backwards compatibility)
+        const whiteSpace = wrapColumns === false ? 'nowrap' : 'normal'
+
         // handle Parsing
         let content: ReactNode
         if (isHtmlString(child)) {
@@ -46,7 +48,7 @@ const Row: FC<RowProps> = props => {
           <Cell
             ariaLabel={style?.color ? 'suppressed data' : ''}
             key={rowKey + '__' + i}
-            style={{ whiteSpace, minWidth, textAlign, textOverflow: 'ellipsis', ...style }}
+            style={{ minWidth, textAlign, whiteSpace, ...style }}
             isBold={isTotal}
           >
             {content}

package/components/_stories/BlurStrokeTest.stories.tsx

@@ -1,6 +1,6 @@
 import { a } from 'vitest/dist/suite-IbNSsUWN'
 import { BlurStrokeText } from '../BlurStrokeText'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 const meta: Meta<typeof BlurStrokeText> = {
   title: 'Components/Atoms/BlurStrokeText',

package/components/_stories/DataTable.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import DataTable from '../DataTable'
 import './styles.scss'

package/components/_stories/Filters.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 
 import Filters from '../Filters'
 import { VizFilter } from '../../types/VizFilter'
@@ -8,7 +8,14 @@ import { Visualization } from '../../types/Visualization'
 
 const meta: Meta<typeof Filters> = {
   title: 'Components/Molecules/Visualization Filters',
-  component: Filters
+  component: Filters,
+  decorators: [
+    Story => (
+      <div className='cdc-open-viz-module'>
+        <Story />
+      </div>
+    )
+  ]
 }
 
 type Story = StoryObj<typeof Filters>
@@ -54,4 +61,16 @@ export const Tab: Story = generateConfig('tab')
 
 export const TabBar: Story = generateConfig('tab bar')
 
+export const WithApplyButton: Story = {
+  args: {
+    config: {
+      filters: generateFilters('dropdown'),
+      data: animalData,
+      filterBehavior: 'Apply Button',
+      type: 'chart'
+    } as any,
+    setFilters: () => {}
+  }
+}
+
 export default meta