@cdc/markup-include 4.24.3 → 4.24.5

package/src/types/Config.ts

@@ -1,11 +1,23 @@
-// todo: improve base config to extend from
-// todo: theme type is different from waffle chart so its been assigned to any for now.
+import { Runtime } from '@cdc/core/types/Runtime'
+import { Variable } from './Variable'
+
 export type Config = {
-  title: string
-  showHeader: boolean
-  type: string
-  srcUrl: string
+  contentEditor: {
+    // Changing the base config object creates an infinite loop, nesting it is a workaround
+    inlineHTML: string
+    markupVariables: Variable[]
+    showHeader: boolean
+    srcUrl: string
+    title: string
+    useInlineHTML: boolean
+  }
+  data?: Object[]
+  legend: {}
+  newViz?: boolean
+  runtime?: Runtime
   theme: any
+  type: string
+  showEditorPanel?: boolean
   visual: {
     border: boolean
     accent: boolean

package/src/types/Variable.ts

@@ -0,0 +1,7 @@
+import { Condition } from './Condition'
+export type Variable = {
+  columnName: string
+  conditions: Condition[]
+  name: string
+  tag: string
+}

package/examples/example-config.json

@@ -1,7 +0,0 @@
-{
-  "type": "markup-include",
-  "srcUrl": "#example",
-  "title": "Markup Include",
-  "theme": "theme-blue",
-  "data": []
-}

package/examples/gallery/button-and-text.json

@@ -1,31 +0,0 @@
-{
-  "title": "",
-  "showHeader": false,
-  "type": "markup-include",
-  "srcUrl": "https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Markup-Include-Button-and-Text.html",
-  "theme": "theme-blue",
-  "data": [
-    {
-      "Race": "Hispanic or Latino",
-      "Age-adjusted rate": "644.2"
-    },
-    {
-      "Race": "Non-Hispanic American Indian",
-      "Age-adjusted rate": "636.1"
-    },
-    {
-      "Race": "Non-Hispanic Black",
-      "Age-adjusted rate": "563.7"
-    },
-    {
-      "Race": "Non-Hispanic Asian or Pacific Islander",
-      "Age-adjusted rate": "202.5"
-    },
-    {
-      "Race": "Non-Hispanic White",
-      "Age-adjusted rate": "183.6"
-    }
-  ],
-  "dataFileName": "valid-data-chart.csv",
-  "dataFileSourceType": "file"
-}

package/examples/gallery/icon-no-text.json

@@ -1,31 +0,0 @@
-{
-  "title": "",
-  "showHeader": false,
-  "type": "markup-include",
-  "srcUrl": "https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/SSI-Example-Markup-Include.html",
-  "theme": "theme-blue",
-  "data": [
-    {
-      "Race": "Hispanic or Latino",
-      "Age-adjusted rate": "644.2"
-    },
-    {
-      "Race": "Non-Hispanic American Indian",
-      "Age-adjusted rate": "636.1"
-    },
-    {
-      "Race": "Non-Hispanic Black",
-      "Age-adjusted rate": "563.7"
-    },
-    {
-      "Race": "Non-Hispanic Asian or Pacific Islander",
-      "Age-adjusted rate": "202.5"
-    },
-    {
-      "Race": "Non-Hispanic White",
-      "Age-adjusted rate": "183.6"
-    }
-  ],
-  "dataFileName": "valid-data-chart.csv",
-  "dataFileSourceType": "file"
-}

package/examples/gallery/image-with-text.json

@@ -1,31 +0,0 @@
-{
-  "title": "<strong>Markup Include</strong> - Image with Text",
-  "showHeader": false,
-  "type": "markup-include",
-  "srcUrl": "/wcms/4.0/cdc-wp/data-presentation/examples/SSI-Image-With-Text.html",
-  "theme": "theme-slate",
-  "data": [
-    {
-      "Race": "Hispanic or Latino",
-      "Age-adjusted rate": "644.2"
-    },
-    {
-      "Race": "Non-Hispanic American Indian",
-      "Age-adjusted rate": "636.1"
-    },
-    {
-      "Race": "Non-Hispanic Black",
-      "Age-adjusted rate": "563.7"
-    },
-    {
-      "Race": "Non-Hispanic Asian or Pacific Islander",
-      "Age-adjusted rate": "202.5"
-    },
-    {
-      "Race": "Non-Hispanic White",
-      "Age-adjusted rate": "183.6"
-    }
-  ],
-  "dataFileName": "valid-data-chart.csv",
-  "dataFileSourceType": "file"
-}

package/src/ConfigContext.jsx

@@ -1,5 +0,0 @@
-import { createContext } from 'react'
-
-const ConfigContext = createContext({})
-
-export default ConfigContext

package/src/components/EditorPanel.jsx

@@ -1,167 +0,0 @@
-import React, { useState, useEffect, memo, useContext } from 'react'
-
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-
-import ConfigContext from '../ConfigContext'
-
-import Accordion from '@cdc/core/components/ui/Accordion'
-import InputText from '@cdc/core/components/inputs/InputText'
-import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
-
-import '@cdc/core/styles/v2/components/editor.scss'
-
-const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
-
-const EditorPanel = memo(props => {
-  const { config, updateConfig, loading, data, setParentConfig, isDashboard } = useContext(ConfigContext)
-
-  const [displayPanel, setDisplayPanel] = useState(true)
-  const [showConfigConfirm, setShowConfigConfirm] = useState(false)
-
-  const updateField = updateFieldFactory(config, updateConfig, true)
-
-  const missingRequiredSections = () => {
-    return false
-  }
-
-  useEffect(() => {
-    // Pass up to Editor if needed
-    if (setParentConfig) {
-      const newConfig = convertStateToConfig()
-
-      setParentConfig(newConfig)
-    }
-  }, [config])
-
-  useEffect(() => {
-    if (!showConfigConfirm) {
-      let newConfig = { ...config }
-      delete newConfig.newViz
-      updateConfig(newConfig)
-    }
-  }, [])
-
-  const onBackClick = () => {
-    setDisplayPanel(!displayPanel)
-
-    // if (isDashboard) {
-    //   updateConfig({ ...config, editing: false })
-    // } else {
-    //   setDisplayPanel(!displayPanel)
-    // }
-  }
-
-  const Error = () => {
-    return (
-      <section className='waiting'>
-        <section className='waiting-container'>
-          <h3>Error With Configuration</h3>
-          <p>{config.runtime.editorErrorMessage}</p>
-        </section>
-      </section>
-    )
-  }
-
-  const Confirm = () => {
-    const confirmDone = e => {
-      e.preventDefault()
-      let newConfig = { ...config }
-      delete newConfig.newViz
-      updateConfig(newConfig)
-    }
-
-    return (
-      <section className='waiting'>
-        <section className='waiting-container'>
-          <h3>Finish Configuring</h3>
-          <p>Set all required options to the left and confirm below to display a preview of the markup.</p>
-          <button className='btn' style={{ margin: '1em auto' }} onClick={confirmDone}>
-            I'm Done
-          </button>
-        </section>
-      </section>
-    )
-  }
-
-  const convertStateToConfig = () => {
-    let strippedState = JSON.parse(JSON.stringify(config))
-    delete strippedState.newViz
-    delete strippedState.runtime
-
-    return strippedState
-  }
-
-  const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
-    <label className='checkbox'>
-      <input
-        type='checkbox'
-        name={fieldName}
-        checked={value}
-        onChange={() => {
-          updateField(section, subsection, fieldName, !value)
-        }}
-        {...attributes}
-      />
-      <span className='edit-label column-heading'>{label}</span>
-      <span className='cove-icon'>{tooltip}</span>
-    </label>
-  ))
-
-  const editorContent = (
-    <Accordion>
-      <Accordion.Section title='General'>
-        <InputText value={config.title || ''} fieldName='title' label='Title' placeholder='Markup Include Title' updateField={updateField} />
-
-        <InputText value={config.srcUrl || ''} fieldName='srcUrl' label='Source URL' placeholder='https://www.example.com/file.html' updateField={updateField} />
-      </Accordion.Section>
-      <Accordion.Section title='Visual'>
-        <div className='input-group'>
-          <label>Theme</label>
-          <ul className='color-palette'>
-            {headerColors.map(palette => (
-              <li
-                title={palette}
-                key={palette}
-                onClick={() => {
-                  updateConfig({ ...config, theme: palette })
-                }}
-                className={config.theme === palette ? 'selected ' + palette : palette}
-              ></li>
-            ))}
-          </ul>
-        </div>
-
-        <div className='cove-accordion__panel-section checkbox-group'>
-          <CheckBox value={config.visual.border} section='visual' fieldName='border' label='Display Border' updateField={updateField} />
-          <CheckBox value={config.visual.borderColorTheme} section='visual' fieldName='borderColorTheme' label='Use Border Color Theme' updateField={updateField} />
-          <CheckBox value={config.visual.accent} section='visual' fieldName='accent' label='Use Accent Style' updateField={updateField} />
-          <CheckBox value={config.visual.background} section='visual' fieldName='background' label='Use Theme Background Color' updateField={updateField} />
-          <CheckBox value={config.visual.hideBackgroundColor} section='visual' fieldName='hideBackgroundColor' label='Hide Background Color' updateField={updateField} />
-        </div>
-      </Accordion.Section>
-    </Accordion>
-  )
-
-  if (loading) return null
-
-  return (
-    <ErrorBoundary component='EditorPanel'>
-      <div className='cove-editor'>
-        {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
-        {config.newViz && showConfigConfirm && <Confirm />}
-        <button className={`cove-editor--toggle` + (!displayPanel ? ` collapsed` : ``)} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick} />
-        <section className={`cove-editor__panel` + (displayPanel ? `` : ' hidden')}>
-          <div className='cove-editor__panel-container'>
-            <h2 className='cove-editor__heading'>Configure Markup Include</h2>
-            <section className='cove-editor__content'>{editorContent}</section>
-          </div>
-        </section>
-        <div className='cove-editor__content'>
-          <div className='cove-editor__content-wrap'>{props.children}</div>
-        </div>
-      </div>
-    </ErrorBoundary>
-  )
-})
-
-export default EditorPanel