@everchron/ec-shards 1.2.3 → 1.3.2

package/package.json

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

package/src/components/dropzone/dropzone.vue

@@ -1,26 +1,177 @@
 <template>
-  <div class="ecs-dropzone" @drop.prevent="drop" @dragenter.prevent="drag" @dragleave.prevent="drag" @dragover.prevent>
-    <label class="ecs-dropzone-message" for="file">
-      <slot></slot>
-      <input type="file" id="file">
-    </label>
+  <div class="ecs-dropzone"
+    :class="[
+      error ? 'ecs-dropzone-error' : '',
+      disabled ? 'ecs-dropzone-disabled' : '',
+      dragging ? 'ecs-dropzone-dragging' : ''
+    ]"
+    @dragenter="dragging=true"
+    @dragleave="dragging=false"
+    @drop.prevent="drop"
+    @dragover.prevent>
+
+    <input @change="change" type="file" :multiple="multiple" ref="file" />
+
+    <ecs-empty-state type="empty-file-drag" :iconColor="iconColor">
+      <ecs-skeleton-loader v-if="initializing" type="single" :width="100" class="ecs-dropzone-skeleton" />
+      <div v-else>
+        Drag and drop your {{ fileTypeLabel }} or <i @click="() => this.$refs.file.click()">browse</i> to upload.
+        <div v-if="$slots.hint" class="ecs-dropzone-hint">
+          <!-- @slot Slot for an additional informational label underneath the dropzone text. Can contain basic HTML tags: `a`, `b`, `strong`. -->
+          <slot name="hint"></slot>
+        </div>
+        <div v-if="error && errorMessage" class="ecs-dropzone-error-message">{{ errorMessage }}</div>
+      </div>
+      <ecs-progress v-if="loading || progress" :infinite="!progress" :running="!!progress" :value="progress" />
+    </ecs-empty-state>
+
+    <ecs-button v-if="cancelButtonOptions.show" @click="cancelUpload" type="secondary" :icon="cancelButtonOptions.icon" class="ecs-dropzone-cancel">{{ cancelButtonOptions.label }}</ecs-button>
   </div>
 </template>
 
 <script>
