@cdc/markup-include 4.24.4 → 4.24.7

package/src/_stories/_mock/primary.json

@@ -0,0 +1,23 @@
+{
+  "contentEditor": {
+    "inlineHTML": "<h2>Inline HTML</h2>",
+    "markupVariables": [],
+    "showHeader": true,
+    "srcUrl": "#example",
+    "title": "Markup Include",
+    "useInlineHTML": false
+  },
+  "data": [],
+  "legend": {},
+  "newViz": true,
+  "theme": "theme-blue",
+  "type": "markup-include",
+  "runtime": null,
+  "visual": {
+    "border": false,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false
+  }
+}

package/src/_stories/_mock/with-conditions.json

@@ -0,0 +1,49 @@
+{
+  "contentEditor": {
+    "inlineHTML": "<div>{{state}} does have a rate 130 compared to the over all rate of {{overall-rate}}</div>",
+    "markupVariables": [
+      {
+        "name": "state",
+        "tag": "{{state}}",
+        "columnName": "STATE",
+        "conditions": [{ "columnName": "Rate", "isOrIsNotEqualTo": "is", "value": "130" }]
+      },
+      {
+        "name": "overall-rate",
+        "tag": "{{overall-rate}}",
+        "columnName": "Rate",
+        "conditions": [{ "columnName": "STATE", "isOrIsNotEqualTo": "is", "value": "Overall" }]
+      }
+    ],
+    "showHeader": true,
+    "srcUrl": "#example",
+    "title": "",
+    "useInlineHTML": true
+  },
+  "data": [
+    {
+      "STATE": "Overall",
+      "Rate": "80",
+      "Location": "Vehicle",
+      "URL": "https://www.cdc.gov/"
+    },
+    {
+      "STATE": "Alabama",
+      "Rate": "130",
+      "Location": "Vehicle",
+      "URL": "https://www.cdc.gov/"
+    }
+  ],
+  "legend": {},
+  "newViz": true,
+  "theme": "theme-amber",
+  "type": "markup-include",
+  "runtime": null,
+  "visual": {
+    "border": false,
+    "accent": true,
+    "background": true,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false
+  }
+}

package/src/cdcMarkupInclude.style.css

@@ -0,0 +1,39 @@
+.cdc-open-viz-module.markup-include {
+  .spacing-wrapper {
+    background-color: var(--lightGray) !important;
+  }
+  .cove-tooltip-variable {
+    display: none;
+  }
+
+  .markup-include-content-container.cove-component__content {
+    .markup-include-component.cove-component__content:not(.component--hideBackgroundColor, .component--has-background) {
+      background-color: white;
+    }
+  }
+}
+
+.cdc-open-viz-module.markup-include.isEditor {
+  .cove-tooltip-variable {
+    position: relative;
+    display: inline;
+    background: var(--orange-tertiary);
+    .cove-tooltip-value {
+      display: none;
+      position: absolute;
+      background: var(--white);
+      border: 1px solid black;
+      font-size: 16px;
+      padding: 10px;
+      width: 100vw;
+      max-width: 500px;
+      z-index: 9999;
+    }
+    &:hover > .cove-tooltip-value {
+      display: block;
+    }
+  }
+  .cove-markup-include-variable-value {
+    display: none !important;
+  }
+}

package/src/components/Conditions.tsx

