@cdc/core 4.25.10 → 4.26.1

package/components/CustomColorsEditor/CustomColorsEditor.css

@@ -0,0 +1,299 @@
+.custom-colors-editor {
+  padding: 0.75rem;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  background-color: #f8f9fa;
+}
+
+.custom-colors-editor .custom-colors-label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  color: #495057;
+}
+
+.custom-colors-editor .custom-colors-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  background-color: #d1ecf1;
+  border: 1px solid #bee5eb;
+  border-radius: 0.25rem;
+  color: #0c5460;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.custom-colors-editor .custom-colors-notice .notice-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  color: #17a2b8;
+}
+
+.custom-colors-editor .custom-colors-notice strong {
+  font-weight: 600;
+}
+
+.custom-colors-editor .custom-colors-notice a {
+  color: #0c5460;
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.custom-colors-editor .custom-colors-notice a:hover {
+  color: #062a30;
+  text-decoration: none;
+}
+
+.custom-colors-editor .custom-colors-preview {
+  display: flex;
+  gap: 2px;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  min-height: 36px;
+  overflow: hidden;
+}
+
+.custom-colors-editor .custom-colors-preview .preview-swatch {
+  flex: 1;
+  min-width: 8px;
+  border-radius: 2px;
+  transition: transform 0.15s ease;
+}
+
+.custom-colors-editor .custom-colors-preview .preview-swatch:hover {
+  transform: scale(1.1);
+}
+
+.custom-colors-editor .custom-colors-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  max-height: 400px;
+  overflow-y: auto;
+  padding-right: 0.25rem;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.custom-colors-editor .custom-colors-list::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.custom-colors-editor .custom-color-item {
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  transition: box-shadow 0.15s ease, opacity 0.15s ease;
+}
+
+.custom-colors-editor .custom-color-item.dragging {
+  opacity: 0.5;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  cursor: grabbing;
+}
+
+.custom-colors-editor .custom-color-item:hover:not(.dragging) {
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
+  border-color: #adb5bd;
+}
+
+.custom-colors-editor .color-item-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 576px) {
+  .custom-colors-editor .color-item-controls {
+    gap: 0.375rem;
+  }
+}
+
+.custom-colors-editor .color-item-drag-handle {
+  color: #adb5bd;
+  font-size: 0.875rem;
+  cursor: grab;
+  user-select: none;
+  line-height: 1;
+  flex-shrink: 0;
+  padding: 0 0.125rem;
+}
+
+.custom-colors-editor .color-item-drag-handle:active {
+  cursor: grabbing;
+}
+
+.custom-colors-editor .custom-color-item:hover .color-item-drag-handle {
+  color: #6c757d;
+}
+
+.custom-colors-editor .color-item-number {
+  font-weight: 600;
+  min-width: 24px;
+  text-align: right;
+  color: #6c757d;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+.custom-colors-editor .color-picker {
+  width: 48px;
+  height: 34px;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  padding: 2px;
+  flex-shrink: 0;
+  transition: border-color 0.15s ease;
+}
+
+.custom-colors-editor .color-picker:hover {
+  border-color: #80bdff;
+}
+
+.custom-colors-editor .color-picker:focus {
+  outline: none;
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.custom-colors-editor .color-input-wrapper {
+  flex: 1;
+  min-width: 0;
+  margin-bottom: 0;
+}
+
+/* Override TextField label wrapper styles */
+.custom-colors-editor .color-input-wrapper label {
+  margin-bottom: 0;
+}
+
+/* Hide the label text since we're passing empty string */
+.custom-colors-editor .color-input-wrapper label .edit-label {
+  display: none;
+}
+
+.custom-colors-editor .color-input-wrapper label input[type='text'] {
+  font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  text-transform: uppercase;
+}
+
+@media (max-width: 576px) {
+  .custom-colors-editor .color-input-wrapper {
+    flex-basis: 100%;
+  }
+}
+
+.custom-colors-editor .color-item-buttons {
+  display: flex;
+  gap: 0.25rem;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.custom-colors-editor .btn-move,
+.custom-colors-editor .btn-remove {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  background-color: #fff;
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+}
+
+.custom-colors-editor .btn-move:hover:not(:disabled),
+.custom-colors-editor .btn-remove:hover:not(:disabled) {
+  background-color: #e9ecef;
+  border-color: #adb5bd;
+}
+
+.custom-colors-editor .btn-move:active:not(:disabled),
+.custom-colors-editor .btn-remove:active:not(:disabled) {
+  background-color: #dee2e6;
+  transform: scale(0.95);
+}
+
+.custom-colors-editor .btn-move:disabled,
+.custom-colors-editor .btn-remove:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.custom-colors-editor .btn-remove {
+  color: #dc3545;
+  font-weight: 700;
+  font-size: 1.125rem;
+}
+
+.custom-colors-editor .btn-remove:hover:not(:disabled) {
+  background-color: #dc3545;
+  color: #fff;
+  border-color: #dc3545;
+}
+
+.custom-colors-editor .btn-add-color {
+  width: 100%;
+  padding: 0.5rem;
+  border: 2px dashed #ced4da;
+  border-radius: 0.25rem;
+  background-color: #fff;
+  color: #6c757d;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.custom-colors-editor .btn-add-color:hover:not(:disabled) {
+  border-color: #007bff;
+  color: #007bff;
+  background-color: #e7f1ff;
+}
+
+.custom-colors-editor .btn-add-color:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.custom-colors-editor .btn-add-color:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.custom-colors-editor .custom-colors-info {
+  text-align: center;
+  font-size: 0.75rem;
+  color: #6c757d;
+  margin-top: 0.5rem;
+  font-style: italic;
+}

package/components/CustomColorsEditor/CustomColorsEditor.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react'
+import { TextField } from '../EditorPanel/Inputs'
+import './CustomColorsEditor.css'
+
+interface CustomColorsEditorProps {
+  colors: string[]
+  onChange: (colors: string[]) => void
+  label?: string
+  minColors?: number
+  maxColors?: number
+}
+
+const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
+  colors = [],
+  onChange,
+  label = 'Custom Colors',
+  minColors = 1,
+  maxColors = 20
+}) => {
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null)
+
+  const handleColorChange = (index: number, newColor: string) => {
+    const newColors = [...colors]
+    newColors[index] = newColor
+    onChange(newColors)
+  }
+
+  const handleAddColor = () => {
+    if (colors.length < maxColors) {
+      // Add a new color (default to the last color or a neutral color)
+      const defaultColor = colors.length > 0 ? colors[colors.length - 1] : '#3366cc'
+      onChange([...colors, defaultColor])
+    }
+  }
+
+  const handleRemoveColor = (index: number) => {
+    if (colors.length > minColors) {
+      const newColors = colors.filter((_, i) => i !== index)
+      onChange(newColors)
+    }
+  }
+
+  const handleMoveUp = (index: number) => {
+    if (index > 0) {
+      const newColors = [...colors]
+      ;[newColors[index - 1], newColors[index]] = [newColors[index], newColors[index - 1]]
+      onChange(newColors)
+    }
+  }
+
+  const handleMoveDown = (index: number) => {
+    if (index < colors.length - 1) {
+      const newColors = [...colors]
+      ;[newColors[index], newColors[index + 1]] = [newColors[index + 1], newColors[index]]
+      onChange(newColors)
+    }
+  }
+
+  const handleDragStart = (index: number) => {
+    setDraggedIndex(index)
+  }
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault()
+  }
+
+  const handleDrop = (e: React.DragEvent, dropIndex: number) => {
+    e.preventDefault()
+
+    if (draggedIndex === null || draggedIndex === dropIndex) {
+      setDraggedIndex(null)
+      return
+    }
+
+    const newColors = [...colors]
+    const draggedColor = newColors[draggedIndex]
+    newColors.splice(draggedIndex, 1)
+    newColors.splice(dropIndex, 0, draggedColor)
+
+    onChange(newColors)
+    setDraggedIndex(null)
+  }
+
+  return (
+    <div className="custom-colors-editor">
+      <label className="custom-colors-label">{label}</label>
+
+      <div className="custom-colors-notice">
+        <svg className="notice-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+        </svg>
+        <span>
+          <strong>Accessibility Notice:</strong> When using custom colors, conduct a{' '}
+            Section 508 review to ensure adequate color contrast and accessibility compliance.{' '}
+        </span>
+      </div>
+
+      <div className="custom-colors-preview">
+        {colors.map((color, index) => (
+          <div
+            key={index}
+            className="preview-swatch"
+            style={{ backgroundColor: color }}
+            title={`Color ${index + 1}: ${color}`}
+          />
+        ))}
+      </div>
+
+      <div className="custom-colors-list">
+        {colors.map((color, index) => (
+          <div
+            key={index}
+            className={`custom-color-item ${draggedIndex === index ? 'dragging' : ''}`}
+            draggable
+            onDragStart={() => handleDragStart(index)}
+            onDragOver={(e) => handleDragOver(e, index)}
+            onDrop={(e) => handleDrop(e, index)}
+          >
+            <div className="color-item-controls">
+              <span className="color-item-drag-handle" title="Drag to reorder">
+                ⋮⋮
+              </span>
+              {/* <span className="color-item-number">{index + 1}.</span> */}
+
+              {/* <input
+                type="color"
+                value={color}
+                onChange={(e) => handleColorChange(index, e.target.value)}
+                className="color-picker"
+                title="Click to change color"
+                aria-label={`Color picker for color ${index + 1}`}
+              /> */}
+
+              <div className="color-input-wrapper">
+                <TextField
+                  type="text"
+                  value={color}
+                  label=""
+                  section="colors"
+                  subsection={null}
+                  fieldName={`color-${index}`}
+                  updateField={(section, subsection, fieldName, value) => {
+                    handleColorChange(index, value)
+                  }}
+                  placeholder="#000000"
+                  maxLength={15}
+                  className="color-text-input"
+                />
+              </div>
+
+              <div className="color-item-buttons">
+                <button
+                  type="button"
+                  onClick={() => handleMoveUp(index)}
+                  disabled={index === 0}
+                  className="btn-move"
+                  title="Move up"
+                  aria-label="Move color up"
+                >
+                  ↑
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => handleMoveDown(index)}
+                  disabled={index === colors.length - 1}
+                  className="btn-move"
+                  title="Move down"
+                  aria-label="Move color down"
+                >
+                  ↓
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => handleRemoveColor(index)}
+                  disabled={colors.length <= minColors}
+                  className="btn-remove"
+                  title="Remove color"
+                  aria-label="Remove color"
+                >
+                  ×
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <button
+        type="button"
+        onClick={handleAddColor}
+        disabled={colors.length >= maxColors}
+        className="btn-add-color"
+      >
+        + Add Color
+      </button>
+
+      <div className="custom-colors-info">
+        {colors.length} color{colors.length !== 1 ? 's' : ''}
+        {colors.length < minColors && ` (minimum ${minColors} required)`}
+        {colors.length >= maxColors && ` (maximum reached)`}
+      </div>
+    </div>
+  )
+}
+
+export default CustomColorsEditor

package/components/CustomColorsEditor/index.ts

@@ -0,0 +1 @@
+export { default as CustomColorsEditor } from './CustomColorsEditor'