@everchron/ec-shards 0.8.2 → 0.8.3

package/package.json

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

package/src/assets/icons/block-sign.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" d="M9.39477 14.5005C10.0036 14.0011 10.8919 14.0455 11.4477 14.6024L12.388 15.5416V11.7521C12.388 10.2734 13.8364 9.22903 15.2394 9.69703L18.2759 10.7089C19.161 11.0035 19.7579 11.8323 19.7579 12.7639V17.2034C19.7579 19.2672 18.0842 20.9409 16.0204 20.9409H14.2589C13.0814 20.9409 11.9731 20.3863 11.2668 19.4438L9.1391 16.6022C8.64835 15.9457 8.76102 15.0194 9.39477 14.5005V14.5005Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M10.0329 24.1163L5.88483 19.9682C5.47858 19.5619 5.25 19.0105 5.25 18.4352V11.5637C5.25 10.9895 5.47858 10.4381 5.88375 10.0329L10.0318 5.88483C10.4381 5.47858 10.9895 5.25 11.5637 5.25H18.4342C19.0094 5.25 19.5608 5.47858 19.9671 5.88483L24.1141 10.0318C24.5214 10.4392 24.75 10.9917 24.75 11.5669V18.4352C24.75 19.0094 24.5214 19.5598 24.1163 19.966L19.9682 24.1152C19.5619 24.5214 19.0105 24.75 18.4352 24.75H11.5637C10.9895 24.75 10.4381 24.5214 10.0329 24.1163V24.1163Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/button-toolbar-icon/button-toolbar-icon.vue

@@ -7,6 +7,9 @@
           ]" @click="$emit('click', $event)">
     <ecs-icon :type="icon" />
     <span v-if="hasBadge" class="badge" />
+    <div class="sub-icon">
+      <ecs-icon v-if="subIcon" :type="subIcon" width="14" height="14" />
+    </div>
   </button>
 </template>
 
@@ -21,6 +24,9 @@
         type: String,
         required: true
       },
+      subIcon: {
+        type: String
+      },
       refresh: {
         type: Boolean,
         default: false
@@ -75,13 +81,17 @@
     pointer-events: none;
   }
 
-  &:hover{
+  &:not([disabled]):not(.loading):hover{
     background: transparent;
     
     &:after{
       opacity: 1;
       transform: scale(1);
     }
+
+    .sub-icon{
+      background: $gray-2;
+    }
   }
 
   .badge{
@@ -95,6 +105,18 @@
     border: 2px solid #FFF;
   }
 
+  .sub-icon{
+    padding: 2px;
+    color: $gray-15;
+    position: absolute;
+    bottom: 1px;
+    left: 1px;
+    display: flex;
+    border-radius: 4px;
+    background: #FFF;
+    transition: .2s background;
+  }
+
   &.loading{
     opacity: .5;
     cursor: wait;
@@ -111,9 +133,13 @@
   &:disabled{
     opacity: .5;
     cursor: not-allowed;
+
+    .sub-icon{
+      color: $gray-6;
+    }
   }
 
-  &.active{
+  &:not([disabled]):not(.loading).active{
     color: $blue-9;
 
     &:after{
@@ -121,6 +147,11 @@
       transform: scale(1);
       background: rgba($blue-8, .08);
     }
+
+    .sub-icon{
+      background: $blue-2;
+      color: $blue-13;
+    }
   }
 }
 </style>
@@ -130,5 +161,11 @@
 
 .popover-button.active > .ecs-toolbar-icon-button{
   color: $blue-9;
+
+  &:after{
+    opacity: 1;
+    transform: scale(1);
+    background: rgba($blue-8, .08);
+  }
 }
 </style>

package/src/stories/button-toolbar-icon/button-toolbar-icon.stories.js

@@ -15,3 +15,10 @@ export const regular = () => ({
               <ecs-button-toolbar-icon icon="toolbar-cards" has-badge />
             </main>`,
 });
+
+export const subIcon = () => ({
+  components: { EcsButtonToolbarIcon },
+  template: `<main>
+              <ecs-button-toolbar-icon icon="toolbar-refresh" sub-icon="mail" />
+            </main>`,
+});

package/src/stories/button-toolbar-icon/button-toolbar-icon.stories.mdx

@@ -23,7 +23,6 @@ Toolbar icon buttons are a special type of button, that should be used exclusive
 <ecs-button-toolbar-icon loading icon="toolbar-sort" />
 <ecs-button-toolbar-icon disabled icon="toolbar-sort" />
 <ecs-button-toolbar-icon icon="toolbar-cards" has-badge />
-
 ```
 
 ## States
@@ -35,6 +34,20 @@ Toolbar icon buttons can have different states, which can be applied by setting
 + `active`
 + `has-badge`
 
+## Sub Icon
+
+A sub icon can be shown in the bottom left edge, which can communicate additional activity state changes.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Sub Icon" height="50px">
+    {stories.subIcon()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-button-toolbar-icon icon="refresh" sub-icon="mail" />
+```
+
 ## Props, Slots and Events
 
 <ArgsTable of={EcsButtonToolbarIcon} />