@cdc/markup-include 4.26.2 → 4.26.4

package/src/_stories/MarkupInclude.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
 import CdcMarkupInclude from '../CdcMarkupInclude'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 import primary from './_mock/primary.json'
 import noConditions from './_mock/no-conditions.json'
 import withConditions from './_mock/with-conditions.json'
@@ -48,6 +50,63 @@ export const icon_no_text: Story = {
     isEditor: false
   }
 }
+
+export const Icon_Sizing: Story = {
+  args: {
+    config: {
+      ...primary,
+      contentEditor: {
+        ...primary.contentEditor,
+        showHeader: true,
+        title: 'SVG icon sizing',
+        useInlineHTML: true,
+        markupVariables: [
+          {
+            sourceType: 'icon',
+            name: 'link-external',
+            tag: '{{link-external}}',
+            iconId: 'link-external',
+            conditions: []
+          }
+        ],
+        inlineHTML: `
+          <p class="icon-sizing-inline">Rate <span class="icon-sizing-inline-target">{{link-external}}</span> increased</p>
+          <div
+            class="icon-sizing-parent-target"
+            data-cove-svg-size="parent-height"
+            style="height: 200px; background: #f8d7da; display: inline-flex; align-items: center;"
+          >
+            {{link-external}}
+          </div>
+        `
+      },
+      enableMarkupVariables: true
+    } as any,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    const inlineIcon = canvasElement.querySelector('.icon-sizing-inline-target .cove-inline-svg') as HTMLElement | null
+    const parentIcon = canvasElement.querySelector('.icon-sizing-parent-target .cove-inline-svg') as HTMLElement | null
+    const parentContainer = canvasElement.querySelector('.icon-sizing-parent-target') as HTMLElement | null
+
+    expect(inlineIcon).toBeTruthy()
+    expect(parentIcon).toBeTruthy()
+    expect(parentContainer).toBeTruthy()
+
+    const inlineHeight = inlineIcon!.getBoundingClientRect().height
+    const parentHeight = parentIcon!.getBoundingClientRect().height
+    const containerHeight = parentContainer!.getBoundingClientRect().height
+
+    expect(inlineHeight).toBeGreaterThan(0)
+    expect(inlineHeight).toBeLessThan(50)
+    expect(parentHeight).toBeGreaterThan(inlineHeight * 3)
+    expect(parentHeight).toBeGreaterThan(180)
+    expect(Math.abs(parentHeight - containerHeight)).toBeLessThan(2)
+  }
+}
+
 export const image_with_text: Story = {
   args: {
     config: imageWithText,
@@ -55,4 +114,26 @@ export const image_with_text: Story = {
   }
 }
 
+export const TP5_Test: Story = {
+  args: {
+    config: {
+      ...primary,
+      contentEditor: {
+        ...primary.contentEditor,
+        style: 'tp5',
+        title: 'TP5 Markup Include Test',
+        useInlineHTML: true,
+        inlineHTML:
+          '<p>This is a TP5 style markup include test story.</p><p>Clear the title in the editor to verify TP5 title hide behavior.</p>'
+      },
+      visual: {
+        ...primary.visual,
+        border: true,
+        whiteBackground: true
+      }
+    },
+    isEditor: true
+  }
+}
+
 export default meta

package/src/cdcMarkupInclude.style.css

@@ -1,39 +1,43 @@
-.cdc-open-viz-module.markup-include {
+.cove-visualization.markup-include {
   .spacing-wrapper {
     background-color: var(--lightGray) !important;
   }
+
   .cove-tooltip-variable {
     display: none;
   }
 
-  .markup-include-content-container.cove-component__content {
-    .markup-include-component.cove-component__content:not(.component--hideBackgroundColor, .component--has-background) {
+  c .markup-include-content-container.cove-visualization__inner {
+    .markup-include-component.cove-visualization__body:not(.component--hide-background-color, .component--has-background) {
       background-color: white;
     }
   }
 }
 
-.cdc-open-viz-module.markup-include.isEditor {
+.cove-visualization.markup-include.is-editor {
   .cove-tooltip-variable {
-    position: relative;
-    display: inline;
     background: var(--orange-tertiary);
+    display: inline;
+    position: relative;
+
     .cove-tooltip-value {
-      display: none;
-      position: absolute;
       background: var(--white);
       border: 1px solid black;
+      display: none;
       font-size: 16px;
+      max-width: 500px;
       padding: 10px;
+      position: absolute;
       width: 100vw;
-      max-width: 500px;
       z-index: 9999;
     }
-    &:hover > .cove-tooltip-value {
+
+    &:hover>.cove-tooltip-value {
       display: block;
     }
   }
+
   .cove-markup-include-variable-value {
     display: none !important;
   }
-}
+}

package/src/components/EditorPanel/EditorPanel.styles.css

@@ -1,4 +1,4 @@
-.cdc-open-viz-module.markup-include {
+.cove-visualization.markup-include {
   .need-data-source-prompt {
     color: var(--gray);
     font-size: 0.8rem;

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'
@@ -14,7 +15,11 @@ import Icon from '@cdc/core/components/ui/Icon'
 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 { VisualSection } from '@cdc/core/components/EditorPanel/sections/VisualSection'
+import StyleTreatmentSection from '@cdc/core/components/EditorPanel/sections/StyleTreatmentSection'
+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
@@ -25,10 +30,120 @@ type MarkupIncludeEditorPanelProps = {
 }
 
 const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
-  const { config, data, isDashboard, loading, setParentConfig, updateConfig } = useContext(ConfigContext)
-  const { contentEditor, theme, visual } = config
+  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 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'
+    updateConfig({
+      ...config,
+      visual: {
+        ...config.visual,
+        tp5Treatment: useTp5Treatment,
+        border: useTp5Treatment ? false : config.visual?.border,
+        borderColorTheme: useTp5Treatment ? false : config.visual?.borderColorTheme,
+        accent: useTp5Treatment ? false : config.visual?.accent
+      }
+    })
+  }
 
   const textAreaInEditorContainer = useRef(null)
 
@@ -58,6 +173,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'
@@ -66,16 +192,42 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
               placeholder='Markup Include Title'
               updateField={updateField}
             />
+            {!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={contentEditor.titleStyle || 'small'}
-              section='contentEditor'
-              fieldName='titleStyle'
-              label='Title Style'
+              value={config.locale}
+              fieldName='locale'
+              label='Language for dates and numbers'
               updateField={updateField}
               options={[
-                { value: 'small', label: 'Small (h3)' },
-                { value: 'large', label: 'Large (h2)' },
-                { value: 'legacy', label: 'Legacy' }
+                { value: 'en-US', label: 'English (en-US)' },
+                { value: 'es-MX', label: 'Spanish (es-MX)' }
               ]}
               tooltip={
                 <Tooltip style={{ textTransform: 'none' }}>
@@ -83,10 +235,9 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
                     <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.
+                      Change the language (locale) for this visualization to alter the way dates and numbers are
+                      formatted.
                     </p>
                   </Tooltip.Content>
                 </Tooltip>
@@ -131,8 +282,111 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
             </div>
           </Accordion.Section>
           <Accordion.Section title='Visual'>
-            <VisualSection config={config} updateField={updateField} updateConfig={updateConfig} />
+            {!isTp5Style && (
+              <HeaderThemeSelector
+                selectedTheme={config.theme}
+                onThemeSelect={theme => updateConfig({ ...config, theme })}
+              />
+            )}
+            {isTp5Style ? (
+              <CheckBox
+                value={visual?.whiteBackground}
+                section='visual'
+                fieldName='whiteBackground'
+                label='Use White Background Style'
+                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} />
@@ -141,12 +395,13 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
           <Accordion.Section title='Markup Variables'>
             <MarkupVariablesEditor
               markupVariables={config.markupVariables || []}
-              data={data || []}
+              data={markupEditorData}
               datasets={datasets}
               config={config}
               onChange={handleMarkupVariablesChange}
               enableMarkupVariables={config.enableMarkupVariables || false}
               onToggleEnable={handleToggleEnable}
+              dataMetadata={config.dataMetadata}
             />
           </Accordion.Section>
         </Accordion>

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/scss/main.scss

@@ -1,17 +1,80 @@
-.markup-include {
-  .cove-component__content-wrap {
-    padding: 0;
+@import '@cdc/core/styles/layout/wrapper-padding';
 
-    &.has-top-padding {
-      padding-top: 1rem;
-      padding-bottom: 1rem;
+.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;
+      box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+      border: 1px solid var(--colors-cyan-15, #dff2f6) !important;
+      margin: 0 !important;
+      padding: 1.25rem;
+      border-radius: 0.25rem;
+      background-color: var(--colors-cyan-10, #eff9fa);
+    }
+
+    .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;
+      }
     }
 
-    &.has-side-padding {
-      padding-left: 1rem;
-      padding-right: 1rem;
+    .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;
+
     h1,
     h2,
     h3 {
@@ -22,9 +85,16 @@
       margin-top: auto;
       margin-bottom: auto;
     }
+
+    // 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 {
+      display: inline;
+    }
   }
 
-  .cove-component__content.component--hideBackgroundColor {
+  .cove-visualization__body.component--hide-background-color {
     background: transparent;
   }
 
@@ -47,6 +117,7 @@
     float: left;
   }
 }
+
 .cove-editor .cove-editor__content {
   padding-left: 350px;
   display: flex;