From b85dbed88fef5728ce20964965864daecf53a661 Mon Sep 17 00:00:00 2001
From: Aleksandr Makhnev <alma2610@ya.ru>
Date: Fri, 6 Nov 2020 15:52:43 +0500
Subject: [PATCH 1/5] Add suffix, prefix and size for input

---
 src/components/Input/SInput.vue | 32 ++++++++++++++++++++++++++++++--
 src/components/Input/consts.ts  |  5 +++++
 src/components/Input/index.ts   |  4 ++--
 src/stories/SInput.stories.ts   | 14 +++++++++++++-
 src/styles/input.scss           | 12 ++++++++++++
 5 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 757b52e3..2f933130 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -3,7 +3,7 @@
     class="s-input"
     :class="computedClasses"
   >
-    <span v-if="model" class="s-placeholder">{{ placeholder }}</span>
+    <span v-if="model && size !== inputSize.SMALL" class="s-placeholder">{{ placeholder }}</span>
     <el-input
       ref="el-input"
       :type="computedType"
@@ -23,6 +23,8 @@
       :label="label"
       :accept="accept"
       :tabindex="tabindex"
+      :prefix-icon="size === inputSize.SMALL && prefix"
+      :suffix-icon="suffix"
       @input="handleInput"
       @change="handleChange"
       @blur="handleBlur"
