@cdc/data-bite 4.25.10 → 4.26.1

package/src/scss/bite.scss

@@ -1,4 +1,3 @@
-
 &.theme-blue {
   .bite-value {
     color: var(--primary);
@@ -80,6 +79,7 @@
 }
 
 .cove-component__content {
+  padding: 0;
   // Visual: Shadow
   &.shadow {
     box-shadow: rgba(0, 0, 0, 0.2) 0 3px 10px;
@@ -116,6 +116,89 @@
     }
   }
 
+  // TP5 Style (default: callout with blue background)
+  &.bite__style--tp5 {
+    padding: 0 !important;
+    border: none !important;
+    height: 100%; // Allow height to fill parent container
+    background: none !important;
+    container-type: inline-size;
+
+    .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;
+      border-radius: 0.25rem;
+      background-color: var(--colors-cyan-10, #eff9fa);
+    }
+
+    // Most layout handled by Bootstrap classes in JSX, minimal custom CSS
+    .cdc-callout__heading {
+      padding-right: 1.5rem;
+      width: 100%;
+      font-size: 1.1rem;
+      font-family: var(--fonts-nunito) !important;
+    }
+
+    .cdc-callout__body {
+      flex-wrap: nowrap;
+      gap: 0.5rem;
+      flex: auto;
+    }
+
+    // Container query: wrap when width is less than 576px
+    @container (max-width: 576px) {
+      .cdc-callout__body {
+        flex-wrap: wrap;
+      }
+    }
+
+    .cdc-callout__databite {
+      padding-top: 2px;
+      width: auto;
+      line-height: 1; // Tight line height for numbers
+      color: var(--colors-cyan-60v, #007a99);
+      font-size: 2rem;
+    }
+
+    .cdc-callout__flag {
+      position: absolute;
+      top: -0.36rem;
+      right: 1.08rem;
+      width: 1.84rem;
+      height: auto;
+    }
+
+    .cdc-callout__content {
+      font-size: 1rem;
+    }
+
+    .bite-subtext {
+      margin-top: auto; // Push to bottom on desktop
+      font-style: italic;
+    }
+
+    // White background variant (when "Use White Background Style" is checked)
+    &.white-background-style {
+      background: white;
+
+      .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%);
+      }
+    }
+  }
+
   // General: Compact View
   &.bite--isCompactStyle .bite .cove-component__content .bite-content {
     align-items: center;

package/src/scss/editor-panel.scss

@@ -1,3 +1,6 @@
+// Data-bite-specific Editor Panel Styles
+// Common editor panel styles are imported from @cdc/core/styles/editor-panel-base via cove-main.scss
+
 .spacing-wrapper {
   padding-left: 350px;
 }
@@ -10,9 +13,11 @@
   .text-center {
     text-align: center;
   }
+
   .text-capitalize {
     text-transform: capitalize;
   }
+
   .two-col-inputs {
     display: flex;
     margin-top: 1em;
@@ -22,518 +27,37 @@
       margin-top: 0 !important;
     }
   }
-  .divider-heading {
-    display: block;
-    font-size: 1em;
-    margin-top: 1em;
-  }
-  .series-list {
-    list-style: none;
-    border: $lightGray 1px solid;
-    &:empty {
-      border: none !important;
-    }
-    li {
-      padding: 0.3em 0.5em;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 0.9em;
-      &:hover {
-        background-color: $lightestGray;
-      }
-      span {
-        font-size: 0.8em;
-        color: #f00;
-        cursor: pointer;
-      }
-      + li {
-        border-top: $lightGray 1px solid;
-      }
-    }
-  }
-  background: #fff;
-  // width: $editorWidth;
-  overflow-y: overlay;
-  position: absolute;
-  z-index: 8;
-  display: flex;
-  flex-direction: column;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  .accordion__heading {
-    background: $lightestGray;
-  }
-  .accordion__item {
-    select {
-      text-transform: capitalize;
-    }
-    .number-narrow {
-      min-width: auto;
-      width: 75px;
-    }
-  }
+
   .accordion__divider {
     border: 0;
     border-top: 1px solid #e2e2e2;
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
   }
