@cdc/markup-include 4.26.1 → 4.26.3

package/src/components/EditorPanel/EditorPanel.tsx

@@ -14,7 +14,8 @@ 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 { Datasets } from '@cdc/core/types/DataSet'
 
 // styles
@@ -26,9 +27,24 @@ type MarkupIncludeEditorPanelProps = {
 
 const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
   const { config, data, isDashboard, loading, setParentConfig, updateConfig } = useContext(ConfigContext)
-  const { contentEditor, theme, visual } = config
+  const { contentEditor, theme, visual } = config || {}
   const { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor || {}
   const updateField = updateFieldFactory(config, updateConfig, true)
+  const styleTreatment = visual?.tp5Treatment ? 'tp5' : 'legacy'
+
+  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)
 
@@ -67,7 +83,7 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
               updateField={updateField}
             />
             <Select
-              value={contentEditor.titleStyle || 'small'}
+              value={contentEditor?.titleStyle || 'small'}
               section='contentEditor'
               fieldName='titleStyle'
               label='Title Style'
@@ -92,6 +108,29 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
                 </Tooltip>
               }
             />
+            <Select
+              value={config.locale}
+              fieldName='locale'
+              label='Language for dates and numbers'
+              updateField={updateField}
+              options={[
+                { value: 'en-US', label: 'English (en-US)' },
+                { value: 'es-MX', label: 'Spanish (es-MX)' }
+              ]}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Change the language (locale) for this visualization to alter the way dates and numbers are
+                      formatted.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
           </Accordion.Section>
           <Accordion.Section title='Content Editor'>
             <span className='divider-heading'>Enter Markup</span>
@@ -131,7 +170,23 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
             </div>
           </Accordion.Section>
           <Accordion.Section title='Visual'>
-            <VisualSection config={config} updateField={updateField} updateConfig={updateConfig} />
+            <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}
+            />
           </Accordion.Section>
           {isDashboard && (
             <Accordion.Section title='Footnotes'>
@@ -147,6 +202,7 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
               onChange={handleMarkupVariablesChange}
               enableMarkupVariables={config.enableMarkupVariables || false}
               onToggleEnable={handleToggleEnable}
+              dataMetadata={config.dataMetadata}
             />
           </Accordion.Section>
         </Accordion>

package/src/data/initial-state.js

@@ -1,19 +1,21 @@
 export default {
   contentEditor: {
-    inlineHTML: '<h2>Inline HTML</h2>',
+    inlineHTML: '<strong>Inline HTML</strong>',
     showHeader: true,
     srcUrl: '#example',
     title: '',
     titleStyle: 'small',
-    useInlineHTML: false,
+    useInlineHTML: true,
     showNoDataMessage: false,
     noDataMessageText: 'No Data Available'
   },
   data: [],
   legend: {},
   newViz: true,
+  showEditorPanel: true,
   theme: 'theme-blue',
   type: 'markup-include',
+  visualizationType: 'markup-include',
   runtime: null,
   visual: {
     border: false,

package/src/scss/main.scss

@@ -1,16 +1,12 @@
-.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;
+  }
 
-    &.has-side-padding {
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
+  .cove-visualization__body-wrap {
+    @include cove-visualization-body-wrap-inline-padding;
 
     h1,
     h2,
@@ -22,9 +18,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,7 +50,8 @@
     float: left;
   }
 }
+
 .cove-editor .cove-editor__content {
   padding-left: 350px;
   display: flex;
-}
+}

package/src/test/CdcMarkupInclude.test.jsx

@@ -1,11 +1,11 @@
-import path from 'path'
+import path from 'node:path'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
 describe('Markup Include', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
-    const result = testStandaloneBuild(pkgDir)
+    const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
 })