@everchron/ec-shards 0.7.2 → 0.7.5

package/package.json

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

package/src/components/action-toolbar/action-toolbar.vue

@@ -26,6 +26,7 @@
   height: $toolbar_sub_height;
   background: #FFF;
   box-shadow: 0 1px 0 rgba($gray-10, .2);
+  position: relative;
 }
 
 .action-bar-enter-active {

package/src/components/button-table/button-table.vue

@@ -6,6 +6,7 @@
       hasLabel,
       subtle ? 'subtle' : '',
       pale ? 'pale' : '',
+      unreactive ? 'unreactive' : '',
       sizeClass
     ]"
     :disabled="disabled"
@@ -55,6 +56,10 @@
       chevron: {
         type: Boolean,
         default: false
+      },
+      unreactive: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -160,7 +165,7 @@
       pointer-events: none;
     }
 
-    &:hover{
+    &:not(.unreactive):hover{
       background: transparent;
 
       &:after{
@@ -170,7 +175,7 @@
     }
   }
 
-  &:hover{
+  &:not(.unreactive):hover{
     background: rgba($gray-8, .2);
 
     .icon{
@@ -194,7 +199,7 @@
       color: $gray-6;
     }
 
-    &:hover{
+    &:not(.unreactive):hover{
       color: $gray-11;
       background: rgba($gray-7, .14);
 
@@ -213,6 +218,10 @@
     }
   }
 
+  &.unreactive{
+    cursor: default;
+  }
+
   &:disabled{
     opacity: .5;
     cursor: default;

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

@@ -1,6 +1,9 @@
 <template>
-  <div class="ecs-sidebar-footer">
+  <div class="ecs-sidebar-footer" :class="[$slots.extension ? 'has-extension' : '']">
     <slot name="alert"></slot>
+    <div v-if="$slots.extension" class="ecs-sidebar-footer-extension" :class="[condensed ? 'condensed' : '']">
+      <slot name="extension"></slot>
+    </div>
     <div class="ecs-sidebar-footer-inner" :class="[condensed ? 'ecs-sidebar-footer-inner-condensed' : '']">
       <slot></slot>
     </div>
@@ -24,7 +27,7 @@ export default {
 
 .ecs-sidebar-footer{
   background: #FFF;
-  border-top: 1px solid #E7E8EC;
+  border-top: 1px solid $gray-3;
 
   &-inner{
     padding: 20px;
@@ -36,5 +39,18 @@ export default {
       padding: 7px 15px;
     }
   }
+
+  &.has-extension{
+    border-top: 1px solid $gray-4;
+  }
+
+  &-extension{
+    padding: 0 20px;
+    border-bottom: 1px solid $gray-3;
+
+    &.condensed{
+      padding: 0 15px;
+    }
+  }
 }
 </style>

package/src/stories/button-table/button-table.stories.js

@@ -8,6 +8,7 @@ export default {
 export const text = () => ({
   components: { EcsButtonTable },
   template: `<main>
+              <ecs-button-table size="md" icon="parties" label="5" />
               <ecs-button-table size="md" icon="parties" label="5" />
               <ecs-button-table size="sml" icon="parties" label="5" />
               <ecs-button-table size="md" chevron pale icon="parties" label="5" />

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

@@ -15,6 +15,17 @@ export const footer = () => ({
               </ecs-sidebar-footer>`
 });
 
+export const footerWithExtension = () => ({
+  components: { EcsSidebarFooter, EcsButton, EcsAlert },
+  template: `<ecs-sidebar-footer condensed>
+                <template slot="extension">
+                  This is an extension row.
+                </template>
+                <ecs-button type="secondary">Cancel</ecs-button>
+                <ecs-button type="primary" icon="add-plus">Add Version</ecs-button>
+              </ecs-sidebar-footer>`
+});
+
 export const footerWithAlert = () => ({
   components: { EcsSidebarFooter, EcsButton, EcsAlert },
   template: `<ecs-sidebar-footer>

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

@@ -23,6 +23,27 @@ The Sidebar Footer is a sub component that should only be used within the EcsSid
 </ecs-sidebar-footer>
 ```
 
+### With Extension Row
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Footer With Extension" height="100px">
+    {stories.footerWithExtension()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-sidebar-footer condensed>
+  <template slot="extension">
+    This is an extension row.
+  </template>
+  <ecs-button type="secondary">Cancel</ecs-button>
+  <ecs-button type="primary" icon="add-plus">Add Version</ecs-button>
+</ecs-sidebar-footer>
+```
+
+
+### With Alert Row
+
 <Canvas withSource="none" withToolbar={true}>
   <Story name="Footer With Alert" height="100px">
     {stories.footerWithAlert()}
@@ -41,4 +62,4 @@ The Sidebar Footer is a sub component that should only be used within the EcsSid
 
 ## Props and Slots
 
-<ArgsTable of={EcsSidebarFooter} />
+<ArgsTable of={EcsSidebarFooter} />