@everchron/ec-shards 0.6.76 → 0.6.77

package/package.json

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

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

@@ -4,15 +4,18 @@
     :class="[
       active ? 'active' : '',
       hasLabel,
-      subtle ? 'subtle' : ''
+      subtle ? 'subtle' : '',
+      pale ? 'pale' : '',
+      sizeClass
     ]"
     :disabled="disabled"
     @click="$emit('click', $event)"
     @mouseover="$emit('mouseover', $event)"
     @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
-    <div v-if="label != null">{{ label }}</div>
+    <ecs-icon v-if="icon" :type="icon" :width="iconSize" :height="iconSize" />
+    <div v-if="label != null" class="label">{{ label }}</div>
+    <div v-if="chevron" class="chevron" :class="active ? 'expand' : ''" />
   </button>
 </template>
 
@@ -30,6 +33,15 @@
         type: Boolean,
         default: false
       },
+      pale: {
+        type: Boolean,
+        default: false
+      },
+      size: {
+        type: String,
+        validator: v => ['md', 'sml', null].includes(v),
+        default: 'md'
+      },
       icon: {
         type: String
       },
@@ -39,6 +51,10 @@
       disabled: {
         type: Boolean,
         default: false
+      },
+      chevron: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -47,6 +63,19 @@
         if (this.label && this.label !== '' || this.label != null)
           return `has-label`
         return this.label
+      },
+
+      sizeClass() {
+        if (this.size && this.size !== '')
+          return `ecs-button-table-${this.size}`
+        return this.size
+      },
+
+      iconSize() {
+        if (this.size == 'sml')
+          return '16'
+        else
+          return '20'
       }
     }
   }
@@ -63,24 +92,53 @@
   background: rgba($gray-7, .1);
   color: $gray-14;
   transition: .2s;
-  font-size: 14px;
-  padding: 1px;
   cursor: pointer;
   position: relative;
   z-index: 1;
   flex-shrink: 0;
 
+  &-md{
+    font-size: 14px;
+    padding: 1px;
+    height: 22px;
+
+    .label{
+      padding: 0 6px;
+    }
+
+    &.has-label{
+      padding: 4px;
+      height: 28px;
+    }
+  }
+
+  &-sml{
+    padding: 2px;
+    font-size: 12px;
+    height: 20px;
+
+    .label{
+      padding: 0 4px;
+    }
+  }
+
   .icon{
     color: $gray-8;
     transition: .2s;
   }
 
-  > div{
-    padding: 0 6px;
-  }
+  .chevron{
+    width: 16px;
+    height: 16px;
+    background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polyline fill="none" stroke="#858E9E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="-2 2 2 6 6 2" transform="rotate(-90 7.2 3.2)"/></svg>');
+    transition: .2s;
+    opacity: .6;
+    margin: 0 -1px 0 -2px;
 
-  &.has-label{
-    padding: 4px;
+    &.expand{
+      transform: rotate(90deg);
+      opacity: 1;
+    }
   }
 
   &.subtle{
@@ -128,6 +186,33 @@
     }
   }
 
+  &.pale{
+    color: $gray-10;
+    background: rgba($gray-7, .08);
+
+    .icon{
+      color: $gray-6;
+    }
+
+    &:hover{
+      color: $gray-11;
+      background: rgba($gray-7, .14);
+
+      .icon{
+        color: $gray-7;
+      }
+    }
+
+    &.active{
+      background: rgba($gray-8, .16);
+      color: $gray-11;
+
+      .icon{
+        color: $gray-7;
+      }
+    }
+  }
+
   &:disabled{
     opacity: .5;
     cursor: default;

package/src/components/data-card/data-card.vue

@@ -5,6 +5,7 @@
                 $slots.actions ? 'ecs-data-card-hover' : '',
                 hover ? 'ecs-data-card-hover' : '',
                 active ? 'active' : '',
+                isExpanded ? 'expanded' : '',
                 loading ? 'loading' : ''
               ]">
 
@@ -24,6 +25,7 @@
         <div v-if="$slots.actions" class="ecs-data-card-actions">
           <slot name="actions"></slot>
         </div>
+        <ecs-button-table @click="isExpanded = !isExpanded" v-if="expandable" pale chevron size="sml" :active="isExpanded" :icon="expandIcon" :label="expandLabel" class="expand-button" />
       </div>
       <div v-if="$slots.meta" class="ecs-data-card-row">
         <div class="ecs-data-card-row-inner">
