@everchron/ec-shards 0.6.74 → 0.6.78

package/package.json

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

package/src/assets/icons/automation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><polygon vector-effect="non-scaling-stroke" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" points="16.048 5.25 7.146 17.167 15 17.167 13.952 24.75 22.854 12.833 15 12.833"/></svg>

package/src/assets/icons/video-false.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g vector-effect="non-scaling-stroke" stroke="currentColor" opacity=".5" transform="translate(5.333 5.333)"><path vector-effect="non-scaling-stroke" d="M9.84967295,19.333333 L5,19.333333 C2.23857625,19.333333 0,17.0947567 0,14.333333 L0,5 C0,2.23857625 2.23857625,0 5,0 L14.333333,0 C17.0947567,0 19.333333,2.23857625 19.333333,5 L19.333333,10.2751109 L19.333333,10.2751109"/><path vector-effect="non-scaling-stroke" d="M6.74809447,7.25183654 C6.74809447,6.81652264 6.98227676,6.41486596 7.36108777,6.2003889 C7.73989879,5.98591183 8.2047937,5.99177103 8.57807902,6.21572698 L12.6027714,8.63055693 C12.9667018,8.8489372 13.1893762,9.24224309 13.1893762,9.6666665 C13.1893762,10.0910899 12.9667018,10.4843958 12.6027714,10.7027761 L8.57807902,13.1176664 C8.2047937,13.3416224 7.73989879,13.3474816 7.36108777,13.1330045 C6.98227676,12.9185275 6.74809447,12.5168708 6.74809447,12.0815569 L6.74809447,7.25183654 Z"/></g><g vector-effect="non-scaling-stroke" stroke="currentColor" transform="translate(19 19)"><line vector-effect="non-scaling-stroke" x2="6" y2="6"/><line vector-effect="non-scaling-stroke" x1="6" y2="6"/></g></g></svg>

package/src/assets/icons/video.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><rect vector-effect="non-scaling-stroke" width="17.333" height="17.333" x="6.333" y="6.333" stroke="currentColor" rx="5"/><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M12.3833492,12.83498 C12.3833492,12.4446986 12.5933057,12.0845926 12.9329294,11.8923028 C13.2725531,11.700013 13.6893554,11.7052661 14.024025,11.9060542 L17.63237,14.0710742 C17.9586524,14.2668634 18.1582915,14.6194825 18.1582915,15 C18.1582915,15.3805175 17.9586524,15.7331366 17.63237,15.9289258 L14.024025,18.094 C13.6893554,18.2947881 13.2725531,18.3000412 12.9329294,18.1077514 C12.5933057,17.9154616 12.3833492,17.5553556 12.3833492,17.1650742 L12.3833492,12.83498 Z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g vector-effect="non-scaling-stroke" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><rect vector-effect="non-scaling-stroke" width="19.333" height="19.333" x="5.333" y="5.333" stroke="currentColor" rx="5"/><path vector-effect="non-scaling-stroke" stroke="currentColor" d="M12.0814278,12.5851699 C12.0814278,12.149856 12.3156101,11.7481993 12.6944211,11.5337222 C13.0732321,11.3192452 13.538127,11.3251044 13.9114124,11.5490603 L17.9361048,13.9638903 C18.3000351,14.1822705 18.5227096,14.5755764 18.5227096,14.9999998 C18.5227096,15.4244232 18.3000351,15.8177291 17.9361048,16.0361094 L13.9114124,18.4509998 C13.538127,18.6749557 13.0732321,18.6808149 12.6944211,18.4663379 C12.3156101,18.2518608 12.0814278,17.8502041 12.0814278,17.4148902 L12.0814278,12.5851699 Z"/></g></svg>

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="button-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;
+
+    .button-label{
+      padding: 0 6px;
+    }
+
+    &.has-label{
+      padding: 4px;
+      height: 28px;
+    }
+  }
+
+  &-sml{
+    padding: 2px;
+    font-size: 12px;
+    height: 20px;
+
+    .button-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/components/section/section.vue

@@ -5,7 +5,7 @@
                indentation,
                headlineIndentation]">
 
