From e602c6ae348c74e21896463970d43153c2f3a322 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Tue, 1 Jun 2021 16:06:34 +0300
Subject: [PATCH 1/3] neu styles & props improvement

---
 src/components/Button/SButton.vue     | 12 +++++++++---
 src/components/Input/SFloatInput.vue  |  6 +++++-
 src/components/Input/SInput.vue       |  3 +++
 src/stories/SButton.stories.ts        | 14 ++++++++++----
 src/stories/SFloatInput.stories.ts    | 19 ++++++++++++++++++-
 src/styles/neumorphism/button.scss    | 22 ++++++++++++++++++++++
 src/styles/neumorphism/variables.scss |  9 +++++++++
 7 files changed, 76 insertions(+), 9 deletions(-)

diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index b4d15841..0620cc6a 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -9,7 +9,7 @@
       :disabled="disabled"
       :loading="isLoading"
       :autofocus="autofocus"
-      :circle="type === ButtonTypes.ACTION && rounded"
+      :circle="isRounded"
       :icon="elementIcon"
       @click="handleClick"
     >
@@ -134,7 +134,7 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
     if ((Object.values(ButtonTypes) as Array<string>).includes(this.type)) {
       cssClasses.push(`s-${this.type}`)
     }
-    if ((Object.values(ButtonIconPosition) as Array<string>).includes(this.iconPosition)) {
+    if (!!this.availableIcon && (Object.values(ButtonIconPosition) as Array<string>).includes(this.iconPosition)) {
       cssClasses.push(`s-i-position-${this.iconPosition}`)
     }
     if (this.isLoading) {
@@ -169,8 +169,14 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
     return this.icon
   }
 
+  get isRounded (): boolean {
+    if (this.type === ButtonTypes.LINK) return false
+
+    return this.rounded
+  }
+
   get isLoading (): boolean {
-    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) {
+    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type) || this.isRounded) {
       return false
     }
     return this.loading
diff --git a/src/components/Input/SFloatInput.vue b/src/components/Input/SFloatInput.vue
index 5667791a..e4aab325 100644
--- a/src/components/Input/SFloatInput.vue
+++ b/src/components/Input/SFloatInput.vue
@@ -8,7 +8,11 @@
       input: handleInput,
       blur: onBlur
     }"
-  />
+  >
+    <template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
+      <slot :name="scopedSlotName" v-bind="slotData" />
+    </template>
+  </s-input>
 </template>
 
 <script lang="ts">
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 9efb076e..2ac3d40f 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -37,7 +37,10 @@
           @focus="handleFocus"
           @paste.native="handlePaste"
         >
+          <slot slot="prefix" name="prefix"></slot>
           <slot slot="suffix" name="suffix"></slot>
+          <slot slot="prepend" name="prepend"></slot>
+          <slot slot="append" name="append"></slot>
         </el-input>
         <template v-if="type === InputType.TEXT_FILE">
           <s-icon name="file-file-upload-24" />
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index e38ebff7..c4b5571f 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -1,6 +1,6 @@
 import { text, boolean, select, withKnobs } from '@storybook/addon-knobs'
 
-import { SButton, SButtonGroup, SRow, SCol, SMain, SDesignSystemProvider } from '../components'
+import { SButton, SButtonGroup, SRow, SCol, SMain, SIcon, SDesignSystemProvider } from '../components'
 import { Size, BorderRadius } from '../types'
 import { ButtonTypes, ButtonIconPosition } from '../components/Button'
 import { DesignSystemTypes } from '../utils/DesignSystem'
