@cdc/data-bite 4.25.10 → 4.26.1

package/examples/tp5-style.json

@@ -0,0 +1,59 @@
+{
+  "type": "data-bite",
+  "data": [
+    {
+      "Category": "Total",
+      "Value": 1234
+    },
+    {
+      "Category": "Group A",
+      "Value": 5678
+    },
+    {
+      "Category": "Group B",
+      "Value": 9012
+    },
+    {
+      "Category": "Group C",
+      "Value": 3456
+    }
+  ],
+  "dataBite": "",
+  "dataFunction": "Mean (Average)",
+  "dataColumn": "Value",
+  "bitePosition": "Left",
+  "biteFontSize": 36,
+  "fontSize": "medium",
+  "biteBody": "Highlight a statistic, data point, or key fact about a topic using the relevant layout option:",
+  "imageData": {
+    "display": "none",
+    "url": "",
+    "alt": "",
+    "options": []
+  },
+  "dataFormat": {
+    "roundToPlace": 0,
+    "commas": true,
+    "prefix": "",
+    "suffix": ""
+  },
+  "biteStyle": "tp5",
+  "filters": [],
+  "subtext": "*This is an optional subtext or citation.",
+  "title": "Data / Fact",
+  "theme": "theme-blue",
+  "shadow": false,
+  "visual": {
+    "border": false,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false,
+    "showTitle": true
+  },
+  "general": {
+    "isCompactStyle": false
+  },
+  "markupVariables": [],
+  "enableMarkupVariables": false
+}

package/examples/tp5-white-background.json

@@ -0,0 +1,60 @@
+{
+  "type": "data-bite",
+  "data": [
+    {
+      "Category": "Total",
+      "Value": 1234
+    },
+    {
+      "Category": "Group A",
+      "Value": 5678
+    },
+    {
+      "Category": "Group B",
+      "Value": 9012
+    },
+    {
+      "Category": "Group C",
+      "Value": 3456
+    }
+  ],
+  "dataBite": "",
+  "dataFunction": "Mean (Average)",
+  "dataColumn": "Value",
+  "bitePosition": "Left",
+  "biteFontSize": 36,
+  "fontSize": "medium",
+  "biteBody": "Highlight a statistic, data point, or key fact about a topic using the relevant layout option:",
+  "imageData": {
+    "display": "none",
+    "url": "",
+    "alt": "",
+    "options": []
+  },
+  "dataFormat": {
+    "roundToPlace": 0,
+    "commas": true,
+    "prefix": "",
+    "suffix": ""
+  },
+  "biteStyle": "tp5",
+  "filters": [],
+  "subtext": "*This is an optional subtext or citation.",
+  "title": "Data / Fact",
+  "theme": "theme-blue",
+  "shadow": false,
+  "visual": {
+    "border": false,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false,
+    "showTitle": true,
+    "whiteBackground": true
+  },
+  "general": {
+    "isCompactStyle": false
+  },
+  "markupVariables": [],
+  "enableMarkupVariables": false
+}

package/index.html

@@ -9,8 +9,9 @@
         border-top: none !important;
       }
 
-      .cdc-open-viz-module {
-        min-height: 100vh;
+      /* Add 1rem padding to mimic DFE when editor is not visible */
+      .cdc-open-viz-module:not(.isEditor) {
+        padding: 1rem;
       }
     </style>
     <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
@@ -20,11 +21,14 @@
     <!-- <div class="react-container" data-config="/examples/sankey-example-data.json"></div> -->
 
     <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data_bites.html#examples -->
-    <div class="react-container" data-config="/examples/gallery/calculated-average.json"></div>
+    <!-- <div class="react-container" data-config="/examples/gallery/calculated-average.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/gallery/calculated-with-pic.json"></div> -->
-    <div class="react-container" data-config="/examples/gallery/max-value.json"></div>
+    <!-- <div class="react-container" data-config="/examples/gallery/max-value.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/gallery/sum-of-data.json"></div> -->
 
+    <!-- TP5 Style Example -->
+    <div class="react-container" data-config="/examples/tp5-style.json"></div>
+
     <script type="module" src="./src/index.jsx"></script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/data-bite",
-  "version": "4.25.10",
+  "version": "4.26.1",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcDataBite",
   "main": "dist/cdcdatabite",
@@ -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.26.1",
     "chroma-js": "3.1.2",
     "html-react-parser": "5.2.3",
     "lodash": "^4.17.21",
@@ -41,9 +41,9 @@
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^4.4.11",
+    "sass": "^1.89.2",
     "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vite-plugin-svgr": "^2.4.0"
+    "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
+  "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16"
 }

package/src/CdcDataBite.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useReducer } from 'react'
+import { useEffect, useCallback, useReducer } from 'react'
 import { Fragment } from 'react'
 
 // contexts & initial state
@@ -31,20 +31,21 @@ import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import { Config } from './types/Config'
 import dataBiteReducer from './store/db.reducer'