@@ -40,7 +42,7 @@ import { Vue, Component, Prop, Ref, Inject, Watch } from 'vue-property-decorator
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 
-import { Autocomplete, InputType } from './consts'
+import { Autocomplete, InputSize, InputType } from './consts'
 
 @Component
 export default class SInput extends Vue {
@@ -115,6 +117,18 @@ export default class SInput extends Vue {
    * Input tabindex
    */
   @Prop({ default: '', type: String }) readonly tabindex!: string
+  /**
+   * Icon prefix
+   */
+  @Prop({ default: '', type: String }) readonly prefix!: string
+  /**
+   * Icon suffix
+   */
+  @Prop({ default: '', type: String }) readonly suffix!: string
+  /**
+   * Field size, "medium" by default
+   */
+  @Prop({ default: InputSize.MEDIUM, type: String }) readonly size!: InputSize
 
   @Ref('el-input') input!: ElInput
 
@@ -123,6 +137,7 @@ export default class SInput extends Vue {
   focused = false
   autofill = false
   model = this.value
+  inputSize = InputSize
 
   mounted (): void {
     this.$el.addEventListener('animationstart', this.changeAutofillValue)
@@ -169,9 +184,22 @@ export default class SInput extends Vue {
     if (this.autofill) {
       cssClasses.push('s-autofill')
     }
+    if (this.size) {
+      cssClasses.push(this.sizeClass)
+    }
     return cssClasses
   }
 
+  get sizeClass (): string {
+    switch (this.size) {
+      case InputSize.SMALL:
+        return 's-size-small'
+      case InputSize.MEDIUM:
+      default:
+        return ''
+    }
+  }
+
   get computedType (): string {
     if (this.type === InputType.TEXT_FILE) {
       return InputType.TEXT
diff --git a/src/components/Input/consts.ts b/src/components/Input/consts.ts
index cafbcaeb..05411a11 100644
--- a/src/components/Input/consts.ts
+++ b/src/components/Input/consts.ts
@@ -29,3 +29,8 @@ export enum InputType {
   URL = 'url',
   WEEK = 'week'
 }
+
+export enum InputSize {
+  SMALL = 'small',
+  MEDIUM = 'medium'
+}
diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts
index ee397074..e1b9b29e 100644
--- a/src/components/Input/index.ts
+++ b/src/components/Input/index.ts
@@ -1,5 +1,5 @@
 import SInput from './SInput.vue'
 import SJsonInput from './SJsonInput.vue'
-import { Autocomplete, InputType } from './consts'
+import { Autocomplete, InputType, InputSize } from './consts'
 
-export { SInput, SJsonInput, Autocomplete, InputType }
+export { SInput, SJsonInput, Autocomplete, InputType, InputSize }
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 88cf7a08..06d0989a 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -1,7 +1,7 @@
 import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs'
 
 import { SInput, SRow, SCol } from '../components'
-import { InputType } from '../components/Input'
+import { InputType, InputSize } from '../components/Input'
 
 export default {
   component: SInput,
@@ -21,6 +21,9 @@ export const configurable = () => ({
                :readonly="readonly"
                :show-text-limit="showTextLimit"
                :maxlength="maxlength"
+               :size="size"
+               :prefix="prefix"
+               :suffix="prefix"
              />`,
   data: () => ({
     input: ''
@@ -29,9 +32,18 @@ export const configurable = () => ({
     type: {
       default: select('Type', Object.values(InputType), InputType.TEXT)
     },
+    size: {
+      default: select('Size', Object.values(InputSize), InputSize.MEDIUM)
+    },
     placeholder: {
       default: text('Placeholder', 'Placeholder')
     },
+    prefix: {
+      default: text('Prefix icon', 'el-icon-search')
+    },
+    suffix: {
+      default: text('Suffix icon', 'el-icon-search')
+    },
     disabled: {
       default: boolean('Disabled', false)
     },
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 85ff393a..12564a8a 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -55,6 +55,18 @@
       border-color: var(--s-color-base-background-hover);
     }
   }
+  &.s-size-small {
+    min-height: $s-size-medium;
+
+    .el-input,
+    .el-textarea {
+      height: 100%;
+      > input,
+      > textarea {
+        height: $s-size-medium;
+      }
+    }
+  }
   &.s-focused {
     .s-placeholder,
     .el-input > input,

From 3b531982bee082ab570fe205b60ed421afef7572 Mon Sep 17 00:00:00 2001
From: Aleksandr Makhnev <alma2610@ya.ru>
Date: Fri, 6 Nov 2020 15:53:10 +0500
Subject: [PATCH 2/5] Update version to 0.5.5

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

diff --git a/package.json b/package.json
index 7ebe581b..e639ba48 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

From ba5194bcd168cb10a3186dfa70ef5c8d1d1c701a Mon Sep 17 00:00:00 2001
From: Aleksandr Makhnev <alma2610@ya.ru>
Date: Fri, 6 Nov 2020 15:59:42 +0500
Subject: [PATCH 3/5] Add comments for use prefix

---
 src/components/Input/SInput.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 2f933130..2b943879 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -3,7 +3,7 @@
     class="s-input"
     :class="computedClasses"
   >
-    <span v-if="model && size !== inputSize.SMALL" class="s-placeholder">{{ placeholder }}</span>
+    <span v-if="model && isSmallInput" class="s-placeholder">{{ placeholder }}</span>
     <el-input
       ref="el-input"
       :type="computedType"
@@ -23,7 +23,7 @@
       :label="label"
       :accept="accept"
       :tabindex="tabindex"
-      :prefix-icon="size === inputSize.SMALL && prefix"
+      :prefix-icon="isSmallInput && prefix"
       :suffix-icon="suffix"
       @input="handleInput"
       @change="handleChange"
@@ -118,7 +118,7 @@ export default class SInput extends Vue {
    */
   @Prop({ default: '', type: String }) readonly tabindex!: string
   /**
-   * Icon prefix
+   * Icon prefix, works only with small input
    */
   @Prop({ default: '', type: String }) readonly prefix!: string
   /**
@@ -137,7 +137,6 @@ export default class SInput extends Vue {
   focused = false
   autofill = false
   model = this.value
-  inputSize = InputSize
 
   mounted (): void {
     this.$el.addEventListener('animationstart', this.changeAutofillValue)
@@ -170,6 +169,10 @@ export default class SInput extends Vue {
     return [InputType.TEXT, InputType.TEXTAREA].includes(this.type as InputType)
   }
 
+  get isSmallInput (): boolean {
+    return this.type === InputType.TEXT && this.size === InputSize.SMALL
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.focused) {

From f0a3b3ea2de8578d4db55b63384c12cd9dfdd212 Mon Sep 17 00:00:00 2001
From: Aleksandr Makhnev <alma2610@ya.ru>
Date: Fri, 6 Nov 2020 16:22:11 +0500
Subject: [PATCH 4/5] Replace medium with big, small with medium

---
 src/components/Input/SInput.vue | 18 +++++++++---------
 src/components/Input/consts.ts  |  4 ++--
 src/stories/SInput.stories.ts   |  2 +-
 src/styles/input.scss           |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 2b943879..4aa83ac4 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -3,7 +3,7 @@
     class="s-input"
     :class="computedClasses"
   >
-    <span v-if="model && isSmallInput" class="s-placeholder">{{ placeholder }}</span>
+    <span v-if="model && isMediumInput" class="s-placeholder">{{ placeholder }}</span>
     <el-input
       ref="el-input"
       :type="computedType"
@@ -23,7 +23,7 @@
       :label="label"
       :accept="accept"
       :tabindex="tabindex"
-      :prefix-icon="isSmallInput && prefix"
+      :prefix-icon="isMediumInput && prefix"
       :suffix-icon="suffix"
       @input="handleInput"
       @change="handleChange"
@@ -118,7 +118,7 @@ export default class SInput extends Vue {
    */
   @Prop({ default: '', type: String }) readonly tabindex!: string
   /**
-   * Icon prefix, works only with small input
+   * Icon prefix, works only with medium input
    */
   @Prop({ default: '', type: String }) readonly prefix!: string
   /**
@@ -126,9 +126,9 @@ export default class SInput extends Vue {
    */
   @Prop({ default: '', type: String }) readonly suffix!: string
   /**
-   * Field size, "medium" by default
+   * Field size, "big" by default
    */
-  @Prop({ default: InputSize.MEDIUM, type: String }) readonly size!: InputSize
+  @Prop({ default: InputSize.BIG, type: String }) readonly size!: InputSize
 
   @Ref('el-input') input!: ElInput
 
@@ -169,8 +169,8 @@ export default class SInput extends Vue {
     return [InputType.TEXT, InputType.TEXTAREA].includes(this.type as InputType)
   }
 
-  get isSmallInput (): boolean {
-    return this.type === InputType.TEXT && this.size === InputSize.SMALL
+  get isMediumInput (): boolean {
+    return this.type === InputType.TEXT && this.size === InputSize.MEDIUM
   }
 
   get computedClasses (): Array<string> {
@@ -195,9 +195,9 @@ export default class SInput extends Vue {
 
   get sizeClass (): string {
     switch (this.size) {
-      case InputSize.SMALL:
-        return 's-size-small'
       case InputSize.MEDIUM:
+        return 's-size-medium'
+      case InputSize.BIG:
       default:
         return ''
     }
diff --git a/src/components/Input/consts.ts b/src/components/Input/consts.ts
index 05411a11..bce2e133 100644
--- a/src/components/Input/consts.ts
+++ b/src/components/Input/consts.ts
@@ -31,6 +31,6 @@ export enum InputType {
 }
 
 export enum InputSize {
-  SMALL = 'small',
-  MEDIUM = 'medium'
+  MEDIUM = 'medium',
+  BIG = 'BIG'
 }
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 06d0989a..20b7525d 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -33,7 +33,7 @@ export const configurable = () => ({
       default: select('Type', Object.values(InputType), InputType.TEXT)
     },
     size: {
-      default: select('Size', Object.values(InputSize), InputSize.MEDIUM)
+      default: select('Size', Object.values(InputSize), InputSize.BIG)
     },
     placeholder: {
       default: text('Placeholder', 'Placeholder')
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 12564a8a..2e748fa6 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -55,7 +55,7 @@
       border-color: var(--s-color-base-background-hover);
     }
   }
-  &.s-size-small {
+  &.s-size-medium {
     min-height: $s-size-medium;
 
     .el-input,

From 193aaec6517288db7ceb3540a4961cf9536e9444 Mon Sep 17 00:00:00 2001
From: Aleksandr Makhnev <alma2610@ya.ru>
Date: Fri, 6 Nov 2020 16:51:21 +0500
Subject: [PATCH 5/5] Small fixes

---
 src/components/Input/consts.ts | 2 +-
 src/stories/SInput.stories.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Input/consts.ts b/src/components/Input/consts.ts
index bce2e133..bb48a246 100644
--- a/src/components/Input/consts.ts
+++ b/src/components/Input/consts.ts
@@ -32,5 +32,5 @@ export enum InputType {
 
 export enum InputSize {
   MEDIUM = 'medium',
-  BIG = 'BIG'
+  BIG = 'big'
 }
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 20b7525d..182d55e8 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -23,7 +23,7 @@ export const configurable = () => ({
                :maxlength="maxlength"
                :size="size"
                :prefix="prefix"
-               :suffix="prefix"
+               :suffix="suffix"
              />`,
   data: () => ({
     input: ''