@@ -0,0 +1,99 @@
+import _ from 'lodash'
+import { Condition } from '../types/Condition'
+import Icon from '@cdc/core/components/ui/Icon'
+
+type OpenControls = [boolean[], Function] // useState type
+
+type CondtionsProps = {
+  conditionControls: OpenControls
+  conditionLookup: Record<string, string[] | number[]>
+  conditionSettings: Condition
+  conditionIndex: number
+  removeCondition: Function
+  selectedColumn: string
+  updateConditionsList: Function
+}
+
+const Conditions: React.FC<CondtionsProps> = ({ conditionControls, conditionLookup, conditionSettings, conditionIndex, removeCondition, selectedColumn, updateConditionsList }) => {
+  const [openConditionControls, setOpenConditionControls] = conditionControls
+  const showCondition = openConditionControls[conditionIndex]
+  const setShowCondition = (index, value) => {
+    const newOpenConditionsControls = [...openConditionControls]
+    newOpenConditionsControls[index] = value
+    setOpenConditionControls(newOpenConditionsControls)
+  }
+
+  const columnNames = Object.keys(conditionLookup)
+  const columnNameConditionOptions = columnNames.filter(optionName => optionName !== selectedColumn)
+
+  const { columnName, isOrIsNotEqualTo, value } = conditionSettings
+
+  const handleConditionChange = (selectionValue: string | number, conditionSetting: string) => {
+    const conditionSettingUpdate = _.cloneDeep(conditionSettings)
+    if (conditionSetting === 'columnName') {
+      conditionSettingUpdate['value'] = ''
+    }
+    conditionSettingUpdate[conditionSetting] = selectionValue
+    updateConditionsList(conditionSettingUpdate, conditionIndex)
+  }
+
+  return !showCondition ? (
+    <>
+      <div className='mb-1'>
+        <button onClick={() => setShowCondition(conditionIndex, true)}>
+          <Icon display='caretDown' />
+        </button>
+        <span> {value ? `${columnName} ${isOrIsNotEqualTo === 'is' ? 'is' : 'is not'} ${value}` : 'New Condition'}</span>
+      </div>
+    </>
+  ) : (
+    <>
+      <div className='d-flex justify-content-between'>
+        <button
+          onClick={() => {
+            const newOpenConditionsControls = [...openConditionControls]
+            newOpenConditionsControls[conditionIndex] = false
+            setOpenConditionControls(newOpenConditionsControls)
+          }}
+        >
+          <Icon display='caretDown' />
+        </button>
+        <button className='btn btn-danger btn-sm mt-0 ml-2' onClick={() => removeCondition(conditionIndex)}>
+          Remove
+        </button>
+      </div>
+      <div id={`condition_${conditionIndex}`}>
+        <label className='d-block'>
+          <span>Condition : </span>
+          <div className='pt-1'>
+            <select className='ml-1' value={columnName} onChange={e => handleConditionChange(e.target.value, 'columnName')}>
+              <option value=''>Select</option>
+              {columnNameConditionOptions?.map(columnName => (
+                <option key={columnName} value={columnName}>
+                  {columnName}
+                </option>
+              ))}
+            </select>
+            <select className='ml-1' value={isOrIsNotEqualTo} onChange={e => handleConditionChange(e.target.value, 'isOrIsNotEqualTo')}>
+              <option value='is'>is</option>
+              <option value='isNot'>is not</option>
+            </select>
+            <select className='ml-1' value={value} onChange={e => handleConditionChange(e.target.value, 'value')}>
+              <option value=''>Select</option>
+
+              {conditionLookup[columnName]?.map(valueItem => {
+                return (
+                  <option key={valueItem} value={valueItem}>
+                    {valueItem}
+                  </option>
+                )
+              })}
+            </select>
+          </div>
+        </label>
+      </div>
+    </>
+  )
+}
+
+export default Conditions

package/src/components/EditorPanel.tsx

