@cdc/data-bite 4.26.2 → 4.26.3

package/src/components/GradientBite.jsx

@@ -5,15 +5,17 @@ export const KPIComponent = ({ label, value }) => {
   return (
     <div className='cove-component__content kpi-container'>
       <div className='kpi-content'>
-        <div className='label-container'>
-          <span className='label'>
-            <strong>{label}</strong>
-          </span>
-        </div>
-        <div className='value-container'>
-          <span className='value'>
-            <strong>{value}</strong>
-          </span>
+        <div className='kpi-main'>
+          <div className='label-container'>
+            <span className='label'>
+              <strong>{label}</strong>
+            </span>
+          </div>
+          <div className='value-container'>
+            <span className='value'>
+              <strong>{value}</strong>
+            </span>
+          </div>
         </div>
       </div>
     </div>

package/src/data/initial-state.js

@@ -27,12 +27,13 @@ export default {
   theme: 'theme-blue',
   shadow: false,
   visual: {
-    border: false,
+    border: true,
     accent: false,
     background: false,
     hideBackgroundColor: false,
     borderColorTheme: false,
-    showTitle: true
+    showTitle: true,
+    useWrap: false
   },
   general: {
     isCompactStyle: false

package/src/scss/bite.scss

@@ -1,3 +1,5 @@
+@import '@cdc/core/styles/layout/wrapper-padding';
+
 &.theme-blue {
   .bite-value {
     color: var(--primary);
@@ -67,32 +69,69 @@
 // TODO after v2 refactor remove header reference colors
 // Use .font-color/.bg-color, etc. in color definitions or something similar
 // Remove box shadows if we're no longer using them
-&.cdc-open-viz-module.isEditor .sidebar + .cove-component__content {
+&.cove-visualization.is-editor .sidebar+.cove-visualization__body {
   margin: 3em auto 0 !important;
   max-width: 35em !important;
-  background-color: initial;
+  background-color: var(--lightestGray);
   height: fit-content;
 }
 
-.sidebar + .cove-component__content .bite-content-container:not(.component--hide-background-color) {
-  background-color: white;
+.sidebar+.cove-visualization__body .bite-content-container:not(.component--hide-background-color) {
+  background-color: var(--lightestGray);
 }
 
-.cove-component__content {
-  padding: 0;
-  // Visual: Shadow
-  &.shadow {
-    box-shadow: rgba(0, 0, 0, 0.2) 0 3px 10px;
+.cove-visualization__body {
+  @include cove-visualization-body-padding;
+  background: var(--lightestGray);
+
+  &.component--hide-background-color {
+    background: transparent;
   }
 
-  .cove-component__inner {
-    padding: 1rem !important;
+
+  &.bite__style--gradient {
+    background: transparent !important;
   }
 
+  >.cove-visualization__body-wrap {
+    @include cove-visualization-body-wrap-inline-padding;
+  }
+
+
   // General: Bite Style > Graphic
   &.bite__style--graphic {
+    .bite-content-container {
+      display: flex;
+      align-items: flex-start;
+      gap: 0;
+    }
+
     .bite-content {
       flex: 1;
+      min-width: 0;
+      justify-content: space-between;
+      gap: 0;
+      align-self: stretch;
+    }
+
+    .bite-content__text-wrap {
+      flex: 0 0 auto;
+    }
+
+    .bite-subtext {
+      align-self: flex-end;
+      width: 100%;
+      line-height: var(--visualization-body-line-height);
+    }
+
+    .bite-right .bite-content-container,
+    .bite-bottom .bite-content-container {
+      flex-direction: row-reverse;
+    }
+
+    .callout {
+      width: 33%;
+      margin: 0;
     }
   }
 
@@ -106,11 +145,13 @@
     .bite-content {
       flex-direction: row !important;
     }
+
     .bite-value {
       flex-basis: 25%;
       align-self: center;
       text-align: center;
     }
+
     .bite-content__text-wrap {
       flex: 75% !important;
     }
@@ -118,15 +159,17 @@
 
   // TP5 Style (default: callout with blue background)
   &.bite__style--tp5 {
-    padding: 0 !important;
     border: none !important;
-    height: 100%; // Allow height to fill parent container
+    padding: 0 !important;
     background: none !important;
     container-type: inline-size;
 
+    >.cove-visualization__body-wrap {
+      padding: 0 !important;
+    }
+
     .cdc-callout {
       gap: 0.7rem;
-      box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
       border: 1px solid #dff2f6 !important;
       margin: 0 !important;
       padding: 1.25rem;
@@ -155,6 +198,15 @@
       }
     }
 
+    &.use-wrap .cdc-callout__body {
+      flex-wrap: wrap;
+
+      .cdc-callout__databite,
+      .cdc-callout__content {
+        flex-basis: 100%;
+      }
+    }
+
     .cdc-callout__databite {
       padding-top: 2px;
       width: auto;
@@ -171,49 +223,50 @@
       height: auto;
     }
 
+
     .cdc-callout__content {
-      font-size: 1rem;
+      row-gap: var(--cove-visualization-section-gap, 1.5rem);
     }
 
     .bite-subtext {
-      margin-top: auto; // Push to bottom on desktop
       font-style: italic;
+      line-height: var(--visualization-body-line-height);
     }
 
     // White background variant (when "Use White Background Style" is checked)
     &.white-background-style {
+      padding: 0 !important;
       background: white;
 
+      >.cove-visualization__body-wrap {
+        padding: 0 !important;
+      }
+
       .cdc-callout {
         border: 1px solid #009ec1 !important;
         background: transparent;
-        box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
       }
     }
 
-    // White background with border (when both white background and Display Border are checked)
-    &.white-background-style.display-border {
-      .cdc-callout {
-        box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
-      }
-    }
+  }
+
+  &.component--hide-background-color .bite .bite-content-container {
+    background: transparent;
   }
 
   // General: Compact View
-  &.bite--isCompactStyle .bite .cove-component__content .bite-content {
+  &.bite--is-compact-style .bite .bite-content-container .bite-content {
     align-items: center;
+
     p.bite-text {
       margin-bottom: 0;
     }
   }
 
-  &.bite--isCompactStyle .bite .cove-component__content {
+  &.bite--is-compact-style .bite .bite-content-container {
     align-items: center;
   }
 
-  .cove-component__header + .bite {
-    border-top: 0;
-  }
   .bite {
     position: relative;
     overflow: hidden;
@@ -225,9 +278,6 @@
       border-top-left-radius: 3px;
       border-top-right-radius: 3px;
     }
-    .bite-content-container.component--hideBackgroundColor {
-      background: transparent;
-    }
 
     &.no-borders {
       border: none;
@@ -238,6 +288,7 @@
       display: flex;
       flex-wrap: wrap;
       width: 100%;
+      row-gap: var(--cove-visualization-section-gap, 1.5rem);
     }
 
     &.theme-blue {
@@ -318,10 +369,8 @@
       border-radius: 0.3em;
     }
 
-    .cove-component__content {
+    .bite-content-container {
       display: flex;
-      padding: 1em !important;
-      justify-content: space-between;
 
       .bite-content {
         display: flex;
@@ -339,12 +388,10 @@
         }
 
         .bite-text {
-          margin-bottom: 15px;
           color: #222;
         }
 
         .bite-subtext {
-          font-size: 0.9em;
           font-style: italic;
           flex-basis: 100%;
           width: 100%;
@@ -367,13 +414,14 @@
         width: 33%;
         margin-left: 1.5em;
       }
-      .cove-component__content {
+
+      .bite-content-container {
         flex-direction: row-reverse;
       }
     }
 
     &.bite-top {
-      .cove-component__content {
+      .bite-content-container {
         flex-direction: column;
 
         .bite-image {
@@ -392,7 +440,7 @@
     }
 
     &.bite-bottom {
-      .cove-component__content {
+      .bite-content-container {
         flex-direction: column;
 
         .bite-image {
@@ -411,7 +459,7 @@
     }
 
     &.bite-back {
-      .cove-component__content {
+      .bite-content-container {
         .bite-image {
           border-radius: 0 0 0.3em 0.3em;
           position: absolute;
@@ -423,29 +471,25 @@
     }
 
     // General: Compact View
-    &.bite--isCompactStyle .bite .cove-component__content .bite-content {
+    &.bite--is-compact-style .bite-content-container .bite-content {
       align-items: center;
+
       p.bite-text {
         margin-bottom: 0;
       }
     }
 
-    &.bite--isCompactStyle .bite .cove-component__content {
+    &.bite--is-compact-style .bite-content-container {
       align-items: center;
     }
 
-    .cove-component__header + .bite {
-      border-top: 0;
-    }
   }
 }
 
-.cove-component__content {
-  background: var(--lightestGray);
-
+.cove-visualization__body {
   &:not(.no-borders) {
     border-color: var(--lightGray);
     border-width: 1px;
     border-style: solid;
   }
-}
+}

package/src/scss/kpi.scss

@@ -2,10 +2,9 @@
   border-radius: 10px;
   border: 1px solid rgba(0, 0, 0, 0.25) !important;
   box-sizing: border-box;
-  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
   display: flex;
   padding: 5px !important;
-  height: 70px;
+  min-height: 70px;
   width: 100%;
   position: relative;
   display: flex;
@@ -15,9 +14,15 @@
   background: linear-gradient(90deg, rgba(8, 132, 136, 1) 19%, rgba(255, 255, 255, 1) 74%);
   border-radius: 10px;
   display: flex;
+  flex-direction: column;
   flex: 1;
 }
 
+.kpi-main {
+  display: flex;
+  min-height: 70px;
+}
+
 .label-container,
 .value-container {
   display: flex;
@@ -44,6 +49,12 @@
   font-size: 24px;
 }
 
+.kpi-subtext {
+  padding: 0 1rem 1rem 30px;
+  font-size: 0.9em;
+  font-style: italic;
+}
+
 //small
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .label {
@@ -65,4 +76,8 @@
   .value {
     font-size: 14px;
   }
+
+  .kpi-subtext {
+    padding-left: 10px;
+  }
 }

package/src/scss/main.scss

@@ -1,4 +1,4 @@
-.cdc-open-viz-module.type-data-bite {
+.cove-visualization.type-data-bite {
   @import 'bite';
   @import 'editor-panel';
 

package/src/test/CdcDataBite.test.jsx

@@ -1,11 +1,32 @@
-import path from 'path'
+import path from 'node:path'
+import React from 'react'
+import { render, screen } from '@testing-library/react'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
+import CdcDataBite from '../CdcDataBite'
 
 describe('Data Bite', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
-    const result = testStandaloneBuild(pkgDir)
+    const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
+
+  it('renders when config.general is omitted', async () => {
+    render(
+      <CdcDataBite
+        config={{
+          type: 'data-bite',
+          theme: 'theme-blue',
+          title: 'Test title',
+          biteBody: 'Test body',
+          subtext: 'Test subtext',
+          data: []
+        }}
+      />
+    )
+
+    expect(await screen.findByText('Test body')).toBeInTheDocument()
+    expect(screen.getByText('Test subtext')).toBeInTheDocument()
+  })
 })

package/src/types/Config.ts

@@ -5,6 +5,7 @@ import { VizFilter } from '@cdc/core/types/VizFilter'
 export type Config = {
   type: string
   data: Object[]
+  dataMetadata?: Record<string, string>
   dataBite: string
   dataFunction: string
   dataColumn: string
@@ -29,6 +30,7 @@ export type Config = {
   subtext: string
   title: string
   theme: string
+  /** @deprecated shadows have been removed from data bites */
   shadow: boolean
   visual: {
     border: boolean
@@ -38,9 +40,11 @@ export type Config = {
     borderColorTheme: boolean
     showTitle: boolean
     whiteBackground: boolean
+    useWrap?: boolean
   }
   general: {
     isCompactStyle: boolean
   }
   version: Version
+  locale: string
 } & MarkupConfig

package/tests/fixtures/data-bite-config-with-metadata.json

@@ -0,0 +1,35 @@
+{
+  "type": "data-bite",
+  "dataUrl": "/packages/data-bite/tests/fixtures/data-with-metadata.json",
+  "dataBite": "",
+  "dataFunction": "Mean (Average)",
+  "dataColumn": "Insured Rate",
+  "bitePosition": "Left",
+  "biteFontSize": "24",
+  "imageData": {
+    "display": "none",
+    "url": "",
+    "options": []
+  },
+  "biteBody": "Test data bite body text",
+  "dataFormat": {
+    "roundToPlace": 0,
+    "commas": true,
+    "prefix": "",
+    "suffix": "%"
+  },
+  "filters": [],
+  "biteStyle": "graphic",
+  "enableMarkupVariables": true,
+  "markupVariables": [
+    {
+      "name": "Last Updated",
+      "tag": "{{lastUpdated}}",
+      "metadataKey": "lastUpdated",
+      "conditions": []
+    }
+  ],
+  "subtext": "Data last updated {{lastUpdated}}",
+  "title": "Insurance Coverage Rate",
+  "theme": "theme-blue"
+}

package/tests/fixtures/data-with-metadata.json

@@ -0,0 +1,30 @@
+{
+  "lastUpdated": "January 15, 2026",
+  "source": "CDC NREVSS",
+  "data": [
+    {
+      "Insured Rate": "43",
+      "Coverage Status": "Insured",
+      "state": "Alabama",
+      "Year (Good filter option)": "2010"
+    },
+    {
+      "Insured Rate": "72.7",
+      "Coverage Status": "Insured",
+      "state": "Arizona",
+      "Year (Good filter option)": "2010"
+    },
+    {
+      "Insured Rate": "37.2",
+      "Coverage Status": "Insured",
+      "state": "California",
+      "Year (Good filter option)": "2010"
+    },
+    {
+      "Insured Rate": "50.6",
+      "Coverage Status": "Insured",
+      "state": "Colorado",
+      "Year (Good filter option)": "2010"
+    }
+  ]
+}

package/src/images/callout-flag.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="481.000000pt" height="563.000000pt" viewBox="0 0 481.000000 563.000000" preserveAspectRatio="xMidYMid meet">
-  <g transform="translate(0.000000,563.000000) scale(0.100000,-0.100000)" fill="#2c7a99" stroke="none">
-    <path d="M890 5514 c-161 -43 -308 -201 -354 -381 -14 -55 -16 -314 -16 -2527 0 -2015 2 -2466 13 -2466 7 0 51 14 97 30 47 17 92 33 100 35 8 2 16 4 18 5 1 2 7 4 12 5 6 1 11 3 13 4 1 2 13 4 26 7 14 2 30 9 38 15 7 6 13 8 13 4 0 -4 7 -2 15 5 8 7 15 10 15 6 0 -3 17 1 38 10 49 21 856 293 905 305 21 5 45 13 55 19 9 5 40 16 67 24 28 8 162 52 299 99 l249 85 151 -53 c83 -29 253 -90 379 -134 264 -94 556 -198 974 -346 164 -58 308 -110 321 -115 13 -6 27 -10 33 -10 11 0 8 4951 -4 4994 -22 80 -84 183 -152 252 -75 76 -141 114 -233 133 -38 8 -477 11 -1535 10 -1268 0 -1490 -3 -1537 -15z m2687 -1570 c49 -31 82 -134 64 -201 -10 -37 -41 -64 -422 -369 -227 -181 -430 -341 -452 -356 -43 -30 -84 -35 -136 -17 -17 6 -156 107 -309 224 l-277 213 -40 -31 c-50 -39 -318 -259 -325 -267 -3 -3 -27 -24 -55 -45 -27 -22 -55 -44 -61 -50 -86 -77 -253 -202 -277 -207 -20 -4 -53 -1 -84 8 -69 19 -105 64 -111 140 -6 70 8 100 69 149 105 84 134 107 168 133 19 15 92 74 164 132 71 58 144 116 162 130 86 68 114 90 187 150 124 102 156 120 206 120 23 0 57 -7 75 -16 18 -9 145 -103 282 -209 283 -217 293 -224 303 -210 4 6 42 39 86 74 43 35 88 71 100 81 31 27 153 127 231 190 37 30 111 91 164 135 142 119 217 145 288 99z m-1431 -983 c60 -44 59 -29 62 -601 3 -596 4 -589 -70 -638 -76 -49 -171 -29 -228 50 l-30 41 0 526 c0 591 -3 569 75 623 35 25 48 28 100 25 44 -2 69 -9 91 -26z m1252 15 c37 -19 67 -55 81 -95 8 -25 10 -183 9 -555 -3 -579 -1 -555 -71 -603 -67 -45 -144 -35 -211 27 l-41 39 -3 543 -2 544 23 35 c46 68 149 99 215 65z m-610 -343 c71 -57 71 -57 71 -448 0 -322 -1 -353 -19 -392 -27 -60 -83 -95 -155 -95 -63 -1 -95 16 -132 72 -23 33 -23 36 -23 407 0 406 -1 401 57 455 34 32 54 38 116 34 35 -2 57 -11 85 -33z m-1313 -142 c54 -24 92 -71 100 -124 4 -23 5 -159 3 -302 -3 -293 -3 -293 -82 -343 -66 -41 -160 -30 -207 24 -34 40 -39 84 -39 361 0 303 3 322 61 366 53 39 105 45 164 18z"/>
-  </g>
-</svg>