@everchron/ec-shards 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",
@@ -30,16 +30,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.15",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/vue": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/vue": "^6.5.10",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "core-js": "^3.6.5",
     "eslint": "^6.7.2",
+    "eslint-plugin-storybook": "^0.6.4",
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^5.0.0",
     "sass-loader": "^10.1.1",

package/src/assets/icons/empty-broken-transcript.svg

@@ -0,0 +1 @@
+<svg width="140" height="140" fill="none" xmlns="http://www.w3.org/2000/svg"><path vector-effect="non-scaling-stroke" d="M31.25 23.333h67.083C104.777 23.333 110 28.557 110 35M61.5 37.77h35M56.5 37.77h-4M61.5 43.77h30M56.5 43.77h-4M61.5 49.77h24M56.5 49.77h-4M61.5 55.77h20M56.5 55.77h-4M61.5 61.77h19M56.5 61.77h-4M61.5 67.77h19M56.5 67.77h-4M61.5 73.77h20M56.5 73.77h-4M61.5 79.77h23M56.5 79.77h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path vector-effect="non-scaling-stroke" d="M48.75 116.667h67.083c6.444 0 11.667-5.224 11.667-11.667v-5.833a5.833 5.833 0 0 0-5.833-5.834H63.333a5.833 5.833 0 0 0-5.833 5.834v8.75a8.75 8.75 0 0 1-8.75 8.75Zm0 0a8.75 8.75 0 0 1-8.75-8.75V58.333m0 .648V32.083a8.75 8.75 0 1 0-17.5 0v14.584a5.833 5.833 0 0 0 5.833 5.833H40v6.481ZM101.996 55.49a9.533 9.533 0 0 1 6.042.006 9.99 9.99 0 0 1-4.27 19.433 10.102 10.102 0 0 1-8.277-6.886 9.531 9.531 0 0 1 0-6.047 1 1 0 0 1 1.662-.377l5.614 5.614 4.472-4.472-5.615-5.614a1 1 0 0 1 .372-1.656v0Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path vector-effect="non-scaling-stroke" d="M117.728 77.728c7.029-7.03 7.029-18.426 0-25.456-7.029-7.03-18.426-7.03-25.456 0-7.03 7.03-7.03 18.426 0 25.456 7.03 7.03 18.427 7.03 25.456 0ZM107.581 74.652l6.112 6.112M114.653 67.582l6.111 6.111" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

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

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.75a6.75 6.75 0 1 0 0-13.5 6.75 6.75 0 0 0 0 13.5Z" fill="#6BAFFF" stroke="#fff" stroke-width="1.5"/><path d="M8.2 11.484v-3.75h-1" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="7.8" cy="4.8" r="1" fill="#fff"/></svg>

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

@@ -74,10 +74,7 @@
   &:after{
     content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    inset: 0;
     background: rgba($color-gray-8, .08);
     opacity: 0;
     transform: scale(.6);

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

@@ -126,6 +126,40 @@
   }
 </script>
 
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-data-list-data{
+  a:not(.ecs-button){
+    color: $color-blue-8;
+    cursor: pointer;
+
+    &:hover{
+      color: $color-blue-9;
+    }
+  }
+
+  li{
+    margin-bottom: 2px;
+  }
+
+  .subtle{
+    color: $color-gray-8;
+  }
+
+  li{
+    &:last-child{
+      margin-bottom: 0;
+    }
+  }
+
+  .ecs-button{
+    margin-top: -5px;
+    margin-bottom: -5px;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 @import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
@@ -221,19 +255,6 @@
     position: relative;
     z-index: 0;
 
-    a:not(.ecs-button){
-      color: $color-blue-8;
-      cursor: pointer;
-
-      &:hover{
-        color: $color-blue-9;
-      }
-    }
-
-    li{
-      margin-bottom: 2px;
-    }
-
     &-links{
       color: $color-gray-8;
     }
@@ -265,21 +286,6 @@
       }
     }
 
