@cdc/core 4.24.10 → 4.24.12

package/styles/_global-variables.scss

@@ -2,6 +2,7 @@ $colors: (
   'baseColor': #333,
   'blue': #005eaa,
   'lightestGray': #f2f2f2,
+  'gray2': #f5f5f5,
   'lightGray': #c7c7c7,
   'mediumGray': #565656,
   'darkGray': #333,
@@ -62,6 +63,11 @@ $colors: (
   'amber-secondary': #ffd54f,
   'amber-tertiary': #ffecb3,
   'amber-quaternary': #fff7e1,
+
+  'cool-gray-90': #1c1d1f,
+  'cool-gray-50': #71767a,
+  'cool-gray-30': #a9aeb1,
+  'cool-gray-10': #dfe1e2
 );
 
 @mixin theme() {
@@ -75,6 +81,7 @@ $colors: (
 @include theme();
 
 :root {
+  --editorContentPadding: 30px;
   --editorWidth: 350px;
   --breakpoint-xs: 480px;
   --breakpoint-sm: 768px;
@@ -84,10 +91,8 @@ $colors: (
   --font-size: 17px;
 }
 
-
-@media (max-width: 768px) {
+@media (max-width: 576px) {
   :root {
-    --font-size: 0.9em;
+    --font-size: 13px;
   }
 }
-

package/styles/_global.scss

@@ -53,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%;
   }
@@ -89,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;
   }
 }
 
@@ -122,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;
@@ -194,3 +172,24 @@ section.footnotes {
 .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

@@ -19,8 +19,6 @@
   }
 }
 .cdc-open-viz-module {
-  div,
-  span,
   applet,
   object,
   iframe,
@@ -67,8 +65,6 @@
   ul,
   li,
   fieldset,
-  form,
-  label,
   legend,
   caption,
   article,
@@ -99,14 +95,6 @@
     vertical-align: baseline;
   }
 
-  button {
-    border: 0;
-    cursor: pointer;
-    &:focus {
-      outline: 0;
-    }
-  }
-
   * {
     box-sizing: border-box;
   }

package/styles/filters.scss

@@ -26,24 +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;
-}
-
 div.single-filters {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 15px 0;
-
-  select {
-    width: auto !important;
-  }
 
   label {
     width: 100%;
@@ -57,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/types/Axis.ts

@@ -27,6 +27,7 @@ export type Axis = {
   maxTickRotation?: number
   min?: string
   numTicks?: number
+  padding?: number
   paddingPercent?: number
   rightAxisSize?: number
   rightHideAxis?: boolean
@@ -48,4 +49,5 @@ export type Axis = {
   type: string
   axisBBox: number
   maxValue: string
+  sortByRecentDate: boolean
 }

package/types/BoxPlot.ts

@@ -10,12 +10,14 @@ export type BoxPlot = {
     q3: string
     outliers: string
     values: string
-    total: string
+    count: string
     lowerBounds: string
     upperBounds: string
   }
-  plots: []
+  plotNonOutlierValues: boolean
+  plots: [{ columnOutliers: []; columnLowerBounds: number; columnUpperBounds: number }]
   categories: string[]
-  firstQuartilePercentage: number
   geoType: string
+  hideOutliers: boolean
+  borders: string
 }

package/types/Color.ts

@@ -2,4 +2,4 @@ type RGB = `rgb(${number}, ${number}, ${number})`
 type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
 type HEX = `#${string}`
 
-type Color = RGB | RGBA | HEX
+export type Color = RGB | RGBA | HEX

package/types/Legend.ts

@@ -10,8 +10,7 @@ export type Legend = {
   hideSuppressedLabels: boolean
   highlightOnHover: boolean
   label: string
-  lineMode: boolean
-  position: string
+  position: 'left' | 'bottom' | 'top' | 'right' | 'side'
   reverseLabelOrder: boolean
   singleRow: boolean
   type: string

package/types/MarkupInclude.ts

@@ -5,6 +5,7 @@ import { Visualization } from './Visualization'
 export type MarkupIncludeConfig = Visualization & {
   contentEditor: {
     // Changing the base config object creates an infinite loop, nesting it is a workaround
+    allowHideSection?: boolean
     inlineHTML: string
     markupVariables: Variable[]
     showHeader: boolean

package/types/Runtime.ts

@@ -1,4 +1,5 @@
 import { Axis } from './Axis'
+import { Series } from './Series'
 
 export type ForecastingSeriesKey = {
   stages: {
@@ -17,7 +18,8 @@ export type Runtime = {
   }
   xAxis: Axis
   yAxis: Axis
-  seriesKeys: any[]
+  series: Series
+  seriesKeys: string[]
   seriesLabels: Record<string, any>
   seriesLabelsAll: string[]
   editorErrorMessage: string

package/types/Series.ts

@@ -1 +1,8 @@
-export type Series = { dataKey: string; name: string; axis: string; type: string; tooltip: boolean }[]
+export type Series = {
+  dataKey: string
+  name: string
+  axis: string
+  type: string
+  tooltip: boolean
+  dynamicCategory?: string
+}[]

package/types/Table.ts

@@ -1,4 +1,4 @@
-type Pivot = {
+export type Pivot = {
   columnName: string
   valueColumns: string[]
 }

package/types/Version.ts

@@ -0,0 +1 @@
+export type version = `${number}.${number}.${number}`

package/types/Visualization.ts

@@ -19,20 +19,19 @@ import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 type DeprecatedVisualizationType = {
   columns: Record<string, Partial<Column>>
   confidenceKeys: ConfidenceInterval
-  dataFileName: string
-  dataFileSourceType: string
+  dataFileName?: string
+  dataFileSourceType?: string
   dataFormat: any
-  datasets: Record<string, any>
+  datasets?: Record<string, any>
   filters: VizFilter[]
   general: General
   legend: Legend
   multiDashboards?: any[]
   newViz: boolean
   isResponsiveTicks: boolean
-  barThickness: string
-  openModal: boolean
+  openModal?: boolean
   orientation: 'vertical' | 'horizontal'
-  originalFormattedData: any
+  originalFormattedData?: any
   runtime?: Runtime
   series: Series
   table: Table
@@ -49,7 +48,7 @@ type DeprecatedVisualizationType = {
     | 'filtered-text'
     | 'table'
     | 'navigation'
-  usesSharedFilter: any
+  usesSharedFilter?: any
   visualizationSubType: string
   visualizationType: string
   xAxis: Axis
@@ -63,7 +62,7 @@ type StatefulProperties = {
 
 export type CommonVisualizationProperties = Partial<StatefulProperties> & {
   showEditorPanel?: boolean
-  uid?: string // this is the actual key of the visualization object
+  uid?: string | number // this is the actual key of the visualization object
   visualizationType?: string
   filterBehavior: FilterBehavior
 } & Partial<ConfigureData>

package/components/ui/Select.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-
-const Select = ({ label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, onchange, initial: initialValue, ...attributes }) => {
-  let optionsJsx = options.map((optionName, index) => (
-    <option value={optionName} key={index}>
-      {optionName}
-    </option>
-  ))
-
-  if (initialValue) {
-    optionsJsx.unshift(
-      <option value='' key='initial'>
-        {initialValue}
-      </option>
-    )
-  }
-
-  return (
-    <label>
-      <span className='edit-label'>
-        {label}
-        {tooltip}
-      </span>
-      <select className={required && !value ? 'warning' : ''} name={fieldName} value={value} onChange={onchange} {...attributes}>
-        {optionsJsx}
-      </select>
-    </label>
-  )
-}
-export default Select

package/helpers/getGradientLegendWidth.ts

@@ -1,15 +0,0 @@
-export const getGradientLegendWidth = (containerWidth: number, currentViewport: string): number => {
-  const newWidth = Number(containerWidth)
-  switch (currentViewport) {
-    case 'lg':
-      return newWidth / 3
-    case 'md':
-      return newWidth / 2
-    case 'sm':
-    case 'xs':
-    case 'xxs':
-      return newWidth / 1.4
-    default:
-      return newWidth
-  }
-}