From 2b11d14bdea5ce2e94ee5849d4dfe852ec4fb807 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Wed, 17 Oct 2018 19:30:30 +0200
Subject: [PATCH] added loading state to button and tried to fix form item

---
 .../data-input/FormItem/FormItem.vue           |  9 +++++----
 .../components/navigation/Button/Button.vue    | 18 ++++++++++++++++--
 .../components/navigation/Button/demo.md       |  1 +
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/styleguide/src/system/components/data-input/FormItem/FormItem.vue b/styleguide/src/system/components/data-input/FormItem/FormItem.vue
index 5fd877cd1..b90c2d3d8 100644
--- a/styleguide/src/system/components/data-input/FormItem/FormItem.vue
+++ b/styleguide/src/system/components/data-input/FormItem/FormItem.vue
@@ -1,9 +1,10 @@
 <template>
-  <div 
+  <div
     class="ds-form-item"
-    :class="$parentInput.stateClasses">
-    <ds-input-label 
-      :label="$parentInput.label" 
+    :class="$parentInput ? $parentInput.stateClasses : ''">
+    <ds-input-label
+      v-if="$parentInput"
+      :label="$parentInput.label"
       :for="$parentInput.id" />
     <slot/>
     <ds-input-error :error="$parentInput.error" />
diff --git a/styleguide/src/system/components/navigation/Button/Button.vue b/styleguide/src/system/components/navigation/Button/Button.vue
index 801055e54..208e3269d 100644
--- a/styleguide/src/system/components/navigation/Button/Button.vue
+++ b/styleguide/src/system/components/navigation/Button/Button.vue
@@ -10,12 +10,16 @@
       ghost && `ds-button-ghost`,
       iconOnly && `ds-button-icon-only`,
       hover && `ds-button-hover`,
-      fullWidth && `ds-button-full-width`
+      fullWidth && `ds-button-full-width`,
+      loading && `ds-button-loading`
     ]"
     v-bind="bindings"
     :is="linkTag">
     <ds-icon
-      v-if="icon"
+      v-if="loading"
+      name="spinner" />
+    <ds-icon
+      v-if="icon && !loading"
       :name="icon"/>
     <span
       class="ds-button-text"
@@ -130,6 +134,13 @@ export default {
     fullWidth: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Show loading state
+     */
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -141,6 +152,9 @@ export default {
       if (this.path && this.linkTag === 'a') {
         bindings.href = this.path
       }
+      if (this.loading) {
+        bindings.disabled = true
+      }
       return bindings
     },
     iconOnly() {
diff --git a/styleguide/src/system/components/navigation/Button/demo.md b/styleguide/src/system/components/navigation/Button/demo.md
index a868979a6..13cc66135 100644
--- a/styleguide/src/system/components/navigation/Button/demo.md
+++ b/styleguide/src/system/components/navigation/Button/demo.md
@@ -45,6 +45,7 @@ A button can take different states.
 ```
 <ds-button>Default state</ds-button>
 <ds-button disabled>Disabled state</ds-button>
+<ds-button :loading="true">Loading state</ds-button>
 <ds-button hover>Hover state</ds-button>
 ```