@cdc/markup-include 4.26.3 → 4.26.5

package/src/components/EditorPanel/EditorPanel.tsx

@@ -1,10 +1,11 @@
-import { useContext, useRef } from 'react'
+import { useContext, useMemo, useRef } from 'react'
 
 // Context
 import ConfigContext from '../../ConfigContext'
 
 // Helpers
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
+import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
 
 // Components
 import { EditorPanel as BaseEditorPanel } from '@cdc/core/components/EditorPanel/EditorPanel'
@@ -15,7 +16,11 @@ import Tooltip from '@cdc/core/components/ui/Tooltip'
 import MarkupVariablesEditor from '@cdc/core/components/EditorPanel/components/MarkupVariablesEditor'
 import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
 import StyleTreatmentSection from '@cdc/core/components/EditorPanel/sections/StyleTreatmentSection'
+import { Tp5VisualSection } from '@cdc/core/components/EditorPanel/sections/Tp5VisualSection'
 import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
+import { DataColorSelector } from '@cdc/core/components/DataColorSelector'
+import { DATA_COLOR_PRESETS } from '@cdc/core/helpers/dataColors'
+import Button from '@cdc/core/components/elements/Button'
 import { Datasets } from '@cdc/core/types/DataSet'
 
 // styles
@@ -26,11 +31,106 @@ type MarkupIncludeEditorPanelProps = {
 }
 
 const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
