@cdc/core 4.26.2 → 4.26.3

package/{styles/v2/components → components/EditorPanel}/editor.scss

@@ -1,7 +1,6 @@
-@import '../utils/variables';
-@import '../themes/index';
-@import '../../../components/HeaderThemeSelector/HeaderThemeSelector.css';
-@import '../../_common-components';
+@import '../../styles/utils/properties';
+@import '../../styles/themes/index';
+@import '../HeaderThemeSelector/HeaderThemeSelector.css';
 
 .cove-editor {
   display: grid;
@@ -9,11 +8,11 @@
   grid-template-areas: 'panel content';
   height: 100vh;
 
-  @import './../base/reset';
+  @import '../../styles/base/reset';
 
   .cove-editor__panel {
     grid-area: panel;
-    width: $editorWidth;
+    width: var(--editorWidth);
     transition: width 500ms ease;
     font-size: 15px;
     background: #fff;
@@ -30,8 +29,8 @@
   }
 
   .cove-editor__panel-container {
-    width: $editorWidth;
-    min-width: $editorWidth;
+    width: var(--editorWidth);
+    min-width: var(--editorWidth);
   }
 
   .cove-editor__content {
@@ -107,7 +106,7 @@
 
   .series-list {
     list-style: none;
-    border: $lightGray 1px solid;
+    border: var(--lightGray) 1px solid;
 
     &:empty {
       border: none !important;
@@ -121,7 +120,7 @@
       font-size: 0.9em;
 
       &:hover {
-        background-color: $lightestGray;
+        background-color: var(--lightestGray);
       }
 
       span {
@@ -131,13 +130,13 @@
       }
 
       + li {
-        border-top: $lightGray 1px solid;
+        border-top: var(--lightGray) 1px solid;
       }
     }
   }
 
   .form-container {
-    border-right: $lightGray 1px solid;
+    border-right: var(--lightGray) 1px solid;
     flex-grow: 1;
   }
 
@@ -147,7 +146,7 @@
 
     svg {
       width: 60px;
-      color: $blue;
+      color: var(--blue);
       margin-right: 1rem;
       height: 60px; // IE11
 
@@ -492,3 +491,58 @@ ul.color-palette {
 .edit-checkbox {
   margin-right: 8px;
 }
+
+// Warning icon used in accordion panel headers
+.accordion__button svg.warning-icon,
+.cove-accordion__button svg.warning-icon {
+  left: auto;
+  position: absolute;
+  right: 35px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.warning-icon {
+  color: #d72f00;
+  height: 15px;
+  width: 15px;
+}
+
+.warning-icon path {
+  fill: #d8000c;
+}
+
+// Checkbox group used in editor panel visual sections
+.checkbox-group {
+  border: 1px solid #c4c4c4;
+  border-radius: 8px;
+  margin-bottom: 24px;
+  margin-top: 8px;
+  padding: 16px;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox,
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox,
+.panel-visual .checkbox-group label.checkbox,
+.panel-visual .reverse-labels label.checkbox {
+  align-items: center !important;
+  display: flex !important;
+  margin-bottom: 8px !important;
+  width: 100% !important;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox input[type='checkbox'],
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox input[type='checkbox'],
+.panel-visual .checkbox-group label.checkbox input[type='checkbox'],
+.panel-visual .reverse-labels label.checkbox input[type='checkbox'] {
+  flex-shrink: 0 !important;
+  margin-right: 8px !important;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox span,
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox span,
+.panel-visual .checkbox-group label.checkbox span,
+.panel-visual .reverse-labels label.checkbox span {
+  display: inline-block !important;
+  flex: 1 !important;
+}

package/components/EditorPanel/sections/StyleTreatmentSection.tsx

@@ -0,0 +1,99 @@
+import { CheckBox, Select } from '../Inputs'
+
+type StyleTreatmentValue = 'legacy' | 'tp5'
+
+type StyleTreatmentSectionProps = {
+  styleTreatment: StyleTreatmentValue
+  onStyleTreatmentChange: (value: StyleTreatmentValue) => void
+  showStyleTreatment?: boolean
+  showLegacyControls?: boolean
+  border?: boolean
+  borderColorTheme?: boolean
+  accent?: boolean
+  background?: boolean
+  hideBackgroundColor?: boolean
+  showBackground?: boolean
+  showHideBackgroundColor?: boolean
+  updateField: Function
+}
+
+const StyleTreatmentSection = ({
+  styleTreatment,
+  onStyleTreatmentChange,
+  showStyleTreatment = true,
+  showLegacyControls = true,
+  border,
+  borderColorTheme,
+  accent,
+  background,
+  hideBackgroundColor,
+  showBackground = false,
+  showHideBackgroundColor = false,
+  updateField
+}: StyleTreatmentSectionProps) => {
+  const hasContent = showStyleTreatment || (showLegacyControls && styleTreatment === 'legacy')
+  if (!hasContent) return null
+
+  return (
+    <div className='cove-accordion__panel-section checkbox-group'>
+      {showStyleTreatment && (
+        <Select
+          label='Style Treatment'
+          fieldName='styleTreatment'
+          value={styleTreatment}
+          style={{ width: '100%' }}
+          options={[
+            { label: 'Legacy', value: 'legacy' },
+            { label: 'TP5', value: 'tp5' }
+          ]}
+          onChange={event => onStyleTreatmentChange(event.target.value as StyleTreatmentValue)}
+        />
+      )}
+      {showLegacyControls && styleTreatment === 'legacy' && (
+        <>
+          <CheckBox
+            value={border}
+            section='visual'
+            fieldName='border'
+            label='Display Border'
+            updateField={updateField}
+          />
+          <CheckBox
+            value={borderColorTheme}
+            section='visual'
+            fieldName='borderColorTheme'
+            label='Use Border Color Theme'
+            updateField={updateField}
+          />
+          <CheckBox
+            value={accent}
+            section='visual'
+            fieldName='accent'
+            label='Use Accent Style'
+            updateField={updateField}
+          />
+          {showBackground && (
+            <CheckBox
+              value={background}
+              section='visual'
+              fieldName='background'
+              label='Use Theme Background Color'
+              updateField={updateField}
+            />
+          )}
+          {showHideBackgroundColor && (
+            <CheckBox
+              value={hideBackgroundColor}
+              section='visual'
+              fieldName='hideBackgroundColor'
+              label='Hide Background Color'
+              updateField={updateField}
+            />
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default StyleTreatmentSection

package/components/EditorPanel/sections/VisualSection.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 import { CheckBox } from '../Inputs'
 import { HeaderThemeSelector } from '../../HeaderThemeSelector'
 import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
+import { isCoveDeveloperMode } from '../../../helpers/queryStringUtils'
 
 export interface VisualSectionConfig {
   visual?: {
@@ -10,6 +11,7 @@ export interface VisualSectionConfig {
     accent?: boolean
     background?: boolean
     hideBackgroundColor?: boolean
+    highlightWrappers?: boolean
   }
   theme?: string
 }
@@ -154,6 +156,15 @@ export const VisualSection = <TConfig extends VisualSectionConfig = VisualSectio
           updateField={updateField}
         />
       )}
+      {isCoveDeveloperMode() && (
+        <CheckBox
+          value={visual.highlightWrappers}
+          section='visual'
+          fieldName='highlightWrappers'
+          label='Highlight Layout Wrappers'
+          updateField={updateField}
+        />
+      )}
     </div>
   )
 

package/components/EditorWrapper/editor-wrapper.style.css

@@ -1,7 +1,7 @@
 .editor-wrapper {
   --editorPanelWidth: 350px;
-  position: relative;
   min-height: 80vh;
+  position: relative;
   .editor-panel {
     :is(form) {
       border-right: var(--lightGray) 1px solid;

package/components/Filters/Filters.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useMemo, useRef, useId } from 'react'
+import './filters.scss'
 import _ from 'lodash'
 import parse from 'html-react-parser'
 
@@ -210,12 +211,9 @@ const Filters: React.FC<FilterProps> = ({
   if (!hasVisibleFilters) return <></>
 
   const getClasses = () => {
-    const { visualizationType, legend } = visualizationConfig || {}
-    const baseClass = 'filters-section'
-    const conditionalClass = standaloneMap ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
+    const { legend } = visualizationConfig || {}
     const legendClass = legend && !legend.hide && legend.position === 'top' ? 'mb-0' : null
-
-    return [baseClass, conditionalClass, legendClass, 'w-100'].filter(Boolean)
+    return ['filters-section', legendClass, 'w-100'].filter(Boolean)
   }
 
   const getNestedGroup = (singleFilter: VizFilter): string[] => {

package/components/Filters/components/Tabs.tsx

@@ -1,14 +1,23 @@
 import { useEffect, useId, useState } from 'react'
 import { VizFilter } from '../../../types/VizFilter'
 
+type TabCompatibleFilter = {
+  filterStyle: string
+  values: string[]
+  active?: string | string[]
+  queuedActive?: string | string[]
+  labels?: Record<string, string>
+}
+
 type TabsProps = {
-  filter: VizFilter
+  filter: VizFilter | TabCompatibleFilter
   index: number
   changeFilterActive: Function
-  theme: string
+  theme?: string
+  loading?: boolean
 }
 
-const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActive, theme }) => {
+const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActive, loading }) => {
   const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
 
   const id = useId()
@@ -21,18 +30,19 @@ const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActi
   }, [selectedFilter])
 
   const getClassList = value => {
-    const isActive = filter.active === value
+    const activeValue = filter.queuedActive || filter.active
+    const isActive = activeValue === value
     let classList = []
     switch (filter.filterStyle) {
       case 'tab bar':
         classList = ['button__tab-bar', isActive && 'button__tab-bar--active']
         break
       case 'pill':
-        classList = ['pill', isActive && 'pill--active', theme && theme]
+        classList = ['pill', isActive && 'pill--active']
         break
       default:
         const tabSimple = filter.filterStyle === 'tab-simple' && 'tab--simple'
-        classList = ['tab', isActive && 'tab--active', theme && theme, tabSimple]
+        classList = ['tab', isActive && 'tab--active', tabSimple]
         break
     }
     return classList.filter(Boolean).join(' ')
@@ -41,9 +51,11 @@ const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActi
   const Tabs = filter.values.map((value, index) => {
     return (
       <button
+        type='button'
         key={`${value}-${outerIndex}-${index}-${id}`}
         id={`${value}-${outerIndex}-${index}-${id}`}
         className={getClassList(value)}
+        disabled={loading}
         onClick={e => {
           changeFilterActive(outerIndex, value)
           setSelectedFilter(e.target)
@@ -55,7 +67,7 @@ const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActi
           }
         }}
       >
-        {value}
+        {filter.labels?.[value] || value}
       </button>
     )
   })

package/{styles → components/Filters}/filters.scss

@@ -1,11 +1,10 @@
-@import 'v2/utils/breakpoints';
+@import '../../styles/utils/breakpoints';
 
 .filters-section {
   &__wrapper {
     flex-wrap: wrap;
     display: flex;
     gap: 1rem 1.5rem;
-    margin-bottom: 2rem;
 
     label {
       display: inherit;
@@ -107,7 +106,7 @@ div.single-filters {
   }
 }
 
-.cdc-open-viz-module {
+.cove-visualization {
   @include breakpointClass(xs) {
     .single-filters--tab-simple .tab-simple-container .tab.tab--simple {
       font-size: 0.778em;
@@ -152,6 +151,7 @@ div.single-filters {
     flex: 1 1 0px;
     padding: 10px;
     background: none;
+    border: none;
     transition: background 2s;
 
     &--active {

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -13,9 +13,10 @@ type StandAloneProps = {
   markupVariables?: MarkupVariable[]
   enableMarkupVariables?: boolean
   data?: Object[]
+  dataMetadata?: Record<string, string>
 }
 
-const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters, markupVariables = [], enableMarkupVariables = false, data = [] }) => {
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters, markupVariables = [], enableMarkupVariables = false, data = [], dataMetadata }) => {
   if (!config) return null
 
   // Helper function to process markup variables in footnote text
@@ -33,7 +34,8 @@ const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters, marku
       markupVariables,
       {
         filters,
-        isEditor: false
+        isEditor: false,
+        dataMetadata
       }
     )
 

package/components/HeaderThemeSelector/HeaderThemeSelector.css

@@ -1,3 +1,59 @@
+/* Scoped theme color classes for header theme selector circles */
+.header .color-palette button.theme-purple {
+  background: #712177;
+  border-bottom-color: #b890bb;
+}
+
+.header .color-palette button.theme-brown {
+  background: #705043;
+  border-bottom-color: #ad907b;
+}
+
+.header .color-palette button.theme-teal {
+  background: #00695c;
+  border-bottom-color: #4ebaaa;
+}
+
+.header .color-palette button.theme-pink {
+  background: #af4448;
+  border-bottom-color: #e57373;
+}
+
+.header .color-palette button.theme-orange {
+  background: #bb4d00;
+  border-bottom-color: #ffad42;
+}
+
+.header .color-palette button.theme-slate {
+  background: #29434e;
+  border-bottom-color: #7e9ba5;
+}
+
+.header .color-palette button.theme-indigo {
+  background: #26418f;
+  border-bottom-color: #92a6dd;
+}
+
+.header .color-palette button.theme-cyan {
+  background: #007b91;
+  border-bottom-color: #65b0bd;
+}
+
+.header .color-palette button.theme-green {
+  background: #4b830d;
+  border-bottom-color: #84bc49;
+}
+
+.header .color-palette button.theme-amber {
+  background: #fbab18;
+  border-bottom-color: #ffd54f;
+}
+
+.header .color-palette button.theme-blue {
+  background: #005eaa;
+  border-bottom-color: #88c3ea;
+}
+
 /* HeaderThemeSelector component styles */
 
 .header {
@@ -6,8 +62,8 @@
 
 .header .edit-label {
   display: block;
-  margin-bottom: 0.5rem;
   font-weight: 500;
+  margin-bottom: 0.5rem;
 }
 
 .header .color-palette {
@@ -20,13 +76,13 @@
 }
 
 .header .color-palette button {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
   border: 2px solid transparent;
+  border-radius: 50%;
   cursor: pointer;
-  transition: all 0.2s ease;
+  height: 30px;
   outline: none;
+  transition: all 0.2s ease;
+  width: 30px;
 }
 
 .header .color-palette button:hover {

package/components/Layout/components/Responsive.tsx

@@ -13,11 +13,17 @@ const breakpoints = [
   '1280' // xl
 ]
 
-const os =
-  navigator.userAgent.indexOf('Win') !== -1 ? 'Win' : navigator.userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
+const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : ''
+const os = userAgent.indexOf('Win') !== -1 ? 'Win' : userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
 
-const Responsive = ({ children, isEditor }) => {
+type ResponsiveProps = {
+  children: React.ReactNode
+  isEditor: boolean
+}
+
+const Responsive = ({ children, isEditor }: ResponsiveProps) => {
   const [displayPanel, setDisplayPanel] = useState(false)
+  const togglePanel = () => setDisplayPanel(p => !p)
   const [displayGrid, setDisplayGrid] = useState(false)
   const [viewportPreview, setViewportPreview] = useState(null)
   const [rotateAnimation, setRotateAnimation] = useState(false)
@@ -37,7 +43,7 @@ const Responsive = ({ children, isEditor }) => {
 
   const onKeypress = key => {
     if (!isEditor) return key
-    if (key.code === 'KeyL' && key.ctrlKey) setDisplayPanel(display => !display)
+    if (key.code === 'KeyL' && key.ctrlKey) togglePanel()
     const viewportCommandKey = os === 'MacOS' ? key.metaKey : key.altKey
     if (viewportCommandKey) {
       let keyIndex = key.key
@@ -109,9 +115,11 @@ const Responsive = ({ children, isEditor }) => {
     }
   })
 
-  const onBackClick = () => setDisplayPanel(!displayPanel)
+  const onBackClick = () => togglePanel()
 
-  if (!isEditor || !displayPanel) return children
+  if (!isEditor || !displayPanel) {
+    return <div className='cove-visualization__outer'>{children}</div>
+  }
 
   return (
     <div className='cove-editor__content' data-grid={displayGrid || null}>

package/components/Layout/components/Sidebar/components/Sidebar.tsx

@@ -40,7 +40,7 @@ const Sidebar: React.FC<SidebarProps> = props => {
   return (
     <>
       {/* mimic the editor panel title to keep the button visible. */}
-      <section className='editor-panel__toggle-wrapper p-absolute' style={{ height: '49.75px', width: '350px' }}>
+      <section className='editor-panel__toggle-wrapper' style={{ height: '49.75px', width: '350px' }}>
         <button className={getButtonClasses()} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
       </section>
       <section className={getSectionClasses()}>

package/components/Layout/components/Sidebar/components/sidebar.styles.scss

@@ -2,20 +2,20 @@
   top: 0;
 }
 
-.cdc-editor .configure .editor-heading + .cdc-open-viz-module .editor-panel__toggle {
+.cdc-editor .configure .editor-heading + .cove-visualization .editor-panel__toggle {
   top: 12px;
   position: relative;
 }
 
-.cdc-editor .configure .cdc-open-viz-module:not(.type-dashboard) .editor-panel__toggle {
+.cdc-editor .configure .cove-visualization:not(.type-dashboard) .editor-panel__toggle {
   position: absolute;
 }
 
-.cdc-editor .configure .cdc-open-viz-module:not(.type-dashboard) .sidebar {
+.cdc-editor .configure .cove-visualization:not(.type-dashboard) .sidebar {
   position: relative;
 }
 
-.cdc-open-viz-module {
+.cove-visualization {
   .waiting {
     padding-top: 0 !important;
     padding-left: 0 !important;
@@ -26,7 +26,7 @@
     height: 100%; // take up the whole container
     top: 0;
     max-width: 350px;
-    width: 350px;
+    min-width: 0;
     background-color: var(--white);
     grid-area: panel;
 
@@ -440,6 +440,11 @@
 
       &.checkbox {
         display: flex;
+        align-items: center;
+
+        span.edit-label {
+          margin-bottom: 0;
+        }
 
         input {
           margin-left: 0;
@@ -799,12 +804,6 @@
       font-size: 0.75rem;
     }
 
-    .cove-accordion__button .cove-tooltip {
-      // display: inline-flex;
-      // right: 1.5rem;
-      // line-height: inherit;
-    }
-
     .cove-list-group__item .cove-tooltip {
       width: 100%;
       display: block;
@@ -929,15 +928,10 @@
     }
   }
 
-  &.type-dashboard {
-    .editor-panel__toggle {
-      top: 64px;
-    }
-  }
-
   .editor-panel__toggle-wrapper {
     position: absolute;
     top: 0;
+    left: 0;
   }
 
   .editor-panel__toggle {
@@ -952,7 +946,7 @@
     cursor: pointer;
     width: 25px;
     height: 25px;
-    right: 10px;
+    left: calc(100% - 35px);
     top: 50%;
     transform: translateY(-50%);
     box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;