-  .form-container {
-    border-right: $lightGray 1px solid;
-    flex-grow: 1;
-  }
-  .guidance-link {
-    margin: 2em 1em 0;
-    padding: 0.75em 1em;
-    svg {
-      width: 60px;
-      color: $blue;
-      margin-right: 1rem;
-      height: 60px; // IE11
-      path {
-        fill: currentColor;
-      }
-    }
-  }
-  .warning {
-    color: #d8000c;
-    background-color: #ffd2d2;
-    padding: 0.75em 1em;
-    margin: 1em 0;
-    font-size: 0.8em;
-    border: #d8000c 1px solid;
-    border-radius: 0.4em;
-    strong {
-      font-weight: 600;
-      display: block;
-    }
-  }
-  .accordion__button {
-    cursor: pointer;
-    font-size: 1em;
-    padding: 0.3em 1em;
-    width: 100%;
-    text-align: left;
-    position: relative;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  }
-  .accordion__panel:first-child {
-    margin-top: 0;
-  }
-  .accordion__button:before {
-    display: inline-block;
-    content: '';
-    height: 7px;
-    width: 7px;
-    margin-right: 1em;
-    border-bottom: 2px solid currentColor;
-    border-right: 2px solid currentColor;
-    transform: rotate(-45deg);
-    right: 0;
-    position: absolute;
-    top: 50%;
-    transform: rotate(-45deg) translateY(-50%);
-    transition: 0.1s all;
-  }
-
-  .accordion__button[aria-expanded='true']::before,
-  .accordion__button[aria-selected='true']::before {
-    transform: rotate(45deg) translateY(-50%);
-    margin-right: 1.3em;
-    transition: 0.1s all;
-  }
-
-  .accordion__panel {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-    padding: 1em 1.25em 2em;
-    animation: fadein 0.2s ease-in;
-    h5 {
-      font-size: 0.8em;
-    }
-
-    .accordion__panel-row {
-      display: flex;
-      justify-content: flex-start;
-      margin-left: -4px;
-      margin-right: -4px;
-      margin-bottom: 0.75em;
-    }
-
-    .accordion__panel-col {
-      flex: 0 0 0;
-      padding-left: 4px;
-      padding-right: 4px;
-
-      select {
-        padding: 0.425em 0.5em;
-      }
-
-      select.border-dashed {
-        border: rgba(0, 0, 0, 0.3) 1px dashed !important;
-        border-radius: 0.25rem;
-      }
-    }
-
-    .d-flex {
-      display: flex;
-    }
-
-    .align-center {
-      align-items: center;
-    }
-
-    .justify-end {
-      justify-content: flex-end;
-    }
-
-    .flex-grow {
-      flex-grow: 1;
-    }
-    .flex-shrink {
-      flex-shrink: 1;
-    }
-    .flex-auto {
-      flex-basis: auto;
-    }
-  }
-
-  .advanced {
-    padding: 0 1em 1em;
-    text-align: left;
-    p {
-      font-size: 0.8rem;
-    }
-    .advanced-toggle-link {
-      padding-top: 1em;
-      display: block;
-      text-align: left;
-      cursor: pointer;
-      text-decoration: underline;
-      span {
-        text-decoration: none;
-        display: inline-block;
-        font-family: monospace;
-        padding-right: 5px;
-      }
-      &:hover {
-        color: rgba(0, 0, 0, 0.7);
-      }
-    }
-    textarea {
-      height: 400px;
-      width: 100%;
-      font-size: 0.9em;
-      padding: 0.5em;
-      font-family: monospace;
-      box-sizing: border-box;
-    }
-  }
-
-  @keyframes fadein {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .heading-2 {
-    background: #565656;
-    color: #fff;
-    font-size: 1.1em;
-    padding: 0.6em 1em;
-    position: relative;
-    border-bottom: #565656 3px solid;
-    z-index: 3;
-  }
 
   label {
-    text-transform: uppercase;
-    display: block;
-    font-size: 0.8em;
-    font-weight: 600;
-    &:not(:first-child) {
-      margin-top: 1em;
-    }
     span.edit-label {
-      margin-bottom: 0.3em;
-      display: block;
-    }
-    span.column-heading {
-      font-size: 1em;
-    }
-    &.checkbox {
       display: flex;
-      span {
-        display: inline;
-      }
-      input {
-        margin-left: 0;
-        width: inherit;
-        display: inline;
-      }
     }
   }
-  input[type='text'],
-  input[role='combobox'],
-  input[type='number'],
-  textarea {
-    min-width: 100%;
-    max-width: 100%; // Doing this prevents width of textarea from being changed
-  }
+
   textarea {
     min-height: 140px;
   }
-  .header .color-palette li {
-    width: 21px;
-    height: 21px;
-    border-radius: 40px;
-    margin-right: 2.8px;
-  }
-  .color-palette {
-    display: flex;
-    max-width: 100%;
-    padding: 0;
-    margin: 0.5em 0 0 0;
-    list-style: none;
-    flex-wrap: wrap;
-    li {
-      width: 45px;
-      height: 23px;
-      margin-right: 4px;
-      margin-bottom: 10px;
-      display: flex;
-      border-radius: 5px;
-      overflow: hidden;
-      cursor: pointer;
-      position: relative;
-      .click-target {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-      &.selected {
-        border: rgba(0, 0, 0, 0.8) 2px solid;
-      }
-      span {
-        width: 33.3%;
-      }
-    }
-  }
-
-  fieldset {
-    display: block;
-  }
-
-  .primary-fieldset {
-    padding: 0;
-    margin: 0;
-    border: 0;
-  }
 
   ul.column-edit {
-    list-style: none;
-    li {
-      margin-top: 1em;
-    }
-    .three-col,
     .two-col {
       display: flex;
       justify-content: space-between;
-      > label {
-        margin-top: 0;
-        display: inline-block;
-        input[type='text'],
-        input[type='number'] {
-          width: 50px;
-        }
-      }
-    }
-    .three-col {
-      > label {
-        width: 30%;
-      }
-    }
-    .two-col {
       > label {
         margin-top: 0;
         width: 49%;
       }
     }
   }
-
-  &.hidden {
-    display: none;
-  }
-
-  .remove-column {
-    float: right;
-    text-transform: uppercase;
-    color: #c32b2b;
-    font-size: 0.7em;
-    line-height: 1.6em;
-    border-radius: 5px;
-    margin: 0 auto;
-    transition: 0.1s all;
-    border: 0;
-    text-decoration: underline;
-    outline: 0;
-    cursor: pointer;
-    font-weight: bold;
-  }
-
-  .edit-block {
-    padding-left: 1em;
-    border-left: rgba(0, 0, 0, 0.2) 4px solid;
-    transition: 0.2s all;
-    &:not(:first-child) {
-      margin-top: 2em;
-    }
-    input[type='text'],
-    input[type='number'] {
-      font-size: 1em;
-    }
-    label {
-      margin-top: 0;
-    }
-    label + label {
-      margin-top: 1em;
-    }
-    &:hover {
-      border-left: rgba(0, 0, 0, 0.7) 4px solid;
-      transition: 0.2s all;
-    }
-  }
-
-  span.subtext {
-    display: block;
-    color: rgba(0, 0, 0, 0.5);
-    text-transform: none;
-    font-weight: normal;
-  }
-
-  .sort-list {
-    list-style: none;
-    > li {
-      margin-right: 0.3em;
-      margin-bottom: 0.3em;
-    }
-  }
-  .sort-list li > div {
-    display: block;
-    box-sizing: border-box;
-    border: 1px solid #d1d1d1;
-    border-radius: 2px;
-    background: #f1f1f1;
-    padding: 0.4em 0.6em;
-    font-size: 0.8em;
-    margin-bottom: 0.3em;
-    cursor: move;
-  }
-
-  .info {
-    font-size: 0.8em;
-    line-height: 1.4em;
-    font-style: italic;
-    padding-top: 10px;
-  }
-
-  .react-tags__search {
-    width: 100%;
-  }
-
-  .react-tags {
-    position: relative;
-    input.react-tags__search-input {
-      font-size: 0.8rem;
-    }
-    /* clicking anywhere will focus the input */
-    cursor: text;
-    span {
-      display: inline;
-    }
-  }
-
-  .react-tags.is-focused {
-    border-color: rgba(0, 0, 0, 0.7);
-  }
-
-  .react-tags__selected {
-    display: inline;
-  }
-
-  .react-tags__selected-tag {
-    display: inline-block;
-    box-sizing: border-box;
-    border: 1px solid #d1d1d1;
-    border-radius: 2px;
-    background: #f1f1f1;
-    padding: 0.4em 0.6em;
-    font-size: 0.8em;
-    margin-right: 0.3em;
-    margin-bottom: 0.3em;
-  }
-
-  .react-tags__selected-tag:after {
-    content: '\2715';
-    color: #aaa;
-    margin-left: 8px;
-  }
-
-  .react-tags__selected-tag:hover,
-  .react-tags__selected-tag:focus {
-    border-color: #b1b1b1;
-  }
-
-  .react-tags__search {
-    display: inline-block;
-
-    /* prevent autoresize overflowing the container */
-    max-width: 100%;
-  }
-
-  .react-tags__suggestions ul {
-    margin: 4px -1px;
-    padding: 0;
-    list-style: none;
-    background: white;
-    border: 1px solid #d1d1d1;
-    border-radius: 2px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  }
-
-  .react-tags__suggestions li {
-    border-bottom: 1px solid #ddd;
-    padding: 6px 8px;
-  }
-
-  .react-tags__suggestions li mark {
-    text-decoration: underline;
-    background: none;
-    font-weight: 600;
-  }
-
-  .react-tags__suggestions li:hover {
-    cursor: pointer;
-    background: #eee;
-  }
-
-  .react-tags__suggestions li.is-active {
-    background: #b7cfe0;
-  }
-
-  .react-tags__suggestions li.is-disabled {
-    opacity: 0.5;
-    cursor: auto;
-  }
 }
-.editor-toggle {
+
+.editor-panel__toggle {
   background: #f2f2f2;
   border-radius: 60px;
   color: #000;
@@ -547,6 +71,7 @@
   height: 25px;
   left: 307px;
   box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
+
   &:before {
     top: 43%;
     left: 50%;
@@ -554,13 +79,16 @@
     position: absolute;
     content: '\00ab';
   }
+
   &.collapsed {
     left: 1em;
     margin-left: 0;
+
     &:before {
       content: '\00bb';
     }
   }
+
   &:hover {
     background: rgba(255, 255, 255, 1);
   }

package/src/scss/main.scss

@@ -1,38 +1,6 @@
-@import 'variables';
-
 .cdc-open-viz-module.type-data-bite {
   @import 'bite';
-
-  .checkbox-group {
-    padding: 16px;
-    border: 1px solid #c4c4c4;
-    border-radius: 8px;
-    margin-top: 8px;
-    margin-bottom: 24px;
-  }
-
-  .loader {
-    width: 100%;
-    text-align: center;
-    display: inline-block;
-    animation: spin 1s linear infinite;
-
-    &::before {
-      content: '\21BB';
-    }
-  }
-
-  .warning-icon {
-    position: relative;
-    top: 2px;
-    width: 15px;
-    height: 15px;
-    margin-left: 5px;
-
-    path {
-      fill: #d8000c;
-    }
-  }
+  @import 'editor-panel';
 
   .tooltip {
     background-color: #fff;

package/src/store/db.reducer.ts

@@ -1,7 +1,7 @@
 import { Config } from '../types/Config'
 import DataBiteActions from './db.actions'
 
-export type DataBiteState = {
+type DataBiteState = {
   config?: Config
   loading: boolean
   currentViewport: string

package/src/test/CdcDataBite.test.jsx

@@ -7,5 +7,5 @@ describe('Data Bite', () => {
     const pkgDir = path.join(__dirname, '..')
     const result = testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
-  })
+  }, 300000)
 })

package/src/types/Config.ts

@@ -37,6 +37,7 @@ export type Config = {
     hideBackgroundColor: boolean
     borderColorTheme: boolean
     showTitle: boolean
+    whiteBackground: boolean
   }
   general: {
     isCompactStyle: boolean