@cdc/dashboard 1.1.2 → 4.22.10-alpha.1

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,8 +330,10 @@ $red: #f74242;
 
 .builder-row {
   position: relative;
+
   .widget__content {
     padding: 0 2em;
+
     > svg {
       width: 100%;
       height: auto;
@@ -298,24 +342,26 @@ $red: #f74242;
       flex-grow: 1;
     }
   }
+
   &: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,19 @@
       }
     }
 
+    .heading-body {
+      padding: .5em;
+
+      input[type="checkbox"] {
+        margin-right: 2em;
+        margin-left: .5em;
+      }
+
+      .table-height-input {
+        width: 6em;
+      }
+    }
+
     .toggle-bar {
       overflow: hidden;
       display: flex;
@@ -40,10 +58,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 +76,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 {
@@ -92,9 +126,12 @@
   }
 
   .warning-icon {
+    position: relative;
+    top: 2px;
     width: 15px;
     height: 15px;
-    margin-top: 7px;
+    margin-left: 5px;
+
     path {
       fill: #d8000c;
     }
@@ -144,6 +181,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;
@@ -158,7 +206,7 @@
     .dashboard-col-6 {
       width: 50%;
     }
-  
+
     .dashboard-col-4 {
       width: 33%;
     }
@@ -175,7 +223,14 @@
       margin-bottom: 1em;
     }
   }
-  
+
+  @include breakpoint(md) {
+    .cove-dashboard-filters {
+      display: flex;
+      gap: 30px;
+    }
+  }
+
   .dashboard-filters-section {
     margin: 0 0 1em;
   }
@@ -186,6 +241,10 @@
 
   .cdc-dashboard-inner-container {
     margin: 1em;
+
+    &.is-editor {
+      margin-top: 7em;
+    }
   }
 
   .sub-editor {
@@ -209,3 +268,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 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-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 +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-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>