-    .subtle{
-      color: $color-gray-8;
-    }
-
-    li{
-      &:last-child{
-        margin-bottom: 0;
-      }
-    }
-
-    .ecs-button{
-      margin-top: -5px;
-      margin-bottom: -5px;
-    }
-
     .progress{
       background: $color-blue-2;
       position: absolute;

package/src/components/document-state/document-state.vue

@@ -4,16 +4,20 @@
     <div v-else class="no-txt" />
     <div v-if="instantView" class="instant" />
     <div v-else class="no-instant" />
-    <div v-if="loading" class="loading" />
+    <span v-if="loading" class="loading">
+      <ecs-icon type="loading" width="18px" height="18px" color="#202127" />
+    </span>
   </div>
 </template>
 
 <script>
   import EcsAnimations from '../animations/animations'
+  import EcsIcon from '../icon/icon'
 
   export default {
     components: {
-      EcsAnimations
+      EcsAnimations,
+      EcsIcon
     },
     props: {
       /** Determines if the document has been processed by OCR. */
@@ -72,12 +76,20 @@
   }
 
   .loading{
-    width: 16px;
-    height: 16px;
-    left: 16px;
-    top: 16px;
-    animation: spin 1.5s infinite linear reverse;
-    background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd"><circle cx="8" cy="8" r="8" fill="#FFF"/><path fill="#2F333C" d="M14.0263548,8.16381819 C14.0113782,7.38027913 13.841386,6.59917757 13.5274173,5.88496663 C13.2144798,5.17012288 12.7602845,4.52256819 12.2027063,3.98746663 C11.6454563,3.45196663 10.9846126,3.0286385 10.2693001,2.74935725 C9.55440947,2.46899788 8.78575322,2.335076 8.02635478,2.35131819 C7.2668626,2.36634163 6.51074541,2.53148225 5.81931572,2.83595882 C5.12734697,3.13942757 4.50046416,3.57974788 3.98258916,4.12005257 C3.46433916,4.660076 3.05493291,5.30022444 2.78509697,5.99268538 C2.51422978,6.68481819 2.38515947,7.42846663 2.40135478,8.16381819 C2.4164251,8.89928694 2.57671416,9.63039632 2.8716751,10.2990448 C3.1656751,10.9681854 3.59209697,11.5743729 4.11515166,12.0749979 C4.6379251,12.5760213 5.25740166,12.9715291 5.92703447,13.2318729 C6.59638603,13.4932479 7.31507353,13.6174432 8.02635478,13.6013182 C8.73777666,13.586201 9.44387822,13.4307635 10.0897454,13.1452948 C10.7360345,12.8607401 11.3215735,12.4482635 11.804972,11.9424354 C12.2887454,11.4368885 12.6703313,10.8381073 12.9212298,10.1913026 C13.073972,9.79921663 13.177636,9.38974007 13.2322688,8.97491975 C13.2468704,8.9757635 13.2615423,8.976326 13.2763548,8.976326 C13.6905657,8.976326 14.0263548,8.64056038 14.0263548,8.226326 C14.0263548,8.20527913 14.0252532,8.18446663 14.0235657,8.16384163 L14.0263548,8.16384163 L14.0263548,8.16381819 Z M12.8346282,10.1553963 C12.5595657,10.7788573 12.1609876,11.3436776 11.672386,11.8098494 C11.1840657,12.2763729 10.6059798,12.6440604 9.98202666,12.8855135 C9.35826103,13.1278338 8.68956572,13.2423729 8.02635478,13.2263182 C7.36302666,13.2111073 6.70687041,13.0653494 6.10658916,12.7988885 C5.50600322,12.5332713 4.96185478,12.1486151 4.51290947,11.6772635 C4.06363603,11.2061932 3.70984697,10.6487791 3.47788603,10.0476776 C3.24503447,9.44669319 3.13537041,8.80298225 3.15135478,8.16381819 C3.1666126,7.52453694 3.30754228,6.89336507 3.5644876,6.3158885 C3.82063603,5.73815413 4.19141728,5.21467757 4.64549541,4.78295882 C5.0993626,4.35091194 5.63608135,4.01104475 6.21433135,3.78855257 C6.79251103,3.56519319 7.4112376,3.46035725 8.02635478,3.47631819 C8.64158916,3.49162288 9.24777666,3.627701 9.80247197,3.87515413 C10.3573782,4.12183382 10.8601595,4.47869319 11.2746282,4.91556819 C11.6894251,5.35218538 12.0153704,5.86823225 12.2284173,6.42363069 C12.442261,6.97900569 12.5422688,7.57274788 12.5263548,8.16381819 L12.5291438,8.16381819 C12.5274563,8.18444319 12.5263548,8.20525569 12.5263548,8.22630257 C12.5263548,8.61316194 12.8192298,8.93146663 13.1953313,8.97189632 C13.1223938,9.37996663 13.0016204,9.77835725 12.8346282,10.1553963 L12.8346282,10.1553963 Z"/></g></svg>');
+    border-radius: 100%;
+    background: #FFF;
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    bottom: -3px;
+    right: 0;
+    display: block;
+
+    .icon{
+      position: absolute;
+      inset: 0;
+      animation: spin 1.5s infinite linear reverse;
+    }
   }
 }
 </style>

package/src/components/index.js

@@ -69,6 +69,8 @@ import EcsJumperPage from "./jumper-page/jumper-page.vue"
 import EcsLayoutIndex from "./layout-index/layout-index.vue"
 import EcsLayoutDirectory from "./layout-directory/layout-directory.vue"
 import EcsLayoutDataTable from "./layout-data-table/layout-data-table.vue"
+import EcsLegendItem from "./legend-item/legend-item.vue"
+import EcsLogMessage from "./log-message/log-message.vue"
 import EcsMap from "./map/map.vue"
 import EcsModal from "./modal/modal.vue"
 import EcsModalHeader from "./modal-header/modal-header.vue"
@@ -117,6 +119,7 @@ import EcsText from "./text/text.vue"
 import EcsToast from "./toast/toast.vue"
 import EcsToasts from "./toasts/toasts.vue"
 import EcsToolbar from "./toolbar/toolbar.vue"
+import EcsTranscriptState from "./transcript-state/transcript-state.vue"
 import EcsTreeList from "./tree-list/tree-list.vue"
 import EcsTreeListItem from "./tree-list-item/tree-list-item.vue"
 import EcsVideo from "./video/video.vue"
@@ -190,6 +193,8 @@ const Components = {
   EcsLayoutIndex,
   EcsLayoutDirectory,
   EcsLayoutDataTable,
+  EcsLegendItem,
+  EcsLogMessage,
   EcsMap,
   EcsModal,
   EcsModalHeader,
@@ -238,6 +243,7 @@ const Components = {
   EcsToast,
   EcsToasts,
   EcsToolbar,
+  EcsTranscriptState,
   EcsTreeList,
   EcsTreeListItem,
   EcsVideo

package/src/components/legend-item/legend-item.vue

@@ -0,0 +1,176 @@
+<template>
+  <ecs-flex-row
+    class="ecs-legend-item"
+    :gap="8"
+    :class="[
+      sizeClass,
+      hover ? 'hover' : '',
+      highlight ? 'highlighted' : ''
+    ]">
+    <div class="ecs-legend-item-color" :class="type" :style="{backgroundColor: validColor}" />
+    <div class="ecs-legend-item-label">{{ label }}</div>
+    <div v-if="count" class="ecs-legend-item-count">{{ count }}</div>
+    <div v-if="percentage" class="ecs-legend-item-percentage">{{ percentageLabel }}</div>
+    <div v-if="highlight || hover" class="ecs-legend-item-highlight" :style="{backgroundColor: validColor}" />
+  </ecs-flex-row>
+</template>
+
+<script>
+import EcsFlexRow from '../flex/flex-row'
+
+export default {
+  components: {
+    EcsFlexRow
+  },
+
+  props: {
+    /** Determines the type of legend message. */
+    type: {
+      type: String,
+      validator: v => ['fill', 'line'].includes(v),
+      default: 'fill'
+    },
+    /** Determines the size of the legend item. */
+    size: {
+      type: String,
+      validator: v => ['sml', 'md'].includes(v),
+      default: 'md'
+    },
+    /** The main legend item label. */
+    label: {
+      type: String,
+      required: true
+    },
+    /** Determines the color value of the legend item. This should exactly match the color this item represent in data visualization. */
+    color: {
+      type: String,
+      required: true
+    },
+    /** Displays a count next to the label. */
+    count: {
+      type: [String, Number]
+    },
+    /** Displays a percentage value next to the count/label. */
+    percentage: {
+      type: [String, Number]
+    },
+    /** Adds a background color to highlight the legend item. */
+    highlight: {
+      type: Boolean,
+      default: false
+    },
+    /** Determines if the legend item should have a hover state. */
+    hover: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    validColor(){
+      if(CSS.supports('color', this.color)){
+        return this.color
+      } else {
+        console.warn('The passed color value is not a valid color.')
+        return this.color
+      }
+    },
+
+    percentageLabel() {
+      if(Number.isInteger(this.percentage)){
+        return this.percentage + '%'
+      } else {
+        return this.percentage
+      }
+    },
+
+    sizeClass(){
+      return `ecs-legend-item-${this.size}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-legend-item{
+  color: $color-gray-15;
+  border-radius: $border-radius-small;
+  position: relative;
+  z-index: 1;
+  cursor: default;
+
+  &-sml{
+    font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    padding: $spacing-5;
+  }
+
+  &-md{
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
+    padding: $spacing-10;
+  }
+
+  &-color{
+    &.fill{
+      width: $spacing-15;
+      height: $spacing-15;
+      border-radius: 100%;
+    }
+
+    &.line{
+      width: $spacing-20;
+      height: 3px;
+      border-radius: 1px;
+    }
+  }
+
+  &-label{
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-count{
+    font-weight: $font-weight-medium;
+    text-align: right;
+  }
+  
+  &-percentage{
+    color: $color-gray-10;
+    text-align: right;
+    min-width: 48px;
+  }
+
+  &-highlight{
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transform: scale(.6);
+    transition: opacity .1s ease-in-out, transform .3s cubic-bezier(0.3, 0.76, 0.27, 1);
+    border-radius: $border-radius-small;
+    z-index: -1;
+    pointer-events: none;
+  }
+
+  &.hover{
+    cursor: pointer;
+
+    &:hover .ecs-legend-item-highlight{
+      opacity: .1;
+      transform: scale(1);
+    }
+  }
+
+  &.highlighted{
+    .ecs-legend-item-highlight{
+      opacity: .1;
+      transform: scale(1);
+    }
+  }
+}
+</style>

package/src/components/log-message/log-message.vue

@@ -0,0 +1,144 @@
+<template>
+  <ecs-flex-row class="ecs-log-message" :class="[type, highlight ? 'highlighted' : '']" align="start" :style="padding">
+    <ecs-sticker v-if="type != 'blank'" :type="type" />
+    <div class="ecs-log-message-content">
+      <slot></slot>
+    </div>
+    <div v-if="meta" class="ecs-log-message-meta">
+      {{ meta }}
+    </div>
+  </ecs-flex-row>
+</template>
+
+<script>
+import EcsFlexRow from '../flex/flex-row'
+import EcsSticker from '../sticker/sticker'
+
+export default {
+  components: {
+    EcsFlexRow, EcsSticker
+  },
+
+  props: {
+    /** Determines the type of log message, which also impacts the styling of it. */
+    type: {
+      type: String,
+      validator: v => ['blank', 'success', 'warning', 'info', 'error'].includes(v),
+      default: 'blank'
+    },
+    /** Adds a background color to highlight the line within the log. */
+    highlight: {
+      type: Boolean,
+      default: false
+    },
+    /** Meta text like (most usual) a timestamp, a username, etc. Appears as subtle gray text on the right side of the log message. */
+    meta: {
+      type: String
+    },
+    /** Allows to customize the left and right inner padding of the log message. */
+    verticalPadding: {
+      type: String,
+      default: '20px'
+    },
+  },
+
+  computed: {
+    padding() {
+      return 'padding-left: ' + this.verticalPadding + '; padding-right: ' + this.verticalPadding + ';'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-log-message-content{
+  p, ol, ul, blockquote{
+    margin: $spacing-10 0;
+  }
+
+  b, strong{
+    font-weight: $font-weight-medium;
+  }
+
+  a{
+    font-weight: $font-weight-medium;
+
+    &:hover{
+      text-decoration: underline;
+    }
+  }
+}
+
+.highlighted.error > .ecs-log-message-content a{
+  color: $color-red-12;
+}
+
+.highlighted.info > .ecs-log-message-content a{
+  color: $color-blue-12;
+}
+
+.highlighted.warning > .ecs-log-message-content a{
+  color: $color-yellow-12;
+}
+
+.highlighted.success > .ecs-log-message-content a{
+  color: $color-green-12;
+}
+</style>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-log-message{
+  column-gap: $spacing-10;
+  padding-top: $spacing-10;
+  padding-bottom: $spacing-10;
+  color: $color-gray-15;
+  font-size: $type-scale-2-font-size;
+  line-height: $type-scale-2-line-height;
+  border-bottom: 1px solid $color-gray-1;
+
+  &-content{
+    flex: 1;
+
+    > :first-child{
+      margin-top: 0;
+    }
+
+    > :last-child{
+      margin-bottom: 0;
+    }
+  }
+
+  &-meta{
+    opacity: .5;
+  }
+}
+
+.info.highlighted{
+  background: $color-blue-1;
+  border-color: $color-blue-2;
+  color: $color-blue-15;
+}
+
+.warning.highlighted{
+  background: $color-yellow-1;
+  border-color: $color-yellow-2;
+  color: $color-yellow-15;
+}
+
+.error.highlighted{
+  background: $color-red-1;
+  border-color: $color-red-2;
+  color: $color-red-15;
+}
+
+.success.highlighted{
+  background: $color-green-1;
+  border-color: $color-green-2;
+  color: $color-green-15;
+}
+</style>