@everchron/ec-shards 0.5.49 → 0.5.53

package/package.json

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

package/src/assets/icons/sticker-current.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle stroke="#FFF" stroke-width="1.5" fill="#0B71EB" cx="8" cy="8" r="6.75"/><circle fill="#FFF" cx="8" cy="8" r="2"/></g></svg>

package/src/assets/icons/sticker-error.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M9.838,1.25 C10.5679169,1.25 11.2674885,1.53991186 11.7823301,2.05566991 L11.7823301,2.05566991 L13.9449968,4.21833658 C14.4601846,4.73352447 14.75,5.43293364 14.75,6.16266667 L14.75,6.16266667 L14.75,9.838 C14.75,10.5674828 14.4605309,11.2658791 13.9450785,11.7822483 L13.9450785,11.7822483 L11.7825251,13.9454679 C11.266612,14.4604647 10.5674165,14.75 9.838,14.75 L9.838,14.75 L6.162,14.75 C5.43239964,14.75 4.7330415,14.4603683 4.21700325,13.9443301 L4.21700325,13.9443301 L2.05500325,11.7823301 C1.53981536,11.2671422 1.25,10.567733 1.25,9.838 L1.25,9.838 L1.25,6.162 C1.25,5.43208312 1.53991186,4.73251146 2.05566991,4.21766991 L2.05566991,4.21766991 L4.21719872,2.05614153 C4.73251146,1.53991186 5.43208312,1.25 6.162,1.25 L6.162,1.25 Z" stroke="#FFF" stroke-width="1.5" fill="#FF3750"/><path d="M6.28033009,5.21966991 L7.96,6.899 L9.63983593,5.21966991 C9.90610249,4.95340335 10.3227662,4.9291973 10.6163777,5.14705176 L10.7004961,5.21966991 C10.9933893,5.51256313 10.9933893,5.98743687 10.7004961,6.28033009 L10.7004961,6.28033009 L9.021,7.96 L10.7004961,9.63983593 C10.9933893,9.93272915 10.9933893,10.4076029 10.7004961,10.7004961 C10.4076029,10.9933893 9.93272915,10.9933893 9.63983593,10.7004961 L7.96,9.021 L6.28033009,10.7004961 C6.01406352,10.9667627 5.59739984,10.9909687 5.30378835,10.7731143 L5.21966991,10.7004961 C4.9267767,10.4076029 4.9267767,9.93272915 5.21966991,9.63983593 L5.21966991,9.63983593 L6.899,7.96 L5.21966991,6.28033009 C4.9267767,5.98743687 4.9267767,5.51256313 5.21966991,5.21966991 C5.51256313,4.9267767 5.98743687,4.9267767 6.28033009,5.21966991 Z" fill="#FFF" fill-rule="nonzero"/></g></svg>

package/src/assets/icons/sticker-loading.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle stroke="#FFF" stroke-width="1.5" fill="#FFF" cx="8" cy="8" r="6.75"/><path d="M7.99989896,2.125 C10.6600553,2.1247312 12.9884502,3.91192755 13.6759171,6.48171759 C14.3633841,9.05150763 13.2383549,11.7625596 10.93339,13.0905538 C8.6284251,14.4185479 5.71876491,14.0320623 3.84039896,12.1484028 C3.45042456,11.7573294 3.45131548,11.124165 3.84238889,10.7341906 C4.2334623,10.3442162 4.86662665,10.3451071 5.25660105,10.7361805 C6.49552328,11.9785942 8.41466084,12.2335103 9.93495685,11.3575993 C11.4552529,10.4816882 12.1972934,8.69354757 11.7438577,6.99857968 C11.2904221,5.30361178 9.75467224,4.1248227 8.00010105,4.125 C7.44781631,4.1250558 7.00005582,3.67738579 7.00000001,3.12510104 C6.99994421,2.57281629 7.44761421,2.125 7.99989896,2.125 Z" fill="#0B71EB" fill-rule="nonzero"/></g></svg>