+  import EcsEmptyState from '../empty-state/empty-state'
+  import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+  import EcsProgress from '../progress/progress'
+  import EcsButton from '../button/button'
+
   export default {
+    components: {
+      EcsEmptyState,
+      EcsSkeletonLoader,
+      EcsProgress,
+      EcsButton
+    },
+
+    props: {
+      /** Determines the file label in the informational text. E.g. "Drag and drop your **`load file`**  or browse to upload." */
+      fileTypeLabel: {
+        type: String,
+        default: 'files'
+      },
+      /** Determines if multiple items should be returned on @onFileDrop. */
+      multiple: {
+        type: Boolean,
+        default: false
+      },
+      /** Disables the upload dropzone. */
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      /** Indicates an error by coloring the dropzone red. */
+      error: {
+        type: Boolean,
+        default: false
+      },
+      /** Shows an additional error message. Will only show up when the `error` prop is also `true`. */
+      errorMessage: {
+        type: String
+      },
+      /** Turns the dropzone into initializing state. */
+      initializing: {
+        type: Boolean,
+        default: false
+      },
+      /** Shows an infinite progress bar. This should only be used when an exact percentage value isn't availabel. */
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      /** Shows a progress bar with the given % value. */
+      progress: {
+        type: Number
+      },
+      /** Shows a button in the bottom left of the dropzone which can be used to cancel the upload process, go back in the workflow, etc. Emits `@cancel` on click. */
+      cancelButton: {
+        type: Object,
+        default () {
+          return {
+            show: false,
+            label: 'Cancel',
+            icon: 'back'
+          }
+        }
+      }
+    },
+
+    data() {
+      return {
+        uploads  : [],
+        dragging : false
+      }
+    },
+
+    computed: {
+      showError(){
+        return !this.dragging && this.error
+      },
+
+      iconColor(){
+        if(this.dragging)
+          return '#6BAFFF'
+        else if(this.initializing || this.disabled)
+          return '#ECEDF2'
+        else
+          return '#D7DAE1'
+      },
+
+      cancelButtonOptions() {
+        return Object.assign({
+          show: false,
+          label: 'Cancel',
+          icon: 'back'
+        }, this.cancelButton);
+      }
+    },
+
     methods: {
-      drop(e) {
-        e.currentTarget.classList.toggle('drag-over')
+      drop({ dataTransfer }) {
+        this.dragging = false
+        const files = dataTransfer.files
+        const items = dataTransfer.items
+        if (files && files[0]){
+          if (this.multiple)
+            this.$emit('onFileDrop', files, items)
+          else
+            this.$emit('onFileDrop', files[0], items[0])
+        }
+      },
+
+      change({ target }) {
+        if (this.multiple)
+          /** Emitted when items are dropped into the dropzone area. */
+          this.$emit('onFileDrop', target.files)
+        else
+          this.$emit('onFileDrop', target.files[0])
       },
 
-      drag(e) {
-        e.currentTarget.classList.toggle('drag-over')
+      cancelUpload() {
+        /** Emitted when clicking the optional cancel/back button inside the dropzone. */
+        this.$emit('cancel')
       }
+    },
+
+    mounted() {
+      document.addEventListener('dragenter', this.show)
+    },
+
+    beforeDestroy() {
+      document.removeEventListener('dragenter', this.show)
     }
   }
 </script>
 
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-dropzone .ecs-empty-state{
+  a{
+    color: $color-blue-10;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 @import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
@@ -29,52 +180,73 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: $border-radius-small;
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  bottom: 10px;
-  right: 10px;
+  border-radius: $border-radius-large;
+  width: 100%;
+  height: 100%;
+  border: 1px dashed $color-gray-4;
+  position: relative;
   transition: .2s;
+  padding: $spacing-40;
 
   input[type=file]{
     display: none;
   }
 
-  &.drag-over{
-    background: $color-blue-1;
-    cursor: copy;
+  .ecs-empty-state-message i{
+    color: $color-blue-10;
+    font-weight: $font-weight-medium;
+    font-style: normal;
+    cursor: pointer;
+  }
 
-    .dropzone-message:before{
-      opacity: .8;
-    }
+  &-skeleton{
+    margin: 9px auto;
+  }
+
+  .ecs-progress{
+    width: 80%;
+    margin: $spacing-25 auto 0 auto;
+  }
+
+  &-hint,
+  &-error-message{
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
+    margin-top: $spacing-10;
   }
 
-  &-message{
-    padding-top: 180px;
-    position: relative;
-    font-size: $type-scale-4-font-size;
-    font-weight: 300;
+  &-hint{
     color: $color-gray-8;
+  }
+
+  &-cancel{
+    position: absolute;
+    bottom: 16px;
+    left: 16px;
+  }
 
-    i{
-      color: $color-blue-10;
-      font-style: normal;
-      font-weight: 400;
-      cursor: pointer;
+  &-dragging{
+    background: $color-blue-1;
+    border: 1px solid $color-blue-4;
+    box-shadow: 0 0 0 1px $color-blue-4 inset; 
+  }
+
+  &-error{
+    background: $color-red-1;
+    border-color: $color-red-4;
+
+    &-message{
+      color: $color-red-10;
     }
+  }
+
+  &-disabled{
+    background: $color-gray-1;
 
-    &:before{
-      content: "";
-      position: absolute;
-      width: 121px;
-      height: 151px;
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="121" height="151" viewBox="0 0 121 151"><defs><path id="b" d="M30,20 L30,140 L0,140 L0,20 L0,0 L110,0 L110,20 L30,20 Z"/><path id="a" d="M0,0 L110,0 L110,140 L0,140 L0,0 Z"/><mask id="d" width="110" height="140" x="0" y="0" fill="white"><use xlink:href="#a"/></mask></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="white"><use xlink:href="#b"/></mask><g stroke="#858E9E" stroke-dasharray="9 6" stroke-width="2" mask="url(#c)" opacity=".8"><use mask="url(#d)" xlink:href="#a"/></g><g stroke="#858E9E" transform="translate(30 20)"><path d="M0.5,0.5 L0.5,130.5 L90.5,130.5 L90.5,20.4954694 L70.9952996,0.5 L0.5,0.5 Z"/><polyline stroke-linecap="round" stroke-linejoin="round" points="90.496 20.5 70.5 20.5 70.5 .5"/></g></g></svg>');
-      top: 0;
-      left: 50%;
-      margin-left: -60px;
-      transition: .2s;
-      opacity: .6;
+    .ecs-empty-state-message i{
+      pointer-events: none;
+      color: $color-gray-10;
+      cursor: default;
     }
   }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-empty-state">
-    <ecs-icon v-if="type!='loading'" :type="type" color="#C9D0D4" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="type!='loading'" :type="type" :color="iconColor" :width="iconSize" :height="iconSize" />
     <div v-else class="ecs-empty-state-loading" />
     <div v-if="type!='loading'" class="ecs-empty-state-message" :class="size">
       <slot></slot>
@@ -30,6 +30,11 @@
         validator: v => ['sml', null].includes(v),
         default: null
       },
+      /** Determines the color if the empty state illustration icon. */
+      iconColor: {
+        type: String,
+        default: "#C9D0D4"
+      }
     },
 
     computed: {
@@ -57,18 +62,17 @@
   height: 100%;
 
   &-message{
-    font-weight: 300;
     font-size: $type-scale-4-font-size;
-    color: $color-gray-8;
+    color: $color-gray-9;
     min-width: 300px;
     max-width: 400px;
     text-align: center;
     margin-top: 10px;
-    line-height: 1.3em;
+    line-height: $type-scale-4-line-height;
 
     &.sml{
-      font-weight: 400;
       font-size: $type-scale-3-font-size;
+      line-height: $type-scale-3-line-height;
       min-width: auto;
       max-width: 100%;
     }

package/src/components/icon/icon.vue

@@ -63,5 +63,6 @@
 
 .icon{
   flex-shrink: 0;
+  transition: .2s color;
 }
 </style>

package/src/components/tab-button/tab-button.vue

@@ -200,7 +200,7 @@
 
   &.ecs-tab-bar-column{
     .ecs-tab-button{
-      padding: $spacing-10 $spacing-5 $spacing-10 $spacing-25;
+      padding: 5px $spacing-5 5px $spacing-25;
 
       &:after{
         position: relative;
@@ -212,6 +212,7 @@
         width: 3px;
         left: 0;
         top: 0;
+        border-radius: 0 2px 2px 0;
       }
 
       .icon:not(.sticker){
@@ -219,12 +220,12 @@
       }
 
       .sticker{
-        top: 23px;
+        top: 20px;
         left: 29px;
       }
 
       .hover{
-        inset: $spacing-5 $spacing-10;
+        inset: 0 $spacing-10;
         transform-origin: left;
       }
 

package/src/components/tabs/tabs.vue

@@ -31,7 +31,7 @@
 }
 
 .ecs-tab-content-fill{
-  min-height: 100%;
+  height: 100%;
 
   .ecs-tab-pane{
     min-height: 100%;

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,25 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 1.3.1 (27 August 2022)
+
+### Fixes
+
+- Fix height and padding of column tab buttons.
+- Set height and max-height to fill variant of EcsTab.
+
+## Version 1.3.0 (26 August 2022)
+
+### Features
+
+- Added the EcsDropzone component which can be used for file upload dropzones.
+
+### Changes
+
+- Allow to change the color of the illustrations within EcsEmptyState by using the new `iconColor` prop.
+- Small text style adjustments on EcsEmptyState
+- Added a transition for color on EcsIcon
+
 ## Version 1.2.3 (25 August 2022)
 
 ### Features

package/src/stories/dropzone/dropzone.stories.js

@@ -1,11 +1,71 @@
 import EcsDropzone from '@components/dropzone/dropzone';
 
 export default {
-  title: 'Input/Dropzone',
+  title: 'Input/Dropzone File Upload',
   component: EcsDropzone
 };
 
 export const dropzone = () => ({
   components: { EcsDropzone },
-  template: `<ecs-dropzone>Drag and drop here or <i>browse</i> to upload.</ecs-dropzone>`,
+  template: `
+            <div style="width:100%; height: 600px">
+              <ecs-dropzone />
+            </div>
+            `,
+});
+
+export const dropzoneWithHint = () => ({
+  components: { EcsDropzone },
+  template: `
+            <div style="width:100%; height: 600px">
+              <ecs-dropzone>
+                <template slot="hint">This is an additional <a href="#">hint text</a>.</template>
+              </ecs-dropzone>
+            </div>
+            `,
+});
+
+export const dropzoneError = () => ({
+  components: { EcsDropzone },
+  template: `
+            <div style="width:100%; height: 600px">
+              <ecs-dropzone error error-message="This is an optional error message." />
+            </div>
+            `,
+});
+
+export const dropzoneWithCancel = () => ({
+  components: { EcsDropzone },
+  template: `
+            <div style="width:100%; height: 600px">
+              <ecs-dropzone :cancel-button="{show: true, label: 'Back', icon: 'back'}" />
+            </div>
+            `,
+});
+
+export const dropzoneInitializing = () => ({
+  components: { EcsDropzone },
+  template: `
+            <div style="width:100%; height: 600px">
+              <ecs-dropzone initializing />
+            </div>
+            `,
+});
+
+export const dropzoneProcessing = () => ({
+  components: { EcsDropzone },
+  template: `
+            <div style="width:100%; height: 600px">
+              <ecs-dropzone loading />
+            </div>
+            `,
+});
+
+export const dropzoneUploading = () => ({
+  components: { EcsDropzone },
+  template: `
+            <div style="width:100%; height: 600px">
+              <ecs-dropzone :progress="56" />
+            </div>
+            `,
 });