@@ -0,0 +1,201 @@
+import React, { useState, useEffect, memo, useContext, useRef, useMemo, useReducer } from 'react'
+
+// Third Party
+import _ from 'lodash'
+
+// Context
+import { Variable } from '../types/Variable'
+import ConfigContext from '../ConfigContext'
+
+// Helpers
+import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
+
+// Components
+import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import Icon from '@cdc/core/components/ui/Icon'
+import InputText from '@cdc/core/components/inputs/InputText'
+import Layout from '@cdc/core/components/Layout'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Accordion from '@cdc/core/components/ui/Accordion'
+
+// styles
+import '@cdc/core/styles/v2/components/editor.scss'
+import './editorPanel.style.css'
+import VariableSection from './Variables'
+
+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: React.FC = () => {
+  const { config, data, isDashboard, loading, setParentConfig, updateConfig } = useContext(ConfigContext)
+  const { contentEditor, theme, visual } = config
+  const { inlineHTML, markupVariables, srcUrl, title, useInlineHTML } = contentEditor
+  const [displayPanel, setDisplayPanel] = useState(true)
+  const updateField = updateFieldFactory(config, updateConfig, true)
+  const hasData = data?.[0] !== undefined ?? false
+
+  const openVariableControls = useState<boolean[]>([])
+
+  useEffect(() => {
+    // Pass up to Editor if needed
+    if (setParentConfig) {
+      const newConfig = convertStateToConfig()
+
+      setParentConfig(newConfig)
+    }
+  }, [config])
+
+  useEffect(() => {
+    const newConfig = { ...config }
+    delete newConfig.newViz
+    updateConfig(newConfig)
+  }, [])
+
+  const onBackClick = () => {
+    setDisplayPanel(!displayPanel)
+    updateConfig({
+      ...config,
+      showEditorPanel: !displayPanel
+    })
+  }
+
+  const convertStateToConfig = () => {
+    const strippedState = JSON.parse(JSON.stringify(config))
+    delete strippedState.newViz
+    delete strippedState.runtime
+
+    return strippedState
+  }
+
+  const [variableArray, setVariableArray] = useState<Variable[]>([...markupVariables])
+  const [isCreatingVariable, setIsCreatingVariable] = useState(false)
+
+  const textAreaInEditorContainer = useRef(null)
+  const [controls, setControls] = openVariableControls
+
+  const handleCreateNewVariableButtonClick = () => {
+    const newVariableArray = [..._.cloneDeep(variableArray)]
+    const newVariable = {
+      columnName: '',
+      conditions: [],
+      name: '',
+      tag: ''
+    }
+
+    setControls({ ...controls, [variableArray.length + 1]: true })
+
+    newVariableArray.push(newVariable)
+    setVariableArray(newVariableArray)
+    setIsCreatingVariable(!isCreatingVariable)
+  }
+
+  const updateVariableArray = (newVariable: Variable, variableIndex: number) => {
+    const newVariableArray = _.cloneDeep(variableArray)
+    newVariableArray[variableIndex] = newVariable
+    setVariableArray(newVariableArray)
+    updateField('contentEditor', null, 'markupVariables', newVariableArray)
+    return
+  }
+
+  const deleteVariable = (variableIndex: number) => {
+    const newVariableArray = _.cloneDeep(variableArray)
+    newVariableArray.splice(variableIndex, 1)
+    setVariableArray(newVariableArray)
+    updateField('contentEditor', null, 'markupVariables', newVariableArray)
+
+    const newControls = _.cloneDeep(controls)
+    delete newControls[variableIndex]
+    setControls(newControls)
+  }
+
+  const editorContent = (
+    <Accordion>
+      <Accordion.Section title='General'>
+        <InputText value={title || ''} section='contentEditor' fieldName='title' label='Title' placeholder='Markup Include Title' updateField={updateField} />
+      </Accordion.Section>
+      <Accordion.Section title='Content Editor'>
+        <span className='divider-heading'>Enter Markup</span>
+        <InputCheckbox inline value={useInlineHTML} section='contentEditor' fieldName='useInlineHTML' label='Use Inline HTML&nbsp;' updateField={updateField} />
+        <div className='column-edit'>
+          {useInlineHTML ? (
+            <>
+              {/* HTML Textbox */}
+              <div ref={textAreaInEditorContainer}>
+                <InputText value={inlineHTML} section='contentEditor' fieldName='inlineHTML' label='HTML' placeholder='Add HTML here' type='textarea' rows={10} updateField={updateField} />
+
+                <hr className='accordion__divider' />
+              </div>
+              {/* Create New Variable*/}
+
+              {/* Variable Options List */}
+              <fieldset>
+                <label>
+                  <span className='edit-label'>
+                    Variables
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>{`To use created variables wrap the variable name in curly brackets, e.g. {{some_variable}}, and place the variable directly in your Inline HTML`}</Tooltip.Content>
+                    </Tooltip>
+                  </span>
+                </label>
+                {hasData === false && <span className='need-data-source-prompt'>To use variables, add data source.</span>}
+                {variableArray && variableArray.length > 0 && (
+                  <div className='section-border'>
+                    {variableArray?.map((variableObject, index) => {
+                      return <VariableSection key={`${variableObject.name}-${index}`} controls={openVariableControls} data={data} deleteVariable={deleteVariable} updateVariableArray={updateVariableArray} variableConfig={variableObject} variableIndex={index} />
+                    })}
+                  </div>
+                )}
+                <div className='mb-1 d-flex'>
+                  <button className={'btn btn-primary'} onClick={handleCreateNewVariableButtonClick} disabled={!hasData}>
+                    Create New Variable
+                  </button>
+                </div>
+              </fieldset>
+            </>
+          ) : (
+            <InputText value={srcUrl || ''} section='contentEditor' fieldName='srcUrl' label='Source URL;' placeholder='https://www.example.com/file.html' updateField={updateField} />
+          )}
+        </div>
+      </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={theme === palette ? 'selected ' + palette : palette}
+              ></li>
+            ))}
+          </ul>
+        </div>
+        <div className='cove-accordion__panel-section checkbox-group'>
+          <InputCheckbox value={visual.border} section='visual' fieldName='border' label='Display Border&nbsp;' updateField={updateField} />
+          <InputCheckbox value={visual.borderColorTheme} section='visual' fieldName='borderColorTheme' label='Use Border Color Theme&nbsp;' updateField={updateField} />
+          <InputCheckbox value={visual.accent} section='visual' fieldName='accent' label='Use Accent Style&nbsp;' updateField={updateField} />
+          <InputCheckbox value={visual.background} section='visual' fieldName='background' label='Use Theme Background Color&nbsp;' updateField={updateField} />
+          <InputCheckbox value={visual.hideBackgroundColor} section='visual' fieldName='hideBackgroundColor' label='Hide Background Color&nbsp;' updateField={updateField} />
+        </div>
+      </Accordion.Section>
+    </Accordion>
+  )
+
+  if (loading && !config?.showEditorPanel) return null
+
+  return (
+    <ErrorBoundary component='EditorPanel'>
+      <Layout.Sidebar displayPanel={displayPanel} isDashboard={isDashboard} title={'Configure Markup Include'} onBackClick={onBackClick}>
+        {editorContent}
+      </Layout.Sidebar>
+    </ErrorBoundary>
+  )
+}
+
+export default EditorPanel