package/src/assets/icons/sticker-success.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle stroke="#FFF" stroke-width="1.5" fill="#0EBA65" cx="8" cy="8" r="6.75"/><path d="M7.69503256,10.5488619 C7.57492119,10.6805468 7.4090215,10.7619043 7.22577977,10.7619043 C7.04253803,10.7619043 6.87663834,10.6805468 6.75657121,10.5488619 L4.76573071,8.36709221 C4.64566358,8.23545585 4.571429,8.05363767 4.571429,7.85281342 C4.571429,7.45116494 4.86850004,7.1255407 5.23502775,7.1255407 C5.41822525,7.1255407 5.58412493,7.20694676 5.70423631,7.33853464 L7.22577977,9.00612252 L10.2957645,5.64161342 C10.4158317,5.50997706 10.5817314,5.428571 10.7650173,5.428571 C11.1315008,5.428571 11.4285719,5.75414676 11.4285719,6.15584373 C11.4285719,6.35671645 11.3543373,6.53848615 11.2342259,6.67012252 L7.69503256,10.5488619 Z" fill="#FFF"/></g></svg>

package/src/assets/icons/sticker-warning-critical.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.0401618,1.307581 C8.36820767,1.307581 8.70117147,1.41483271 9.01069024,1.65564382 C9.23820117,1.83265138 9.45812313,2.08939814 9.64330128,2.43742416 L9.64330128,2.43742416 L14.4054311,11.3874278 C14.8227888,12.1718148 14.7612497,12.8687663 14.4574802,13.3711192 C14.1563146,13.869166 13.5730265,14.2500004 12.6788946,14.2500004 L12.6788946,14.2500004 L3.31488371,14.2500004 C2.41644814,14.2500004 1.83289768,13.8679521 1.53470209,13.3684992 C1.23664633,12.8692806 1.1767995,12.1748524 1.60391654,11.3834996 L1.60391654,11.3834996 L6.43450402,2.43349595 C6.62210224,2.08591821 6.84291408,1.83038667 7.07024419,1.65438452 C7.3809787,1.41380952 7.71368426,1.307581 8.0401618,1.307581 Z" stroke="#FFF" stroke-width="1.5" fill="#FF3750"/><path d="M8.1,10.3 C8.62467051,10.3 9.05,10.7253295 9.05,11.25 C9.05,11.7746705 8.62467051,12.2 8.1,12.2 C7.57532949,12.2 7.15,11.7746705 7.15,11.25 C7.15,10.7253295 7.57532949,10.3 8.1,10.3 Z M8.1,5 C8.51421356,5 8.85,5.33578644 8.85,5.75 L8.85,8.35 C8.85,8.76421356 8.51421356,9.1 8.1,9.1 C7.68578644,9.1 7.35,8.76421356 7.35,8.35 L7.35,5.75 C7.35,5.33578644 7.68578644,5 8.1,5 Z" fill="#FFF" fill-rule="nonzero"/></g></svg>

package/src/assets/icons/sticker-warning.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.0401618,1.307581 C8.36820767,1.307581 8.70117147,1.41483271 9.01069024,1.65564382 C9.23820117,1.83265138 9.45812313,2.08939814 9.64330128,2.43742416 L9.64330128,2.43742416 L14.4054311,11.3874278 C14.8227888,12.1718148 14.7612497,12.8687663 14.4574802,13.3711192 C14.1563146,13.869166 13.5730265,14.2500004 12.6788946,14.2500004 L12.6788946,14.2500004 L3.31488371,14.2500004 C2.41644814,14.2500004 1.83289768,13.8679521 1.53470209,13.3684992 C1.23664633,12.8692806 1.1767995,12.1748524 1.60391654,11.3834996 L1.60391654,11.3834996 L6.43450402,2.43349595 C6.62210224,2.08591821 6.84291408,1.83038667 7.07024419,1.65438452 C7.3809787,1.41380952 7.71368426,1.307581 8.0401618,1.307581 Z" stroke="#FFF" stroke-width="1.5" fill="#F1B251"/><path d="M8.1,10.3 C8.62467051,10.3 9.05,10.7253295 9.05,11.25 C9.05,11.7746705 8.62467051,12.2 8.1,12.2 C7.57532949,12.2 7.15,11.7746705 7.15,11.25 C7.15,10.7253295 7.57532949,10.3 8.1,10.3 Z M8.1,5 C8.51421356,5 8.85,5.33578644 8.85,5.75 L8.85,8.35 C8.85,8.76421356 8.51421356,9.1 8.1,9.1 C7.68578644,9.1 7.35,8.76421356 7.35,8.35 L7.35,5.75 C7.35,5.33578644 7.68578644,5 8.1,5 Z" fill="#FFF" fill-rule="nonzero"/></g></svg>

