Update input component

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/"

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 && isMediumInput" class="s-placeholder">{{ placeholder }}</span>
     <el-input
       ref="el-input"
       :type="computedType"
@@ -23,6 +23,8 @@
       :label="label"
       :accept="accept"
       :tabindex="tabindex"
+      :prefix-icon="isMediumInput && 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, works only with medium input
+   */
+  @Prop({ default: '', type: String }) readonly prefix!: string
+  /**
+   * Icon suffix
+   */
+  @Prop({ default: '', type: String }) readonly suffix!: string
+  /**
+   * Field size, "big" by default
+   */
+  @Prop({ default: InputSize.BIG, type: String }) readonly size!: InputSize
 
   @Ref('el-input') input!: ElInput
 
@@ -155,6 +169,10 @@ export default class SInput extends Vue {
     return [InputType.TEXT, InputType.TEXTAREA].includes(this.type as InputType)
   }
 
+  get isMediumInput (): boolean {
+    return this.type === InputType.TEXT && this.size === InputSize.MEDIUM
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.focused) {
@@ -169,9 +187,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.MEDIUM:
+        return 's-size-medium'
+      case InputSize.BIG:
+      default:
+        return ''
+    }
+  }
+
   get computedType (): string {
     if (this.type === InputType.TEXT_FILE) {
       return InputType.TEXT

src/components/Input/consts.ts

@@ -29,3 +29,8 @@ export enum InputType {
   URL = 'url',
   WEEK = 'week'
 }
+
+export enum InputSize {
+  MEDIUM = 'medium',
+  BIG = 'big'
+}

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 }

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="suffix"
              />`,
   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.BIG)
+    },
     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)
     },

src/styles/input.scss

@@ -55,6 +55,18 @@
       border-color: var(--s-color-base-background-hover);
     }
   }
+  &.s-size-medium {
+    min-height: $s-size-medium;
+
+    .el-input,
+    .el-textarea {
+      height: 100%;
+      > input,
+      > textarea {
+        height: $s-size-medium;
+      }
+    }
+  }
   &.s-focused {
     .s-placeholder,
     .el-input > input,