@cdc/data-bite 4.25.8 → 4.25.11

package/src/_stories/DataBite.stories.tsx

@@ -1,35 +1,59 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import DataBite from '../CdcDataBite'
-import { Config } from '../types/Config'
-
-const meta: Meta<typeof DataBite> = {
-  title: 'Components/Templates/Data Bite',
-  component: DataBite
-}
-
-type Story = StoryObj<typeof DataBite>
-
-export const Data_Bite_Circle_Average: Story = {
-  args: {
-    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json'
-  }
-}
-
-export const Data_Bite_Text_Max_Pic: Story = {
-  args: {
-    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json'
-  }
-}
-
-export const Data_Bite_Circle_Sum: Story = {
-  args: {
-    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json'
-  }
-}
-export const Data_Bite_Text_Average_Pic: Story = {
-  args: {
-    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json'
-  }
-}
-
-export default meta
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import DataBite from '../CdcDataBite'
+
+const meta: Meta<typeof DataBite> = {
+  title: 'Components/Templates/Data Bite',
+  component: DataBite,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Data Bite component for displaying key statistics and metrics. For comprehensive editor testing, see the "Editor Tests" section below.'
+      }
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof DataBite>
+
+// Gallery stories for visual documentation
+export const Data_Bite_Circle_Average: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json'
+  }
+}
+
+export const Data_Bite_Text_Max_Pic: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json'
+  }
+}
+
+export const Data_Bite_Circle_Sum: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json'
+  }
+}
+
+export const Data_Bite_Text_Average_Pic: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json'
+  }
+}
+
+// Simple editor mode story for basic rendering
+export const Editor_Mode_Basic: Story = {
+  args: {
+    configUrl: '/tests/fixtures/test-config.json',
+    isEditor: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Basic editor mode rendering. For comprehensive editor testing with interactions, see "Data Bite/Editor Tests" stories.'
+      }
+    }
+  }
+}

package/src/components/EditorPanel.jsx

