@everchron/ec-shards 5.0.26 → 5.0.28

package/package.json

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

package/src/components/button/button.vue

@@ -172,6 +172,7 @@
   .icon{
     margin-right: .4em;
     margin-left: -.4em;
+    pointer-events: none;
   }
 
   &-icon-only{

package/src/components/popover-list/popover-list.vue

@@ -25,8 +25,10 @@
 </script>
 
 <style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
 .ecs-popover-list{
-  padding: 10px;
+  padding: $spacing-10;
 
   li{
     position: relative;
@@ -35,14 +37,14 @@
   hr{
     border: none;
     border-bottom: 1px solid rgba(133, 142, 158, 0.2);
-    margin: 10px -10px;
+    margin: $spacing-5 -8px;
   }
 
   &-inner{
     padding: 0;
 
     &::v-deep .ecs-popover-list-item{
-      padding: 12px 20px;
+      padding: $spacing-5 20px;
       border-radius: 0;
     }
   }

package/src/components/popover-list-headline/popover-list-headline.vue

@@ -1,6 +1,11 @@
 <template>
-  <li :class="[sticky ? 'ecs-popover-list-sticky-title' : 'ecs-popover-list-title']">
-    <slot></slot>
+  <li class="ecs-popover-list-title" :class="[sticky ? 'ecs-popover-list-title-sticky' : 'ecs-popover-list-title-default', sticky && $slots.controls ? 'has-controls' : '']">
+    <span>
+      <slot></slot>
+    </span>
+    <div v-if="$slots.controls" class="ecs-popover-list-title-controls">
+      <slot name="controls"></slot>
+    </div>
   </li>
 </template>
 
@@ -20,28 +25,50 @@
 @import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
-.ecs-popover-list{
-  &-title{
-    color: $color-gray-8;
-    font-size: $type-scale-3-font-size;
-    padding: 13px 12px;
-  }
+.ecs-popover-list-title{
+  display: flex;
+  align-items: center;
+
+  &-default{
+    padding: $spacing-10 $spacing-15;
+
+    &:first-child{
+      padding-top: $spacing-5;
+    }
 
-  li:first-child.ecs-popover-list-title{
-    padding-top: 5px;
+    > span{
+      color: $color-gray-8;
+      font-size: $type-scale-3-font-size;
+      line-height: $type-scale-3-line-height;
+    }
   }
 
-  &-sticky-title{
+  &-sticky{
     position: sticky !important;
     top: 0;
     background: $color-gray-2;
     border-top: 1px solid $color-gray-3;
-    color: $color-gray-9;
-    font-size: $type-scale-2-font-size;
-    font-weight: $font-weight-medium;
-    text-transform: uppercase;
     z-index: 1;
-    padding: 7px 20px 8px 20px;
+    padding: $spacing-10 $spacing-25;
+
+    &.has-controls{
+      padding: $spacing-5 $spacing-25;
+    }
+
+    > span{
+      color: $color-gray-9;
+      font-size: $type-scale-2-font-size;
+      line-height: $type-scale-2-line-height;
+      font-weight: $font-weight-medium;
+      text-transform: uppercase;
+    }
+  }
+
+  &-controls{
+    display: flex;
+    align-items: center;
+    column-gap: $spacing-5;
+    margin-left: auto;
   }
 }
 </style>

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

@@ -30,7 +30,7 @@
     </div>
 
     <a v-else-if="type === 'link'" @click="$emit('click', $event)" class="ecs-popover-list-item"
-            :class="[iconClass,
+            :class="[
                     danger ? `danger` : '',
                     subtle ? `subtle` : '',
                     disabled ? `disabled` : '',
@@ -38,29 +38,49 @@
                     selected ? `selected` : '']"
             :href="href">
 
-        <ecs-icon v-if="icon" :type="icon" />
+        <ecs-icon v-if="icon" :type="icon" size="24" />
         <ecs-file-icon v-if="fileIcon" :type="fileIcon" />
-        <slot></slot>
+        <span class="text">
+          <slot></slot>
+          <ecs-button 
+            v-if="secondaryActionOptions.show"
+            @click.stop="handleSecondaryClick"
+            @mouseover="preventHover = !preventHover"
+            @mouseleave="preventHover = !preventHover"
+            size="sml" :type="secondaryActionOptions.type" :icon="secondaryActionOptions.icon" :icon-only="secondaryActionOptions.iconOnly">
+            {{ secondaryActionOptions.label }}
+          </ecs-button>
+          <span v-if="help" class="help">{{help}}</span>
+        </span>
         <span v-if="suffix" class="after">{{suffix}}</span>
-        <span v-if="help" class="help">{{help}}</span>
         <ecs-icon v-if="hoverIcon" :type="hoverIcon" class="hover-icon" />
     </a>
 
     <button v-else class="ecs-popover-list-item"
-            :class="[iconClass,
+            :class="[
                     danger ? `danger` : '',
                     subtle ? `subtle` : '',
                     disabled ? `disabled` : '',
-                    noHover ? `no-hover` : '',
+                    noHover || preventHover ? `no-hover` : '',
                     selected ? `selected` : '']"
             @click="$emit('click', $event)">
 
-        <ecs-icon v-if="icon" :type="icon" />
+        <ecs-icon v-if="icon" :type="icon" size="24" />
         <ecs-file-icon v-if="fileIcon" :type="fileIcon" />
-        <slot></slot>
+        <span class="text">
+          <slot></slot>
+          <ecs-button 
+            v-if="secondaryActionOptions.show"
+            @click.stop="handleSecondaryClick"
+            @mouseover="preventHover = !preventHover"
+            @mouseleave="preventHover = !preventHover"
+            size="sml" :type="secondaryActionOptions.type" :icon="secondaryActionOptions.icon" :icon-only="secondaryActionOptions.iconOnly">
+            {{ secondaryActionOptions.label }}
+          </ecs-button>
+          <span v-if="help" class="help">{{help}}</span>
+        </span>
         <span v-if="suffix" class="after">{{suffix}}</span>
-        <span v-if="help" class="help">{{help}}</span>
-        <ecs-icon v-if="hoverIcon" :type="hoverIcon" class="hover-icon" />
+        <ecs-icon v-if="hoverIcon" :type="hoverIcon" size="24" class="hover-icon" />
     </button>
   </li>
 </template>
@@ -72,9 +92,10 @@
   import EcsSortbutton  from '../sortbutton/sortbutton'
   import EcsIcon        from '../icon/icon'
   import EcsFileIcon    from '../file-icon/file-icon'
+  import EcsButton      from '../button/button'
 
   export default {
-    components: { EcsCheckbox, EcsRadiobutton, EcsSwitch, EcsSortbutton, EcsIcon, EcsFileIcon },
+    components: { EcsCheckbox, EcsRadiobutton, EcsSwitch, EcsSortbutton, EcsIcon, EcsFileIcon, EcsButton },
 
     props: {
       /** Determines the type of popover list item.*/
@@ -166,17 +187,46 @@
         type: String,
         validator: v => ['ascending', 'descending',  null].includes(v),
         default: null
+      },
+      /** Adds another small action button inside the popover list item itself, for a secondary action. This is only available for regular list items (**not** sort, checkbox, switch, or radiobutton). */
+      secondaryAction: {
+        type: Object,
+        default () {
+          return {
+            show: false,
+            label: '',
+            type: 'secondary',
+            icon: null,
+            iconOnly: false
+          }
+        }
+      }
+    },
+
+    data() {
+      return {
+        preventHover : false
       }
     },
 
     computed: {
-      iconClass() {
-        if (this.icon && this.icon !== '' || this.fileIcon && this.fileIcon !== '')
-          return `has-icon`
-        else
-          return
+      secondaryActionOptions() {
+        return Object.assign({
+          show: false,
+          label: '',
+          type: 'secondary',
+          icon: null,
+          iconOnly: false
+        }, this.secondaryAction);
       }
-    }
+    },
+
+    methods : {
+      handleSecondaryClick(){
+        /** Emitted when the secondary action button is clicked. */
+        this.$emit('secondaryClick')
+      }
+    },
   }
 </script>
 
@@ -199,13 +249,14 @@
 
 .ecs-popover-list{
   &-item{
-    border-radius: $border-radius-x-small;
+    border-radius: $border-radius-small;
     position: relative;
     transition: .15s;
-    display: block;
+    display: flex;
+    align-items: center;
     color: $color-gray-13;
     font-size: $type-scale-3-font-size;
-    padding: 12px;
+    padding: $spacing-5 $spacing-10;
     width: 100%;
     text-decoration: none;
     text-align: left;
@@ -228,21 +279,27 @@
       pointer-events: none;
     }
 
+    .text{
+      display: flex;
+      align-items: center;
+      line-height: 24px;
+      flex: 1;
+      flex-wrap: wrap;
+
+      .ecs-button{
+        margin: -4px 0 -4px 8px;
+      }
+    }
+
     .icon{
-      top: 5px;
-      left: 5px;
-      position: absolute;
       color: $color-blue-8;
+      margin: 0 10px 0 0px;
     }
 
     &.subtle .icon{
       color: $color-gray-8;
     }
 
-    &.has-icon{
-      padding-left: 42px;
-    }
-
     &.selected{
       padding-right: 36px;
 
@@ -259,7 +316,7 @@
     }
 
     &.danger{
-      &.has-icon .icon{
+      .icon{
         color: $color-gray-8;
       }
 
@@ -280,7 +337,7 @@
     }
 
     &.control{
-      padding: 10px 12px;
+      padding: 6px 12px;
 
       .ecs-form-check{
         margin-bottom: 0;
@@ -307,7 +364,6 @@
       opacity: .4;
       font-size: $type-scale-2-font-size;
       line-height: $type-scale-2-line-height;
-      float: right;
 
       &-highlight{
         opacity: 1;
@@ -317,16 +373,18 @@
 
     .help{
       font-size: $type-scale-2-font-size;
+      line-height: $type-scale-2-line-height;
       opacity: .6;
       display: block;
-      margin-top: 4px;
+      min-width: 100%;
     }
 
     .icon.hover-icon{
       position: absolute;
-      right: 5px;
+      right: $spacing-5;
       left: auto;
-      top: 5px;
+      top: 50%;
+      margin-top: -12px;
       transition: .15s;
       opacity: 0;
     }

package/src/stories/Changelog.stories.mdx

@@ -28,7 +28,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 Reverted all EcsPagination updates and moved these changes to the @next branch, until infinite scroll feature can be implemented. This means 3.2.0 can be used again as a stable release for current application development.
 
-## Version 3.1.5 (undefined)
+## Version 3.1.5
 
 ### Features
 

package/src/stories/popover-list-headline/popover-list-headline.stories.js

@@ -1,5 +1,6 @@
 import EcsPopoverListHeadline from '@components/popover-list-headline/popover-list-headline';
 import EcsPopoverList from '@components/popover-list/popover-list';
+import EcsButton from '@components/button/button';
 
 export default {
   title: 'Action/Popover/Popover List Headline',
@@ -13,9 +14,34 @@ export const popoverListHeadline = () => ({
               </ecs-popover-list>`,
 });
 
+export const popoverListHeadlineWithControls = () => ({
+  components: { EcsPopoverListHeadline, EcsPopoverList, EcsButton },
+  template: `<ecs-popover-list>
+                <ecs-popover-list-headline>
+                Headline
+                <template slot="controls">
+                  <ecs-button size="sml" icon="edit">Edit</ecs-button>
+                </template>
+                </ecs-popover-list-headline>
+              </ecs-popover-list>`,
+});
+
 export const popoverListStickyHeadline = () => ({
   components: { EcsPopoverListHeadline, EcsPopoverList },
   template: `<ecs-popover-list>
                 <ecs-popover-list-headline sticky>Sticky Headline</ecs-popover-list-headline>
               </ecs-popover-list>`,
 });
+
+export const popoverListStickyHeadlineWithControls = () => ({
+  components: { EcsPopoverListHeadline, EcsPopoverList, EcsButton },
+  template: `<ecs-popover-list>
+                <ecs-popover-list-headline sticky>
+                  Sticky Headline
+                  <template slot="controls">
+                    <ecs-button size="sml" type="secondary" icon="edit">Edit</ecs-button>
+                    <ecs-button size="sml" icon="add-plus">Add</ecs-button>
+                  </template>
+                </ecs-popover-list-headline>
+              </ecs-popover-list>`,
+});

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

@@ -17,6 +17,7 @@ export const popoverListItemHelpText = () => ({
   components: { EcsPopoverListItem, EcsPopoverList },
   template: `<ecs-popover-list>
                 <ecs-popover-list-item help="Helper Text">List Item</ecs-popover-list-item>
+                <ecs-popover-list-item icon="help" help="Helper Text">List Item</ecs-popover-list-item>
               </ecs-popover-list>`,
 });
 
@@ -31,6 +32,7 @@ export const popoverListItemIcon = () => ({
   components: { EcsPopoverListItem, EcsPopoverList },
   template: `<ecs-popover-list>
                 <ecs-popover-list-item file-icon="pdf">List Item Default</ecs-popover-list-item>
+                <hr>
                 <ecs-popover-list-item icon="share" subtle selected>List Item Subtle</ecs-popover-list-item>
                 <ecs-popover-list-item icon="delete" danger>List Item Danger</ecs-popover-list-item>
                 <ecs-popover-list-item icon="help" hover-icon="add-plus">List Item Hover Item</ecs-popover-list-item>
@@ -51,3 +53,13 @@ export const popoverListItemControls = () => ({
                 <ecs-popover-list-item type="switch" suffix="TXT">List Item Switch</ecs-popover-list-item>
               </ecs-popover-list>`,
 });
+
+export const popoverListItemSecondaryAction = () => ({
+  components: { EcsPopoverListItem, EcsPopoverList },
+  template: `<ecs-popover-list>
+                <ecs-popover-list-item :secondaryAction="{show: true, label: 'Edit', icon: 'edit', type: 'primary'}">List Item</ecs-popover-list-item>
+                <ecs-popover-list-item :secondaryAction="{show: true, label: 'Edit', icon: 'edit', type: 'primary'}" help="Helper Text">List Item</ecs-popover-list-item>
+                <ecs-popover-list-item :secondaryAction="{show: true, label: 'Edit', icon: 'edit', type: 'primary'}" suffix="XLS">List Item</ecs-popover-list-item>
+                <ecs-popover-list-item icon="share" :secondaryAction="{show: true, label: 'Edit', icon: 'edit', type: 'primary'}" suffix="XLS">List Item</ecs-popover-list-item>
+              </ecs-popover-list>`,
+});