From 63549d987eebe62073281ea38998bad3e32abeb6 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 18 Dec 2019 22:55:28 +0530
Subject: [PATCH] add button size small

---
 .../generic/BaseButton/BaseButton.story.js    | 10 +++++
 .../_new/generic/BaseButton/BaseButton.vue    | 39 ++++++++++++++++---
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.story.js b/webapp/components/_new/generic/BaseButton/BaseButton.story.js
index 9fcf4c32c..ec56b40c9 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.story.js
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.story.js
@@ -40,6 +40,16 @@ storiesOf('Generic/BaseButton', module)
     `,
   }))
 
+  .add('small', () => ({
+    components: { BaseButton },
+    template: `
+      <div>
+        <base-button size="small">Small</base-button>
+        <base-button size="small" circle>S</base-button>
+      </div>
+    `
+  }))
+
   .add('primary', () => ({
     components: { BaseButton },
     template: `
diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index 502fc4bb8..3ca9cb13c 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :class="buttonClass" :disabled="loading">
+  <button :class="buttonClass" :disabled="loading" @click="$emit('click')">
     <loading-spinner v-if="loading" />
     <base-icon v-if="icon" :name="icon" />
     <slot />
@@ -33,6 +33,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    size: {
+      type: String,
+      default: 'regular',
+      validator(value) {
+        return value.match(/(small|regular|large)/)
+      },
+    },
   },
   computed: {
     buttonClass() {
@@ -41,9 +48,13 @@ export default {
       if (this.$slots.default == null) buttonClass += ' --icon-only'
       if (this.circle) buttonClass += ' --circle'
       if (this.loading) buttonClass += ' --loading'
+
       if (this.primary) buttonClass += ' --primary'
       else if (this.danger) buttonClass += ' --danger'
 
+      if (this.size === 'small') buttonClass += ' --small'
+      else if (this.size === 'large') buttonClass += ' --large'
+
       return buttonClass
     }
   }
@@ -59,7 +70,7 @@ export default {
   padding: 0 12px;
   vertical-align: bottom;
   color: $color-primary;
-  background-color: $color-neutral-90;
+  background-color: transparent;
   border: 1px solid $color-primary;
   border-radius: 6px;
   overflow: hidden;
@@ -85,46 +96,64 @@ export default {
   &:disabled {
     color: $color-neutral-60;
     border-color: $color-neutral-60;
-    background-color: $color-neutral-90;
+    background-color: transparent;
     cursor: default;
   }
 
   &.--primary {
-    border: none;
     color: $color-neutral-100;
     background-color: $color-primary;
 
     &:hover {
       background-color: $color-primary-light;
+      border-color: $color-primary-light;
     }
 
     &:active {
       background-color: $color-primary-dark;
+      border-color: $color-primary-dark;
     }
 
     &:disabled {
       background-color: $color-neutral-60;
+      border-color: $color-neutral-60;
     }
   }
 
   &.--danger {
-    border: none;
     color: $color-neutral-100;
     background-color: $color-danger;
+    border-color: $color-danger;
 
     &:hover {
       background-color: $color-danger-light;
+      border-color: $color-danger-light;
     }
 
     &:active {
       background-color: $color-danger-dark;
+      border-color: $color-danger-dark;
     }
 
     &:disabled {
       background-color: $color-neutral-60;
+      border-color: $color-neutral-60;
     }
   }
 
+  &.--small {
+    height: 26px;
+    font-size: $font-size-small;
+
+    &.--circle {
+      width: 26px;
+    }
+  }
+
+  &.--large {
+
+  }
+
   &.--circle {
     width: 36px;
     border-radius: 50%;