@everchron/ec-shards 1.2.1 → 1.3.0

package/package.json

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

package/src/components/dropzone/dropzone.vue

@@ -1,22 +1,163 @@
 <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>
@@ -29,52 +170,72 @@
   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;
 
   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;
   }
 
-  &-message{
-    padding-top: 180px;
-    position: relative;
-    font-size: $type-scale-4-font-size;
-    font-weight: 300;
+  .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;
+  }
+
+  &-hint{
     color: $color-gray-8;
+  }
+
+  &-cancel{
+    position: absolute;
+    bottom: 16px;
+    left: 16px;
+  }
+
+  &-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;
 
-    i{
-      color: $color-blue-10;
-      font-style: normal;
-      font-weight: 400;
-      cursor: pointer;
+    &-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/flex/flex-row.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-flex-row" :class="[directionClass, justifyClass, alignClass, wrapClass]">
+  <div class="ecs-flex-row" :class="[directionClass, justifyClass, alignClass, wrapClass]" :style="{columnGap: gap + 'px'}">
     <slot></slot>
   </div>
 </template>
@@ -29,6 +29,10 @@
       wrap: {
         type: Boolean,
         default: false
+      },
+      /** Determines the spacing between flex columns inside the row. Accepts only pixel values. */
+      gap: {
+        type: Number
       }
     },
 

package/src/components/icon/icon.vue

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

package/src/components/overlay/overlay.vue

@@ -161,7 +161,7 @@
         if(this.fullWidth && !this.$slots.tabs){
           return '100%'
         } else {
-          return '900px'
+          return '920px'
         }
       },
 

package/src/components/tabs/tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-tab-content" :class="flex ? 'ecs-tab-content-flex' : ''">
+  <div class="ecs-tab-content" :class="[flex ? 'ecs-tab-content-flex' : '', fill ? 'ecs-tab-content-fill' : '']">
     <slot></slot>
   </div>
 </template>
@@ -11,6 +11,11 @@
       flex: {
         type: Boolean,
         default: false
+      },
+      /** Sets the height of the tabs area to 100%. Also sets the inner tab height to 100%. */
+      fill: {
+        type: Boolean,
+        default: false
       }
     }
   }
@@ -24,4 +29,12 @@
   height: 100%;
   min-height: 0;
 }
+
+.ecs-tab-content-fill{
+  min-height: 100%;
+
+  .ecs-tab-pane{
+    min-height: 100%;
+  }
+}
 </style>

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,34 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## 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
+
+- Added `gap` prop to EcsFlexRow component.
+
+### Changes
+
+- Increased the EcsOverlay content area width from 900 to 920 pixels.
+
+## Version 1.2.2 (25 August 2022)
+
+### Features
+
+- Added `fill` prop to EcsTabs component.
+
 ## Version 1.2.1 (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>
+            `,
 });

package/src/stories/flex/flex-row.stories.js

@@ -15,6 +15,15 @@ export const flexRow = () => ({
             </ecs-flex-row>`,
 });
 
+export const flexRowColumnGap = () => ({
+  components: { EcsFlexRow, EcsFlexCol },
+  template: `<ecs-flex-row class="highlight" :gap="16">
+              <div>Flex Item 1</div>
+              <div>Flex Item 2</div>
+              <div>Flex Item 3</div>
+            </ecs-flex-row>`,
+});
+
 export const flexRowDirection = () => ({
   components: { EcsFlexRow, EcsFlexCol },
   template: `<div>

package/src/stories/tabs/tabs.stories.js

@@ -28,7 +28,7 @@ export const tabs = () => ({
                 <ecs-tab-button @click="tabIndex = 2" :show="tabIndex == 2">Calendar</ecs-tab-button>
                 <ecs-tab-button @click="tabIndex = 3" :show="tabIndex == 3">Versions</ecs-tab-button>
               </ecs-tab-bar>
-              <ecs-tabs>
+              <ecs-tabs fill>
                 <ecs-tab :show="tabIndex == 1">First Tab</ecs-tab>
                 <ecs-tab :show="tabIndex == 2">Second Tab</ecs-tab>
                 <ecs-tab :show="tabIndex == 3">Third Tab</ecs-tab>