+import { IMAGE_POSITION_LEFT, IMAGE_POSITION_RIGHT, IMAGE_POSITION_TOP, IMAGE_POSITION_BOTTOM } from './constants'
+
+// images
+import CalloutFlag from './images/callout-flag.svg?url'
+
 import {
   DATA_FUNCTION_COUNT,
   DATA_FUNCTION_MAX,
   DATA_FUNCTION_MEAN,
   DATA_FUNCTION_MEDIAN,
-  DATA_FUNCTION_MIN,
   DATA_FUNCTION_MODE,
+  DATA_FUNCTION_MIN,
   DATA_FUNCTION_RANGE,
-  DATA_FUNCTION_SUM,
-  IMAGE_POSITION_LEFT,
-  IMAGE_POSITION_RIGHT,
-  IMAGE_POSITION_TOP,
-  IMAGE_POSITION_BOTTOM
-} from './constants'
+  DATA_FUNCTION_SUM
+} from '@cdc/core/helpers/constants'
 
 // styles
 import './scss/main.scss'
@@ -597,70 +598,113 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
       <>
         {isEditor && <EditorPanel />}
         <Layout.Responsive isEditor={isEditor}>
-          <div className={`cove-component__content`}>
+          <div
+            className={`cove-component__content ${showBite && 'tp5' === biteStyle ? 'bite__style--tp5' : ''} ${
+              showBite && 'tp5' === biteStyle && config.visual?.whiteBackground ? 'white-background-style' : ''
+            } ${
+              showBite && 'tp5' === biteStyle && config.visual?.whiteBackground && config.visual?.border
+                ? 'display-border'
+                : ''
+            }`}
+          >
             {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
             {(!config.dataColumn || !config.dataFunction) && <Confirm />}
-            <Title
-              showTitle={config.visual?.showTitle}
-              config={config}
-              title={processContentWithMarkup(title)}
-              isDashboard={isDashboard}
-              classes={['bite-header', `${config.theme}`]}
-            />
-            <div className={`bite ${biteClasses.join(' ')}`}>
-              <div className={`bite-content-container ${contentClasses.join(' ')}`}>
-                {showBite && 'graphic' === biteStyle && isTop && (
-                  <CircleCallout
-                    theme={config.theme}
-                    text={calculateDataBite()}
-                    biteFontSize={biteFontSize}
-                    dataFormat={dataFormat}
-                  />
+            {showBite && biteStyle === 'tp5' ? (
+              <div
+                className={`bite-content cdc-callout d-flex flex-column h-100 ${
+                  !config.visual?.whiteBackground ? 'dfe-block cdc-callout--data' : ''
+                }`}
+              >
+                {/* Icon shows by default, hidden when white background is enabled */}
+                {!config.visual?.whiteBackground && (
+                  <img src={CalloutFlag} alt='' className='cdc-callout__flag' aria-hidden='true' />
                 )}
-                {isTop && <DataImage />}
-                <div className={`bite-content`}>
-                  {showBite && 'title' === biteStyle && (
-                    <div className='bite-value' style={{ fontSize: biteFontSize + 'px' }}>
-                      {calculateDataBite()}
-                    </div>
-                  )}
-                  {showBite && 'split' === biteStyle && (
-                    <div className='bite-value' style={{ fontSize: biteFontSize + 'px' }}>
-                      {calculateDataBite()}
-                    </div>
+
+                {config.visual?.showTitle && title && title.trim() && (
+                  <h3 className='cdc-callout__heading fw-bold flex-shrink-0 d-flex align-items-start'>
+                    <span>{parse(processContentWithMarkup(title))}</span>
+                  </h3>
+                )}
+                <div className='cdc-callout__body d-flex flex-row align-content-start flex-grow-1'>
+                  {showBite && (
+                    <div className='cdc-callout__databite flex-shrink-0  me-3'>{calculateDataBite(true)}</div>
                   )}
-                  <Fragment>
-                    <div className='bite-content__text-wrap'>
-                      <p className='bite-text'>
-                        {showBite && 'body' === biteStyle && (
-                          <span className='bite-value data-bite-body' style={{ fontSize: biteFontSize + 'px' }}>
-                            {calculateDataBite()}
-                          </span>
-                        )}
-                        {parse(processContentWithMarkup(biteBody))}
+                  <div className='cdc-callout__content flex-grow-1 d-flex flex-column  min-w-0'>
+                    <p className='mb-0'>{parse(processContentWithMarkup(biteBody))}</p>
+                    {subtext && !config.general.isCompactStyle && (
+                      <p className='bite-subtext fst-italic flex-shrink-0 mt-3'>
+                        {parse(processContentWithMarkup(subtext))}
                       </p>
-                      {showBite && 'end' === biteStyle && (
-                        <span className='bite-value data-bite-body' style={{ fontSize: biteFontSize + 'px' }}>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <>
+                <Title
+                  showTitle={config.visual?.showTitle}
+                  titleStyle='legacy'
+                  config={config}
+                  title={processContentWithMarkup(title)}
+                  isDashboard={isDashboard}
+                  classes={['bite-header', `${config.theme}`]}
+                />
+                <div className={`bite ${biteClasses.join(' ')}`}>
+                  <div className={`bite-content-container ${contentClasses.join(' ')}`}>
+                    {showBite && 'graphic' === biteStyle && isTop && (
+                      <CircleCallout
+                        theme={config.theme}
+                        text={calculateDataBite()}
+                        biteFontSize={biteFontSize}
+                        dataFormat={dataFormat}
+                      />
+                    )}
+                    {isTop && <DataImage />}
+                    <div className={`bite-content`}>
+                      {showBite && 'title' === biteStyle && (
+                        <div className='bite-value' style={{ fontSize: biteFontSize + 'px' }}>
                           {calculateDataBite()}
-                        </span>
+                        </div>
                       )}
-                      {subtext && !config.general.isCompactStyle && (
-                        <p className='bite-subtext'>{parse(processContentWithMarkup(subtext))}</p>
+                      {showBite && 'split' === biteStyle && (
+                        <div className='bite-value' style={{ fontSize: biteFontSize + 'px' }}>
+                          {calculateDataBite()}
+                        </div>
                       )}
+                      <Fragment>
+                        <div className='bite-content__text-wrap'>
+                          <p className='bite-text'>
+                            {showBite && 'body' === biteStyle && (
+                              <span className='bite-value data-bite-body' style={{ fontSize: biteFontSize + 'px' }}>
+                                {calculateDataBite()}
+                              </span>
+                            )}
+                            {parse(processContentWithMarkup(biteBody))}
+                          </p>
+                          {showBite && 'end' === biteStyle && (
+                            <span className='bite-value data-bite-body' style={{ fontSize: biteFontSize + 'px' }}>
+                              {calculateDataBite()}
+                            </span>
+                          )}
+                          {subtext && !config.general.isCompactStyle && (
+                            <p className='bite-subtext'>{parse(processContentWithMarkup(subtext))}</p>
+                          )}
+                        </div>
+                      </Fragment>
                     </div>
-                  </Fragment>
+                    {isBottom && <DataImage />}
+                    {showBite && 'graphic' === biteStyle && !isTop && (
+                      <CircleCallout
+                        theme={config.theme}
+                        text={calculateDataBite()}
+                        biteFontSize={biteFontSize}
+                        dataFormat={dataFormat}
+                      />
+                    )}
+                  </div>
                 </div>
-                {isBottom && <DataImage />}
-                {showBite && 'graphic' === biteStyle && !isTop && (
-                  <CircleCallout
-                    theme={config.theme}
-                    text={calculateDataBite()}
-                    biteFontSize={biteFontSize}
-                    dataFormat={dataFormat}
-                  />
-                )}
-              </div>
-            </div>
+              </>
+            )}
           </div>
           {link && link}
         </Layout.Responsive>

package/src/_stories/DataBite.Editor.stories.tsx

@@ -56,9 +56,12 @@ export const BasicEditorLoadingTests: Story = {
     await waitForEditor(canvas)
 
     // Verify all three main accordion sections are present
-    const generalButton = canvas.getByRole('button', { name: /general/i })
-    const dataButton = canvas.getByRole('button', { name: /data/i })
-    const visualButton = canvas.getByRole('button', { name: /visual/i })
+    // Use waitFor to give VisualSection time to render
+    const generalButton = await canvas.findByRole('button', { name: /general/i })
+    const dataButton = await canvas.findByRole('button', { name: /data/i })
+
+    // Find Visual section accordion button
+    const visualButton = await canvas.findByRole('button', { name: /visual/i }, { timeout: 5000 })
 
     await expect(generalButton).toBeVisible()
     await expect(dataButton).toBeVisible()

package/src/_stories/DataBite.stories.tsx

@@ -42,6 +42,34 @@ export const Data_Bite_Text_Average_Pic: Story = {
   }
 }
 
+export const Data_Bite_TP5_Style: Story = {
+  args: {
+    configUrl: '/packages/data-bite/examples/tp5-style.json'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TP5 Style - A new layout style that displays the data value and message side by side, centered. The title appears above, and subtext appears below the message. On mobile devices, the message wraps below the data value. This style mimics the CDC Template Package 5.0 callout component design.'
+      }
+    }
+  }
+}
+
+export const Data_Bite_TP5_White_Background: Story = {
+  args: {
+    configUrl: '/packages/data-bite/examples/tp5-white-background.json'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TP5 Style with White Background - This variant uses a white background with a 1px border and 6px border radius, providing a cleaner look while maintaining the TP5 layout style.'
+      }
+    }
+  }
+}
+
 // Simple editor mode story for basic rendering
 export const Editor_Mode_Basic: Story = {
   args: {