-  const { config, data, isDashboard, loading, setParentConfig, updateConfig } = useContext(ConfigContext)
+  const { config, data, editorData, isDashboard, loading, setParentConfig, updateConfig } = useContext(ConfigContext)
   const { contentEditor, theme, visual } = config || {}
   const { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor || {}
+  const isTp5Style = contentEditor?.style === 'tp5'
   const updateField = updateFieldFactory(config, updateConfig, true)
-  const styleTreatment = visual?.tp5Treatment ? 'tp5' : 'legacy'
+  const styleTreatment = (visual as any)?.tp5Treatment ? 'tp5' : 'legacy'
+  const markupEditorData = Array.isArray(editorData) ? editorData : data || []
+  const columns = useDataColumns(markupEditorData)
+  const dataColorMappings = config.dataColors?.mappings || []
+
+  const dataColorValues = useMemo(() => {
+    const colorColumn = config.dataColors?.column
+    if (!colorColumn) return []
+
+    const uniqueValues = new Set<string>()
+    markupEditorData?.forEach(row => {
+      const value = row?.[colorColumn]
+      if (value !== undefined && value !== null) {
+        uniqueValues.add(String(value))
+      }
+    })
+
+    return Array.from(uniqueValues).sort()
+  }, [markupEditorData, config.dataColors?.column])
+
+  type DataColorDisplayEntry = { sourceValue: string; fromData: boolean; key: string }
+
+  const dataColorDisplayList = useMemo<DataColorDisplayEntry[]>(() => {
+    const dataSet = new Set(dataColorValues)
+    const list: DataColorDisplayEntry[] = dataColorValues.map(v => ({
+      sourceValue: v,
+      fromData: true,
+      key: `data-${v}`
+    }))
+    dataColorMappings.forEach((m, i) => {
+      if (!dataSet.has(m.sourceValue)) {
+        list.push({ sourceValue: m.sourceValue, fromData: false, key: `custom-${i}` })
+      }
+    })
+    return list
+  }, [dataColorValues, dataColorMappings])
+
+  const updateDataColorMapping = (sourceValue: string, color: string) => {
+    const nextMappings = [...dataColorMappings]
+    const existingIndex = nextMappings.findIndex(m => m.sourceValue === sourceValue)
+
+    if (!color) {
+      if (existingIndex > -1) {
+        nextMappings.splice(existingIndex, 1)
+      }
+    } else {
+      const nextMapping = { sourceValue, color }
+      if (existingIndex > -1) {
+        nextMappings[existingIndex] = nextMapping
+      } else {
+        nextMappings.push(nextMapping)
+      }
+    }
+
+    updateConfig({
+      ...config,
+      dataColors: {
+        ...config.dataColors,
+        mappings: nextMappings
+      }
+    })
+  }
+
+  const addCustomDataColorMapping = () => {
+    const nextMappings = [...dataColorMappings, { sourceValue: '', color: DATA_COLOR_PRESETS[0] }]
+    updateConfig({
+      ...config,
+      dataColors: {
+        ...config.dataColors,
+        mappings: nextMappings
+      }
+    })
+  }
+
+  const updateDataColorMappingValue = (oldValue: string, newValue: string) => {
+    const nextMappings = dataColorMappings.map(m => (m.sourceValue === oldValue ? { ...m, sourceValue: newValue } : m))
+    updateConfig({
+      ...config,
+      dataColors: {
+        ...config.dataColors,
+        mappings: nextMappings
+      }
+    })
+  }
+
+  const removeDataColorMapping = (sourceValue: string) => {
+    const nextMappings = dataColorMappings.filter(m => m.sourceValue !== sourceValue)
+    updateConfig({
+      ...config,
+      dataColors: {
+        ...config.dataColors,
+        mappings: nextMappings
+      }
+    })
+  }
 
   const handleStyleTreatmentChange = (value: string) => {
     const useTp5Treatment = value === 'tp5'
@@ -74,6 +174,17 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
       {() => (
         <Accordion>
           <Accordion.Section title='General'>
+            <Select
+              value={contentEditor?.style || 'default'}
+              section='contentEditor'
+              fieldName='style'
+              label='Style'
+              updateField={updateField}
+              options={[
+                { value: 'default', label: 'Default' },
+                { value: 'tp5', label: 'TP5' }
+              ]}
+            />
             <TextField
               value={title || ''}
               section='contentEditor'
@@ -82,32 +193,34 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
               placeholder='Markup Include Title'
               updateField={updateField}
             />
-            <Select
-              value={contentEditor?.titleStyle || 'small'}
-              section='contentEditor'
-              fieldName='titleStyle'
-              label='Title Style'
-              updateField={updateField}
-              options={[
-                { value: 'small', label: 'Small (h3)' },
-                { value: 'large', label: 'Large (h2)' },
-                { value: 'legacy', label: 'Legacy' }
-              ]}
-              tooltip={
-                <Tooltip style={{ textTransform: 'none' }}>
-                  <Tooltip.Target>
-                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                  </Tooltip.Target>
-                  <Tooltip.Content>
-                    <p>Choose the visual style for the title.</p>
-                    <p>
-                      Consider heading order on your page when selecting the title style. For 508 reasons, ensure your
-                      page follows a proper heading order.
-                    </p>
-                  </Tooltip.Content>
-                </Tooltip>
-              }
-            />
+            {!isTp5Style && (
+              <Select
+                value={contentEditor?.titleStyle || 'small'}
+                section='contentEditor'
+                fieldName='titleStyle'
+                label='Title Style'
+                updateField={updateField}
+                options={[
+                  { value: 'small', label: 'Small (h3)' },
+                  { value: 'large', label: 'Large (h2)' },
+                  { value: 'legacy', label: 'Legacy' }
+                ]}
+                tooltip={
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>Choose the visual style for the title.</p>
+                      <p>
+                        Consider heading order on your page when selecting the title style. For 508 reasons, ensure your
+                        page follows a proper heading order.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                }
+              />
+            )}
             <Select
               value={config.locale}
               fieldName='locale'
@@ -170,24 +283,105 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
             </div>
           </Accordion.Section>
           <Accordion.Section title='Visual'>
-            <HeaderThemeSelector
-              selectedTheme={config.theme}
-              onThemeSelect={theme => updateConfig({ ...config, theme })}
-            />
-            <StyleTreatmentSection
-              styleTreatment={styleTreatment}
-              onStyleTreatmentChange={handleStyleTreatmentChange}
-              showStyleTreatment={false}
-              border={config.visual?.border}
-              borderColorTheme={config.visual?.borderColorTheme}
-              accent={config.visual?.accent}
-              background={config.visual?.background}
-              hideBackgroundColor={config.visual?.hideBackgroundColor}
-              showBackground
-              showHideBackgroundColor
-              updateField={updateField}
-            />
+            {!isTp5Style && (
+              <HeaderThemeSelector
+                selectedTheme={config.theme}
+                onThemeSelect={theme => updateConfig({ ...config, theme })}
+              />
+            )}
+            {isTp5Style ? (
+              <Tp5VisualSection config={config} updateField={updateField} />
+            ) : (
+              <StyleTreatmentSection
+                styleTreatment={styleTreatment}
+                onStyleTreatmentChange={handleStyleTreatmentChange}
+                showStyleTreatment={false}
+                border={config.visual?.border}
+                borderColorTheme={config.visual?.borderColorTheme}
+                accent={config.visual?.accent}
+                background={config.visual?.background}
+                hideBackgroundColor={config.visual?.hideBackgroundColor}
+                showBackground
+                showHideBackgroundColor
+                updateField={updateField}
+              />
+            )}
           </Accordion.Section>
+          {isTp5Style && (
+            <Accordion.Section title='Data-Driven Colors'>
+              <Select
+                value={config.dataColors?.column || ''}
+                section='dataColors'
+                fieldName='column'
+                label='Color Column'
+                updateField={updateField}
+                initial='Select'
+                options={columns}
+                tooltip={
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        Choose a column whose values determine the background color of this visualization. Map each
+                        value to a color below. Text color adjusts automatically for contrast.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                }
+              />
+              {config.dataColors?.column && dataColorDisplayList.length > 0 && (
+                <div className='mt-2'>
+                  {dataColorDisplayList.map(({ sourceValue, fromData, key }) => {
+                    const selectedColor = dataColorMappings.find(m => m.sourceValue === sourceValue)?.color || ''
+
+                    return (
+                      <div className='cove-accordion__panel-row align-center mb-2' key={key}>
+                        <div className='cove-accordion__panel-col' style={{ flex: '1 1 0', minWidth: 0 }}>
+                          {fromData ? (
+                            sourceValue
+                          ) : (
+                            <input
+                              type='text'
+                              value={sourceValue}
+                              placeholder='Enter value'
+                              style={{ width: '100%' }}
+                              onChange={e => updateDataColorMappingValue(sourceValue, e.target.value)}
+                            />
+                          )}
+                        </div>
+                        <div className='cove-accordion__panel-col' style={{ flex: '0 0 4.5rem' }}>
+                          <DataColorSelector
+                            value={selectedColor}
+                            onChange={color => updateDataColorMapping(sourceValue, color)}
+                          />
+                        </div>
+                        <div className='cove-accordion__panel-col' style={{ flex: '0 0 1.5rem' }}>
+                          {!fromData && (
+                            <button
+                              type='button'
+                              className='btn btn-danger'
+                              style={{ padding: '0.15rem 0.45rem', lineHeight: 1 }}
+                              title='Remove mapping'
+                              onClick={() => removeDataColorMapping(sourceValue)}
+                            >
+                              −
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+              {config.dataColors?.column && (
+                <Button type='button' onClick={addCustomDataColorMapping} className='btn btn-primary full-width mt-3'>
+                  Add Color Mapping
+                </Button>
+              )}
+            </Accordion.Section>
+          )}
           {isDashboard && (
             <Accordion.Section title='Footnotes'>
               <FootnotesEditor config={config} updateField={updateField} datasets={datasets} />
@@ -196,7 +390,8 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
           <Accordion.Section title='Markup Variables'>
             <MarkupVariablesEditor
               markupVariables={config.markupVariables || []}
-              data={data || []}
+              data={Array.isArray(data) ? data : []}
+              editorData={markupEditorData}
               datasets={datasets}
               config={config}
               onChange={handleMarkupVariablesChange}

package/src/data/initial-state.js

@@ -2,6 +2,7 @@ export default {
   contentEditor: {
     inlineHTML: '<strong>Inline HTML</strong>',
     showHeader: true,
+    style: 'default',
     srcUrl: '#example',
     title: '',
     titleStyle: 'small',
@@ -22,7 +23,12 @@ export default {
     accent: false,
     background: false,
     hideBackgroundColor: false,
-    borderColorTheme: false
+    borderColorTheme: false,
+    whiteBackground: false
+  },
+  dataColors: {
+    column: '',
+    mappings: []
   },
   markupVariables: [],
   enableMarkupVariables: false

package/src/index.tsx

@@ -9,14 +9,17 @@ import CdcMarkupInclude from './CdcMarkupInclude'
 
 let isEditor = window.location.href.includes('editor=true')
 
-let domContainer = document.getElementsByClassName('react-container')[0]
+let domContainer = document.getElementsByClassName('react-container')[0] as HTMLElement & { coveConfig?: any }
+let configUrl = domContainer.dataset.configUrl
+let injectedConfig = domContainer.coveConfig
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
     <GlobalContextProvider>
       <CdcMarkupInclude
-        configUrl={domContainer.attributes['data-config'].value}
-        interactionLabel={domContainer.attributes['data-config'].value}
+        config={injectedConfig}
+        configUrl={injectedConfig ? undefined : configUrl}
+        interactionLabel={configUrl}
         isEditor={isEditor}
       />
     </GlobalContextProvider>

package/src/scss/main.scss

@@ -1,10 +1,72 @@
 @import '@cdc/core/styles/layout/wrapper-padding';
+@import '@cdc/core/styles/layout/callout';
 
 .cove-visualization.type-markup-include {
   .cove-visualization__body {
     @include cove-visualization-body-padding;
   }
 
+  .markup-include-component--tp5 {
+    padding: 0 !important;
+    border: none !important;
+    background: none !important;
+    container-type: inline-size;
+
+    .markup-include-tp5 {
+      gap: 0.7rem;
+    }
+
+    .cdc-callout__heading {
+      width: 100%;
+      font-size: 1.1rem;
+    }
+
+    .cdc-callout__body {
+      flex-wrap: nowrap;
+      flex: auto;
+    }
+
+    @container (max-width: 576px) {
+      .cdc-callout__body {
+        flex-wrap: wrap;
+      }
+    }
+
+    .cdc-callout__content {
+      font-size: 1rem;
+    }
+
+    .cdc-callout--data-color {
+      .cdc-callout__heading,
+      .cdc-callout__content {
+        color: inherit;
+      }
+    }
+
+    &.white-background-style {
+      .markup-include-tp5 {
+        border: 1px solid #009ec1 !important;
+        background: transparent;
+        box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+      }
+
+      .cdc-callout--data-color {
+        border: none !important;
+      }
+    }
+
+    &.white-background-style.display-border {
+      .markup-include-tp5 {
+        box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+      }
+    }
+
+    .cove-visualization__body-wrap,
+    .cove-visualization__content-section {
+      padding: 0;
+    }
+  }
+
   .cove-visualization__body-wrap {
     @include cove-visualization-body-wrap-inline-padding;
 
@@ -22,7 +84,7 @@
     // keep markup include images inlines on dashboards
     // e.g. requested to help here: https://www.cdc.gov/fluview/surveillance/2026-week-10.html
     // needed for backwards compatibility with existing dashboards, but also to prevent any future issues with images in markup include visualizations being forced to display as blocks
-    span>img {
+    span > img {
       display: inline;
     }
   }
@@ -54,4 +116,4 @@
 .cove-editor .cove-editor__content {
   padding-left: 350px;
   display: flex;
-}
+}

package/src/test/CdcMarkupInclude.test.jsx

@@ -1,6 +1,30 @@
 import path from 'node:path'
+import fs from 'node:fs'
+import vm from 'node:vm'
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
+import CdcMarkupInclude from '../CdcMarkupInclude'
+
+vi.mock('@cdc/core/components/EditorPanel/components/MarkupVariablesEditor', () => ({
+  default: ({ data, editorData }) => (
+    <div>
+      <div data-testid='markup-variables-editor-data'>{JSON.stringify(data)}</div>
+      <div data-testid='markup-variables-editor-editor-data'>{JSON.stringify(editorData)}</div>
+    </div>
+  )
+}))
+
+const extractMarkedExampleConfig = (content, label) => {
+  const match = content.match(
+    /<!-- README_EXAMPLE_CONFIG_START -->\s*```jsx\s*([\s\S]*?)\s*```\s*<!-- README_EXAMPLE_CONFIG_END -->/
+  )
+  expect(match, `${label} should contain a marked README example block`).toBeTruthy()
+  const configMatch = match[1].match(/const config = (\{[\s\S]*?\})\n\nfunction App\(\)/)
+  expect(configMatch, `${label} should define const config before function App()`).toBeTruthy()
+  return vm.runInNewContext(`(${configMatch[1]})`)
+}
 
 describe('Markup Include', () => {
   it('Can be built in isolation', async () => {
@@ -8,4 +32,151 @@ describe('Markup Include', () => {
     const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
+
+  it('uses dashboard rawData for markup variable editor choices while preserving render data when editing', async () => {
+    const filteredData = [{ category: 'Filtered only' }]
+    const fullData = [{ category: 'Value A' }, { category: 'Value B' }]
+
+    render(
+      <CdcMarkupInclude
+        config={{
+          type: 'markup-include',
+          theme: 'theme-blue',
+          dataKey: 'test-dataset',
+          data: filteredData,
+          markupVariables: [],
+          contentEditor: {
+            title: '',
+            inlineHTML: '<p>Example</p>',
+            useInlineHTML: true,
+            srcUrl: ''
+          },
+          visual: {
+            border: false,
+            accent: false,
+            background: false,
+            hideBackgroundColor: false,
+            borderColorTheme: false
+          }
+        }}
+        datasets={{
+          'test-dataset': {
+            data: [{ category: 'Dataset fallback' }]
+          }
+        }}
+        rawData={fullData}
+        isDashboard={true}
+        isEditor={true}
+      />
+    )
+
+    expect(JSON.parse((await screen.findByTestId('markup-variables-editor-data')).textContent)).toEqual(filteredData)
+    expect(JSON.parse((await screen.findByTestId('markup-variables-editor-editor-data')).textContent)).toEqual(fullData)
+  })
+
+  it('does not render the visualization filters section when every markup include filter is hidden', async () => {
+    const { container } = render(
+      <CdcMarkupInclude
+        config={{
+          type: 'markup-include',
+          theme: 'theme-blue',
+          data: [{ state: 'Alabama' }],
+          filters: [
+            {
+              columnName: 'state',
+              values: ['Alabama'],
+              showDropdown: false,
+              id: 1,
+              parents: [],
+              active: 'Alabama',
+              filterStyle: 'dropdown',
+              label: 'State',
+              order: 'asc',
+              type: 'url'
+            }
+          ],
+          markupVariables: [],
+          contentEditor: {
+            title: '',
+            inlineHTML: '<p>Example</p>',
+            useInlineHTML: true,
+            srcUrl: ''
+          },
+          visual: {
+            border: false,
+            accent: false,
+            background: false,
+            hideBackgroundColor: false,
+            borderColorTheme: false
+          }
+        }}
+        datasets={{}}
+        isDashboard={true}
+      />
+    )
+
+    await waitFor(() => expect(container.querySelector('.markup-include-content-container')).toBeInTheDocument())
+
+    expect(container.querySelector('.cove-visualization__filters-section')).not.toBeInTheDocument()
+  })
+
+  it('keeps included bootstrap column markup inside the shared content section', async () => {
+    const { container } = render(
+      <CdcMarkupInclude
+        config={{
+          type: 'markup-include',
+          theme: 'theme-blue',
+          markupVariables: [],
+          contentEditor: {
+            title: 'Grid mock',
+            inlineHTML: `
+              <div class="row">
+                <div class="col-8"><p>Primary content</p></div>
+                <div class="col-3"><p>Secondary content</p></div>
+              </div>
+            `,
+            useInlineHTML: true,
+            srcUrl: ''
+          },
+          visual: {
+            border: false,
+            accent: false,
+            background: false,
+            hideBackgroundColor: false,
+            borderColorTheme: false
+          }
+        }}
+        datasets={{}}
+        isDashboard={true}
+      />
+    )
+
+    await waitFor(() => expect(container.querySelector('.markup-include-content-container')).toBeInTheDocument())
+
+    const shell = container.querySelector('.cove-visualization.type-markup-include')
+    const contentSection = container.querySelector('.cove-visualization__content-section')
+    const primaryColumn = container.querySelector('.col-8')
+    const secondaryColumn = container.querySelector('.col-3')
+
+    expect(shell).toBeInTheDocument()
+    expect(contentSection).toBeInTheDocument()
+    expect(primaryColumn).toBeInTheDocument()
+    expect(secondaryColumn).toBeInTheDocument()
+    expect(primaryColumn?.closest('.cove-visualization__content-section')).toBe(contentSection)
+    expect(secondaryColumn?.closest('.cove-visualization__content-section')).toBe(contentSection)
+    expect(primaryColumn?.parentElement).not.toBe(shell)
+    expect(secondaryColumn?.parentElement).not.toBe(shell)
+  })
+
+  it('keeps the minimal example in sync with the README docs', () => {
+    const pkgRoot = path.join(__dirname, '..', '..')
+    const minimalExamplePath = path.join(pkgRoot, 'examples', 'minimal-example.json')
+    const readmePath = path.join(pkgRoot, 'README.md')
+
+    const minimalExample = JSON.parse(fs.readFileSync(minimalExamplePath, 'utf8'))
+    const readmeBlock = extractMarkedExampleConfig(fs.readFileSync(readmePath, 'utf8'), 'README.md')
+
+    expect(readmeBlock).toEqual(minimalExample)
+    expect(minimalExample.version).toBeTruthy()
+  })
 })