@cdc/chart 1.3.2 → 1.3.3

package/src/scss/editor-panel.scss

@@ -1,3 +1,8 @@
+//TODO: Remove after COVE refactor
+.cove {
+  @import "@cdc/core/styles/v2/layout/tooltip.scss";
+}
+
 .editor-panel {
   display: flex;
   flex-direction: column;
@@ -310,6 +315,7 @@
     display: block;
     font-size: .8em;
     font-weight: 600;
+    user-select: none;
 
     &:not(:first-child) {
       margin-top: 1em;
@@ -327,10 +333,6 @@
     &.checkbox {
       display: flex;
 
-      span {
-        display: inline;
-      }
-
       input {
         margin-left: 0;
         width: inherit;
@@ -638,6 +640,12 @@
     opacity: 0.5;
     cursor: auto;
   }
+
+  [type="radio"] {
+    border: 1px solid #8c8f94;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
 }
 
 .editor-toggle {

package/src/scss/main.scss

@@ -2,11 +2,23 @@
 @import "~@cdc/core/styles/heading-colors";
 @import 'mixins';
 @import 'variables';
+@import '~@cdc/core/styles/v2/themes/color-definitions';
+
+.form-container {
+  overflow: scroll;
+}
+
+.d-flex { display: flex; }
+.flex-column-reverse {
+  flex-direction: column-reverse;
+}
 
 .cdc-open-viz-module.type-chart {
-  @import 'datatable';
+  @import 'DataTable';
   @import 'editor-panel';
 
+  border-radius: 3px;
+
   .visually-hidden {
     position: fixed;
     left: -10000px;
@@ -41,9 +53,11 @@
   }
 
   .warning-icon {
+    position: relative;
+    top: 2px;
     width: 15px;
     height: 15px;
-    margin-top: 7px;
+    margin-left: 5px;
 
     path {
       fill: #d8000c;
@@ -59,6 +73,9 @@
     border-bottom-width: 3px;
     border-bottom-style: solid;
 
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+
     em {
       font-style: italic;
     }
@@ -240,7 +257,7 @@
   }
 
   @include breakpointClass(md) {
-    .filters-section, .chart-container {
+    .filters-section, .chart-container:not(.sparkline) {
       margin-left: 1em;
       margin-right: 1em;
     }
@@ -314,4 +331,96 @@
       }
     }
   }
+  [tabindex]:focus-visible {
+    outline: 2px solid rgb(0, 95, 204) !important;
+  }
+}
+
+#paired-bar-legend {
+
+  text-align: center;
+
+  div {
+    margin: 0 0.5em;
+    display: flex;
+  }
+
+  .indicator {
+    width: 1em;
+    height: 1em;
+    vertical-align: middle;
+    margin: 0.25em;
+  }
+}
+
+
+.isEditor.type-sparkline .cdc-chart-inner-container {
+    margin: 3em auto 0;
+    max-width: 60%;
+}
+
+.cdc-open-viz-module.type-chart.lg.type-sparkline .chart-container > svg {
+  width: 100%;
+}
+
+.chart-container.sparkline {
+  display: flex !important;
+  flex-wrap: wrap !important;
+}
+
+.cdc-open-viz-module.type-chart.type-sparkline {
+
+  .cove-component__content {
+    background: #F2F2F2;
+  }
+
+  .cove-component__content.component--hideBackgroundColor {
+    background: transparent;
+  }
+
+  .chart-title:not(:empty) {
+    margin-bottom: 0 !important;
+  }
+
+  .cove-component__content .chart-container {
+    padding: 1em;
+  }
+
+  .cove-component__content:not(.no-borders) {
+    border: 1px solid $lightGray
+  }
+
+  .cove-component__header ~ .cove-component__content:not(.no-borders) {
+    border-top: none !important;
+  }
+
+  .subtext {
+    margin-top: 0px;
+  }
+
+  .isEditor {
+    position: relative;
+  }
+
+  .subtext {
+    margin-bottom: 15px;
+  }
+
+}
+
+.cdc-open-viz-module .cove-component__content.sparkline {
+  padding: 1em;
+}
+
+.cove-component__content.sparkline {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+
+  .visx-axis-tick:first-of-type {
+    transform: translate(20px, 0)
+  }
+
+  .visx-axis-tick:last-of-type {
+    transform: translate(-20px, 0)
+  }
 }