@cdc/markup-include 4.26.3 → 4.26.4

package/examples/minimal-example.json

@@ -0,0 +1,11 @@
+{
+  "type": "markup-include",
+  "version": "4.26.4",
+  "theme": "theme-blue",
+  "contentEditor": {
+    "inlineHTML": "<p>Markup include minimum example.</p>",
+    "srcUrl": "",
+    "title": "Markup Include",
+    "useInlineHTML": true
+  }
+}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.26.3",
+  "version": "4.26.4",
   "description": "React component for displaying HTML content from an outside link",
   "license": "Apache-2.0",
   "author": "Rob Shelnutt <rob@blackairplane.com>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.3",
+    "@cdc/core": "^4.26.4",
     "axios": "^1.13.2",
-    "dompurify": "^3.3.1",
+    "dompurify": "^3.4.0",
     "lodash": "^4.17.23",
     "react-accessible-accordion": "^5.0.1"
   },
@@ -19,7 +19,7 @@
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
+  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "main": "dist/cdcmarkupinclude",
   "moduleName": "CdcMarkupInclude",

package/src/CdcMarkupInclude.tsx

@@ -2,12 +2,14 @@ import { useEffect, useCallback, useRef, useReducer, useMemo } from 'react'
 // external
 import DOMPurify from 'dompurify'
 import axios from 'axios'
+import parse from 'html-react-parser'
 
 // cdc
 import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
 import { publish } from '@cdc/core/helpers/events'
 import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
+import { resolveDataColor } from '@cdc/core/helpers/dataColors'
 import ConfigContext from './ConfigContext'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
@@ -30,6 +32,7 @@ type CdcMarkupIncludeProps = {
   datasets: Datasets
   isDashboard: boolean
   isEditor: boolean
+  rawData?: any[]
   setConfig: any
   interactionLabel?: string
 }
@@ -45,6 +48,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   datasets,
   isDashboard = true,
   isEditor = false,