@@ -13,14 +13,13 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SButton, SDesignSystemProvider },
+  components: { SButton, SIcon, SDesignSystemProvider },
   template: `
             <s-design-system-provider :value="designSystem">
               <s-button
                :disabled="disabled"
                :loading="loading"
                :tooltip="tooltip"
-               :icon="type === 'action' ? 'arrows-swap-24' : ''"
                :type="type"
                :size="size"
                :border-radius="borderRadius"
@@ -28,7 +27,8 @@ export const configurable = () => ({
                :alternative="alternative"
                @click="handleClick"
               >
-               {{ type !== 'action' ? 'Default' : '' }}
+                <span v-if="content">{{ content }}</span>
+                <s-icon v-else :name="icon"/>
               </s-button>
             </s-design-system-provider>`,
   props: {
@@ -58,6 +58,12 @@ export const configurable = () => ({
     },
     tooltip: {
       default: text('Tooltip', '')
+    },
+    content: {
+      default: text('Button text', 'Default')
+    },
+    icon: {
+      default: text('Button icon', 'arrows-swap-24')
     }
   },
   methods: {
diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts
index 13309571..b8c9e3c9 100644
--- a/src/stories/SFloatInput.stories.ts
+++ b/src/stories/SFloatInput.stories.ts
@@ -20,7 +20,12 @@ export const configurable = () => ({
                  :hasLocaleString="hasLocaleString"
                  :delimiters="delimiters"
                  :max="max"
-               />
+               >
+                <div v-if="top" slot="top">{{ top }}</div>
+                <div v-if="bottom" slot="bottom">{{ bottom }}</div>
+                <div v-if="left" slot="left">{{ left }}</div>
+                <div v-if="right" slot="right">{{ right }}</div>
+               </s-float-input>
               </s-row>
             </s-design-system-provider>`,
   data: () => ({
@@ -47,6 +52,18 @@ export const configurable = () => ({
           decimal: '.'
         }
       )
+    },
+    top: {
+      default: text('Top slot content', '')
+    },
+    bottom: {
+      default: text('Bottom slot content', '')
+    },
+    left: {
+      default: text('Left slot content', '')
+    },
+    right: {
+      default: text('Right slot content', '')
     }
   }
 })
diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss
index c781ddf2..e6fe93a4 100644
--- a/src/styles/neumorphism/button.scss
+++ b/src/styles/neumorphism/button.scss
@@ -95,6 +95,11 @@ $neu-button-action-box-shadow-hover: $neu-button-action-box-shadow !default;
 $neu-button-action-box-shadow-pressed: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default;
 $neu-button-action-box-shadow-alternative: none !default;
 
+$neu-button-padding-big: 7px 13px !default;
+$neu-button-padding-medium: 5px 13px !default;
+$neu-button-padding-small: 4px 6px !default;
+$neu-button-padding-mini: 3px 6px !default;
+
 @mixin disabled (
   $border-width: $neu-button-border-width,
   $background-color: $neu-button-background-color-disabled,
@@ -109,9 +114,26 @@ $neu-button-action-box-shadow-alternative: none !default;
   }
 }
 
+@mixin size ($suffix: 'big', $padding) {
+  &.s-#{$suffix} {
+    padding: $padding;
+    height: var(--neu-size-#{$suffix});
+
+    &.is-circle {
+      width: var(--neu-size-#{$suffix});
+      padding: 7px;
+    }
+  }
+}
+
 .el-button.neumorphic {
   transition: $neu-button-transition;
 
+  @include size('big', $neu-button-padding-big);
+  @include size('medium', $neu-button-padding-medium);
+  @include size('small', $neu-button-padding-small);
+  @include size('mini', $neu-button-padding-mini);
+
   &.s-primary {
     background: $neu-button-primary-background-color;
     border-color: $neu-button-primary-border-color;
diff --git a/src/styles/neumorphism/variables.scss b/src/styles/neumorphism/variables.scss
index 4cb6a9cc..c8b3b3c9 100644
--- a/src/styles/neumorphism/variables.scss
+++ b/src/styles/neumorphism/variables.scss
@@ -37,6 +37,11 @@ $neu-color-status-warning-background: #C6E2FF !default; // Warning state backgro
 $neu-color-status-error: #F754A3 !default; // Error text and icon
 $neu-color-status-error-background: #FFD8EB !default; // Error state background
 
+$neu-size-big: 46px !default;
+$neu-size-medium: 42px !default;
+$neu-size-small: 32px !default;
+$neu-size-mini: 24px !default;
+
 :root {
   --neu-brand-pinky: #{neu-brand-pinky};
   --neu-brand-blue: #{neu-brand-blue};
@@ -67,4 +72,8 @@ $neu-color-status-error-background: #FFD8EB !default; // Error state background
   --neu-color-status-warning-background: #{$neu-color-status-warning-background};
   --neu-color-status-error: #{$neu-color-status-error};
   --neu-color-status-error-background: #{$neu-color-status-error-background};
+  --neu-size-big: #{$neu-size-big};
+  --neu-size-medium: #{$neu-size-medium};
+  --neu-size-small: #{$neu-size-small};
+  --neu-size-mini: #{$neu-size-mini};
 }

From b76941af8265465d38e3f8ad39b034b4e60f0012 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Tue, 1 Jun 2021 16:12:06 +0300
Subject: [PATCH 2/3] fix mixin

---
 src/components/Button/SButton.vue  | 2 +-
 src/styles/neumorphism/button.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index 0620cc6a..f7daf048 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -170,7 +170,7 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
   }
 
   get isRounded (): boolean {
-    if (this.type === ButtonTypes.LINK) return false
+    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) return false
 
     return this.rounded
   }
diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss
index e6fe93a4..8bf64f39 100644
--- a/src/styles/neumorphism/button.scss
+++ b/src/styles/neumorphism/button.scss
@@ -114,7 +114,7 @@ $neu-button-padding-mini: 3px 6px !default;
   }
 }
 
-@mixin size ($suffix: 'big', $padding) {
+@mixin size ($suffix: 'big', $padding: $neu-button-padding-big) {
   &.s-#{$suffix} {
     padding: $padding;
     height: var(--neu-size-#{$suffix});

From 901ae0c613f5f115ba7a9ff9ae15514ce2656604 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Tue, 1 Jun 2021 16:13:30 +0300
Subject: [PATCH 3/3] up to 0.9.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fe051acd..4199f88a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"