@everchron/ec-shards 0.6.29 → 0.6.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "0.6.29",
+  "version": "0.6.33",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/alert/alert.vue

@@ -97,31 +97,55 @@
     > *:last-child{
       margin-bottom: 0;
     }
+
+    a{
+      text-decoration: underline;
+    }
   }
 
   &-info{
-    background-color: #F5F7FA;
-    color: #384D68;
+    background-color: rgba($gray-4, .25);
+    color: rgba($gray-14, .8);
+
+    a{
+      color: rgba($gray-14, .8);
+    }
   }
 
   &-error{
     background-color: $red-3;
-    color: $red-12;
+    color: rgba($red-14, .8);
+
+    a{
+      color: rgba($red-14, .8);
+    }
   }
 
   &-success{
     background-color: $green-3;
-    color: $green-13;
+    color: rgba($green-14, .8);
+
+    a{
+      color: rgba($green-14, .8);
+    }
   }
 
   &-warning{
     background-color: $yellow-2;
-    color: $yellow-13;
+    color: rgba($yellow-14, .9);
+
+    a{
+      color: rgba($yellow-14, .9);
+    }
   }
 
   &-important{
     background-color: $blue-3;
-    color: $blue-14;
+    color: rgba($blue-15, .8);
+
+    a{
+      color: rgba($blue-15, .8);
+    }
   }
 
   .action{
@@ -171,7 +195,7 @@
     font-weight: 500;
     display: flex;
     align-items: center;
-    filter: brightness(75%);
+    filter: brightness(90%);
     margin-bottom: 8px;
 
     .icon{

package/src/components/overlay/overlay.vue

@@ -12,21 +12,33 @@
         <div v-if="$slots.headercontrols" class="ecs-overlay-header-controls">
           <slot name="headercontrols"></slot>
         </div>
+        <ecs-button-toolbar v-if="$slots.sidebar && width <= 1400" @click="sidebarToggle" :icon="sidebarIcon" :title="showSidebar ? 'Hide ' + sidebarTitle : 'Show ' + sidebarTitle" :active="showSidebar" class="sidebar-button" />
         <ecs-button-toolbar @click="$emit('close')" icon="close">{{ closeText }}</ecs-button-toolbar>
       </div>
-      <div class="ecs-overlay-content scrollbar">
+      <div ref="content" class="ecs-overlay-content scrollbar">
         <div v-if="$slots.tabs" class="ecs-overlay-tabs scrollbar scrollbar-sml">
           <slot name="tabs"></slot>
         </div>
-        <div class="ecs-overlay-content-inner" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth }">
+        <div class="ecs-overlay-content-inner" :class="$slots.sidebar && !fullWidth ? 'has-sidebar' : ' '" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth }">
           <slot></slot>
         </div>
+        <div v-if="$slots.sidebar" class="ecs-overlay-sidebar">
+          <div v-if="width > 1400" class="ecs-overlay-sidebar-static scrollbar scrollbar-sml">
+            <slot name="sidebar"></slot>
+          </div>
+          <transition name="slide">
+            <div v-if="width <= 1400 && showSidebar" class="ecs-overlay-sidebar-float scrollbar scrollbar-sml">
+              <slot name="sidebar"></slot>
+            </div>
+          </transition>
+        </div>
       </div>
       <div v-if="$slots.footer" class="ecs-overlay-footer">
-        <div v-if="$slots.tabs  && !fullWidth" class="spacer" />
+        <div v-if="$slots.tabs  && !fullWidth" class="spacer-tabs" />
         <div class="ecs-overlay-footer-content" :style="{ width: contentWidth, maxWidth: contentMaxWidth }">
           <slot name="footer"></slot>
         </div>
+        <div v-if="$slots.sidebar  && !fullWidth && width > 1400" class="spacer-sidebar" />
       </div>
     </div>
   </transition>
@@ -68,12 +80,23 @@
       offsetTop: {
         type: Number,
         default: 41
-      }
+      },
+      //Props for additional slide-in sidbar
+      sidebarIcon: {
+        type: String,
+        default: 'bell'
+      },
+      sidebarTitle: {
+        type: String,
+        default: 'Notifications'
+      },
     },
 
     data () {
       return {
-        isShown: this.show
+        isShown: this.show,
+        showSidebar: false,
+        width: window.innerWidth,
       }
     },
 