@@ -1,4 +1,6 @@
-import { memo, useContext, useEffect, useState } from 'react'
+import React, { memo, useContext, useEffect, useState } from 'react'
+import { DATA_FUNCTIONS, DATA_OPERATORS } from '@cdc/core/helpers/constants'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import _ from 'lodash'
 import {
   Accordion,
@@ -8,16 +10,21 @@ import {
   AccordionItemPanel
 } from 'react-accessible-accordion'
 
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 import Context from '../context'
 import WarningImage from '@cdc/core/assets/icon-warning-circle.svg'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
-import { BITE_LOCATIONS, DATA_FUNCTIONS, IMAGE_POSITIONS, DATA_OPERATORS, HEADER_COLORS } from './../constants'
+import { BITE_LOCATIONS, IMAGE_POSITIONS } from './../constants'
 import Layout from '@cdc/core/components/Layout'
 import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import Button from '@cdc/core/components/elements/Button'
+import PanelMarkup from '@cdc/core/components/EditorPanel/components/PanelMarkup'
+import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
+
+import '@cdc/core/styles/v2/components/editor.scss'
 
 const EditorPanel = memo(() => {
   const { config, updateConfig, loading, data, setParentConfig, isDashboard, isEditor } = useContext(Context)
@@ -51,7 +58,7 @@ const EditorPanel = memo(() => {
   }
 
   const convertStateToConfig = () => {
-    let strippedState = _.cloneDeep(config)
+    let strippedState = cloneConfig(config)
     //if(false === missingRequiredSections()) {
     //strippedState.newViz
     //}
@@ -239,7 +246,8 @@ const EditorPanel = memo(() => {
                         <Tooltip.Content>
                           <p>
                             Enter supporting text to display below the data visualization, if applicable. The following
-                            HTML tags are supported: strong, em, sup, and sub.
+                            HTML tags are supported: strong, em, sup, and sub. You can also use markup variables like{' '}
+                            {'{{variable-name}}'} to display dynamic data.
                           </p>
                         </Tooltip.Content>
                       </Tooltip>
@@ -282,8 +290,8 @@ const EditorPanel = memo(() => {
                           Array.isArray(DATA_FUNCTIONS)
                             ? DATA_FUNCTIONS
                             : DATA_FUNCTIONS
-                            ? Object.values(DATA_FUNCTIONS)
-                            : []
+                              ? Object.values(DATA_FUNCTIONS)
+                              : []
                         }
                       />
                     </li>
@@ -405,7 +413,7 @@ const EditorPanel = memo(() => {
                 <AccordionItemHeading>
                   <AccordionItemButton>Visual</AccordionItemButton>
                 </AccordionItemHeading>
-                <AccordionItemPanel>
+                <AccordionItemPanel className='panel-visual accordion__panel accordion__panel--visual'>
                   <TextField
                     type='number'
                     value={config.biteFontSize}
@@ -459,22 +467,11 @@ const EditorPanel = memo(() => {
                       updateField={updateField}
                     />
                   </div>
-                  <label>
-                    <span className='edit-label'>Theme</span>
-                    <ul className='color-palette'>
-                      {HEADER_COLORS.map(palette => (
-                        <button
-                          title={palette}
-                          key={palette}
-                          onClick={e => {
-                            e.preventDefault()
-                            updateConfig({ ...config, theme: palette })
-                          }}
-                          className={config.theme === palette ? 'selected ' + palette : palette}
-                        />
-                      ))}
-                    </ul>
-                  </label>
+                  <HeaderThemeSelector
+                    selectedTheme={config.theme}
+                    onThemeSelect={theme => updateConfig({ ...config, theme })}
+                    label='Theme'
+                  />
                 </AccordionItemPanel>
               </AccordionItem>
 
@@ -568,19 +565,14 @@ const EditorPanel = memo(() => {
                                     <div className='accordion__panel-row align-center'>
                                       <div className='accordion__panel-col flex-auto'>If Value</div>
                                       <div className='accordion__panel-col flex-auto'>
-                                        <select
+                                        <Select
+                                          label=''
                                           value={option.arguments[0]?.operator || ''}
+                                          options={DATA_OPERATORS}
                                           onChange={e => {
                                             updateDynamicImage('operator', index, 0, e.target.value)
                                           }}
-                                        >
-                                          <option value='' disabled />
-                                          {DATA_OPERATORS.map((operator, index) => (
-                                            <option value={operator} key={index}>
-                                              {operator}
-                                            </option>
-                                          ))}
-                                        </select>
+                                        />
                                       </div>
                                       <div className='accordion__panel-col flex-grow flex-shrink'>
                                         <input
@@ -595,9 +587,13 @@ const EditorPanel = memo(() => {
 
                                     <div className='accordion__panel-row mb-2 align-center'>
                                       <div className='accordion__panel-col flex-grow'>
-                                        <select
-                                          className='border-dashed text-center'
+                                        <Select
+                                          label=''
                                           value={option.secondArgument ? 'and' : 'then'}
+                                          options={[
+                                            { value: 'then', label: 'Then' },
+                                            { value: 'and', label: 'And' }
+                                          ]}
                                           onChange={e => {
                                             if ('then' === e.target.value) {
                                               updateDynamicImage('secondArgument', index, null, false)
@@ -607,10 +603,7 @@ const EditorPanel = memo(() => {
                                               updateDynamicImage('secondArgument', index, null, true)
                                             }
                                           }}
-                                        >
-                                          <option value={'then'}>Then</option>
-                                          <option value={'and'}>And</option>
-                                        </select>
+                                        />
                                       </div>
                                     </div>
 
@@ -619,19 +612,14 @@ const EditorPanel = memo(() => {
                                         <div className='accordion__panel-row align-center'>
                                           <div className='accordion__panel-col flex-auto'>If Value</div>
                                           <div className='accordion__panel-col flex-auto'>
-                                            <select
+                                            <Select
+                                              label=''
                                               value={option.arguments[1]?.operator || ''}
+                                              options={DATA_OPERATORS}
                                               onChange={e => {
                                                 setDynamicArgument(index, 'operator', e.target.value)
                                               }}
-                                            >
-                                              <option value='' disabled />
-                                              {DATA_OPERATORS.map((operator, index) => (
-                                                <option value={operator} key={index}>
-                                                  {operator}
-                                                </option>
-                                              ))}
-                                            </select>
+                                            />
                                           </div>
                                           <div className='accordion__panel-col flex-grow flex-shrink'>
                                             <input
@@ -688,6 +676,24 @@ const EditorPanel = memo(() => {
                   </AccordionItemPanel>
                 </AccordionItem>
               )}
+
+              <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>Markup Variables</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  <PanelMarkup
+                    name='Markup Variables'
+                    markupVariables={config.markupVariables || []}
+                    data={data}
+                    enableMarkupVariables={config.enableMarkupVariables || false}
+                    onMarkupVariablesChange={variables => updateField(null, null, 'markupVariables', variables)}
+                    onToggleEnable={enabled => updateField(null, null, 'enableMarkupVariables', enabled)}
+                    withAccordion={false}
+                  />
+                </AccordionItemPanel>
+              </AccordionItem>
+              <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
             </Accordion>
           </form>
         </section>

package/src/constants.ts

@@ -1,25 +1,3 @@
-export const DATA_FUNCTION_MAX = 'Max'
-export const DATA_FUNCTION_COUNT = 'Count'
-export const DATA_FUNCTION_MEAN = 'Mean (Average)'
-export const DATA_FUNCTION_MEDIAN = 'Median'
-export const DATA_FUNCTION_MIN = 'Min'
-export const DATA_FUNCTION_MODE = 'Mode'
-export const DATA_FUNCTION_RANGE = 'Range'
-export const DATA_FUNCTION_SUM = 'Sum'
-export const DATA_FUNCTIONS = [
-  DATA_FUNCTION_COUNT,
-  DATA_FUNCTION_MAX,
-  DATA_FUNCTION_MEAN,
-  DATA_FUNCTION_MEDIAN,
-  DATA_FUNCTION_MIN,
-  DATA_FUNCTION_MODE,
-  DATA_FUNCTION_RANGE,
-  DATA_FUNCTION_SUM
-]
-
-export const BITE_LOCATION_TITLE = 'title'
-export const BITE_LOCATION_BODY = 'body'
-export const BITE_LOCATION_GRAPHIC = 'graphic'
 export const BITE_LOCATIONS = {
   graphic: 'Graphic',
   split: 'Split Graphic and Message',
@@ -34,33 +12,3 @@ export const IMAGE_POSITION_RIGHT = 'Right'
 export const IMAGE_POSITION_TOP = 'Top'
 export const IMAGE_POSITION_BOTTOM = 'Bottom'
 export const IMAGE_POSITIONS = [IMAGE_POSITION_LEFT, IMAGE_POSITION_RIGHT, IMAGE_POSITION_TOP, IMAGE_POSITION_BOTTOM]
-
-export const DATA_OPERATOR_LESS = '<'
-export const DATA_OPERATOR_GREATER = '>'
-export const DATA_OPERATOR_LESSEQUAL = '<='
-export const DATA_OPERATOR_GREATEREQUAL = '>='
-export const DATA_OPERATOR_EQUAL = '='
-export const DATA_OPERATOR_NOTEQUAL = '≠'
-
-export const DATA_OPERATORS = [
-  DATA_OPERATOR_LESS,
-  DATA_OPERATOR_GREATER,
-  DATA_OPERATOR_LESSEQUAL,
-  DATA_OPERATOR_GREATEREQUAL,
-  DATA_OPERATOR_EQUAL,
-  DATA_OPERATOR_NOTEQUAL
-]
-
-export const HEADER_COLORS = [
-  'theme-blue',
-  'theme-purple',
-  'theme-brown',
-  'theme-teal',
-  'theme-pink',
-  'theme-orange',
-  'theme-slate',
-  'theme-indigo',
-  'theme-cyan',
-  'theme-green',
-  'theme-amber'
-]

package/src/data/initial-state.js

@@ -36,5 +36,7 @@ export default {
   },
   general: {
     isCompactStyle: false
-  }
+  },
+  markupVariables: [],
+  enableMarkupVariables: false
 }

package/src/index.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import '@cdc/core/styles/cove-main.scss'
-import './coreStyles_databite.scss'
+import '@cdc/core/components/EditorPanel/EditorPanel.styles.css'
 
 import CdcDataBite from './CdcDataBite'