@everchron/ec-shards 0.6.75 → 0.6.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "0.6.75",
+  "version": "0.6.79",
   "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/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

@@ -5,6 +5,7 @@
                   selectable ? 'selectable' : '',
                   draggable ? 'draggable' : '',
                   large ? 'ecs-tree-view-entry-lg' : '',
+                  actionsOnHover ? 'actions-hover' : '',
                   stateClass
                 ]">
 
@@ -14,11 +15,14 @@
         :collapsed="!isVisible"
         @click="toggleCollapse" />
 
-      <ecs-icon v-if="icon" :type="icon" :color="iconColor" />
-      <span class="title">
+      <ecs-icon v-if="icon" :type="icon" :color="iconColor" :width="iconSize" :height="iconSize" />
+      <span @click="$emit('click', $event)" 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 +62,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: {
@@ -72,7 +76,11 @@
       draggable: {
         type: Boolean,
         default: false
-      }
+      },
+      actionsOnHover: {
+        type: Boolean,
+        default: false
+      },
     },
 
     data () {
@@ -92,6 +100,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 +135,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;
@@ -148,6 +159,21 @@
     }
   }
 
+  &.ecs-state-hover{
+    cursor: pointer;
+  }
+
+  &.actions-hover{
+    .ecs-tree-view-entry-actions{
+      opacity: 0;
+      transition: .2s;
+    }
+
+    &:hover .ecs-tree-view-entry-actions{
+      opacity: 1;
+    }
+  }
+
   &.active{
     background: rgba(#0661EB, .06);
   }
@@ -175,10 +201,6 @@
     line-height: 30px;
   }
 
-  i[class*="icon-"]{
-    margin-right: -4px;
-  }
-
   .ecs-form-check{
     margin-bottom: 0;
     padding-left: 2px;
@@ -197,6 +219,11 @@
     overflow: hidden;
     white-space: nowrap;
     margin-left: 6px;
+    flex: 1;
+  }
+
+  &-actions{
+    margin-left: auto;
   }
 
   .after{

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

@@ -1,5 +1,6 @@
 import EcsTreeListItem from '@components/tree-list-item/tree-list-item'
 import EcsTreeList from '@components/tree-list/tree-list'
+import EcsButton from '@components/button/button'
 
 export default {
   title: 'Content Structures/Tree List Item',
@@ -45,9 +46,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>
@@ -83,3 +93,21 @@ export const treeListItemDraggable = () => ({
                 </ecs-tree-list-item>
               </ecs-tree-list>`,
 });
+
+export const treeListItemActions = () => ({
+  components: { EcsTreeListItem, EcsTreeList, EcsButton },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-item state="hover">
+                  Actions (always visible)
+                  <template slot="actions">
+                    <ecs-button size="xsml" icon="link-remove" icon-only />
+                  </template>
+                </ecs-tree-list-item>
+                <ecs-tree-list-item state="hover" actions-on-hover>
+                  Actions (on hover)
+                  <template slot="actions">
+                    <ecs-button size="xsml" icon="link-remove" icon-only />
+                  </template>
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});

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

@@ -143,6 +143,27 @@ If a tree view item can be dragged, set the `draggable` attribute. This will add
 </ecs-tree-list>
 ```
 
+## Actions
+
+If a tree view item has any additional controls or action buttons, use the `actions` slot.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Tree List Item Actions" height="80px">
+    {stories.treeListItemActions()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-tree-list>
+  <ecs-tree-list-item>
+    Draggable List Item
+    <template slot="actions">
+      <ecs-button size="xsml" icon="link-break" icon-only />
+    </template>
+  </ecs-tree-list-item>
+</ecs-tree-list>
+```
+
 ## Props, Slots and Events
 
-<ArgsTable of={EcsTreeListItem} />
+<ArgsTable of={EcsTreeListItem} />