@cdc/dashboard 4.25.8 → 4.25.11

package/src/scss/editor-panel.scss

@@ -1,3 +1,6 @@
+// Dashboard-specific Editor Panel Styles
+// Common editor panel styles are imported from @cdc/core/styles/editor-panel-base via cove-main.scss
+
 // Shift down for top level Dashboard bar when in edit mode
 .layout-container,
 .editor-panel + .cdc-dashboard-inner-container,
@@ -101,437 +104,6 @@
       width: 75px;
     }
   }
-  .form-container {
-    border-right: var(--lightGray) 1px solid;
-    flex-grow: 1;
-  }
-  .guidance-link {
-    margin: 2em 1em 0;
-    padding: 0.75em 1em;
-    svg {
-      width: 60px;
-      color: var(--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;
-    }
-  }
-
-  .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:not(.cove-icon) {
-        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
-  }
-  .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 {
-      display: flex;
-      justify-content: space-between;
-      > label {
-        margin-top: 0;
-        width: 30%;
-        display: inline-block;
-        input[type='text'],
-        input[type='number'] {
-          width: 50px;
-        }
-      }
-    }
-  }
-
-  &.hidden {
-    display: none;
-  }
-
-  .emove-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%;
-  }
-
-  @media screen and (min-width: 30em) {
-    .react-tags__search {
-      /* this will become the offsetParent for suggestions */
-      position: relative;
-    }
-  }
-
-  .react-tags__search input {
-    /* prevent autoresize overflowing the container */
-    max-width: 100%;
-
-    /* emove styles and layout from this element */
-    margin: 0;
-    outline: none;
-    padding: 0.5em 0.3em;
-
-    /* match the font styles */
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  .react-tags__search input::-ms-clear {
-    display: none;
-  }
-
-  .react-tags__suggestions {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-  }
-
-  @media screen and (min-width: 30em) {
-    .react-tags__suggestions {
-      width: 240px;
-    }
-  }
-
-  .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;
-  }
 
   .current-viz-list {
     margin: 0.5em 0;

package/src/scss/grid.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $blue-light: #8bc6f7;
 $red: #f74242;
 
@@ -88,7 +90,7 @@ $red: #f74242;
   &:hover {
     transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
     width: 180px;
-    background-color: lighten($blue, 8%);
+    background-color: color.adjust($blue, $lightness: 8%);
     li {
       display: flex;
     }
@@ -136,7 +138,7 @@ $red: #f74242;
   flex: 1 1 auto;
 
   &:hover {
-    border-color: darken(#c2c2c2, 20%);
+    border-color: color.adjust(#c2c2c2, $lightness: -20%);
   }
 
   &.column--populated {
@@ -194,15 +196,15 @@ $red: #f74242;
   &:hover {
     $lightGray: #c7c7c7;
     $mediumGray: #565656;
-    border-color: darken($lightGray, 20%);
+    border-color: color.adjust($lightGray, $lightness: -20%);
 
     .widget-menu-item svg {
-      fill: darken($mediumGray, 20%);
+      fill: color.adjust($mediumGray, $lightness: -20%);
     }
 
     .drag-icon,
     .drag-icon svg {
-      fill: darken($lightGray, 20%);
+      fill: color.adjust($lightGray, $lightness: -20%);
     }
   }
 

package/src/scss/main.scss

@@ -1,4 +1,4 @@
-@import 'mixins';
+@import '@cdc/core/styles/v2/utils/breakpoints';
 
 .cdc-open-viz-module.type-dashboard {
   @import 'editor-panel';
@@ -121,17 +121,6 @@
     }
   }
 
-  .loader {
-    width: 100%;
-    text-align: center;
-    display: inline-block;
-    animation: spin 1s linear infinite;
-
-    &::before {
-      content: '\21BB';
-    }
-  }
-
   .btn {
     // Expand and Collapse Buttons for Multiviz Dashboard
     &.expand-collapse-buttons {
@@ -141,18 +130,6 @@
     }
   }
 
-  .warning-icon {
-    position: relative;
-    top: 2px;
-    width: 15px;
-    height: 15px;
-    margin-left: 5px;
-
-    path {
-      fill: #d8000c;
-    }
-  }
-
   .multi-table-container {
     margin: 15px 0 0;
   }

package/src/store/errorMessage/errorMessage.reducer.ts

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import errorMessagesActions from './errorMessage.actions'
 import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
 
-export type errorMessagesState = string[]
+type errorMessagesState = string[]
 
 const reducer = (state: errorMessagesState, action: errorMessagesActions): errorMessagesState => {
   switch (action.type) {

package/src/types/DashboardFilters.ts

@@ -1,8 +1,9 @@
-import { CommonVisualizationProperties } from '@cdc/core/types/Visualization'
-
-export type DashboardFilters = {
-  sharedFilterIndexes: number[]
-  applyFiltersButtonText: string
-  autoLoad?: boolean
-  type: 'dashboardFilters'
-} & CommonVisualizationProperties
+import { CommonVisualizationProperties } from '@cdc/core/types/Visualization'
+
+export type DashboardFilters = {
+  sharedFilterIndexes: number[]
+  applyFiltersButtonText: string
+  autoLoad?: boolean
+  showClearButton?: boolean
+  type: 'dashboardFilters'
+} & CommonVisualizationProperties

package/src/types/InitialState.ts

@@ -1,12 +1,12 @@
-import { DashboardConfig } from './DashboardConfig'
-import { Tab } from './Tab'
-
-export type InitialState = {
-  config: DashboardConfig
-  data: Record<string, any[]>
-  loading: boolean
-  filteredData: Object
-  preview: boolean
-  tabSelected: Tab
-  filtersApplied: boolean
-}
+import { DashboardConfig } from './DashboardConfig'
+import { Tab } from './Tab'
+
+export type InitialState = {
+  config: DashboardConfig
+  data: Record<string, any[]>
+  loading: boolean
+  filteredData: Object
+  preview: boolean
+  tabSelected: Tab
+  filtersApplied: boolean
+}

package/vite.config.js

@@ -1,4 +1,4 @@
-import GenerateViteConfig from '../../generateViteConfig.js'
+import GenerateViteConfig from '@cdc/core/generateViteConfig.js'
 import { moduleName } from './package.json'
 
 export default GenerateViteConfig(moduleName)

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['../../vitest.setup.ts'],
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/.storybook/**',
+      '**/*.stories.*',
+      '**/storybook-static/**'
+    ]
+  }
+})

package/src/coreStyles_dashboard.scss

@@ -1,3 +0,0 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/heading-colors';
-@import '@cdc/core/styles/v2/main.scss'

package/src/helpers/getAutoLoadVisualization.ts

@@ -1,11 +0,0 @@
-import { AnyVisualization } from '@cdc/core/types/Visualization'
-import { DashboardFilters } from '../types/DashboardFilters'
-
-export const getAutoLoadVisualization = (visualizations: Record<string, AnyVisualization>): DashboardFilters | undefined => {
-  const autoLoadViz = Object.values(visualizations).filter(vis => {
-    return vis.type === 'dashboardFilters' && vis.autoLoad
-  }) as DashboardFilters[]
-  if (autoLoadViz.length === 0) return
-  if (autoLoadViz.length > 1) throw new Error('Only one filter row can be autoloaded')
-  return autoLoadViz[0]
-}

package/src/scss/mixins.scss

@@ -1,47 +0,0 @@
-@mixin breakpoint($class) {
-  @if $class == xs {
-    @media (max-width: 767px) {
-      @content;
-    }
-  } @else if $class == sm {
-    @media (min-width: 768px) {
-      @content;
-    }
-  } @else if $class == md {
-    @media (min-width: 960px) {
-      @content;
-    }
-  } @else if $class == lg {
-    @media (min-width: 1300px) {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint mixin supports: xs, sm, md, lg";
-  }
-}
-
-@mixin breakpointClass($class) {
-  @if $class == xs {
-    &.xs,
-    &.xxs {
-      @content;
-    }
-  } @else if $class == sm {
-    &.sm,
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == md {
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == lg {
-    &.lg {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
-  }
-}

package/src/scss/variables.scss

@@ -1,5 +0,0 @@
-$editorWidth: 350px;
-
-:root {
-  --editorWidth: #{$editorWidth};
-}