@cdc/core 4.25.11 → 4.26.1

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -6,6 +6,7 @@ import { FilterFunction, JsonEditor, UpdateFunction } from 'json-edit-react'
 import './advanced-editor-styles.css'
 import _ from 'lodash'
 import Tooltip from '../ui/Tooltip'
+import EmbedEditor from './EmbedEditor'
 
 export const AdvancedEditor = ({
   loadConfig,
@@ -115,6 +116,9 @@ export const AdvancedEditor = ({
           </React.Fragment>
         )}
       </div>
+
+      {/* Share with Partners Section */}
+      <EmbedEditor config={config} />
     </>
   )
 }

package/components/AdvancedEditor/EmbedEditor.tsx

@@ -0,0 +1,281 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { generateEmbedCode } from '../../helpers/embedCodeGenerator'
+
+type EmbedEditorProps = {
+  config?: any // Current visualization config
+}
+
+/**
+ * EmbedEditor - Provides "Share with Partners" functionality
+ * Generates embed codes for iframe embedding of visualizations
+ */
+export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
+  const [configUrl, setConfigUrl] = useState<string | null>(null)
+  const [showEmbedModal, setShowEmbedModal] = useState(false)
+  const [embedCode, setEmbedCode] = useState('')
+  const [embedCodeCopied, setEmbedCodeCopied] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  // Check if all filters have setByQueryParameter
+  const filtersAreValid = useMemo(() => {
+    if (!config) return true
+
+    // Check regular filters
+    const filters = config.filters || []
+    // Check dashboard shared filters
+    const sharedFilters = config.dashboard?.sharedFilters || []
+
+    const allFilters = [...filters, ...sharedFilters]
+
+    // If no filters, valid
+    if (allFilters.length === 0) return true
+
+    // All filters must have setByQueryParameter
+    return allFilters.every((filter: any) => !!filter.setByQueryParameter)
+  }, [config])
+
+  // Detect configUrl from WCMS permalink or use dev fallback
+  useEffect(() => {
+    // Try to get config URL from WCMS permalink element
+    const permalinkElement = document.querySelector('#sample-permalink') as HTMLAnchorElement
+
+    if (permalinkElement?.href) {
+      try {
+        // Parse the URL and extract just the pathname (strip host)
+        const url = new URL(permalinkElement.href)
+        const pathname = url.pathname
+        setConfigUrl(pathname)
+      } catch (err) {
+        console.warn('[EmbedEditor] Failed to parse permalink URL:', err)
+      }
+    } else {
+      // Check if we're in development mode
+      const isDevelopment =
+        process.env.NODE_ENV === 'development' ||
+        window.location.hostname === 'localhost' ||
+        window.location.hostname === '127.0.0.1'
+
+      if (isDevelopment) {
+        // Use fallback only in development
+        const fallbackUrl = '/examples/line-chart-states.json'
+        setConfigUrl(fallbackUrl)
+      } else {
+        // In production without permalink, don't show embed section
+        console.warn('[EmbedEditor] No permalink found and not in development mode')
+        setConfigUrl(null)
+      }
+    }
+  }, [])
+
+  // Handle showing embed code modal
+  const handleShowEmbedCode = () => {
+    if (!configUrl) {
+      alert('This visualization must be published before generating embed code.')
+      return
+    }
+
+    const code = generateEmbedCode({ configUrl })
+    setEmbedCode(code)
+    setShowEmbedModal(true)
+    setEmbedCodeCopied(false)
+  }
+
+  // Handle copying embed code from modal
+  const handleCopyFromModal = async () => {
+    try {
+      await navigator.clipboard.writeText(embedCode)
+      setEmbedCodeCopied(true)
+      setTimeout(() => setEmbedCodeCopied(false), 3000)
+    } catch (err) {
+      console.error('Failed to copy embed code:', err)
+      alert('Failed to copy to clipboard. Please copy manually.')
+    }
+  }
+
+  // Handle closing modal
+  const handleCloseModal = () => {
+    setShowEmbedModal(false)
+    setEmbedCodeCopied(false)
+  }
+
+  // Hide embed section until released
+  return null
+
+  return (
+    <>
+      {/* Collapsible Share with Partners Section */}
+      <div className='share-partners' style={{ padding: '0 1em 1em', textAlign: 'left' }}>
+        <span
+          className='advanced-toggle-link'
+          onClick={() => setIsExpanded(!isExpanded)}
+          style={{ paddingTop: '1em', display: 'block', cursor: 'pointer', textDecoration: 'underline' }}
+        >
+          <span
+            style={{ textDecoration: 'none', display: 'inline-block', fontFamily: 'monospace', paddingRight: '5px' }}
+          >
+            {isExpanded ? `— ` : `+ `}
+          </span>
+          Share with Partners
+        </span>
+
+        {isExpanded && (
+          <div style={{ paddingTop: '1em' }}>
+            {!configUrl ? (
+              <div
+                style={{
+                  padding: '0.75em',
+                  background: '#fff3cd',
+                  border: '1px solid #ffc107',
+                  borderRadius: '4px',
+                  marginBottom: '0.5em'
+                }}
+              >
+                <p style={{ fontSize: '0.85em', margin: 0, color: '#856404' }}>
+                  ⚠️ An embed code cannot be generated until this visualization has been saved.
+                </p>
+              </div>
+            ) : !filtersAreValid ? (
+              <div
+                style={{
+                  padding: '0.75em',
+                  background: '#fff3cd',
+                  border: '1px solid #ffc107',
+                  borderRadius: '4px',
+                  marginBottom: '0.5em'
+                }}
+              >
+                <p style={{ fontSize: '0.85em', margin: '0 0 0.5em 0', fontWeight: 'bold', color: '#856404' }}>
+                  ⚠️ Embed Code Not Available
+                </p>
+                <p style={{ fontSize: '0.85em', margin: 0, color: '#856404' }}>
+                  To enable embedding, all filters must have the "Query String Parameter" field set. Some filters are
+                  missing this field. After setting the field, make sure to save your visualization.
+                </p>
+              </div>
+            ) : (
+              <>
+                <p style={{ fontSize: '0.85em', marginBottom: '1em', color: '#666' }}>
+                  Generate embed codes for partners to add this visualization to their websites. Your visualization will
+                  need to be published to Link (www.cdc.gov) before it can be embedded by a partner.
+                </p>
+
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5em' }}>
+                  <button
+                    className='btn btn-primary'
+                    onClick={handleShowEmbedCode}
+                    style={{ width: '100%', textAlign: 'left' }}
+                  >
+                    Get Embed Code
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Embed Code Modal */}
+      {showEmbedModal && (
+        <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
+          }}
+          onClick={handleCloseModal}
+        >
+          <div
+            className='modal-content'
+            style={{
+              backgroundColor: 'white',
+              borderRadius: '8px',
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+              maxWidth: '600px',
+              width: '90%',
+              margin: '20px'
+            }}
+            onClick={e => e.stopPropagation()}
+          >
+            <div
+              className='modal-header'
+              style={{
+                padding: '15px 20px',
+                borderBottom: '1px solid #e0e0e0',
+                backgroundColor: '#005eaa',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                borderRadius: '8px 8px 0 0'
+              }}
+            >
+              <h3 style={{ color: 'white', margin: 0 }}>Embed Code</h3>
+              <button
+                onClick={handleCloseModal}
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  color: 'white',
+                  fontSize: '1.5em',
+                  cursor: 'pointer',
+                  padding: '0 5px',
+                  lineHeight: 1
+                }}
+                aria-label='Close'
+              >
+                ×
+              </button>
+            </div>
+
+            <div className='modal-body' style={{ padding: '20px' }}>
+              <p style={{ marginBottom: '10px', color: '#666' }}>Copy this code and paste it into your website:</p>
+              <textarea
+                readOnly
+                value={embedCode}
+                style={{
+                  width: '100%',
+                  height: '180px',
+                  fontFamily: 'monospace',
+                  fontSize: '0.85em',
+                  padding: '10px',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  resize: 'vertical',
+                  boxSizing: 'border-box'
+                }}
+                onFocus={e => e.target.select()}
+              />
+            </div>
+
+            <div
+              className='modal-footer'
+              style={{
+                padding: '15px 20px',
+                borderTop: '1px solid #e0e0e0',
+                display: 'flex',
+                justifyContent: 'flex-end',
+                gap: '10px'
+              }}
+            >
+              <button className='btn btn-secondary' onClick={handleCloseModal}>
+                Close
+              </button>
+              <button className='btn btn-primary' onClick={handleCopyFromModal} style={{ minWidth: '120px' }}>
+                {embedCodeCopied ? '✓ Copied!' : 'Copy to Clipboard'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default EmbedEditor

package/components/ComboBox/ComboBox.tsx

@@ -0,0 +1,345 @@
+import React, { useEffect, useRef, useState, useId } from 'react'
+import './combobox.styles.css'
+import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+import MagnifyingGlassIcon from '../../assets/icon-magnifying-glass.svg'
+
+interface Option {
+  value: string | number
+  label: string
+}
+
+interface ComboBoxProps {
+  section?: string
+  subsection?: string
+  fieldName: string | number
+  options: Option[]
+  updateField: UpdateFieldFunc<string>
+  label?: string
+  selected?: string | number
+  placeholder?: string
+  loading?: boolean
+}
+
+const ComboBox: React.FC<ComboBoxProps> = ({
+  section = null,
+  subsection = null,
+  fieldName,
+  options,
+  updateField,
+  label,
+  selected = '',
+  placeholder = '- Select -',
+  loading = false
+}) => {
+  const [query, setQuery] = useState('')
+  const [focused, setFocused] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
+
+  const isDisabled = loading || !options?.length
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listboxRef = useRef<HTMLUListElement>(null)
+  const comboboxId = useId()
+
+  // Get selected option
+  const selectedOption = options.find(opt => opt.value === selected)
+
+  // Token-based filtering: all tokens must match (AND logic)
+  const filteredOptions = query
+    ? options.filter(opt => {
+        const tokens = query
+          .toLowerCase()
+          .split(/\s+/)
+          .filter(t => t.length > 0)
+        const label = opt.label.toLowerCase()
+        return tokens.every(token => label.includes(token))
+      })
+    : options
+
+  // Highlight matched tokens in option labels
+  const highlightMatches = (label: string, query: string): React.ReactNode => {
+    if (!query) return label
+
+    const tokens = query
+      .toLowerCase()
+      .split(/\s+/)
+      .filter(t => t.length > 0)
+    if (tokens.length === 0) return label
+
+    // Find all match positions for all tokens
+    const matches: { start: number; end: number }[] = []
+    tokens.forEach(token => {
+      let pos = 0
+      const lowerLabel = label.toLowerCase()
+      while ((pos = lowerLabel.indexOf(token, pos)) !== -1) {
+        matches.push({ start: pos, end: pos + token.length })
+        pos += token.length
+      }
+    })
+
+    // Sort and merge overlapping matches
+    matches.sort((a, b) => a.start - b.start)
+    const merged: { start: number; end: number }[] = []
+    matches.forEach(match => {
+      if (merged.length === 0 || match.start > merged[merged.length - 1].end) {
+        merged.push(match)
+      } else {
+        merged[merged.length - 1].end = Math.max(merged[merged.length - 1].end, match.end)
+      }
+    })
+
+    // Build the highlighted result
+    const parts: React.ReactNode[] = []
+    let lastIndex = 0
+    merged.forEach((match, i) => {
+      if (match.start > lastIndex) {
+        parts.push(label.substring(lastIndex, match.start))
+      }
+      parts.push(
+        <span className='cove-combobox-option-highlight' key={i}>
+          {label.substring(match.start, match.end)}
+        </span>
+      )
+      lastIndex = match.end
+    })
+    if (lastIndex < label.length) {
+      parts.push(label.substring(lastIndex))
+    }
+
+    return <>{parts}</>
+  }
+
+  const noResults = focused && query.length > 0 && !filteredOptions.length
+  const isListOpen = focused && !isDisabled
+
+  const listboxId = `${comboboxId}-listbox`
+  const labelId = label ? `${comboboxId}-label` : undefined
+
+  // Handle option selection
+  const handleSelect = (option: Option) => {
+    updateField(section, subsection, fieldName, String(option.value))
+    setQuery('')
+    setFocused(false)
+    setActiveIndex(-1)
+    inputRef.current?.blur()
+  }
+
+  // Handle input change (typing)
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setQuery(value)
+    setActiveIndex(-1)
+  }
+
+  // Handle keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (isDisabled) return
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault()
+        if (!focused) {
+          setFocused(true)
+          setActiveIndex(0)
+        } else {
+          setActiveIndex(prev => (prev < filteredOptions.length - 1 ? prev + 1 : 0))
+        }
+        break
+
+      case 'ArrowUp':
+        e.preventDefault()
+        if (focused) {
+          setActiveIndex(prev => (prev > 0 ? prev - 1 : filteredOptions.length - 1))
+        }
+        break
+
+      case 'Home':
+        if (focused && filteredOptions.length > 0) {
+          e.preventDefault()
+          setActiveIndex(0)
+        }
+        break
+
+      case 'End':
+        if (focused && filteredOptions.length > 0) {
+          e.preventDefault()
+          setActiveIndex(filteredOptions.length - 1)
+        }
+        break
+
+      case 'Enter':
+        e.preventDefault()
+        if (focused && activeIndex >= 0 && filteredOptions[activeIndex]) {
+          handleSelect(filteredOptions[activeIndex])
+        } else if (!focused) {
+          setFocused(true)
+        }
+        break
+
+      case 'Escape':
+        e.preventDefault()
+        setQuery('')
+        setFocused(false)
+        setActiveIndex(-1)
+        inputRef.current?.blur()
+        break
+
+      case 'Tab':
+        setQuery('')
+        setFocused(false)
+        setActiveIndex(-1)
+        break
+
+      default:
+        // Any other key opens the dropdown
+        if (!focused && e.key.length === 1) {
+          setFocused(true)
+        }
+        break
+    }
+  }
+
+  // Handle input focus
+  const handleFocus = () => {
+    if (isDisabled) return
+    inputRef.current?.select()
+    setFocused(true)
+  }
+
+  // Handle input blur
+  const handleBlur = (e: React.FocusEvent) => {
+    const relatedTarget = e.relatedTarget as Node
+    const clickedInListbox = listboxRef.current && listboxRef.current.contains(relatedTarget)
+
+    if (!clickedInListbox) {
+      setQuery('')
+      setFocused(false)
+      setActiveIndex(-1)
+    }
+  }
+
+  // Handle button toggle
+  const handleButtonClick = (e: React.MouseEvent) => {
+    if (isDisabled) return
+
+    e.preventDefault()
+    if (focused) {
+      inputRef.current?.blur()
+      setFocused(false)
+    } else {
+      inputRef.current?.focus()
+      setFocused(true)
+    }
+  }
+
+  // Handle click outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (
+        inputRef.current &&
+        !inputRef.current.contains(target) &&
+        listboxRef.current &&
+        !listboxRef.current.contains(target)
+      ) {
+        setQuery('')
+        setFocused(false)
+        setActiveIndex(-1)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const activeDescendantId = activeIndex >= 0 ? `${comboboxId}-option-${activeIndex}` : undefined
+  const displayValue = isDisabled ? '' : focused ? query : selectedOption?.label || ''
+  const displayPlaceholder = isDisabled ? (loading ? 'Loading...' : '- Select -') : selectedOption?.label || placeholder
+
+  return (
+    <div className='cove-combobox'>
+      {/* SR-only instructions */}
+      <span className='sr-only'>Use ↑ or ↓ to navigate options, Enter to select, Escape to close</span>
+
+      <div className='cove-combobox-wrapper'>
+        <input
+          ref={inputRef}
+          id={`${comboboxId}-input`}
+          type='text'
+          role='combobox'
+          aria-autocomplete='list'
+          aria-expanded={isListOpen}
+          aria-controls={isListOpen ? listboxId : undefined}
+          aria-activedescendant={activeDescendantId}
+          aria-labelledby={labelId}
+          aria-label={label ? undefined : 'Filter selection'}
+          aria-disabled={isDisabled}
+          autoComplete='off'
+          className='cove-combobox-input'
+          value={displayValue}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          placeholder={displayPlaceholder}
+          disabled={isDisabled}
+        />
+
+        <button
+          type='button'
+          tabIndex={-1}
+          aria-label={isListOpen ? 'Close dropdown' : 'Open dropdown'}
+          aria-controls={listboxId}
+          aria-expanded={isListOpen}
+          className='cove-combobox-button'
+          onMouseDown={handleButtonClick}
+          disabled={isDisabled}
+        >
+          <MagnifyingGlassIcon aria-hidden='true' />
+        </button>
+      </div>
+
+      {isListOpen && (
+        <ul
+          ref={listboxRef}
+          id={listboxId}
+          role='listbox'
+          aria-labelledby={labelId}
+          aria-label={label ? undefined : 'Filter options'}
+          className='cove-combobox-listbox'
+          tabIndex={-1}
+        >
+          {noResults ? (
+            <li className='cove-combobox-option no-results' aria-disabled='true'>
+              There are no items matching this search.
+            </li>
+          ) : (
+            filteredOptions.map((option, index) => {
+              const isSelected = option.value === selected
+              const isActive = index === activeIndex
+
+              return (
+                <li
+                  key={option.value}
+                  id={`${comboboxId}-option-${index}`}
+                  role='option'
+                  aria-selected={isSelected}
+                  className={`cove-combobox-option${isSelected ? ' selected' : ''}${isActive ? ' active' : ''}`}
+                  onMouseDown={e => {
+                    e.preventDefault()
+                    handleSelect(option)
+                  }}
+                  onMouseEnter={() => setActiveIndex(index)}
+                >
+                  {highlightMatches(option.label, query)}
+                </li>
+              )
+            })
+          )}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default ComboBox