@cdc/core 4.24.9 → 4.24.11

package/helpers/useDataVizClasses.ts

@@ -1,38 +1,51 @@
 export default function useDataVizClasses(config, viewport = null) {
-  const { legend } = config
+  const {
+    legend,
+    lineDatapointStyle,
+    showTitle,
+    title,
+    visualizationType,
+    subtext,
+    biteStyle,
+    general,
+    visual,
+    shadow
+  } = config
+
   let lineDatapointClass = ''
 
-  if (config.lineDatapointStyle === 'hover') {
+  if (lineDatapointStyle === 'hover') {
     lineDatapointClass = ' chart-line--hover'
   }
-  if (config.lineDatapointStyle === 'always show') {
+  if (lineDatapointStyle === 'always show') {
     lineDatapointClass = ' chart-line--always'
   }
 
   let innerContainerClasses = ['cove-component__inner']
   let contentClasses = ['cove-component__content']
 
-  const { visualizationType, title, showTitle } = config
-
   if (visualizationType === 'Spark Line' || visualizationType === 'chart') {
     if (title && showTitle) contentClasses.push('component--has-title')
   }
 
-  config.showTitle && contentClasses.push('component--has-title')
-  config.title && config.visualizationType !== 'chart' && config.visualizationType !== 'Spark Line' && contentClasses.push('component--has-title')
-  config.subtext && innerContainerClasses.push('component--has-subtext')
-  config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
-  config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
+  showTitle && contentClasses.push('component--has-title')
+  title &&
+    visualizationType !== 'chart' &&
+    visualizationType !== 'Spark Line' &&
+    contentClasses.push('component--has-title')
+  subtext && innerContainerClasses.push('component--has-subtext')
+  biteStyle && innerContainerClasses.push(`bite__style--${biteStyle}`)
+  general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
 
-  !config.visual?.border && contentClasses.push('no-borders')
-  config.visualizationType === 'Spark Line' && contentClasses.push('sparkline')
-  config.visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme')
-  config.visual?.accent && contentClasses.push('component--has-accent')
-  config.visual?.background && contentClasses.push('component--has-background')
-  config.visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor')
+  !visual?.border && contentClasses.push('no-borders')
+  visualizationType === 'Spark Line' && contentClasses.push('sparkline')
+  visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme')
+  visual?.accent && contentClasses.push('component--has-accent')
+  visual?.background && contentClasses.push('component--has-background')
+  visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor')
 
   // ! these two will be retired.
-  config.shadow && innerContainerClasses.push('shadow')
+  shadow && innerContainerClasses.push('shadow')
   config?.visual?.roundedBorders && innerContainerClasses.push('bite--has-rounded-borders')
 
   let sparkLineStyles = {
@@ -51,14 +64,23 @@ export default function useDataVizClasses(config, viewport = null) {
   const getUlClasses = () => {
     const ulClasses = ['legend-container__ul']
     ulClasses.push(getListPosition())
+    if (legend?.style === 'gradient') ulClasses.push('patterns-only')
     return ulClasses
   }
-  const hasBorder = config.legend?.hideBorder ? 'no-border' : ''
-  const legendOuterClasses = [`${legend?.position}`, `${getListPosition()}`, `cdcdataviz-sr-focusable`, `${viewport}`, `${hasBorder}`]
+  const hasBorder = legend?.hideBorder ? 'no-border' : ''
+  const legendOuterClasses = [
+    `${legend?.position}`,
+    `${getListPosition()}`,
+    `cdcdataviz-sr-focusable`,
+    `${viewport}`,
+    `${hasBorder}`
+  ]
+
+  const usePadding = !legend?.hideBorder
 
   const legendClasses = {
     aside: legendOuterClasses,
-    section: ['legend-container'],
+    section: ['legend-container', usePadding ? 'legend-padding' : ''],
     ul: getUlClasses(),
     li: ['single-legend-item', 'legend-container__li'],
     title: ['legend-container__title'],

package/helpers/ver/4.24.10.ts

@@ -0,0 +1,47 @@
+import _ from 'lodash'
+
+export const removeMultiSelectPropFromMultiselect = newConfig => {
+  if (newConfig.type === 'dashboard') {
+    newConfig.dashboard?.sharedFilters.forEach((filter, index) => {
+      if (filter.multiSelect) {
+        newConfig.dashboard.sharedFilters[index].filterStyle = 'multi-select'
+        delete newConfig.dashboard.sharedFilters[index].multiSelect
+      }
+    })
+  }
+}
+
+export const changePivotColumns = newConfig => {
+  if (newConfig.type === 'dashboard') {
+    Object.keys(newConfig.visualizations).forEach(key => {
+      const currentViz = newConfig.visualizations[key]
+      if (currentViz.table?.pivot?.valueColumn) {
+        newConfig.visualizations[key].table.pivot.valueColumns = [currentViz.table.pivot.valueColumn]
+        delete newConfig.visualizations[key].table.pivot.valueColumn
+      }
+    })
+  }
+  if (newConfig.table?.pivot?.valueColumn) {
+    newConfig.table.pivot.valueColumns = [newConfig.table.pivot.valueColumn]
+    delete newConfig.table.pivot.valueColumn
+  }
+
+  return newConfig
+}
+
+export const setXAxisLabelOffsetToZero = newConfig => {
+  if (!newConfig.xAxis?.labelOffset) return
+  newConfig.xAxis.labelOffset = 0
+}
+
+const update_4_24_10 = config => {
+  const ver = '4.24.10'
+  const newConfig = _.cloneDeep(config)
+  setXAxisLabelOffsetToZero(newConfig)
+  changePivotColumns(newConfig)
+  removeMultiSelectPropFromMultiselect(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_24_10

package/helpers/ver/4.24.9.ts

@@ -1,9 +1,6 @@
-import { Legend } from './../../types/Legend'
 import _ from 'lodash'
 import { AnyVisualization } from '../../types/Visualization'
 import { VizFilter } from '../../types/VizFilter'
-import { AnyVisualization } from '../../types/Visualization'
-import { VizFilter } from '../../types/VizFilter'
 import versionNeedsUpdate from './versionNeedsUpdate'
 
 /**

package/helpers/ver/tests/4.24.10.test.ts

@@ -0,0 +1,45 @@
+import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import { changePivotColumns, removeMultiSelectPropFromMultiselect, setXAxisLabelOffsetToZero } from '../4.24.10'
+import { expect, describe, it } from 'vitest'
+
+describe('removeMultiSelectPropFromMultiSelect() ', () => {
+  it('replaces multiSelect boolean with filterStyle = multiSelect', () => {
+    const mockConfig = { type: 'dashboard', dashboard: { sharedFilters: [{ multiSelect: true }] } } as any
+    removeMultiSelectPropFromMultiselect(mockConfig)
+    expect(mockConfig.dashboard.sharedFilters[0].filterStyle).toBe('multi-select')
+    expect(mockConfig.dashboard.sharedFilters[0].multiSelect).toBeUndefined()
+  })
+})
+
+describe('changePivotColumns() ', () => {
+  it('works with dashboards', () => {
+    const config = {
+      type: 'dashboard',
+      visualizations: { a: { table: { pivot: { valueColumn: 'value' } } } }
+    }
+    const expectedConfig = {
+      type: 'dashboard',
+      visualizations: { a: { table: { pivot: { valueColumns: ['value'] } } } }
+    }
+    expect(changePivotColumns(config)).toEqual(expectedConfig)
+  })
+  it('works with regularVisualizations', () => {
+    const config = {
+      type: 'chart',
+      table: { pivot: { valueColumn: 'value' } }
+    }
+    const expectedConfig = {
+      type: 'chart',
+      table: { pivot: { valueColumns: ['value'] } }
+    }
+    expect(changePivotColumns(config)).toEqual(expectedConfig)
+  })
+})
+
+describe('setXAxisLabelOffsetToZero(config) ', () => {
+  it('sets the x-axis label offset to 0', () => {
+    const mockConfig = { xAxis: { labelOffset: 5 } } as Partial<ChartConfig>
+    setXAxisLabelOffsetToZero(mockConfig)
+    expect(mockConfig.xAxis?.labelOffset).toBe(0)
+  })
+})

package/helpers/viewports.ts

@@ -0,0 +1,9 @@
+function isLegendWrapViewport(currentViewport) {
+  return ['xs', 'xxs'].includes(currentViewport)
+}
+
+function isMobileHeightViewport(currentViewport) {
+  return ['xs', 'xxs'].includes(currentViewport)
+}
+
+export { isLegendWrapViewport, isMobileHeightViewport }

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.9",
+  "version": "4.24.11",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
   "scripts": {
     "test": "vitest run --environment jsdom --reporter verbose",
     "test-watch": "vitest watch --reporter verbose",
-    "test-watch:ui": "vitest --ui"
+    "test-watch:ui": "vitest --ui",
+    "build": "sass styles/cove-main.scss dist/cove-main.css"
   },
   "repository": {
     "type": "git",
@@ -33,5 +34,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "c4b0402afe6ed209a85b7078711549b9fd7dae7d"
+  "gitHead": "9ab5ee9b2b0ef7321a66a2104be6ce8899ec3808",
+  "devDependencies": {
+    "sass": "^1.79.4"
+  }
 }

package/styles/_button-section.scss

@@ -2,7 +2,7 @@
 .download-buttons {
   display: flex;
   justify-content: flex-end;
-  margin: 0 1em; // align w/ data table
+  margin: 0 0 0 auto;
 
   .btn:not(:last-child) {
     margin-right: 10px;
@@ -26,6 +26,10 @@
   & a {
     font-size: 16px;
   }
+  margin-top: 20px;
+  &.below-table {
+    margin-top: 5px;
+  }
 }
 
 // odd wrapper thats different on dashboards

package/styles/_global-variables.scss

@@ -2,6 +2,7 @@ $colors: (
   'baseColor': #333,
   'blue': #005eaa,
   'lightestGray': #f2f2f2,
+  'gray2': #f5f5f5,
   'lightGray': #c7c7c7,
   'mediumGray': #565656,
   'darkGray': #333,
@@ -61,7 +62,7 @@ $colors: (
   'amber-primary': #fbab18,
   'amber-secondary': #ffd54f,
   'amber-tertiary': #ffecb3,
-  'amber-quaternary': #fff7e1,
+  'amber-quaternary': #fff7e1
 );
 
 @mixin theme() {
@@ -72,4 +73,21 @@ $colors: (
   }
 }
 
-@include theme();
+@include theme();
+
+:root {
+  --editorContentPadding: 30px;
+  --editorWidth: 350px;
+  --breakpoint-xs: 480px;
+  --breakpoint-sm: 768px;
+  --breakpoint-md: 960px;
+  --breakpoint-lg: 1170px;
+  --breakpoint-xl: 1280px;
+  --font-size: 17px;
+}
+
+@media (max-width: 768px) {
+  :root {
+    --font-size: 0.9em;
+  }
+}

package/styles/_global.scss

@@ -2,10 +2,6 @@ strong {
   font-weight: 600;
 }
 
-.subtext {
-  margin-top: 1em;
-}
-
 .error-box {
   background: #ffc2c2;
   display: flex;
@@ -57,15 +53,6 @@ strong {
 }
 
 .btn {
-  background: #005eaa;
-  color: #fff;
-  border: 0;
-  padding: 0.4em 0.8em;
-  font-size: 1em;
-  display: block;
-  border-radius: 0.3em;
-  transition: 0.1s background-color;
-  cursor: pointer;
   &.full-width {
     width: 100%;
   }
@@ -93,17 +80,11 @@ strong {
     }
   }
 
-  &:hover {
-    transition: 0.1s all;
-    background: lighten(#005eaa, 5%);
-  }
-
   svg {
     width: 16px;
     height: 16px;
     position: relative;
     top: 2px;
-    margin-left: 5px;
   }
 }
 
@@ -126,13 +107,6 @@ textarea {
 textarea {
   min-height: 140px;
 }
-select {
-  width: 100%;
-  font-size: 1em;
-  font-weight: normal;
-  text-transform: none;
-  border: rgba(0, 0, 0, 0.3) 1px solid !important;
-}
 
 .input-group-text {
   border-top-left-radius: 0;
@@ -183,9 +157,6 @@ select {
 section.introText {
   width: 100%;
   margin-bottom: 25px;
-  &.legend_visible_top {
-    margin-bottom: 0;
-  }
 }
 
 section.footnotes {
@@ -195,9 +166,30 @@ section.footnotes {
 }
 
 .cdc-chart-inner-container .subtext {
-  padding: 15px 0;
+  margin-top: 20px;
 }
 
 .margin-left-href {
   margin-left: 15px;
 }
+
+.btn.btn-primary:not([disabled]) {
+  background-color: $blue;
+  border-color: $blue;
+  &:hover:not([disabled]) {
+    background-color: darken($blue, 5%);
+    border-color: darken($blue, 5%);
+  }
+}
+
+
+// after migration to TP5 this declaration should be removed and all references
+// to it should be replaced with .form-select
+.cove-form-select {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--lightGray);
+  color: var(--darkGray);
+}

package/styles/_reset.scss

@@ -1,6 +1,7 @@
 .cdc-open-viz-module {
   margin: 0;
-  font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+  font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans,
+    Helvetica Neue, Fira Sans, sans-serif;
   font-weight: 400;
   font-style: normal;
   text-rendering: optimizeLegibility;
@@ -18,7 +19,6 @@
   }
 }
 .cdc-open-viz-module {
-  div,
   span,
   applet,
   object,
@@ -66,17 +66,8 @@
   ul,
   li,
   fieldset,
-  form,
-  label,
   legend,
-  table,
   caption,
-  tbody,
-  tfoot,
-  thead,
-  tr,
-  th,
-  td,
   article,
   aside,
   canvas,
@@ -105,14 +96,6 @@
     vertical-align: baseline;
   }
 
-  button {
-    border: 0;
-    cursor: pointer;
-    &:focus {
-      outline: 0;
-    }
-  }
-
   * {
     box-sizing: border-box;
   }
@@ -146,11 +129,4 @@
       half as far down as the superscript moved up */
     bottom: -0.25em;
   }
-
-  ul > li:first-child {
-    margin-top: auto;
-  }
-  ul > li:last-of-type {
-    margin-bottom: auto;
-  }
 }

package/styles/base.scss

@@ -71,7 +71,6 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   @include breakpointClass(md) {
     font-size: 16px !important;
   }
-  @import 'data-table';
   @import 'global';
   @import 'button-section';
   @import 'series-list';

package/styles/cove-main.scss

@@ -0,0 +1,6 @@
+@import 'base';
+@import 'heading-colors';
+@import 'v2/themes/color-definitions';
+@import 'variables';
+@import 'v2/components/ui/tooltip';
+@import 'v2/main.scss'

package/styles/filters.scss

@@ -5,6 +5,12 @@
     gap: 7px 15px;
     margin-top: 15px;
     margin-bottom: 15px;
+    label {
+      display: inherit;
+      margin-bottom: 5px;
+      font-weight: 600;
+      font-size: 16px;
+    }
   }
 
   &__intro-text {
@@ -20,28 +26,7 @@
   }
 }
 
-// note the diff of section and no section above.
-// Can't use nested selectors with top level section overwrites
-section.filters-section {
-  // border: 1px solid #c7c7c7;
-  // padding: 10px;
-  border-radius: 10px;
-  margin-bottom: 10px;
-  display: block !important;
-
-  &.legend_visible_top {
-    margin-bottom: 0px;
-  }
-}
-
 div.single-filters {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 15px 0;
-
-  select {
-    width: auto !important;
-  }
 
   label {
     width: 100%;
@@ -55,11 +40,6 @@ div.single-filters {
   }
 }
 
-.single-filters--dropdown {
-  width: auto;
-  display: flex;
-}
-
 .single-filters--tab {
   width: 100%;
   display: flex;

package/styles/v2/base/_reset.scss

@@ -43,13 +43,6 @@ picture {
   display: block;
 }
 
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
 sub,
 sup {
   font-size: 75%;

package/styles/v2/components/editor.scss

@@ -250,10 +250,6 @@
     font-weight: normal;
   }
 
-  .btn {
-    margin-top: 1em;
-  }
-
   .sort-list {
     list-style: none;
 

package/styles/v2/components/icon.scss

@@ -1,6 +1,6 @@
 .cove-icon {
   display: inline-flex;
-  width: 1em;
+  width: 1rem;
   height: auto;
   justify-content: center;
   align-items: center;

package/styles/v2/components/ui/tooltip.scss

@@ -95,56 +95,58 @@
   }
 }
 
-.cove-tooltip__content {
-  max-width: var(--cove-tooltip-maxWidth);
-  padding: 10px 8px;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  text-align: left;
-  color: var(--cove-tooltip-color);
-  background-color: var(--cove-tooltip-bg);
-  border-radius: 5px;
-  user-select: none;
-  cursor: default;
-  z-index: 1;
-
-  &.place-top {
-    &.has-shadow {
-      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
+.react-tooltip {
+  &.cove-tooltip__content {
+    max-width: var(--cove-tooltip-maxWidth);
+    padding: 10px 8px;
+    font-size: 0.875rem;
+    line-height: 1.125rem;
+    text-align: left;
+    color: var(--cove-tooltip-color);
+    background-color: var(--cove-tooltip-bg);
+    border-radius: 5px;
+    user-select: none;
+    cursor: default;
+    z-index: 1;
+
+    &.place-top {
+      &.has-shadow {
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
 
-    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-btt var(--cove-tooltip-animation);
+      &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+        animation: tooltip-btt var(--cove-tooltip-animation);
+      }
     }
-  }
 
-  &.place-right {
-    &.has-shadow {
-      box-shadow: -4px 4px 14px rgba(0, 0, 0, 0.15), -4px 4px 8px rgba(0, 0, 0, 0.1);
-    }
+    &.place-right {
+      &.has-shadow {
+        box-shadow: -4px 4px 14px rgba(0, 0, 0, 0.15), -4px 4px 8px rgba(0, 0, 0, 0.1);
+      }
 
-    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-ltr var(--cove-tooltip-animation);
+      &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+        animation: tooltip-ltr var(--cove-tooltip-animation);
+      }
     }
-  }
 
-  &.place-bottom {
-    &.has-shadow {
-      box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1);
-    }
+    &.place-bottom {
+      &.has-shadow {
+        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1);
+      }
 
-    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-ttb var(--cove-tooltip-animation);
+      &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+        animation: tooltip-ttb var(--cove-tooltip-animation);
+      }
     }
-  }
 
-  &.place-left {
-    &.has-shadow {
-      box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15), 4px 4px 8px rgba(0, 0, 0, 0.1);
-    }
+    &.place-left {
+      &.has-shadow {
+        box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15), 4px 4px 8px rgba(0, 0, 0, 0.1);
+      }
 
-    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-rtl var(--cove-tooltip-animation);
+      &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+        animation: tooltip-rtl var(--cove-tooltip-animation);
+      }
     }
   }
 }

package/styles/v2/layout/_component.scss

@@ -1,10 +1,8 @@
 .cove-component {
   border-radius: 3px;
-  // box-shadow: rgba(0, 0, 0, 0.2) 3px 6px 10px; // no box shadows
 }
 
 .cove-component__content {
-  padding-top: 1rem;
   border: solid 1px #ccc;
   border-top: none;
   border-radius: 0 0 3px 3px;
@@ -13,10 +11,6 @@
     border: none !important;
   }
 
-  // .cdc-data-bite-inner-container:not(.component--has-title) .cove-component__content:not(.no-borders) {
-  //   border-top: 1px solid #ccc;
-  // }
-
   .cove-component__content:not(.component--hideBackgroundColor) {
     background: $lightestGray;
   }