+  rawData,
   setConfig: setParentConfig,
   interactionLabel = 'no link provided'
 }) => {
@@ -64,7 +68,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   // Custom States
   const container = useRef()
 
-  const { innerContainerClasses, contentClasses } = useDataVizClasses(config || {})
+  const { innerContainerClasses, contentClasses: rawContentClasses } = useDataVizClasses(config || {})
   const { contentEditor, theme, visual } = config || {}
   const {
     showNoDataMessage,
@@ -76,9 +80,45 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
 
   // Support markupVariables at root level or inside contentEditor
   const markupVariables = config?.markupVariables || contentEditorMarkupVariables || []
+  const editorData = useMemo(() => {
+    if (isDashboard && isEditor && Array.isArray(rawData) && rawData.length) {
+      return rawData
+    }
+
+    const assignedDatasetData = config?.dataKey ? datasets?.[config.dataKey]?.data : undefined
+    if (Array.isArray(assignedDatasetData) && assignedDatasetData.length) {
+      return assignedDatasetData
+    }
+
+    return data || []
+  }, [config?.dataKey, data, datasets, isDashboard, isEditor, rawData])
 
-  const { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor || {}
+  const { inlineHTML, srcUrl, title, useInlineHTML, style: contentStyle } = contentEditor || {}
+  const markupIncludeStyle = contentStyle || 'default'
+  const isTp5Style = markupIncludeStyle === 'tp5'
 
+  const dataColorResolution = useMemo(() => {
+    const dataArr = Array.isArray(data) ? data : []
+    return resolveDataColor({
+      data: dataArr,
+      dataColors: config?.dataColors
+    })
+  }, [data, config?.dataColors])
+
+  const contentClasses = isTp5Style
+    ? rawContentClasses.filter(
+        cls =>
+          cls !== 'component--has-accent' &&
+          cls !== 'component--has-background' &&
+          cls !== 'component--hide-background-color' &&
+          cls !== 'component--has-border-color-theme'
+      )
+    : rawContentClasses
+
+  const shouldApplyTopPadding =
+    !isTp5Style &&
+    (visual?.border || visual?.background || (contentEditor?.title && contentEditor?.titleStyle === 'legacy'))
+  const shouldApplySidePadding = !isTp5Style && (visual?.border || visual?.accent || visual?.background)
   // Default Functions
   const updateConfig = newConfig => {
     Object.keys(defaults).forEach(key => {
@@ -265,12 +305,47 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   const hideMarkupInclude = processedMarkup.shouldHideSection
   const _showNoDataMessage = processedMarkup.shouldShowNoDataMessage
 
+  const processedTitle = useMemo(() => {
+    if (!config?.enableMarkupVariables || !markupVariables?.length || !title) return title
+    return processMarkupVariables(title, data || [], markupVariables, {
+      isEditor,
+      showNoDataMessage,
+      allowHideSection,
+      filters: config?.filters || [],
+      datasets,
+      configDataKey: config?.dataKey,
+      locale: config?.locale,
+      dataMetadata: config?.dataMetadata
+    }).processedContent
+  }, [
+    title,
+    data,
+    markupVariables,
+    config?.enableMarkupVariables,
+    config?.filters,
+    config?.dataKey,
+    config?.locale,
+    config?.dataMetadata,
+    isEditor,
+    showNoDataMessage,
+    allowHideSection,
+    datasets
+  ])
+
   if (loading === false) {
+    const hasTp5Title = processedTitle && processedTitle.trim()
     content = !hideMarkupInclude && (
       <VisualizationContent
         innerClassName={`markup-include-content-container ${innerContainerClasses.join(' ')}`.trim()}
-        bodyClassName={`markup-include-component ${contentClasses.join(' ')}`.trim()}
-        message={
+        bodyClassName={`markup-include-component ${contentClasses.join(' ')}${
+          isTp5Style ? ' markup-include-component--tp5' : ''
+        }${isTp5Style && visual?.whiteBackground ? ' white-background-style' : ''}${
+          isTp5Style && visual?.whiteBackground && visual?.border ? ' display-border' : ''
+        }`.trim()}
+        bodyWrapClassName={`${isTp5Style ? 'markup-include-body-wrap--tp5' : ''}${
+          shouldApplyTopPadding ? ' has-top-padding' : ''
+        }${shouldApplySidePadding ? ' has-side-padding' : ''}`.trim()}
+        filters={
           config.filters && config.filters.length > 0 ? (
             <Filters
               config={config}
@@ -282,38 +357,78 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
           ) : null
         }
         header={
-          <Title
-            title={title}
-            isDashboard={isDashboard}
-            titleStyle={contentEditor?.titleStyle}
-            config={config}
-            classes={[`${theme}`, 'mb-0']}
-            noContent={!sanitizedHTML}
-          />
+          !isTp5Style ? (
+            <Title
+              title={processedTitle}
+              isDashboard={isDashboard}
+              titleStyle={contentEditor?.titleStyle}
+              config={config}
+              classes={[`${theme}`, 'mb-0']}
+              noContent={!sanitizedHTML}
+            />
+          ) : null
         }
         footer={
           <FootnotesStandAlone
-            config={configObj?.footnotes}
+            config={config?.footnotes}
             filters={config?.filters || []}
             markupVariables={markupVariables}
             enableMarkupVariables={config?.enableMarkupVariables}
             data={data}
             dataMetadata={config?.dataMetadata}
+            footerClassName={isTp5Style ? 'mt-3' : undefined}
           />
         }
       >
-        {_showNoDataMessage && (
-          <div className='no-data-message'>
-            <p>{`${noDataMessageText}`}</p>
-          </div>
-        )}
-        {!markupError && !_showNoDataMessage && (
-          <div id={scopeId}>
-            {scopedCSS && <style>{scopedCSS}</style>}
-            <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+        {isTp5Style ? (
+          <div
+            className={`markup-include-tp5 cdc-callout d-flex flex-column h-100 ${
+              dataColorResolution.state === 'resolved' ? 'cdc-callout--data-color' : ''
+            }`}
+            style={
+              dataColorResolution.state === 'resolved'
+                ? { backgroundColor: dataColorResolution.color, color: dataColorResolution.textColor }
+                : undefined
+            }
+          >
+            {hasTp5Title && (
+              <h3 className='cdc-callout__heading cove-prose fw-bold flex-shrink-0 d-flex align-items-start'>
+                <span>{parse(processedTitle.trim())}</span>
+              </h3>
+            )}
+            <div className='cdc-callout__body d-flex flex-row align-content-start flex-grow-1'>
+              <div className='cdc-callout__content flex-grow-1 d-flex flex-column min-w-0'>
+                {_showNoDataMessage && (
+                  <div className='no-data-message'>
+                    <p>{`${noDataMessageText}`}</p>
+                  </div>
+                )}
+                {!markupError && !_showNoDataMessage && (
+                  <div id={scopeId}>
+                    {scopedCSS && <style>{scopedCSS}</style>}
+                    <div className='cove-prose' dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+                  </div>
+                )}
+                {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
+              </div>
+            </div>
           </div>
+        ) : (
+          <>
+            {_showNoDataMessage && (
+              <div className='no-data-message'>
+                <p>{`${noDataMessageText}`}</p>
+              </div>
+            )}
+            {!markupError && !_showNoDataMessage && (
+              <div id={scopeId}>
+                {scopedCSS && <style>{scopedCSS}</style>}
+                <div className='cove-prose' dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+              </div>
+            )}
+            {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
+          </>
         )}
-        {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
       </VisualizationContent>
     )
   }
@@ -331,9 +446,15 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
 
   return (
     <ErrorBoundary component='CdcMarkupInclude'>
-      <ConfigContext.Provider value={{ config, updateConfig, loading, data: data, setParentConfig, isDashboard }}>
+      <ConfigContext.Provider
+        value={{ config, updateConfig, loading, data: data, editorData, setParentConfig, isDashboard }}
+      >
         {!config?.newViz && config?.runtime && config?.runtime.editorErrorMessage && <Error />}
-        <VisualizationContainer config={config} isEditor={isEditor} editorPanel={<EditorPanel datasets={datasets} />}>
+        <VisualizationContainer
+          config={config as any}
+          isEditor={isEditor}
+          editorPanel={<EditorPanel datasets={datasets} />}
+        >
           {content}
         </VisualizationContainer>
       </ConfigContext.Provider>

package/src/ConfigContext.ts

@@ -4,6 +4,7 @@ import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
 type ConfigCTX = {
   config: MarkupIncludeConfig
   data: Object[]
+  editorData?: Object[]
   isDashboard: boolean
   loading: boolean
   setParentConfig: Function

package/src/_stories/MarkupInclude.Editor.stories.tsx

@@ -75,8 +75,10 @@ const testConfig = {
   contentEditor: {
     inlineHTML: '<h2>Test Markup Include</h2><p>{{test_variable}}</p>',
     showHeader: true,
+    style: 'default',
     srcUrl: '',
     title: 'Test Markup Include Title',
+    titleStyle: 'small',
     useInlineHTML: true,
     showNoDataMessage: false,
     noDataMessageText: 'No data available'
@@ -89,7 +91,6 @@ const testConfig = {
   legend: {},
   newViz: true,
   theme: 'theme-blue',
-  titleStyle: 'small',
   showTitle: true,
   type: 'markup-include',
   visual: {
@@ -154,6 +155,50 @@ export const GeneralSectionTests: Story = {
     const headerElement = modernHeader || legacyHeader
     expect(headerElement).toBeTruthy()
     expect(headerElement!.textContent?.trim()).toBe('Updated Markup Include Title E2E')
+
+    // ============================================================================
+    // TEST 2: Switch to TP5 Style
+    // Expectation: TP5 container appears and legacy title wrapper is removed
+    // ============================================================================
+    const styleSelect = canvasElement.querySelector('select[name="style"]') as HTMLSelectElement
+    expect(styleSelect).toBeTruthy()
+
+    await performAndAssert(
+      'Style Change to TP5',
+      () => ({
+        styleValue: styleSelect.value,
+        hasTp5Container: !!canvasElement.querySelector('.markup-include-component--tp5')
+      }),
+      async () => {
+        await userEvent.selectOptions(styleSelect, 'tp5')
+      },
+      (before, after) =>
+        before.styleValue !== after.styleValue &&
+        after.styleValue === 'tp5' &&
+        before.hasTp5Container !== after.hasTp5Container
+    )
+
+    // ============================================================================
+    // TEST 3: TP5 title visibility
+    // Expectation: TP5 heading hidden when title is empty, shown when title has value
+    // ============================================================================
+    await performAndAssert(
+      'TP5 Title Hidden When Empty',
+      () => !!canvasElement.querySelector('.markup-include-tp5 .cdc-callout__heading span'),
+      async () => {
+        await userEvent.clear(titleInput)
+      },
+      (before, after) => before !== after && after === false
+    )
+
+    await performAndAssert(
+      'TP5 Title Shows With Text',
+      () => canvasElement.querySelector('.markup-include-tp5 .cdc-callout__heading span')?.textContent?.trim() || '',
+      async () => {
+        await userEvent.type(titleInput, 'TP5 Title Test')
+      },
+      (before, after) => before !== after && after === 'TP5 Title Test'
+    )
   }
 }
 

package/src/_stories/MarkupInclude.smoke.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import CdcMarkupInclude from '../CdcMarkupInclude'
+import MinimalExampleConfig from '../../examples/minimal-example.json'
+
+const meta: Meta<typeof CdcMarkupInclude> = {
+  title: 'Components/Pages/Markup Include',
+  component: CdcMarkupInclude
+}
+
+export default meta
+type Story = StoryObj<typeof CdcMarkupInclude>
+
+export const Markup_Include_Minimal_Config: Story = {
+  args: {
+    config: MinimalExampleConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Minimum working consumer config. This story validates the source-of-truth minimal example used by the package README and CONFIG reference.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expect(canvasElement.textContent).toContain('Markup Include')
+    expect(canvasElement.textContent).toContain('Markup include minimum example.')
+  }
+}

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