@cdc/markup-include 4.26.2 → 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.2",
+  "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.2",
+    "@cdc/core": "^4.26.4",
     "axios": "^1.13.2",
-    "interweave": "^13.1.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": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "main": "dist/cdcmarkupinclude",
   "moduleName": "CdcMarkupInclude",

package/src/CdcMarkupInclude.tsx

@@ -1,16 +1,18 @@
 import { useEffect, useCallback, useRef, useReducer, useMemo } from 'react'
-import _ from 'lodash'
 // external
-import { Markup } from 'interweave'
+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'
 import EditorPanel from '../src/components/EditorPanel'
 import defaults from './data/initial-state'
 
@@ -19,7 +21,7 @@ import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import markupIncludeReducer from './store/markupInclude.reducer'
-import Layout from '@cdc/core/components/Layout'
+import { VisualizationContainer, VisualizationContent } from '@cdc/core/components/Layout'
 // styles
 import './cdcMarkupInclude.style.css'
 import './scss/main.scss'
@@ -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,13 +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 { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor || {}
+    const assignedDatasetData = config?.dataKey ? datasets?.[config.dataKey]?.data : undefined
+    if (Array.isArray(assignedDatasetData) && assignedDatasetData.length) {
+      return assignedDatasetData
+    }
 
-  const shouldApplyTopPadding =
-    visual?.border || visual?.background || (contentEditor?.title && contentEditor?.titleStyle === 'legacy')
-  const shouldApplySidePadding = visual?.border || visual?.accent || visual?.background
+    return data || []
+  }, [config?.dataKey, data, datasets, isDashboard, isEditor, rawData])
+
+  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 => {
@@ -112,8 +148,9 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
     let responseData = response.data ?? {}
 
     if (response.dataUrl) {
-      const dataString = await fetch(response.dataUrl)
-      responseData = await dataString.json()
+      const { data, dataMetadata } = await fetchRemoteData(response.dataUrl)
+      responseData = data
+      response.dataMetadata = dataMetadata
     }
 
     response.data = responseData
@@ -203,63 +240,29 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   }
 
   /**
-   * Transforms HTML by extracting <style> tags and applying their CSS rules as inline styles.
-   * This ensures that the CSS is applied only to this COVE visualization.
+   * Extracts <style> tags from HTML and scopes them using CSS nesting under the given scope ID.
    */
-  const applyStyleTagsAsInlineStyles = (html: string): string => {
-    if (!html || typeof html !== 'string') return html
+  const extractAndScopeStyles = (html: string, scopeId: string): { scopedCSS: string; cleanHTML: string } => {
+    if (!html || typeof html !== 'string') return { scopedCSS: '', cleanHTML: html }
 
-    // Use DOMParser to parse HTML
     const parser = new DOMParser()
     const doc = parser.parseFromString(html, 'text/html')
 
-    // Extract all <style> elements
     const styleElements = doc.querySelectorAll('style')
-    if (styleElements.length === 0) return html
-
-    // Parse CSS rules
-    const sheet = new CSSStyleSheet()
-    const cssRules: Array<{ selector: string; styles: string }> = []
+    if (styleElements.length === 0) return { scopedCSS: '', cleanHTML: html }
 
+    const cssFragments: string[] = []
     styleElements.forEach(styleEl => {
-      try {
-        // replaceSync parses the CSS and throws if invalid
-        sheet.replaceSync(styleEl.textContent || '')
-
-        // Extract parsed rules from the stylesheet
-        for (let i = 0; i < sheet.cssRules.length; i++) {
-          const rule = sheet.cssRules[i]
-          if (rule instanceof CSSStyleRule) {
-            cssRules.push({
-              selector: rule.selectorText,
-              styles: rule.style.cssText
-            })
-          }
-        }
-      } catch (e) {
-        console.warn('Markup Include: Invalid CSS in style tag', e)
+      const text = styleEl.textContent?.trim()
+      if (text) {
+        cssFragments.push(text)
       }
-
       styleEl.remove()
     })
 
-    // Apply each CSS rule to matching elements
-    for (const rule of cssRules) {
-      try {
-        const elements = doc.body.querySelectorAll(rule.selector)
-
-        elements.forEach(el => {
-          const existingStyle = el.getAttribute('style') || ''
-          const newStyle = existingStyle ? `${existingStyle}; ${rule.styles}` : rule.styles
-          el.setAttribute('style', newStyle)
-        })
-      } catch (e) {
-        // Skip invalid selectors (e.g., pseudo-selectors like :hover won't match)
-        console.warn(`Markup Include: Could not apply CSS rule for selector "${rule.selector}"`, e)
-      }
-    }
+    const scopedCSS = cssFragments.length > 0 ? `#${scopeId} {\n${cssFragments.join('\n')}\n}` : ''
 
-    return doc.body.innerHTML
+    return { scopedCSS, cleanHTML: doc.body.innerHTML }
   }
 
   //Load initial config
@@ -289,69 +292,144 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
         allowHideSection,
         filters: config?.filters || [],
         datasets,
-        configDataKey: config?.dataKey
+        configDataKey: config?.dataKey,
+        locale: config?.locale,
+        dataMetadata: config?.dataMetadata
       })
     : { processedContent: parseBodyMarkup(urlMarkup), shouldHideSection: false, shouldShowNoDataMessage: false }
 
