@cdc/markup-include 4.26.4 → 4.26.5

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.26.4",
+  "version": "4.26.5",
   "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.4",
+    "@cdc/core": "^4.26.5",
     "axios": "^1.13.2",
     "dompurify": "^3.4.0",
     "lodash": "^4.17.23",
@@ -19,7 +19,7 @@
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
+  "gitHead": "61c025165d96b45a6002c34582c5a622a9d865a9",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "main": "dist/cdcmarkupinclude",
   "moduleName": "CdcMarkupInclude",

package/src/CdcMarkupInclude.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useCallback, useRef, useReducer, useMemo } from 'react'
 // external
 import DOMPurify from 'dompurify'
-import axios from 'axios'
 import parse from 'html-react-parser'
 
 // cdc
@@ -9,6 +8,7 @@ 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 { hasVisibleVizFilters } from '@cdc/core/helpers/filterVisibility'
 import { resolveDataColor } from '@cdc/core/helpers/dataColors'
 import ConfigContext from './ConfigContext'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
@@ -201,20 +201,18 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
         dispatch({ type: 'SET_URL_MARKUP', payload })
       } else {
         try {
-          await axios.get(srcUrl).then(res => {
-            if (res.data) {
-              dispatch({ type: 'SET_URL_MARKUP', payload: res.data })
+          const res = await fetch(srcUrl)
+          if (!res.ok) {
+            dispatch({ type: 'SET_MARKUP_ERROR', payload: res.status })
+            dispatch({ type: 'SET_URL_MARKUP', payload: '' })
+          } else {
+            const data = await res.text()
+            if (data) {
+              dispatch({ type: 'SET_URL_MARKUP', payload: data })
             }
-          })
-        } catch (err) {
-          if (err.response) {
-            // Response with error
-            dispatch({ type: 'SET_MARKUP_ERROR', payload: err.response.status })
-          } else if (err.request) {
-            // No response received
-            dispatch({ type: 'SET_MARKUP_ERROR', payload: 200 })
           }
-
+        } catch {
+          dispatch({ type: 'SET_MARKUP_ERROR', payload: 200 })
           dispatch({ type: 'SET_URL_MARKUP', payload: '' })
         }
       }
@@ -346,7 +344,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
           shouldApplyTopPadding ? ' has-top-padding' : ''
         }${shouldApplySidePadding ? ' has-side-padding' : ''}`.trim()}
         filters={
-          config.filters && config.filters.length > 0 ? (
+          hasVisibleVizFilters(config.filters) ? (
             <Filters
               config={config}
               setFilters={setFilters}
@@ -354,7 +352,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
               dimensions={[0, 0]}
               interactionLabel={interactionLabel || 'markup-include'}
             />
-          ) : null
+          ) : undefined
         }
         header={
           !isTp5Style ? (

package/src/_stories/MarkupInclude.stories.tsx

@@ -136,4 +136,44 @@ export const TP5_Test: Story = {
   }
 }
 
+export const Bootstrap_Grid_Mockup: Story = {
+  args: {
+    config: {
+      ...primary,
+      contentEditor: {
+        ...primary.contentEditor,
+        showHeader: true,
+        title: 'Bootstrap grid include mock',
+        useInlineHTML: true,
+        inlineHTML: `
+          <div class="row">
+            <div class="col-8">
+              <p><strong>col-8</strong> block inside markup include content.</p>
+            </div>
+            <div class="col-3">
+              <p><strong>col-3</strong> block inside markup include content.</p>
+            </div>
+          </div>
+        `
+      }
+    } as any,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    const shell = canvasElement.querySelector('.cove-visualization.type-markup-include')
+    const contentSection = canvasElement.querySelector('.cove-visualization__content-section')
+    const primaryColumn = canvasElement.querySelector('.col-8')
+    const secondaryColumn = canvasElement.querySelector('.col-3')
+
+    expect(shell).toBeTruthy()
+    expect(contentSection).toBeTruthy()
+    expect(primaryColumn).toBeTruthy()
+    expect(secondaryColumn).toBeTruthy()
+    expect(primaryColumn?.closest('.cove-visualization__content-section')).toBe(contentSection)
+    expect(secondaryColumn?.closest('.cove-visualization__content-section')).toBe(contentSection)
+  }
+}
+
 export default meta

package/src/cdcMarkupInclude.style.css

@@ -1,4 +1,4 @@
-.cove-visualization.markup-include {
+.cove-visualization.type-markup-include {
   .spacing-wrapper {
     background-color: var(--lightGray) !important;
   }
@@ -7,14 +7,17 @@
     display: none;
   }
 
-  c .markup-include-content-container.cove-visualization__inner {
-    .markup-include-component.cove-visualization__body:not(.component--hide-background-color, .component--has-background) {
+  .markup-include-content-container.cove-visualization__inner {
+    .markup-include-component.cove-visualization__body:not(
+        .component--hide-background-color,
+        .component--has-background
+      ) {
       background-color: white;
     }
   }
 }
 
-.cove-visualization.markup-include.is-editor {
+.cove-visualization.type-markup-include.is-editor {
   .cove-tooltip-variable {
     background: var(--orange-tertiary);
     display: inline;
@@ -32,7 +35,7 @@
       z-index: 9999;
     }
 
-    &:hover>.cove-tooltip-value {
+    &:hover > .cove-tooltip-value {
       display: block;
     }
   }
@@ -40,4 +43,4 @@
   .cove-markup-include-variable-value {
     display: none !important;
   }
-}
+}

package/src/components/EditorPanel/EditorPanel.tsx

@@ -16,6 +16,7 @@ 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'
@@ -289,13 +290,7 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
               />
             )}
             {isTp5Style ? (
-              <CheckBox
-                value={visual?.whiteBackground}
-                section='visual'
-                fieldName='whiteBackground'
-                label='Use White Background Style'
-                updateField={updateField}
-              />
+              <Tp5VisualSection config={config} updateField={updateField} />
             ) : (
               <StyleTreatmentSection
                 styleTreatment={styleTreatment}
@@ -395,7 +390,8 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
           <Accordion.Section title='Markup Variables'>
             <MarkupVariablesEditor
               markupVariables={config.markupVariables || []}
-              data={markupEditorData}
+              data={Array.isArray(data) ? data : []}
+              editorData={markupEditorData}
               datasets={datasets}
               config={config}
               onChange={handleMarkupVariablesChange}

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,4 +1,5 @@
 @import '@cdc/core/styles/layout/wrapper-padding';
+@import '@cdc/core/styles/layout/callout';
 
 .cove-visualization.type-markup-include {
   .cove-visualization__body {
@@ -13,12 +14,6 @@
 
     .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 {

package/src/test/CdcMarkupInclude.test.jsx

@@ -2,13 +2,18 @@ import path from 'node:path'
 import fs from 'node:fs'
 import vm from 'node:vm'
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect, vi } from 'vitest'
 import CdcMarkupInclude from '../CdcMarkupInclude'
 
 vi.mock('@cdc/core/components/EditorPanel/components/MarkupVariablesEditor', () => ({
-  default: ({ data }) => <div data-testid='markup-variables-editor-data'>{JSON.stringify(data)}</div>
+  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) => {
@@ -28,7 +33,7 @@ describe('Markup Include', () => {
     expect(result).toBe(true)
   }, 300000)
 
-  it('uses dashboard rawData for markup variable editor choices when editing', async () => {
+  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' }]
 
@@ -65,7 +70,102 @@ describe('Markup Include', () => {
       />
     )
 
-    expect(JSON.parse((await screen.findByTestId('markup-variables-editor-data')).textContent)).toEqual(fullData)
+    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', () => {