@cdc/dashboard 1.1.4 → 9.22.9

package/src/scss/grid.scss

@@ -11,7 +11,7 @@ $red: #f74242;
   width: 350px;
   border-right: #C7C7C7 1px solid;
   position: fixed;
-  top: 3em;
+  top: 6em;
   bottom: 0;
   z-index: 1;
   overflow-y: auto;
@@ -43,6 +43,7 @@ $red: #f74242;
   transition: border 300ms cubic-bezier(0.16, 1, 0.3, 1);
   background-color: #F2F2F2;
   user-select: none;
+
   &.can-drop {
     border-color: $blue-light;
   }
@@ -56,12 +57,15 @@ $red: #f74242;
   position: relative;
   z-index: 1;
   bottom: -1px;
+
   > li:not(.spacer) + li:not(.spacer) {
     margin-left: .3em;
   }
+
   .spacer {
     flex-grow: 1;
   }
+
   svg {
     width: 25px;
     height: auto;
@@ -76,9 +80,11 @@ $red: #f74242;
 .row-menu__btn:hover .row-menu__flyout {
   transition: width .2s cubic-bezier(0.16, 1, 0.3, 1);
   width: 144px;
+
   li {
     display: flex;
   }
+
   li + li {
     margin-left: .3em;
   }
@@ -92,9 +98,11 @@ $red: #f74242;
   transition: width .2s cubic-bezier(0.16, 1, 0.3, 1);
   z-index: 1;
   width: 25px;
+
   li:not(.current) {
     display: none;
   }
+
   li svg {
     opacity: .7;
   }
@@ -113,10 +121,11 @@ $red: #f74242;
   border-radius: .2em .2em 0 0;
   outline: none;
   transition: background-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
-  cursor: pointer;  
+  cursor: pointer;
   padding: .2em .3em;
   display: flex;
   fill: #fff;
+
   + .row-menu__btn {
     margin-left: .2em;
   }
@@ -137,15 +146,17 @@ $red: #f74242;
   justify-content: center;
   align-items: center;
   position: relative;
-  height: 150px;
+  height: 180px;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
   background-color: transparent;
   border: 2px dashed #C2C2C2;
   flex: 1 1 auto;
+
   &:hover {
     border-color: darken(#c2c2c2, 20%);
   }
+
   &.column--populated {
     background: none;
     border: none;
@@ -158,10 +169,21 @@ $red: #f74242;
   background-image: none;
 }
 
-.column-size--12 {width: 100%;}
-.column-size--8 {width: 66.666%;}
-.column-size--6 {width: 50%;}
-.column-size--4 {width: 33.333%;}
+.column-size--12 {
+  width: 100%;
+}
+
+.column-size--8 {
+  width: 66.666%;
+}
+
+.column-size--6 {
+  width: 50%;
+}
+
+.column-size--4 {
+  width: 33.333%;
+}
 
 .builder-column__text {
   padding: 0.5rem;
@@ -186,20 +208,36 @@ $red: #f74242;
   padding: 0;
   position: relative;
   cursor: move;
+
   &:hover {
     border-color: darken($lightGray, 20%);
+
     .widget-menu-item svg {
       fill: darken($mediumGray, 20%);
     }
-    svg.drag-icon {
+
+    .drag-icon,
+    .drag-icon svg {
       fill: darken($lightGray, 20%);
     }
   }
-  svg.drag-icon {
+
+  .btn-configure {
+    background: none;
+    width: 3em;
+    margin-left: 0.5em;
+  }
+
+  .drag-icon,
+  .drag-icon svg {
     fill: $lightGray;
+  }
+
+  .drag-icon {
     position: absolute;
-    left: .3em;
     top: .3em;
+    left: .3em;
+    width: 10px;
   }
 }
 
@@ -233,6 +271,7 @@ $red: #f74242;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
   svg {
     margin-bottom: .5em;
   }
@@ -270,6 +309,9 @@ $red: #f74242;
   height: 20px;
   cursor: pointer;
   user-select: none;
+  margin-left: 0.7em;
+  margin-top: 5px;
+
   svg {
     fill: $mediumGray;
   }
@@ -288,34 +330,39 @@ $red: #f74242;
 
 .builder-row {
   position: relative;
+
   .widget__content {
     padding: 0 2em;
+
     > svg {
       width: 100%;
       height: auto;
       max-width: 100px;
       max-height: 80px;
       flex-grow: 1;
+      margin-top: 40px;
     }
   }
+
   &:hover {
     .row-menu .row-menu__btn {
       background-color: $blue;
-  
+
       &:hover {
         background-color: lighten($blue, 8%);
       }
-  
+
       &.row-menu__btn--edit {
         background-color: transparent;
       }
-  
+
       &.row-menu__btn--remove:hover {
         background-color: $red;
       }
     }
+
     .column-container {
       border-color: $blue;
     }
   }
-}
+}

package/src/scss/main.scss

@@ -9,20 +9,25 @@
   .loading > div.la-ball-beat {
     margin-top: 20%;
   }
+
   .editor-heading {
-    background-color: #fff;
+    background-color: #ddd;
     border-bottom: #C7C7C7 1px solid;
     padding: 0 1em;
     display: flex;
-    height: 3em;
-    justify-content: space-between;
-    align-items: center;
+    height: 6em;
     position: fixed;
     width: 100%;
-    z-index: 99;
+    z-index: 19;
     top: 0;
+    &.sub-dashboard-viz {
+      height: 3em;
+    }
     .heading-1 {
       font-size: 1.2em;
+      padding-right: 1em;
+      margin: 0.5em 1em 0.5em 0;
+      border-right: 1px solid black;
       &.back-to {
         display: flex;
         span {
@@ -32,6 +37,15 @@
       }
     }
 
+    .heading-body {
+      padding: .5em;
+
+      input[type="checkbox"] {
+        margin-right: 2em;
+        margin-left: .5em;
+      }
+    }
+
     .toggle-bar {
       overflow: hidden;
       display: flex;
@@ -40,10 +54,13 @@
       position: relative;
       bottom: -1px;
       li {
-        padding: .6em 1.5em;
+        padding: .3em 1.5em;
         color: $mediumGray;
         border-bottom: #C7C7C7 1px solid;
         cursor: pointer;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
         &.active {
           border-bottom-width: 5px;
           border-bottom-color: $mediumGray;
@@ -55,6 +72,19 @@
         }
       }
     }
+
+    .description-input {
+      width: 100%;
+    }
+
+    .shared-filter-button {
+      display: inline-block;
+      border-radius: 1em;
+      border: 1px solid gray;
+      background-color: white;
+      padding: .5em;
+      margin-right: 1em;
+    }
   }
 
   .visually-hidden {
@@ -147,6 +177,17 @@
   .dashboard-col-12 {
     width: 100%;
   }
+
+  .preview-table-container {
+    padding-left: 350px;
+    padding-top: 100px;
+  }
+
+  .multi-table-container {
+    display: inline-block;
+    width: 100%;
+  }
+
   @include breakpointClass(md) {
     .dashboard-row {
       flex-direction: row;
@@ -179,6 +220,13 @@
     }
   }
 
+  @include breakpoint(md) {
+    .cove-dashboard-filters {
+      display: flex;
+      gap: 30px;
+    }
+  }
+
   .dashboard-filters-section {
     margin: 0 0 1em;
   }
@@ -189,6 +237,10 @@
 
   .cdc-dashboard-inner-container {
     margin: 1em;
+
+    &.is-editor {
+      margin-top: 7em;
+    }
   }
 
   .sub-editor {
@@ -212,3 +264,12 @@
     }
   }
 }
+
+.shared-filter-modal {
+  border: none;
+
+  label {
+    display: block;
+    margin: 1em 0;
+  }
+}

package/src/components/Header.js

@@ -1,15 +0,0 @@
-import React, { useContext, memo } from 'react'
-
-const Header = ({preview, setPreview, back, subEditor = null}) => {
-  return (
-    <div aria-level="2" role="heading" className="editor-heading">
-      {subEditor ? <div className="heading-1 back-to" onClick={back} style={{cursor: 'pointer'}}><span>&#8592;</span> Back to Dashboard</div> : <div className="heading-1">Dashboard Editor</div>}
-      {!subEditor && <ul className="toggle-bar">
-        <li className={preview ? 'inactive' : 'active'} onClick={() => {setPreview(false)}}>Build Layout</li>
-        <li className={preview ? 'active' : 'inactive'} onClick={() => {setPreview(true)}}>Preview &amp; Configure</li>
-      </ul>}
-    </div>
-  )
-}
-
-export default Header

package/src/images/icon-close.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>

package/src/images/icon-code.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-    <path fill="currentColor" d="M414.8 40.79L286.8 488.8C281.9 505.8 264.2 515.6 247.2 510.8C230.2 505.9 220.4 488.2 225.2 471.2L353.2 23.21C358.1 6.216 375.8-3.624 392.8 1.232C409.8 6.087 419.6 23.8 414.8 40.79H414.8zM518.6 121.4L630.6 233.4C643.1 245.9 643.1 266.1 630.6 278.6L518.6 390.6C506.1 403.1 485.9 403.1 473.4 390.6C460.9 378.1 460.9 357.9 473.4 345.4L562.7 256L473.4 166.6C460.9 154.1 460.9 133.9 473.4 121.4C485.9 108.9 506.1 108.9 518.6 121.4V121.4zM166.6 166.6L77.25 256L166.6 345.4C179.1 357.9 179.1 378.1 166.6 390.6C154.1 403.1 133.9 403.1 121.4 390.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4L121.4 121.4C133.9 108.9 154.1 108.9 166.6 121.4C179.1 133.9 179.1 154.1 166.6 166.6V166.6z"/>
-</svg>

package/src/images/icon-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>

package/src/images/icon-edit.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/>
-</svg>

package/src/images/icon-grid.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-    <path fill="currentColor" d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z">
-    </path>
-</svg>

package/src/images/icon-move.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16">
-  <circle cx="2" cy="2" r="2"/>
-  <circle cx="8" cy="2" r="2"/>
-  <circle cx="2" cy="8" r="2"/>
-  <circle cx="8" cy="8" r="2"/>
-  <circle cx="2" cy="14" r="2"/>
-  <circle cx="8" cy="14" r="2"/>
-</svg>

package/src/images/icon-up.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"/></svg>

package/src/images/warning.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/></svg>