@cdc/data-bite 4.25.8 → 4.25.10

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,5 @@
-import { memo, useContext, useEffect, useState } from 'react'
+import React, { memo, useContext, useEffect, useState } from 'react'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import _ from 'lodash'
 import {
   Accordion,
@@ -18,6 +19,7 @@ import { BITE_LOCATIONS, DATA_FUNCTIONS, IMAGE_POSITIONS, DATA_OPERATORS, HEADER
 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'
 
 const EditorPanel = memo(() => {
   const { config, updateConfig, loading, data, setParentConfig, isDashboard, isEditor } = useContext(Context)
@@ -51,7 +53,7 @@ const EditorPanel = memo(() => {
   }
 
   const convertStateToConfig = () => {
-    let strippedState = _.cloneDeep(config)
+    let strippedState = cloneConfig(config)
     //if(false === missingRequiredSections()) {
     //strippedState.newViz
     //}
@@ -239,7 +241,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>
@@ -688,6 +691,23 @@ 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>
             </Accordion>
           </form>
         </section>

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,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import '@cdc/core/styles/cove-main.scss'
-import './coreStyles_databite.scss'
 
 import CdcDataBite from './CdcDataBite'
 

package/src/test/CdcDataBite.test.jsx

@@ -1,6 +1,11 @@
-// Placeholder test until we add them in.
+import path from 'path'
+import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
+import { describe, it, expect } from 'vitest'
+
 describe('Data Bite', () => {
-  it('has a test.', async () => {
-    return true
+  it('Can be built in isolation', async () => {
+    const pkgDir = path.join(__dirname, '..')
+    const result = testStandaloneBuild(pkgDir)
+    expect(result).toBe(true)
   })
 })

package/src/types/Config.ts

@@ -1,4 +1,6 @@
 import { Version } from '@cdc/core/types/Version'
+import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
+import { VizFilter } from '@cdc/core/types/VizFilter'
 
 export type Config = {
   type: string
@@ -23,7 +25,7 @@ export type Config = {
     suffix: string
   }
   biteStyle: string
-  filters: Object[]
+  filters: VizFilter[]
   subtext: string
   title: string
   theme: string
@@ -40,4 +42,4 @@ export type Config = {
     isCompactStyle: boolean
   }
   version: Version
-}
+} & MarkupConfig