@@ -95,7 +118,9 @@
       },
 
       contentMinWidth(){
-        if(this.fullWidth && this.$slots.tabs){
+        if(this.fullWidth && this.$slots.tabs && this.$slots.sidebar){
+          return 'calc(100% - 260px - 360px)'
+        } else if(this.fullWidth && this.$slots.tabs){
           return 'calc(100% - 260px)'
         } else {
           return '780px'
@@ -103,11 +128,34 @@
       }
     },
 
-    methods : {
+    mounted(){
+      this.$nextTick(() => {
+        window.addEventListener('resize', this.windowWidth)
+      })
+    },
+
+    beforeDestroy() {
+      window.removeEventListener('resize', this.windowWidth)
+    },
+
+    methods :{
       toggleShow(){
         this.isShown = !this.isShown
         this.$emit('toggled', this.id, this.isShown)
-      }
+      },
+
+      windowWidth() {
+        this.width = window.innerWidth
+      },
+
+      sidebarToggle(){
+        this.showSidebar = !this.showSidebar
+        this.$refs.content.classList.add('overflow-hidden')
+        setTimeout(() => {
+          this.$refs.content.classList.remove('overflow-hidden')
+        }, 320);
+        
+      },
     },
 
     watch: {
@@ -143,16 +191,29 @@
     &-controls{
       margin-right: 24px;
     }
+
+    .sidebar-button{
+      margin-right: 24px;
+    }
   }
 
   &-content{
     flex: 1;
     display: flex;
     overflow: auto;
+    position: relative;
+
+    &.overflow-hidden{
+      overflow: hidden;
+    }
   }
 
   &-content-inner{
     margin: 0 auto;
+
+    &.has-sidebar{
+      margin: 0 0 0 auto;
+    }
   }
 
   &-tabs{
@@ -164,6 +225,26 @@
     flex-shrink: 0;
   }
 
+  &-sidebar{
+    margin: 0 auto 0 0;
+  }
+
+  &-sidebar-static{
+    padding: 0 15px 0 30px;
+    min-width: 360px;
+  }
+
+  &-sidebar-float{
+    padding: 0 15px 0 20px;
+    min-width: 380px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: #FFF;
+    box-shadow: 0 0 20px rgba(0,0,0,.12);
+  }
+
   &-footer{
     flex-shrink: 0;
     background: #FFF;
@@ -175,11 +256,16 @@
       padding: 30px;
     }
 
-    .spacer{
+    .spacer-tabs{
       width: 260px;
       flex-shrink: 0;
     }
 
+    .spacer-sidebar{
+      width: 20%;
+      min-width: 320px;
+    }
+
     &-content{
       margin: 0 auto;
       display: flex;
@@ -231,5 +317,20 @@
 .fade-leave-to{
   opacity: 0;
 }
+
+.slide-enter-active,
+.slide-leave-active{
+  transition: all .3s;
+}
+
+.slide-enter{
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.slide-leave-to{
+  opacity: 0;
+  transform: translateX(100%);
+}
 </style>
 

package/src/components/sidebar-header/sidebar-header.vue

@@ -73,13 +73,13 @@ export default {
   }
 }
 
-.expansion-enter-active {
-  animation: expansion-in .25s;
+.expansion-enter-active{
+  animation: expansion-in .3s ease;
   overflow: hidden;
 }
 
-.expansion-leave-active {
-  animation: expansion-in .25s reverse;
+.expansion-leave-active{
+  animation: expansion-in .3s ease reverse;
   overflow: hidden;
 }
 
@@ -88,7 +88,7 @@ export default {
     max-height: 0;
   }
   100% {
-    max-height: 55px;
+    max-height: 46px;
   }
 }
 </style>
@@ -106,6 +106,23 @@ export default {
 }
 
 .ecs-sidebar-header-row{
+  > *{
+    opacity: 1;
+    transition: opacity .2s ease;
+  }
+
+  &.expansion-enter-active{
+    > *{
+      opacity: 0;
+    }
+  }
+
+  &.expansion-leave-active{
+    > *{
+      opacity: 0;
+    }
+  }
+
   .ecs-tab-bar{
     width: 100%;
   }

package/src/stories/overlay/overlay.stories.js

@@ -78,3 +78,42 @@ export const overlayFullWidthTabs = () => ({
                 </ecs-overlay>
               </div>`,
 });
+
+export const overlaySidebar = () => ({
+  components: { EcsOverlay },
+  data() {
+    return {
+      showOverlay: false
+    }
+  },
+  template: `<div>
+                <button @click="showOverlay = true">Show Overlay</button>
+                <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321" >
+                  
+                  content area
+
+                  <template slot="footer">footer area</template>
+                  <template slot="sidebar">sidebar area</template>
+                </ecs-overlay>
+              </div>`,
+});
+
+export const overlayTabsSidebar = () => ({
+  components: { EcsOverlay },
+  data() {
+    return {
+      showOverlay: false
+    }
+  },
+  template: `<div>
+                <button @click="showOverlay = true">Show Overlay</button>
+                <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
+
+                  content area
+
+                  <template slot="tabs">tab area</template>
+                  <template slot="sidebar">sidebar area</template>
+                  <template slot="footer">footer area</template>
+                </ecs-overlay>
+              </div>`,
+});

package/src/stories/sidebar-header/sidebar-header.stories.js

@@ -28,7 +28,7 @@ export const headerWithSubheaderExpanded = () => ({
                 <ecs-button type="secondary" icon-only icon="search" />
                 <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
               </template>
-              <template slot="sub-header">
+              <template slot="subheader">
                 <ecs-tab-bar type="segment">
                   <ecs-tab-button show>Locations</ecs-tab-button>
                   <ecs-tab-button>Family</ecs-tab-button>
@@ -40,13 +40,18 @@ export const headerWithSubheaderExpanded = () => ({
 
 export const headerWithSubheader = () => ({
   components: { EcsSidebarHeader, EcsButton, EcsTabBar, EcsTabButton },
-  template: `<ecs-sidebar-header>
+  data() {
+    return {
+      expand: false
+    }
+  },
+  template: `<ecs-sidebar-header :sub-header-expanded="expand">
               <h3 class="headline-2">Sidebar</h3>
               <template slot="primary-controls">
-                <ecs-button type="secondary" icon-only icon="search" />
+                <ecs-button @click="expand = !expand" type="secondary" icon-only icon="search" />
                 <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
               </template>
-              <template slot="sub-header">
+              <template slot="subheader">
                 <ecs-tab-bar type="segment">
                   <ecs-tab-button show>Locations</ecs-tab-button>
                   <ecs-tab-button>Family</ecs-tab-button>

package/src/stories/sidebar-header/sidebar-header.stories.mdx

@@ -35,13 +35,13 @@ The sidebar header is a required sub component of EcsSidebar. It always needs to
 </Canvas>
 
 ```js
-<ecs-sidebar-header>
+<ecs-sidebar-header :sub-header-expanded="expand">
   <h3 class="headline-2">Sidebar</h3>
   <template slot="primary-controls">
-    <ecs-button type="secondary" icon-only icon="search" />
+    <ecs-button @click="expand = !expand" type="secondary" icon-only icon="search" />
     <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
   </template>
-  <template slot="sub-header">
+  <template slot="subheader">
     <ecs-tab-bar type="segment">
       <ecs-tab-button show>Locations</ecs-tab-button>
       <ecs-tab-button>Family</ecs-tab-button>
@@ -66,7 +66,7 @@ The sidebar header is a required sub component of EcsSidebar. It always needs to
     <ecs-button type="secondary" icon-only icon="search" />
     <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
   </template>
-  <template slot="sub-header">
+  <template slot="subheader">
     <ecs-tab-bar type="segment">
       <ecs-tab-button show>Locations</ecs-tab-button>
       <ecs-tab-button>Family</ecs-tab-button>
@@ -78,4 +78,4 @@ The sidebar header is a required sub component of EcsSidebar. It always needs to
 
 ## Props and Slots
 
-<ArgsTable of={EcsSidebarHeader} />
+<ArgsTable of={EcsSidebarHeader} />