npm - @cdc/markup-include - Versions diffs - 4.25.10 → 4.25.11 - Mend

@cdc/markup-include 4.25.10 → 4.25.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/cdcmarkupinclude.js +7128 -7333
package/index.html +37 -26
package/package.json +3 -4
package/src/CdcMarkupInclude.tsx +11 -3
package/src/_stories/MarkupInclude.Editor.stories.tsx +1 -1
package/src/components/EditorPanel.tsx +26 -50
package/src/scss/main.scss +0 -8
package/src/store/markupInclude.reducer.ts +1 -1
package/src/components/Conditions.tsx +0 -118
package/src/components/Variables.tsx +0 -218
package/src/types/Config.ts +0 -33
/package/src/{index.jsx → index.tsx} +0 -0

package/index.html CHANGED Viewed

@@ -1,30 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <style>
-      body {
-        margin: 0 auto !important;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        border-top: none !important;
-      }
-      .react-container + .react-container {
-        margin-top: 3rem;
-      }
-    </style>
-    <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
-  </head>
-  <body>
-    <!-- Original -->
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <style type="text/css">
+    body {
+      margin: 0;
+      border-top: none !important;
+    }
-    <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html#examples -->
-    <!-- <div class="react-container" data-config="/src/_stories/_mock/icon-no-text.json"></div> -->
-    <!-- <div class="react-container" data-config="/src/_stories/_mock/image-with-text.json"></div> -->
-    <div class="react-container" data-config="/src/_stories/_mock/button-and-text.json"></div>
-    <script type="module" src="./src/index.jsx"></script>
-  </body>
-</html>
+    .cdc-map-outer-container {
+      min-height: 100vh;
+    }
+  </style>
+  <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
+  <!-- This is temporary and for testing until Nunito/900 is added to TP -->
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap" rel="stylesheet" />
+  <style type="text/css">
+    @font-face {
+      font-family: 'Nunito';
+      font-weight: 900;
+      font-display: swap;
+      src: url('https://app.unpkg.com/@fontsource/nunito@5.0.18/files/files/nunito-latin-900-normal.woff2') format('woff2');
+    }
+  </style>
+</head>
+<body>
+  <!-- Original -->
+  <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html#examples -->
+  <!-- <div class="react-container" data-config="/src/_stories/_mock/icon-no-text.json"></div> -->
+  <!-- <div class="react-container" data-config="/src/_stories/_mock/image-with-text.json"></div> -->
+  <div class="react-container" data-config="/src/_stories/_mock/button-and-text.json"></div>
+  <script type="module" src="./src/index.tsx"></script>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.25.10",
+  "version": "4.25.11",
   "description": "React component for displaying HTML content from an outside link",
   "moduleName": "CdcMarkupInclude",
   "main": "dist/cdcmarkupinclude",
@@ -27,7 +27,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.25.10",
+    "@cdc/core": "^4.25.11",
     "axios": "^1.9.0",
     "chroma": "0.0.1",
     "interweave": "^13.1.1",
@@ -39,11 +39,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-dsv": "^3.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "vite": "^4.4.11",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^2.4.0"
   },
-  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
+  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
 }

package/src/CdcMarkupInclude.tsx CHANGED Viewed

@@ -72,7 +72,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
     noDataMessageText,
     markupVariables: contentEditorMarkupVariables
   } = contentEditor || {}
-  const data = configObj?.data
+  const data = configObj?.data || config?.data
   // Support markupVariables at root level or inside contentEditor
   const markupVariables = config?.markupVariables || contentEditorMarkupVariables || []
@@ -223,7 +223,9 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
         isEditor,
         showNoDataMessage,
         allowHideSection,
-        filters: config?.filters || []
+        filters: config?.filters || [],
+        datasets,
+        configDataKey: config?.dataKey
       })
     : { processedContent: parseBodyMarkup(urlMarkup), shouldHideSection: false, shouldShowNoDataMessage: false }
@@ -264,7 +266,13 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
                   </div>
                 </div>
               </div>
-              <FootnotesStandAlone config={configObj?.footnotes} filters={config?.filters || []} />
+              <FootnotesStandAlone
+                config={configObj?.footnotes}
+                filters={config?.filters || []}
+                markupVariables={markupVariables}
+                enableMarkupVariables={config?.enableMarkupVariables}
+                data={data}
+              />
             </div>
           </Layout.Responsive>
         )}

package/src/_stories/MarkupInclude.Editor.stories.tsx CHANGED Viewed

@@ -323,7 +323,7 @@ export const VisualSectionTests: Story = {
       }
     }