package/src/components/file-icon/file-icon.vue

@@ -36,6 +36,7 @@
         default: '30'
       }
     },
+    
     computed: {
       typeClass() {
         if (this.type && this.type !== '')

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

@@ -3,6 +3,7 @@
     <div class="ecs-file-list-inner">
       <ecs-icon v-if="icon" :type="icon" :color="iconColor" />
       <ecs-file-icon v-if="fileIcon" :type="fileIcon" />
+      <ecs-sticker v-if="(icon || fileIcon) && sticker" :type="sticker" />
       <div class="title">
         <slot></slot>
       </div>
@@ -29,9 +30,10 @@
 <script>
   import EcsIcon from '../icon/icon'
   import EcsFileIcon from '../file-icon/file-icon'
+  import EcsSticker from '../sticker/sticker'
 
   export default {
-    components: { EcsIcon, EcsFileIcon },
+    components: { EcsIcon, EcsFileIcon, EcsSticker },
 
     props: {
       date: {
@@ -72,6 +74,10 @@
       },
       visible: {
         type: Boolean
+      },
+      sticker: {
+        type: String,
+        default: null
       }
     },
 
@@ -145,6 +151,7 @@
     display: flex;
     align-items: center;
     height: 45px;
+    position: relative;
 
     > *:not(.loading){
       position: relative;
@@ -156,6 +163,12 @@
       margin: 0 8px 0 0;
     }
 
+    .ecs-sticker{
+      position: absolute;
+      top: 23px;
+      left: 16px;
+    }
+
     .title{
       text-overflow: ellipsis;
       overflow: hidden;

package/src/components/index.js

@@ -83,6 +83,7 @@ import EcsSidebarFooter from "./sidebar-footer/sidebar-footer.vue"
 import EcsSidebarHeader from "./sidebar-header/sidebar-header.vue"
 import EcsSkeletonLoader from "./skeleton-loader/skeleton-loader.vue"
 import EcsSortbutton from "./sortbutton/sortbutton.vue"
+import EcsSticker from "./sticker/sticker.vue"
 import EcsStructuredContent from "./structured-content/structured-content.vue"
 import EcsSwitch from "./switch/switch.vue"
 import EcsTab from "./tab/tab.vue"
@@ -183,6 +184,7 @@ const Components = {
   EcsSidebarHeader,
   EcsSkeletonLoader,
   EcsSortbutton,
+  EcsSticker,
   EcsStructuredContent,
   EcsSwitch,
   EcsTab,

package/src/components/sticker/sticker.vue

@@ -0,0 +1,51 @@
+<template>
+  <svg class="ecs-sticker" :class="spinning ? 'ecs-spinner' : ''"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    width="16px"
+    height="16px"
+    role="presentation">
+    <use v-bind:xlink:href="href"></use>
+  </svg>
+</template>
+
+<script>
+  export default {
+    props: {
+      type: {
+        type: String,
+        validator: v => [
+          'current',
+          'error',
+          'loading',
+          'warning',
+          'warning-critical',
+          'success'
+        ].includes(v),
+        default: 'success',
+        required: true
+      }
+    },
+    
+    computed: {
+      href() {
+        return `#sticker-${this.type}`;
+      },
+
+      spinning() {
+        if (this.type == 'loading')
+          return true
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+
+.ecs-spinner{
+  cursor: wait;
+  animation: spin .8s infinite linear reverse;
+}
+</style>
+

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

@@ -24,7 +24,7 @@ export const withIcon = () => ({
   components: { EcsFileList, EcsFileListItem },
   template: `<div>
               <ecs-file-list>
-                <ecs-file-list-item date="08/08/2020" above icon="link" icon-color="#00A048">file-list-item.xls</ecs-file-list-item>
+                <ecs-file-list-item date="08/08/2020" above icon="link" icon-color="#00A048" sticker="success">file-list-item.xls</ecs-file-list-item>
                 <ecs-file-list-item date="09/08/2020" above icon="link" icon-color="#2A5699">file-list-item.doc</ecs-file-list-item>
               </ecs-file-list>
             </div>`,
@@ -34,7 +34,7 @@ export const withFileIcon = () => ({
   components: { EcsFileList, EcsFileListItem },
   template: `<div>
               <ecs-file-list>
-                <ecs-file-list-item date="08/08/2020" above file-icon="pdf">file-list-item.pdf</ecs-file-list-item>
+                <ecs-file-list-item date="08/08/2020" above file-icon="pdf" sticker="success">file-list-item.pdf</ecs-file-list-item>
                 <ecs-file-list-item date="09/08/2020" above file-icon="docx">file-list-item.doc</ecs-file-list-item>
               </ecs-file-list>
             </div>`,
@@ -86,4 +86,4 @@ export const errorMessage = () => ({
                 <ecs-file-list-item date="09/08/2020" file-icon="docx">file-list-item.doc</ecs-file-list-item>
               </ecs-file-list>
             </div>`,
-});
+});

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

@@ -43,8 +43,8 @@ File list items can have a file icon, to represent the file type. Use the `file-
 
 ```js
 <ecs-file-list>
-  <ecs-file-list-item date="08/08/2020" above icon="s-csv" icon-color="#00A048">file-list-item.xls</ecs-file-list-item>
-  <ecs-file-list-item date="09/08/2020" above icon="s-doc" icon-color="#2A5699">file-list-item.doc</ecs-file-list-item>
+  <ecs-file-list-item date="08/08/2020" above file-icon="pdf" sticker="success">file-list-item.pdf</ecs-file-list-item>
+  <ecs-file-list-item date="09/08/2020" above file-icon="docx">file-list-item.doc</ecs-file-list-item>
 </ecs-file-list>
 ```
 
@@ -60,8 +60,8 @@ File list items can have a regular icon. Use the `icon` attribute to set the ico
 
 ```js
 <ecs-file-list>
-  <ecs-file-list-item date="08/08/2020" above icon="s-csv" icon-color="#00A048">file-list-item.xls</ecs-file-list-item>
-  <ecs-file-list-item date="09/08/2020" above icon="s-doc" icon-color="#2A5699">file-list-item.doc</ecs-file-list-item>
+  <ecs-file-list-item date="08/08/2020" above icon="link" icon-color="#00A048" sticker="success">file-list-item.xls</ecs-file-list-item>
+  <ecs-file-list-item date="09/08/2020" above icon="link" icon-color="#2A5699">file-list-item.doc</ecs-file-list-item>
 </ecs-file-list>
 ```
 

package/src/stories/sticker/sticker.stories.js

@@ -0,0 +1,18 @@
+import EcsSticker from '@components/sticker/sticker';
+
+export default {
+  title: 'Icons/Sticker',
+  component: EcsSticker,
+};
+
+export const sticker = () => ({
+  components: { EcsSticker },
+  template: `<main>
+              <ecs-sticker type="error" />
+              <ecs-sticker type="loading" />
+              <ecs-sticker type="success" />
+              <ecs-sticker type="warning" />
+              <ecs-sticker type="warning-critical" />
+              <ecs-sticker type="current" />
+            </main>`,
+});

package/src/stories/sticker/sticker.stories.mdx

@@ -0,0 +1,30 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import EcsSticker from '@components/sticker/sticker';
+import * as stories from './sticker.stories.js';
+
+<Meta
+  title="Icons/Sticker"
+  component={EcsSticker} />
+
+# Sticker `EcsSticker`
+
+Stickers are another type of icon, used primaryly to overlay on regular icons,  to indicate a specific status.
+
+The following `type`s are available:
+
+- error
+- loading
+- success
+- warning
+- warning-critical
+- current
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Sticker" height="50px">
+    {stories.sticker()}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={EcsSticker} />