@@ -31,6 +33,11 @@
           <ecs-skeleton-loader v-if="loading" type="single" :width="skeletonWidth(15, 30)" />
         </div>
       </div>
+      <div v-if="$slots.expand" v-show="isExpanded" class="ecs-data-card-expand">
+        <div class="ecs-data-card-expand-inner">
+          <slot name="expand"></slot>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -38,9 +45,10 @@
 <script>
   import EcsIcon from '../icon/icon'
   import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+  import EcsButtonTable from '../button-table/button-table'
 
   export default {
-    components: { EcsIcon, EcsSkeletonLoader },
+    components: { EcsIcon, EcsSkeletonLoader, EcsButtonTable },
 
     props: {
       icon: {
@@ -68,6 +76,26 @@
       spinning: {
         type: Boolean,
         default: false
+      },
+      expandable: {
+        type: Boolean,
+        default: false
+      },
+      expanded: {
+        type: Boolean,
+        default: false
+      },
+      expandIcon: {
+        type: String
+      },
+      expandLabel: {
+        type: String
+      }
+    },
+
+    data () {
+      return {
+        isExpanded: this.expanded
       }
     },
 
@@ -121,6 +149,10 @@
     background: rgba($gray-8, .04);
   }
 
+  &.expanded{
+    background: $gray-1;
+  }
+
   &.active{
     background: rgba(#0661EB, .05);
     cursor: default;
@@ -184,6 +216,16 @@
     }
   }
 
+  &-expand{
+    padding-top: 12px;
+
+    &-inner{
+      background: #FFF;
+      border: 1px solid $gray-3;
+      border-radius: 4px;
+    }
+  }
+
   .small{
     font-size: 12px;
   }
@@ -235,6 +277,10 @@
     color: $gray-10;
   }
 
+  .expand-button{
+    margin-left: 8px;
+  }
+
   .chained{
     display: inline-flex;
     

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

@@ -7,7 +7,12 @@ export default {
 
 export const text = () => ({
   components: { EcsButtonTable },
-  template: `<ecs-button-table icon="parties" label="5"></ecs-button-table>`,
+  template: `<main>
+              <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" />
+              <ecs-button-table size="sml" chevron pale icon="parties" label="5" active />
+            </main>`,
 });
 
 export const iconOnly = () => ({

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

@@ -21,7 +21,10 @@ Add text (usually a count) by using the `label` attribute. An icon should always
 </Canvas>
 
 ```js
-<ecs-button-table icon="parties" label="4"></ecs-button-table>
+<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" />
+<ecs-button-table size="sml" chevron pale icon="parties" label="5" active />
 ```
 
 ## Icon Only
@@ -50,4 +53,4 @@ Add text (usually a count) by using the `label` attribute. An icon should always
 
 ## Props and Events
 
-<ArgsTable of={EcsButtonTable} />
+<ArgsTable of={EcsButtonTable} />

package/src/stories/data-card/data-card.stories.js

@@ -132,6 +132,20 @@ export const doubleAction = () => ({
               </ecs-data-card>`
 });
 
+export const expandable = () => ({
+  components: { EcsDataCard, EcsButtonMore },
+  template: `<ecs-data-card expandable expand-icon="link" expand-label="2">
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="meta">
+                  <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
+                </template>
+                <template slot="expand">
+                  test
+                </template>
+              </ecs-data-card>`
+});
+
 export const loading = () => ({
   components: { EcsDataCardList, EcsDataCard },
   template: `<ecs-data-card-list>

package/src/stories/data-card/data-card.stories.mdx

@@ -200,6 +200,16 @@ The `control` prop and slot allows to show a simple control (checkbox, radiobutt
 </ecs-data-card-list>
 ```
 
+### Expandable Area
+
+The `expand` slot allows you to add an expandable area to the data card. Please note that if the expand slot is used, the props `expandable` (bool), `expandIcon` (String, icon for expand button) and `expandLabel` (String, label for expand button) will be required.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Expandable" height="200px">
+    {stories.expandable()}
+  </Story>
+</Canvas>
+
 ### Loading States
 
 Add a dynamic skeleton loading state to each data card by using the `loading` attribute. Note that this requires content within the data card, so if no content exists yet, you need to place some text as a placeholder.