-    const themeButtons = Array.from(canvasElement.querySelectorAll('.color-palette li')) as HTMLElement[]
+    const themeButtons = Array.from(canvasElement.querySelectorAll('.color-palette button')) as HTMLElement[]
     expect(themeButtons.length).toBeGreaterThan(1)
     await performAndAssert(

package/src/components/EditorPanel.tsx CHANGED Viewed

@@ -9,33 +9,19 @@ import ConfigContext from '../ConfigContext'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 // Components
-import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox'
+import { TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import InputText from '@cdc/core/components/inputs/InputText'
 import Layout from '@cdc/core/components/Layout'
 import Accordion from '@cdc/core/components/ui/Accordion'
 import MarkupVariablesEditor from '@cdc/core/components/EditorPanel/components/MarkupVariablesEditor'
 import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
+import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
 import { Datasets } from '@cdc/core/types/DataSet'
 // styles
 import '@cdc/core/styles/v2/components/editor.scss'
 import './editorPanel.style.css'
-const headerColors = [
-  'theme-blue',
-  'theme-purple',
-  'theme-brown',
-  'theme-teal',
-  'theme-pink',
-  'theme-orange',
-  'theme-slate',
-  'theme-indigo',
-  'theme-cyan',
-  'theme-green',
-  'theme-amber'
-]
 type MarkupIncludeEditorPanelProps = {
   datasets?: Datasets
 }
@@ -97,7 +83,7 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
   const editorContent = (
     <Accordion>
       <Accordion.Section title='General'>
-        <InputText
+        <TextField
           value={title || ''}
           section='contentEditor'
           fieldName='title'
@@ -108,12 +94,11 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
       </Accordion.Section>
       <Accordion.Section title='Content Editor'>
         <span className='divider-heading'>Enter Markup</span>
-        <InputCheckbox
-          inline
+        <CheckBox
           value={useInlineHTML}
           section='contentEditor'
           fieldName='useInlineHTML'
-          label='Use Inline HTML&nbsp;'
+          label='Use Inline HTML'
           updateField={updateField}
         />
         <div className='column-edit'>
@@ -121,20 +106,19 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
             <>
               {/* HTML Textbox */}
               <div ref={textAreaInEditorContainer}>
-                <InputText
+                <TextField
                   value={inlineHTML}
                   section='contentEditor'
                   fieldName='inlineHTML'
                   label='HTML'
                   placeholder='Add HTML here'
                   type='textarea'
-                  rows={10}
                   updateField={updateField}
                 />
               </div>
             </>
           ) : (
-            <InputText
+            <TextField
               value={srcUrl || ''}
               section='contentEditor'
               fieldName='srcUrl'
@@ -145,56 +129,46 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
           )}
         </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
+      <Accordion.Section title='Visual' className='panel-visual'>
+        <HeaderThemeSelector
+          selectedTheme={theme}
+          onThemeSelect={theme => updateConfig({ ...config, theme })}
+          label='Theme'
+        />
+        <div className='checkbox-group'>
+          <CheckBox
             value={visual.border}
             section='visual'
             fieldName='border'
-            label='Display Border&nbsp;'
+            label='Display Border'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             value={visual.borderColorTheme}
             section='visual'
             fieldName='borderColorTheme'
-            label='Use Border Color Theme&nbsp;'
+            label='Use Border Color Theme'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             value={visual.accent}
             section='visual'
             fieldName='accent'
-            label='Use Accent Style&nbsp;'
+            label='Use Accent Style'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             value={visual.background}
             section='visual'
             fieldName='background'
-            label='Use Theme Background Color&nbsp;'
+            label='Use Theme Background Color'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             value={visual.hideBackgroundColor}
             section='visual'
             fieldName='hideBackgroundColor'
-            label='Hide Background Color&nbsp;'
+            label='Hide Background Color'
             updateField={updateField}
           />
         </div>
@@ -208,6 +182,8 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
         <MarkupVariablesEditor
           markupVariables={config.markupVariables || []}
           data={data || []}
+          datasets={datasets}
+          config={config}
           onChange={handleMarkupVariablesChange}
           enableMarkupVariables={config.enableMarkupVariables || false}
           onToggleEnable={handleToggleEnable}

package/src/scss/main.scss CHANGED Viewed

@@ -1,12 +1,4 @@
 .markup-include {
-  .checkbox-group {
-    padding: 16px;
-    border: 1px solid #c4c4c4;
-    border-radius: 8px;
-    margin-top: 8px;
-    margin-bottom: 24px;
-  }
   .cove-component__content-wrap {
     padding: 1rem 0;

package/src/store/markupInclude.reducer.ts CHANGED Viewed

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

package/src/components/Conditions.tsx DELETED Viewed

@@ -1,118 +0,0 @@
-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-warn btn-sm mt-0 ms-2' onClick={() => removeCondition(conditionIndex)}>
-          Remove
-        </button>
-      </div>
-      <div id={`condition_${conditionIndex}`}>
-        <label className='d-block'>
-          <span>Condition : </span>
-          <div className='pt-1'>
-            <select
-              className='ms-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='ms-1'
-              value={isOrIsNotEqualTo}
-              onChange={e => handleConditionChange(e.target.value, 'isOrIsNotEqualTo')}
-            >
-              <option value='is'>is</option>
-              <option value='isNot'>is not</option>
-            </select>
-            <select className='ms-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/Variables.tsx DELETED Viewed

@@ -1,218 +0,0 @@
-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'
-import { CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
-import Tooltip from '@cdc/core/components/ui/Tooltip'
-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 [addCommas, setAddCommas] = useState(variableConfig.addCommas)
-  const conditionLookup: Record<string, string[] | number[]> = useMemo(() => {
-    return columnNames.reduce((acc, column) => {
-      acc[column] = _.uniq(data.map(row => row[column]))
-      return acc
-    }, {})
-  }, [columnNames])
-  const handleUpdateAddCommas = () => {
-    setAddCommas(!addCommas)
-  }
-  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}}}`,
-      addCommas
-    }
-    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 ms-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} ms-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} ms-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>
-          <div className='pt-2'>
-            <CheckBox
-              value={addCommas}
-              label='Add Commas to Number'
-              updateField={handleUpdateAddCommas}
-              tooltip={
-                <Tooltip style={{ textTransform: 'none' }}>
-                  <Tooltip.Target>
-                    <Icon
-                      display='question'
-                      style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
-                    />
-                  </Tooltip.Target>
-                  <Tooltip.Content>
-                    <p>{`Selecting this option will add commas to the numeric value.`}</p>
-                  </Tooltip.Content>
-                </Tooltip>
-              }
-            />
-          </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='ms-2' onClick={handleVariableDoneClick} disabled={addConditionDisabled}>
-              Done
-            </button>
-          </div>
-        </fieldset>
-      )}
-    </>
-  )
-}
-export default VariableSection