package/src/components/Variables.tsx

@@ -0,0 +1,171 @@
+import { useMemo, useState } from 'react'
+import Conditions from './Conditions'
+import { Variable } from '../types/Variable'
+import { Condition } from '../types/Condition'
+import _ from 'lodash'
+import Icon from '@cdc/core/components/ui/Icon'
+
+type OpenControls = [boolean[], Function] // useState type
+
+type VariableSectionProps = {
+  controls: OpenControls
+  data: Object[]
+  deleteVariable: Function
+  updateVariableArray: Function
+  variableConfig: Variable
+  variableIndex: number
+}
+
+const VariableSection: React.FC<VariableSectionProps> = ({ controls, data, deleteVariable, updateVariableArray, variableConfig, variableIndex }) => {
+  const [openVariableControls, setOpenVariableControls] = controls
+  const show = openVariableControls[variableIndex]
+  const setShow = (key, value) => {
+    setOpenVariableControls({ openVariableControls, [key]: value })
+  }
+
+  const openConditionControls = useState([])
+
+  const columnNames = Object.keys(data?.[0] || {})
+  const [selectedColumn, setNewVariableColumnName] = useState(variableConfig.columnName)
+  const [conditionsList, setConditionsList] = useState(variableConfig.conditions)
+  const [variableName, setVariableName] = useState(variableConfig.name)
+
+  const conditionLookup: Record<string, string[] | number[]> = useMemo(() => {
+    return columnNames.reduce((acc, column) => {
+      acc[column] = _.uniq(data.map(row => row[column]))
+      return acc
+    }, {})
+  }, [columnNames])
+
+  const handleVariableColumnChange = (columnName: string) => {
+    setNewVariableColumnName(columnName)
+    setConditionsList([])
+  }
+
+  const updateConditionsList = (conditionSettings: Condition, conditionIndex: number) => {
+    const { columnName, isOrIsNotEqualTo, value } = conditionSettings
+    const newConditionsList = _.cloneDeep(conditionsList)
+    newConditionsList[conditionIndex] = {
+      columnName: columnName,
+      isOrIsNotEqualTo: isOrIsNotEqualTo,
+      value: value
+    }
+    setConditionsList(newConditionsList)
+  }
+
+  const removeCondition = (conditionIndex: number) => {
+    const updatedConditionsList = _.cloneDeep(conditionsList)
+    updatedConditionsList.splice(conditionIndex, 1)
+    setConditionsList(updatedConditionsList)
+  }
+
+  const handleAddConditionClick = () => {
+    setConditionsList([
+      ...conditionsList,
+      {
+        columnName: '',
+        isOrIsNotEqualTo: 'is',
+        value: ''
+      }
+    ])
+
+    const [conditionControls, setConditionControls] = openConditionControls
+
+    const newConditionsControls = [...conditionControls]
+    newConditionsControls[conditionsList.length + 1] = true
+    setConditionControls(newConditionsControls)
+  }
+
+  const handleVariableDoneClick = () => {
+    const filteredConditionsList = conditionsList.filter(condition => condition.columnName !== '' && condition.value !== '')
+    const newVariable = {
+      columnName: selectedColumn,
+      conditions: filteredConditionsList,
+      name: variableName,
+      tag: `{{${variableName}}}`
+    }
+    updateVariableArray(newVariable, variableIndex)
+    setShow(variableIndex, false)
+  }
+
+  const columnSelectDisabled = variableName === ''
+  const addConditionDisabled = columnSelectDisabled || selectedColumn === ''
+
+  return (
+    <>
+      {!show ? (
+        <>
+          <div className='mb-2'>
+            <button onClick={() => setShow(variableIndex, true)}>
+              <Icon display='caretDown' />
+            </button>
+            <span> {variableName ? `${variableName}` : 'New Variable'}</span>
+          </div>
+        </>
+      ) : (
+        <fieldset className='edit-block mb-1' key={variableIndex}>
+          <div className='d-flex justify-content-between'>
+            <button onClick={handleVariableDoneClick} disabled={addConditionDisabled}>
+              <Icon display='caretUp' />
+            </button>
+            <button
+              className='btn btn-danger btn-sm mt-0 ml-2'
+              onClick={event => {
+                event.preventDefault()
+                deleteVariable(variableIndex)
+              }}
+            >
+              Delete
+            </button>
+          </div>
+          <label className='d-block'>
+            <span className='edit-label column-heading'>Variable Name:</span>
+            <input className={`variable-${variableIndex} ml-1`} type='text' value={variableName} onChange={e => setVariableName(e.target.value)} />
+          </label>
+          <div className='pt-2'>
+            <label className='d-block'>
+              <span className='edit-label column-heading'>Column:</span>
+              <select className={`variable-${variableIndex} ml-1`} onChange={e => handleVariableColumnChange(e.target.value)} value={selectedColumn} disabled={columnSelectDisabled}>
+                <option value=''>Select</option>
+                {columnNames.map(columnName => (
+                  <option key={columnName} value={columnName}>
+                    {columnName}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+          <label className='d-block py-2'>
+            <span className='edit-label column-heading'>Conditions:</span>
+            {conditionsList.map((condition, index) => {
+              return (
+                <div className='condition-section mt-2'>
+                  <Conditions
+                    key={variableName + '-condition-' + index}
+                    conditionControls={openConditionControls}
+                    conditionLookup={conditionLookup}
+                    conditionSettings={condition}
+                    conditionIndex={index}
+                    removeCondition={removeCondition}
+                    selectedColumn={selectedColumn}
+                    updateConditionsList={updateConditionsList}
+                  />
+                </div>
+              )
+            })}
+          </label>
+          <div className='mt-1'>
+            <button onClick={handleAddConditionClick} disabled={addConditionDisabled}>
+              Add Condition
+            </button>
+            <button className='ml-2' onClick={handleVariableDoneClick} disabled={addConditionDisabled}>
+              Done
+            </button>
+          </div>
+        </fieldset>
+      )}
+    </>
+  )
+}
+
+export default VariableSection

package/src/components/editorPanel.style.css

@@ -0,0 +1,17 @@
+.cdc-open-viz-module.markup-include {
+  .editor-panel .condition-section :is(label) {
+    font-size: 1em;
+  }
+  :is(span).edit-label {
+    margin-bottom: 0.3em;
+    display: block;
+  }
+  .react-tooltip {
+    position: absolute;
+    width: 250px;
+  }
+  .need-data-source-prompt {
+    color: var(--gray);
+    font-size: 0.8rem;
+  }
+}

package/src/data/initial-state.js

@@ -1,9 +1,18 @@
 export default {
-  title: 'Markup Include',
-  showHeader: false,
-  type: 'markup-include',
-  srcUrl: '#example',
+  contentEditor: {
+    inlineHTML: '<h2>Inline HTML</h2>',
+    markupVariables: [],
+    showHeader: true,
+    srcUrl: '#example',
+    title: 'Markup Include',
+    useInlineHTML: false
+  },
+  data: [],
+  legend: {},
+  newViz: true,
   theme: 'theme-blue',
+  type: 'markup-include',
+  runtime: null,
   visual: {
     border: false,
     accent: false,

package/src/scss/main.scss

@@ -25,7 +25,6 @@
   }
 
   .cove-component__content {
-    background-color: #f2f2f2;
     font-size: 14px;
   }
   .cove-component__content.component--hideBackgroundColor {

package/src/store/{mi.actions.ts → markupInclude.actions.ts}

@@ -1,8 +1,8 @@
-import type { Config } from '../types/Config'
+import type { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
 
 type Action<T, P> = { type: T; payload: P }
 
-type SET_CONFIG = Action<'SET_CONFIG', Config>
+type SET_CONFIG = Action<'SET_CONFIG', MarkupIncludeConfig>
 type SET_LOADING = Action<'SET_LOADING', boolean>
 type SET_URL_MARKUP = Action<'SET_URL_MARKUP', string>
 type SET_MARKUP_ERROR = Action<'SET_MARKUP_ERROR', any>

package/src/store/{mi.reducer.ts → markupInclude.reducer.ts}

@@ -1,8 +1,8 @@
-import { Config } from '../types/Config'
-import MarkupIncludeActions from './mi.actions'
+import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
+import MarkupIncludeActions from './markupInclude.actions'
 
 export type MarkupIncludeState = {
-  config?: Config
+  config?: MarkupIncludeConfig
   loading: boolean
   urlMarkup: string
   markupError: any

package/src/types/Condition.ts

@@ -0,0 +1,5 @@
+export type Condition = {
+  columnName: string
+  isOrIsNotEqualTo: string
+  value: string
+}