-    <h3 v-if="title" class="ecs-section-headline" :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', hasControls]">
+    <h3 v-if="title" class="ecs-section-headline" :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', $slots.controls ? 'has-buttons' : '']">
       {{title}}
       <div v-if="$slots.controls" class="ecs-section-controls">
         <slot name="controls"></slot>
@@ -46,11 +46,6 @@
     },
 
     computed: {
-      hasControls () {
-        if (!!this.$slots['controls'])
-          return 'has-buttons'
-      },
-
       indentation() {
         if (this.indent && this.indent !== '')
           return `ecs-section-indent-${this.indent}`

package/src/components/states/states.vue

@@ -35,6 +35,21 @@
     }
   }
 
+  &-selected{
+    background: rgba($blue-10, .1);
+
+    .ecs-fade-escape{
+      &:before{
+        opacity: 1;
+        background: linear-gradient(to right, rgba(242,247,254,0) 0%, rgba(242,247,254,1) 60%, rgba(242,247,254,1) 100%);
+      }
+
+      &:after{
+        opacity: 0;
+      }
+    }
+  }
+
   &-add{
     background: #F2FBF5;
 

package/src/components/tree-list-item/tree-list-item.vue

@@ -14,11 +14,14 @@
         :collapsed="!isVisible"
         @click="toggleCollapse" />
 
-      <ecs-icon v-if="icon" :type="icon" :color="iconColor" />
+      <ecs-icon v-if="icon" :type="icon" :color="iconColor" :width="iconSize" :height="iconSize" />
       <span class="title">
         <slot></slot>
       </span>
       <span v-if="count" class="after small subtle">{{count}}</span>
+      <div v-if="$slots.actions" class="ecs-tree-view-entry-actions">
+        <slot name="actions"></slot>
+      </div>
     </div>
     <div v-if="$slots.collapse" :class="isVisible ? 'collapse-show' : 'collapse-hide'">
       <slot name="collapse"></slot>
@@ -58,7 +61,7 @@
       },
       state: {
         type: String,
-        validator: v => ['active', 'shadow', 'add', 'null', null].includes(v),
+        validator: v => ['active', 'shadow', 'add', 'selected', 'hover', 'null', null].includes(v),
         default: null
       },
       selectable: {
@@ -92,6 +95,12 @@
           return `color-${this.iconColor}`
         return this.iconColor
       },
+      iconSize() {
+        if (this.large == true)
+          return '30'
+        else
+          return '20'
+      },
       stateClass() {
         if (this.state && this.state !== '')
           return `ecs-state-${this.state}`
@@ -121,9 +130,6 @@
 .ecs-tree-view-entry{
   display: flex;
   align-items: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   transition: .1s;
   font-size: 13px;
@@ -175,10 +181,6 @@
     line-height: 30px;
   }
 
-  i[class*="icon-"]{
-    margin-right: -4px;
-  }
-
   .ecs-form-check{
     margin-bottom: 0;
     padding-left: 2px;

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.

package/src/stories/tree-list-item/tree-list-item.stories.js

@@ -45,9 +45,18 @@ export const treeListItemSizes = () => ({
 export const treeListItemStates = () => ({
   components: { EcsTreeListItem, EcsTreeList },
   template: `<ecs-tree-list>
-                <ecs-tree-list-item :count="13" state="null" class="mb-1">
+                <ecs-tree-list-item :count="13" class="mb-1">
                   Default
                 </ecs-tree-list-item>
+                <ecs-tree-list-item :count="13" state="hover" class="mb-1">
+                  Hover
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :count="13" selectable class="mb-1">
+                  Selectable
+                </ecs-tree-list-item>
+                <ecs-tree-list-item :count="13" selectable state="selected" class="mb-1">
+                  Selected
+                </ecs-tree-list-item>
                 <ecs-tree-list-item :count="13" state="active" class="mb-1">
                   Active
                 </ecs-tree-list-item>