-  const markup = applyStyleTagsAsInlineStyles(processedMarkup.processedContent)
+  const scopeId = `cove-mi-${config?.runtime?.uniqueId || 'default'}`
+  const { scopedCSS, cleanHTML } = extractAndScopeStyles(processedMarkup.processedContent, scopeId)
+  const sanitizedHTML = cleanHTML ? DOMPurify.sanitize(cleanHTML) : ''
 
   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) {
-    content = (
-      <>
-        {isEditor && <EditorPanel datasets={datasets} />}
-
-        {!hideMarkupInclude && (
-          <Layout.Responsive isEditor={isEditor}>
-            <div className='markup-include-content-container cove-component__content no-borders'>
-              <Title
-                title={title}
-                isDashboard={isDashboard}
-                titleStyle={contentEditor.titleStyle}
-                config={config}
-                classes={[`${theme}`, 'mb-0']}
-                noContent={!markup}
-              />
-              <div className={`markup-include-component ${contentClasses.join(' ')}`}>
-                <div className={`${innerContainerClasses.join(' ')}`}>
-                  {/* Filters */}
-                  {config.filters && config.filters.length > 0 && (
-                    <Filters
-                      config={config}
-                      setFilters={setFilters}
-                      excludedData={data || []}
-                      dimensions={[0, 0]}
-                      interactionLabel={interactionLabel || 'markup-include'}
-                    />
-                  )}
-                  <div
-                    className={`cove-component__content-wrap${shouldApplyTopPadding ? ' has-top-padding' : ''}${
-                      shouldApplySidePadding ? ' has-side-padding' : ''
-                    }`}
-                  >
-                    {_showNoDataMessage && (
-                      <div className='no-data-message'>
-                        <p>{`${noDataMessageText}`}</p>
-                      </div>
-                    )}
-                    {!markupError && !_showNoDataMessage && <Markup allowElements={!!urlMarkup} content={markup} />}
-                    {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
+    const hasTp5Title = processedTitle && processedTitle.trim()
+    content = !hideMarkupInclude && (
+      <VisualizationContent
+        innerClassName={`markup-include-content-container ${innerContainerClasses.join(' ')}`.trim()}
+        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}
+              setFilters={setFilters}
+              excludedData={data || []}
+              dimensions={[0, 0]}
+              interactionLabel={interactionLabel || 'markup-include'}
+            />
+          ) : null
+        }
+        header={
+          !isTp5Style ? (
+            <Title
+              title={processedTitle}
+              isDashboard={isDashboard}
+              titleStyle={contentEditor?.titleStyle}
+              config={config}
+              classes={[`${theme}`, 'mb-0']}
+              noContent={!sanitizedHTML}
+            />
+          ) : null
+        }
+        footer={
+          <FootnotesStandAlone
+            config={config?.footnotes}
+            filters={config?.filters || []}
+            markupVariables={markupVariables}
+            enableMarkupVariables={config?.enableMarkupVariables}
+            data={data}
+            dataMetadata={config?.dataMetadata}
+            footerClassName={isTp5Style ? 'mt-3' : undefined}
+          />
+        }
+      >
+        {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>
-                </div>
+                )}
+                {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
               </div>
-              <FootnotesStandAlone
-                config={configObj?.footnotes}
-                filters={config?.filters || []}
-                markupVariables={markupVariables}
-                enableMarkupVariables={config?.enableMarkupVariables}
-                data={data}
-              />
             </div>
-          </Layout.Responsive>
+          </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>}
+          </>
         )}
-      </>
+      </VisualizationContent>
     )
   }
 
@@ -368,11 +446,17 @@ 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 />}
-        <Layout.VisualizationWrapper config={config} isEditor={isEditor} showEditorPanel={config?.showEditorPanel}>
+        <VisualizationContainer
+          config={config as any}
+          isEditor={isEditor}
+          editorPanel={<EditorPanel datasets={datasets} />}
+        >
           {content}
