From ad4aed6c6d9475d03727e697bc227511ece2aa7f Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sat, 12 Sep 2020 12:10:19 +0400
Subject: [PATCH 1/9] Fix focused state for date picker

---
 src/components/DatePicker/SDatePicker.vue | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index b87f50b9..316fa2a3 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -26,6 +26,7 @@
       :validate-event="validateEvent"
       @blur="handleBlur"
       @focus="handleFocus"
+      @change="handleChange"
     >
       <slot name="range-separator" slot="range-separator"></slot>
     </el-date-picker>
@@ -180,6 +181,7 @@ export default class SDatePicker extends Vue {
   @Watch('value')
   private handlePropChange (value: any): void {
     this.model = value
+    this.focused = false
   }
 
   @Watch('model')
@@ -241,6 +243,10 @@ export default class SDatePicker extends Vue {
     this.$emit('focus', component)
   }
 
+  handleChange (values: any): void {
+    this.focused = false
+  }
+
   public focus (): void {
     this.picker.focus()
   }
@@ -351,6 +357,14 @@ export default class SDatePicker extends Vue {
         }
       }
     }
+    .s-icon-chevron-bottom {
+      position: absolute;
+      right: 10px;
+      top: 30%;
+      pointer-events: none;
+      color: $color-neutral-tertiary;
+      transition: transform .3s;
+    }
     &.focused {
       .el-date-editor.el-input__inner,
       .el-date-editor .el-input__inner {
@@ -360,14 +374,6 @@ export default class SDatePicker extends Vue {
         transform: rotate(180deg);
       }
     }
-    .s-icon-chevron-bottom {
-      position: absolute;
-      right: 10px;
-      top: 30%;
-      pointer-events: none;
-      color: $color-neutral-tertiary;
-      transition: transform .3s;
-    }
     &.has-value {
       .s-icon-chevron-bottom {
         color: $color-basic-black;

From 3c902eef0ab38d608d682ee41a01638aa2df0a4a Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sat, 12 Sep 2020 12:48:56 +0400
Subject: [PATCH 2/9] Fix issues with tooltip

---
 src/components/Button/SButton.vue     | 11 +++++++++--
 src/components/Dropdown/SDropdown.vue |  8 +++++---
 src/components/Tooltip/STooltip.vue   | 14 +++++++++++++-
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index f8763a34..dc74bd64 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <s-tooltip :content="tooltip" placement="right" :disabled="!tooltip">
+  <s-tooltip :content="tooltip" :disabled="!tooltip" :placement="tooltipPlacement">
     <el-button
       :type="computedType"
       :native-type="nativeType"
@@ -23,9 +23,10 @@
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
+import { PopoverPlacement } from 'element-ui/types/popover'
 
 import { SIcon } from '../Icon'
-import { STooltip } from '../Tooltip'
+import { STooltip, TooltipPlacement } from '../Tooltip'
 import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
 
 @Component({
@@ -85,6 +86,12 @@ export default class SButton extends Vue {
    * Button tabindex
    */
   @Prop({ default: '0', type: String }) readonly tabindex!: string
+  /**
+   * Placement of the tooltip. You can use any value from the `TooltipPlacement` enum.
+   *
+   * `"top"` by default
+   */
+  @Prop({ default: TooltipPlacement.TOP, type: String }) readonly tooltipPlacement!: PopoverPlacement
 
   @Inject({ default: '', from: 'elForm' }) elForm!: ElForm
   @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem
diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue
index 276436f2..bd0e5064 100644
--- a/src/components/Dropdown/SDropdown.vue
+++ b/src/components/Dropdown/SDropdown.vue
@@ -28,12 +28,12 @@
         <slot></slot>
         <i class="el-icon-arrow-down el-icon--right"></i>
       </s-button>
-      <el-tooltip v-else :disabled="!this.$slots.default || willTooltipBeDisabled">
+      <s-tooltip v-else :disabled="!this.$slots.default || willTooltipBeDisabled">
         <i class="s-icon-more-horizontal"></i>
         <template slot="content">
           <slot></slot>
         </template>
-      </el-tooltip>
+      </s-tooltip>
     </template>
     <el-dropdown-menu :class="{'ellipsis': type === DropdownType.ELLIPSIS}">
       <slot name="menu"></slot>
@@ -47,10 +47,12 @@ import { ElDropdown } from 'element-ui/types/dropdown'
 
 import { DropdownType, DropdownSize, DropdownPlacement, DropdownTrigger } from './consts'
 import { ButtonTypes, SButton } from '../Button'
+import { STooltip } from '../Tooltip'
 
 @Component({
   components: {
-    SButton
+    SButton,
+    STooltip
   }
 })
 export default class SDropdown extends Vue {
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index 4b65cc01..1cd77a70 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -1,5 +1,6 @@
 <template>
   <el-tooltip
+    ref="tooltip"
     :effect="theme"
     :content="content"
     :placement="placement"
@@ -20,9 +21,10 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
 import { TooltipEffect } from 'element-ui/types/tooltip'
 import { PopoverPlacement } from 'element-ui/types/popover'
+import debounce from 'throttle-debounce/debounce'
 
 import { TooltipTheme, TooltipPlacement } from './consts'
 
@@ -98,6 +100,8 @@ export default class STooltip extends Vue {
    */
   @Prop({ default: 0, type: Number }) readonly tabindex!: number
 
+  @Ref('tooltip') tooltip!: any
+
   model = this.value
 
   @Watch('value')
@@ -109,6 +113,14 @@ export default class STooltip extends Vue {
   private handleValueChange (value: boolean): void {
     this.$emit('change', value)
   }
+
+  mounted (): void {
+    const tooltip = this.tooltip
+    if (!tooltip) {
+      return
+    }
+    tooltip.debounceClose = debounce(30, tooltip.handleClosePopper)
+  }
 }
 </script>
 

From ed25303afe4dcde71a555f5cc5504e4b01f057d9 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 13 Sep 2020 00:01:12 +0400
Subject: [PATCH 3/9] Fix checkbox issues

---
 src/components/Checkbox/SCheckbox.vue |  7 +++++--
 src/stories/SCheckbox.stories.ts      | 14 +++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index 0fdcfdb4..8c85714a 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -176,8 +176,11 @@ export default class SCheckbox extends Vue {
     }
   }
   &.is-checked {
-    &.is-disabled > .el-checkbox__inner::after {
-      border-color: $color-neutral-inactive;
+    &.is-disabled > .el-checkbox__inner {
+      background-color: $color-neutral-placeholder;
+      &::after {
+        border-color: $color-neutral-inactive;
+      }
     }
     & + .el-checkbox__label {
       color: $color-basic-black;
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 2c53d75f..069209e7 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -50,16 +50,20 @@ export const disabled = () => ({
   components: { SCheckbox, SRow, SCol },
   template: `<s-row :gutter="20" style="flex: 1;">
                <s-col :span="6">
-                 <s-checkbox disabled size="big">
+                 <s-checkbox v-model="first" disabled size="big">
                    Checkbox
                  </s-checkbox>
                </s-col>
                <s-col :span="6">
-                 <s-checkbox disabled border size="big">
+                 <s-checkbox v-model="second" disabled border size="big">
                    Checkbox
                  </s-checkbox>
                </s-col>
-             </s-row>`
+             </s-row>`,
+  data: () => ({
+    first: true,
+    second: false
+  })
 })
 
 export const differentSizeData = Object.values(CheckboxSize).map(size =>
@@ -69,12 +73,12 @@ export const differentSize = () => ({
   template: `<s-row :gutter="20" style="flex: 1;">
                <template v-for="item in items">
                  <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
-                   <s-checkbox :size="item.size">
+                   <s-checkbox :size="item.size" :value="false">
                      {{ item.label }}
                    </s-checkbox>
                  </s-col>
                  <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
-                   <s-checkbox border :size="item.size">
+                   <s-checkbox border :size="item.size" :value="true">
                      {{ item.label }}
                    </s-checkbox>
                  </s-col>

From fb8da579af01a5fe80d4d829da95888c8376dedf Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 13 Sep 2020 14:51:57 +0400
Subject: [PATCH 4/9] Add radio component

---
 src/components/Radio/SRadio.vue | 162 ++++++++++++++++++++++++++++++++
 src/components/Radio/consts.ts  |   3 +
 src/components/Radio/index.ts   |   4 +
 src/components/index.ts         |   2 +
 src/index.ts                    |   3 +
 src/types/components.ts         |   1 +
 6 files changed, 175 insertions(+)
 create mode 100644 src/components/Radio/SRadio.vue
 create mode 100644 src/components/Radio/consts.ts
 create mode 100644 src/components/Radio/index.ts

diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue
new file mode 100644
index 00000000..19ded97c
--- /dev/null
+++ b/src/components/Radio/SRadio.vue
@@ -0,0 +1,162 @@
+<template>
+  <el-radio
+    :class="computedClasses"
+    v-model="model"
+    :label="label"
+    :disabled="disabled"
+    :border="border"
+    :name="name"
+  >
+    <slot></slot>
+  </el-radio>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+
+import { RadioSize } from './consts'
+
+@Component
+export default class SRadio extends Vue {
+  /**
+   * Binding value of the radio component. Can be `string` / `number` / `boolean`
+   */
+  @Prop() readonly value!: string | number | boolean
+  /**
+   * Value of the radio component. Can be `string` / `number` / `boolean`
+   */
+  @Prop() readonly label!: string | number | boolean
+  /**
+   * Disabled state of the radio component.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+  /**
+   * Will borders be shown.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly border!: boolean
+  /**
+   * Native name property
+   */
+  @Prop({ default: '', type: String }) readonly name!: boolean
+  /**
+   * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`.
+   *
+   * By default it's set to `"medium"`
+   */
+  @Prop({ default: RadioSize.MEDIUM, type: String }) readonly size!: string
+
+  model = this.value
+
+  @Watch('value')
+  private handlePropChange (value: string | number | boolean): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: string | number | boolean): void {
+    this.$emit('input', value)
+    this.$emit('change', value)
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if ((Object.values(RadioSize) as Array<string>).includes(this.size)) {
+      cssClasses.push(this.size)
+    }
+    return cssClasses
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+@import "../../styles/common.scss";
+
+.el-radio {
+  &.big {
+    @extend .big;
+    line-height: $size-big;
+    &.is-bordered {
+      padding-top: 18px;
+    }
+    > .el-radio__input .el-radio__inner {
+      width: 20px;
+      height: 20px;
+      border-width: 2px;
+      &::after {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+  &.medium {
+    @extend .medium;
+    line-height: $size-medium;
+    > .el-radio__input .el-radio__inner {
+      width: 16px;
+      height: 16px;
+      border-width: 2px;
+      &::after {
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
+  &.small {
+    @extend .small;
+    line-height: $size-small;
+    &.is-bordered {
+      padding-top: 9px;
+    }
+    > .el-radio__label {
+      font-size: 12px;
+    }
+    > .el-radio__input .el-radio__inner {
+      width: 14px;
+      height: 14px;
+      border-width: 2px;
+      &::after {
+        width: 6px;
+        height: 6px;
+      }
+    }
+  }
+  &.is-bordered {
+    line-height: 0;
+    &.is-disabled {
+      border-color: $color-neutral-border;
+    }
+  }
+  > .el-radio__input {
+    .el-radio__inner {
+      background-color: $color-basic-white;
+      &::after {
+        background-color: $color-main-brand;
+      }
+    }
+    &.is-checked .el-radio__inner {
+      background-color: $color-basic-white;
+    }
+    &.is-disabled {
+      .el-radio__inner {
+        background-color: $color-neutral-placeholder;
+        border-color: $color-neutral-border;
+      }
+      &.is-checked .el-radio__inner {
+        background-color: $color-neutral-placeholder;
+        border-color: $color-neutral-border;
+        &::after {
+          background-color: $color-neutral-inactive;
+        }
+      }
+      & + span.el-radio__label {
+        color: $color-neutral-inactive;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/Radio/consts.ts b/src/components/Radio/consts.ts
new file mode 100644
index 00000000..63f35931
--- /dev/null
+++ b/src/components/Radio/consts.ts
@@ -0,0 +1,3 @@
+import { Size } from '../../types'
+
+export const RadioSize = Size
diff --git a/src/components/Radio/index.ts b/src/components/Radio/index.ts
new file mode 100644
index 00000000..ec804fcd
--- /dev/null
+++ b/src/components/Radio/index.ts
@@ -0,0 +1,4 @@
+import SRadio from './SRadio.vue'
+import { RadioSize } from './consts'
+
+export { SRadio, RadioSize }
diff --git a/src/components/index.ts b/src/components/index.ts
index e6622472..24ea6d52 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -22,6 +22,7 @@ import { SInput, SJsonInput } from './Input'
 import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SPagination } from './Pagination'
+import { SRadio } from './Radio'
 import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
 import { SSelect, SOption, SOptionGroup } from './Select'
@@ -61,6 +62,7 @@ export {
   SOption,
   SOptionGroup,
   SPagination,
+  SRadio,
   SRow,
   SScrollSectionItem,
   SScrollSections,
diff --git a/src/index.ts b/src/index.ts
index e8d3487e..ba537aae 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -32,6 +32,7 @@ import {
   SOption,
   SOptionGroup,
   SPagination,
+  SRadio,
   SRow,
   SScrollSectionItem,
   SScrollSections,
@@ -80,6 +81,7 @@ const components = [
   { component: SOption, name: Components.SOption },
   { component: SOptionGroup, name: Components.SOptionGroup },
   { component: SPagination, name: Components.SPagination },
+  { component: SRadio, name: Components.SRadio },
   { component: SRow, name: Components.SRow },
   { component: SScrollSectionItem, name: Components.SScrollSectionItem },
   { component: SScrollSections, name: Components.SScrollSections },
@@ -144,6 +146,7 @@ export {
   SPagination,
   SOption,
   SOptionGroup,
+  SRadio,
   SRow,
   SScrollSectionItem,
   SScrollSections,
diff --git a/src/types/components.ts b/src/types/components.ts
index 3b1a4701..3c4d1a20 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -30,6 +30,7 @@ export enum Components {
   SOption = 'SOption',
   SOptionGroup = 'SOptionGroup',
   SPagination = 'SPagination',
+  SRadio = 'SRadio',
   SRow = 'SRow',
   SScrollSectionItem = 'SScrollSectionItem',
   SScrollSections = 'SScrollSections',

From d4940a315a699facbbc91577fc1356c3f49fa1c3 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 13 Sep 2020 14:52:15 +0400
Subject: [PATCH 5/9] Add stories for radio component

---
 src/stories/Radio/SRadio.stories.ts | 91 +++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/stories/Radio/SRadio.stories.ts

diff --git a/src/stories/Radio/SRadio.stories.ts b/src/stories/Radio/SRadio.stories.ts
new file mode 100644
index 00000000..26d2b470
--- /dev/null
+++ b/src/stories/Radio/SRadio.stories.ts
@@ -0,0 +1,91 @@
+import { withKnobs, select, boolean } from '@storybook/addon-knobs'
+
+import { SRadio, SRow, SCol } from '../../components'
+import { RadioSize } from '../../components/Radio'
+
+export default {
+  component: SRadio,
+  title: 'Design System/Radio',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const radioData = [
+  { label: 'first', title: 'First' },
+  { label: 'second', title: 'Second' }
+]
+
+export const configurable = () => ({
+  components: { SRadio, SRow, SCol },
+  template: `<s-row style="flex: 1;" :gutter="20">
+               <s-col v-for="item in items" :key="item.label" :span="6">
+                 <s-radio
+                   v-model="vModelValue"
+                   :label="item.label"
+                   :disabled="disabled"
+                   :size="size"
+                   :border="border"
+                   @change="(value) => changeValue = value"
+                 >
+                   {{ item.title }}
+                 </s-radio>
+               </s-col>
+               <s-col :span="12" style="margin-top: 20px;">
+                 <span>v-model="{{ vModelValue }}", @change="{{ changeValue }}"</span>
+               </s-col>
+             </s-row>`,
+  data: () => ({
+    vModelValue: 'first',
+    changeValue: '',
+    items: radioData
+  }),
+  props: {
+    size: {
+      default: select('Size', Object.values(RadioSize), RadioSize.MEDIUM)
+    },
+    disabled: {
+      default: boolean('Disabled', false)
+    },
+    border: {
+      default: boolean('Border', false)
+    }
+  }
+})
+
+export const disabled = () => ({
+  components: { SRadio, SRow },
+  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+               <s-radio
+                 v-for="item in items"
+                 :key="item.label"
+                 v-model="model"
+                 :label="item.label"
+                 disabled
+               >
+                 {{ item.title }}
+               </s-radio>
+             </s-row>`,
+  data: () => ({
+    model: 'first',
+    items: radioData
+  })
+})
+
+export const withBorders = () => ({
+  components: { SRadio, SRow },
+  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+               <s-radio
+                 v-for="item in items"
+                 :key="item.label"
+                 v-model="model"
+                 :label="item.label"
+                 border
+               >
+                 {{ item.title }}
+               </s-radio>
+             </s-row>`,
+  data: () => ({
+    model: 'first',
+    items: radioData
+  })
+})

From c3ec345383ec8006f9d23802197f9a80649d9748 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 13 Sep 2020 15:04:36 +0400
Subject: [PATCH 6/9] Fix forms styles

---
 src/components/Form/SFormItem.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue
index 7fc292a5..5cfb570e 100644
--- a/src/components/Form/SFormItem.vue
+++ b/src/components/Form/SFormItem.vue
@@ -13,7 +13,7 @@
   >
     <slot slot="label" name="label"></slot>
     <slot></slot>
-    <i v-if="errorState" class="s-icon-error"></i>
+    <i v-if="willMessageBeShown && errorState" class="s-icon-error"></i>
   </el-form-item>
 </template>
 
@@ -89,6 +89,10 @@ export default class SFormItem extends Vue {
     })
   }
 
+  get willMessageBeShown (): boolean {
+    return this.showMessage && this.elForm?.showMessage
+  }
+
   get computedRules (): object {
     const rules = (this.rules || (this.elForm.rules || {})[this.prop]) as any
     if (!rules) {

From 2479efbdfa3f41e1c843406707809d1a40212aa5 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 13 Sep 2020 15:05:21 +0400
Subject: [PATCH 7/9] Update version

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

diff --git a/package.json b/package.json
index 65126997..596e8028 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

From 5a75436d0efcdbcbdac34c5569b2b010955d31dd Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sun, 13 Sep 2020 15:21:21 +0400
Subject: [PATCH 8/9] Fix rollup issues

---
 src/components/Form/SFormItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue
index 5cfb570e..1c7f347c 100644
--- a/src/components/Form/SFormItem.vue
+++ b/src/components/Form/SFormItem.vue
@@ -90,7 +90,7 @@ export default class SFormItem extends Vue {
   }
 
   get willMessageBeShown (): boolean {
-    return this.showMessage && this.elForm?.showMessage
+    return this.showMessage && (this.elForm || {}).showMessage
   }
 
   get computedRules (): object {

From ad1444c237972c0b403ec9f5d96afcf0cf79ab3b Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Mon, 14 Sep 2020 14:21:09 +0400
Subject: [PATCH 9/9] Add link button type

---
 src/components/Button/SButton.vue | 25 +++++++++++++++++++++----
 src/components/Button/consts.ts   |  3 ++-
 src/stories/SButton.stories.ts    |  4 ++--
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index dc74bd64..ce9ee5ff 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -35,7 +35,7 @@ import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
 export default class SButton extends Vue {
   readonly ButtonTypes = ButtonTypes
   /**
-   * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`.
+   * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`.
    *
    * By default it's set to `"primary"`
    */
@@ -55,7 +55,7 @@ export default class SButton extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
   /**
-   * Loading state. Only `"tertiary"` and `"action"` button cannot have this state
+   * Loading state. Only `"link"` and `"action"` button cannot have this state
    *
    * If you use `loading` state for one button, for instance, [Send][Cancel], and "send" button sent
    * request to back-end side, you should use `loading` state ONLY for "send" button and apply this flag
@@ -154,7 +154,7 @@ export default class SButton extends Vue {
   }
 
   get isLoading (): boolean {
-    if (([ButtonTypes.TERTIARY, ButtonTypes.ACTION] as Array<string>).includes(this.type)) {
+    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) {
       return false
     }
     return this.loading
@@ -227,11 +227,12 @@ export default class SButton extends Vue {
     &:disabled, &:disabled:hover {
       color: $color-neutral-inactive;
       border-color: $color-neutral-border;
+      background-color: $color-basic-white;
     }
   }
 }
 
-.tertiary {
+.link {
   color: $color-basic-black;
   border: none;
   background-color: transparent;
@@ -244,6 +245,22 @@ export default class SButton extends Vue {
   }
 }
 
+.tertiary {
+  color: $color-basic-black;
+  border-color: $color-neutral-placeholder;
+  background-color: $color-neutral-placeholder;
+  &:hover, &:active, &:focus {
+    color: $color-main-brand;
+    background-color: $color-neutral-placeholder;
+    border-color: $color-neutral-placeholder;
+  }
+  &:disabled, &:disabled:hover {
+    color: $color-neutral-inactive;
+    background-color: $color-neutral-placeholder;
+    border-color: $color-neutral-placeholder;
+  }
+}
+
 .action {
   &.big {
     width: $size-big;
diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts
index 78f1e9da..4599450b 100644
--- a/src/components/Button/consts.ts
+++ b/src/components/Button/consts.ts
@@ -4,7 +4,8 @@ export enum ButtonTypes {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
   TERTIARY = 'tertiary',
-  ACTION = 'action'
+  ACTION = 'action',
+  LINK = 'link'
 }
 
 export enum ButtonNativeTypes {
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index c491af8c..8a209eae 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -146,12 +146,12 @@ export const withIcon = () => ({
   components: { SButton, SRow, SCol, SMain },
   template: `<s-main>
                <s-row :gutter="20">
-                 <s-col :span="3" v-for="item in differentTypesData" :key="item.type" style="padding-bottom: 20px;">
+                 <s-col :span="6" v-for="item in differentTypesData" :key="item.type" style="padding-bottom: 20px;">
                    <s-button size="big" icon="refresh" :type="item.type" :tooltip="item.tooltip">
                      {{ item.label }}
                    </s-button>
                  </s-col>
-                 <s-col :span="3" v-for="item in differentTypesData" :key="item.type + 'Disabled'" style="padding-bottom: 20px;">
+                 <s-col :span="6" v-for="item in differentTypesData" :key="item.type + 'Disabled'" style="padding-bottom: 20px;">
                    <s-button size="big" icon="refresh" :type="item.type" :tooltip="item.tooltip" disabled>
                      {{ item.label }}
                    </s-button>