-        </Layout.VisualizationWrapper>
+        </VisualizationContainer>
       </ConfigContext.Provider>
     </ErrorBoundary>
   )

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: {
@@ -138,7 +139,7 @@ export const GeneralSectionTests: Story = {
       'Title Update',
       () => {
         const modernTitle = canvasElement.querySelector('.cove-title')
-        const legacyTitle = canvasElement.querySelector('.cove-component__header h2')
+        const legacyTitle = canvasElement.querySelector('.cove-visualization__header h2')
         const titleElement = modernTitle || legacyTitle
         return titleElement?.textContent?.trim() || ''
       },
@@ -150,10 +151,54 @@ export const GeneralSectionTests: Story = {
     )
 
     const modernHeader = canvasElement.querySelector('.cove-title')
-    const legacyHeader = canvasElement.querySelector('.cove-component__header h2')
+    const legacyHeader = canvasElement.querySelector('.cove-visualization__header h2')
     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'
+    )
   }
 }
 
@@ -226,7 +271,7 @@ export const ContentEditorTests: Story = {
     await performAndAssert(
       'HTML Content Update',
       () => {
-        const contentElement = canvasElement.querySelector('.cove-component__content')
+        const contentElement = canvasElement.querySelector('.cove-visualization__body')
         return contentElement?.innerHTML || ''
       },
       async () => {
@@ -255,7 +300,7 @@ export const ContentEditorTests: Story = {
       'Source URL Update and Content Loading',
       () => ({
         inputValue: srcUrlInput.value,
-        contentText: canvasElement.querySelector('.cove-component__content')?.textContent || ''
+        contentText: canvasElement.querySelector('.cove-visualization__body')?.textContent || ''
       }),
       async () => {
         await userEvent.clear(srcUrlInput)
@@ -296,7 +341,7 @@ export const VisualSectionTests: Story = {
     await waitForEditor(canvas)
     await openAccordion(canvas, 'Visual')
 
-    const contentContainer = () => canvasElement.querySelector('.cove-component__content') as HTMLElement
+    const contentContainer = () => canvasElement.querySelector('.cove-visualization__body') as HTMLElement
     const visualContainer = () => canvasElement.querySelector('.markup-include-component') as HTMLElement
     expect(contentContainer()).toBeTruthy()
     expect(visualContainer()).toBeTruthy()
@@ -306,21 +351,16 @@ export const VisualSectionTests: Story = {
     // Expectation: Theme class changes on component
     // ============================================================================
     const getThemeState = () => {
-      // Use the contentContainer like other tests, and check its parent for theme classes
       const content = contentContainer()
       if (!content) return { theme: '', classes: '', element: 'content not found' }
 
-      // Check content itself and its parent for theme classes
+      // Theme is applied to the outer cove-visualization wrapper — traverse up to find it
+      const themeWrapper = content.closest('[class*="theme-"]') as HTMLElement
+      const theme = themeWrapper ? Array.from(themeWrapper.classList).find(cls => cls.startsWith('theme-')) || '' : ''
+
       const contentClasses = Array.from(content.classList).join(' ')
       const parentClasses = content.parentElement ? Array.from(content.parentElement.classList).join(' ') : ''
 
-      const contentTheme = Array.from(content.classList).find(cls => cls.startsWith('theme-')) || ''
-      const parentTheme = content.parentElement
-        ? Array.from(content.parentElement.classList).find(cls => cls.startsWith('theme-')) || ''
-        : ''
-
-      const theme = contentTheme || parentTheme || ''
-
       return {
         theme,
         classes: contentClasses + ' | parent: ' + parentClasses,
@@ -380,7 +420,7 @@ export const VisualSectionTests: Story = {
       'Border Color Theme Toggle',
       () => ({
         checked: borderColorThemeCheckbox.checked,
-        hasBorderColorTheme: visualContainer().classList.contains('component--has-borderColorTheme')
+        hasBorderColorTheme: visualContainer().classList.contains('component--has-border-color-theme')
       }),
       async () => {
         const checkboxWrapper =
@@ -455,7 +495,7 @@ export const VisualSectionTests: Story = {
       'Hide Background Color Toggle',
       () => ({
         checked: hideBackgroundCheckbox.checked,
-        hideBackground: visualContainer().classList.contains('component--hideBackgroundColor')
+        hideBackground: visualContainer().classList.contains('component--hide-background-color')
       }),
       async () => {
         const checkboxWrapper = hideBackgroundCheckbox.closest('.cove-input__checkbox--small') || hideBackgroundCheckbox

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.')
+  }
+}