From 8dc64b3b7f8f4979fa91baf7fab77546fc81aab4 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 21 Oct 2020 01:49:30 +0300
Subject: [PATCH 1/7] Added Radio Button Group functionality.

---
 src/components/Radio/SRadio.vue      |  18 ++++-
 src/components/Radio/SRadioGroup.vue |  44 +++++++++++
 src/components/Radio/index.ts        |   3 +-
 src/components/index.ts              |   3 +-
 src/index.ts                         |   3 +
 src/stories/SRadio.stories.ts        | 105 +++++++++++++++++----------
 src/types/components.ts              |   1 +
 7 files changed, 136 insertions(+), 41 deletions(-)
 create mode 100644 src/components/Radio/SRadioGroup.vue

diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue
index a1bbe20d..d30b2246 100644
--- a/src/components/Radio/SRadio.vue
+++ b/src/components/Radio/SRadio.vue
@@ -1,5 +1,15 @@
 <template>
-  <el-radio
+  <el-radio-button v-if="isRadioButton"
+    :class="computedClasses"
+    v-model="model"
+    :label="label"
+    :disabled="disabled"
+    :border="border"
+    :name="name"
+  >
+    <slot></slot>
+  </el-radio-button>
+  <el-radio v-else
     :class="computedClasses"
     v-model="model"
     :label="label"
@@ -26,6 +36,10 @@ export default class SRadio extends Vue {
    * Value of the radio component. Can be `string` / `number` / `boolean`
    */
   @Prop() readonly label!: string | number | boolean
+  /**
+   * Change redio element to radio button
+   */
+  @Prop({ default: false, type: Boolean }) readonly isRadioButton!: boolean
   /**
    * Disabled state of the radio component.
    *
@@ -41,7 +55,7 @@ export default class SRadio extends Vue {
   /**
    * Native name property
    */
-  @Prop({ default: '', type: String }) readonly name!: boolean
+  @Prop({ default: '', type: String }) readonly name!: string
   /**
    * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`.
    *
diff --git a/src/components/Radio/SRadioGroup.vue b/src/components/Radio/SRadioGroup.vue
new file mode 100644
index 00000000..e8e1c946
--- /dev/null
+++ b/src/components/Radio/SRadioGroup.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-radio-group
+    v-model="model"
+    :size="size"
+    :disabled="disabled"
+  >
+    <slot></slot>
+  </el-radio-group>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+
+@Component
+export default class SRadio extends Vue {
+  /**
+   * Binding value of the radio group. Can be `string` / `number` / `boolean`
+   */
+  @Prop() readonly value!: string | number | boolean
+  /**
+   * Size of the radio item. Possible values: `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"medium"`
+   */
+  @Prop({ default: 'medium', type: String }) readonly size!: 'medium' | 'small' | 'mini'
+  /**
+   * Whether the nesting radios are disabled.
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  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)
+  }
+}
+</script>
diff --git a/src/components/Radio/index.ts b/src/components/Radio/index.ts
index ec804fcd..9392d611 100644
--- a/src/components/Radio/index.ts
+++ b/src/components/Radio/index.ts
@@ -1,4 +1,5 @@
 import SRadio from './SRadio.vue'
+import SRadioGroup from './SRadioGroup.vue'
 import { RadioSize } from './consts'
 
-export { SRadio, RadioSize }
+export { SRadio, SRadioGroup, RadioSize }
diff --git a/src/components/index.ts b/src/components/index.ts
index d4cef978..6e2a173a 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,7 +25,7 @@ import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SPagination } from './Pagination'
 import { SSlider } from './Slider'
 import { SSwitch } from './Switch'
-import { SRadio } from './Radio'
+import { SRadio, SRadioGroup } from './Radio'
 import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
 import { SSelect, SOption, SOptionGroup } from './Select'
@@ -66,6 +66,7 @@ export {
   SOptionGroup,
   SPagination,
   SRadio,
+  SRadioGroup,
   SRow,
   SScrollSectionItem,
   SScrollSections,
diff --git a/src/index.ts b/src/index.ts
index db402704..68a17fe3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -33,6 +33,7 @@ import {
   SOptionGroup,
   SPagination,
   SRadio,
+  SRadioGroup,
   SRow,
   SScrollSectionItem,
   SScrollSections,
@@ -84,6 +85,7 @@ const components = [
   { component: SOptionGroup, name: Components.SOptionGroup },
   { component: SPagination, name: Components.SPagination },
   { component: SRadio, name: Components.SRadio },
+  { component: SRadioGroup, name: Components.SRadioGroup },
   { component: SRow, name: Components.SRow },
   { component: SScrollSectionItem, name: Components.SScrollSectionItem },
   { component: SScrollSections, name: Components.SScrollSections },
@@ -151,6 +153,7 @@ export {
   SOption,
   SOptionGroup,
   SRadio,
+  SRadioGroup,
   SRow,
   SScrollSectionItem,
   SScrollSections,
diff --git a/src/stories/SRadio.stories.ts b/src/stories/SRadio.stories.ts
index 0b693797..dc74e96e 100644
--- a/src/stories/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -1,6 +1,6 @@
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
-import { SRadio, SRow, SCol } from '../components'
+import { SRadio, SRadioGroup, SRow, SCol } from '../components'
 import { RadioSize } from '../components/Radio'
 
 export default {
@@ -18,22 +18,22 @@ export const radioData = [
 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>`,
+              <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: '',
@@ -55,16 +55,16 @@ export const configurable = () => ({
 export const disabled = () => ({
   components: { SRadio, SRow },
   template: `<s-row class="s-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>`,
+              <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
@@ -74,18 +74,49 @@ export const disabled = () => ({
 export const withBorders = () => ({
   components: { SRadio, SRow },
   template: `<s-row class="s-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>`,
+              <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
   })
 })
+
+export const radioButtonGroup = () => ({
+  components: { SRadio, SRadioGroup, SRow },
+  template: `<s-row class="s-flex" style="flex-wrap: wrap;">
+              <s-radio-group v-model="model" :size="size" :disabled="disabled">
+                <s-radio
+                  v-for="item in items"
+                  :key="item.label"
+                  v-model="model"
+                  :label="item.label"
+                >
+                  {{ item.title }}
+                </s-radio>
+              </s-radio-group>
+              <div style="margin-top: 20px; width: 100%;">
+                v-model="{{ model }}"
+              </div>
+            </s-row>`,
+  data: () => ({
+    model: 'first',
+    items: radioData
+  }),
+  props: {
+    size: {
+      default: select('Size', Object.values(RadioSize), RadioSize.MEDIUM)
+    },
+    disabled: {
+      default: boolean('Disabled', false)
+    }
+  }
+})
diff --git a/src/types/components.ts b/src/types/components.ts
index 040e6aa0..2f3923f9 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -31,6 +31,7 @@ export enum Components {
   SOptionGroup = 'SOptionGroup',
   SPagination = 'SPagination',
   SRadio = 'SRadio',
+  SRadioGroup = 'SRadioGroup',
   SRow = 'SRow',
   SScrollSectionItem = 'SScrollSectionItem',
   SScrollSections = 'SScrollSections',

From 93fc8f6c20b7476f68649157650a734ce854722f Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 21 Oct 2020 02:58:13 +0300
Subject: [PATCH 2/7] Radio Button Group: Updated styles.

---
 src/stories/SRadio.stories.ts | 10 +++++-
 src/styles/radio.scss         | 65 +++++++++++++++++++++++++++++++++++
 src/styles/variables.scss     |  4 +++
 3 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/src/stories/SRadio.stories.ts b/src/stories/SRadio.stories.ts
index dc74e96e..a436f6e4 100644
--- a/src/stories/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -3,6 +3,12 @@ import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 import { SRadio, SRadioGroup, SRow, SCol } from '../components'
 import { RadioSize } from '../components/Radio'
 
+enum RadioButtonSize {
+  MEDIUM = 'medium',
+  SMALL = 'small',
+  MINI = 'mini'
+}
+
 export default {
   component: SRadio,
   title: 'Design System/Components/Radio',
@@ -99,6 +105,8 @@ export const radioButtonGroup = () => ({
                   :key="item.label"
                   v-model="model"
                   :label="item.label"
+                  :size="size"
+                  :isRadioButton="true"
                 >
                   {{ item.title }}
                 </s-radio>
@@ -113,7 +121,7 @@ export const radioButtonGroup = () => ({
   }),
   props: {
     size: {
-      default: select('Size', Object.values(RadioSize), RadioSize.MEDIUM)
+      default: select('Size', Object.values(RadioButtonSize), RadioButtonSize.MEDIUM)
     },
     disabled: {
       default: boolean('Disabled', false)
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index f7a0079d..9d19cb04 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,6 +1,28 @@
 @import "./variables";
 @import "./common";
 
+$radio-button-border-width: 1px;
+$radio-button-class: ".el-radio-button";
+
+@mixin radio-button-size(
+  $modifier: "mini",
+  $size: $s-size-small,
+  $font-size: $s-font-size-small
+) {
+  $radio-button-vertical-padding: #{($size - $font-size) / 2 - $radio-button-border-width};
+  #{$radio-button-class} {
+    &--#{$modifier} {
+      height: $size;
+      line-height: $size;
+      #{$radio-button-class}__inner {
+        padding-top: $radio-button-vertical-padding;
+        padding-bottom: $radio-button-vertical-padding;
+        font-size: $font-size;
+      }
+    }
+  }
+}
+
 .el-radio {
   color: var(--s-color-basic-black);
   &.s-big {
@@ -98,4 +120,47 @@
       }
     }
   }
+  &-button {
+    &:hover {
+      #{$radio-button-class}__inner {
+        border-color: var(--s-color-main-brand);
+      }
+    }
+    &.is-disabled {
+      #{$radio-button-class}__inner {
+        color: var(--s-color-neutral-inactive);
+      }
+    }
+    &.is-disabled,
+    &.is-disabled:hover {
+      #{$radio-button-class}__inner {
+        border-color: var(--s-color-neutral-border);
+      }
+    }
+    &.is-active {
+      &:hover {
+        #{$radio-button-class}__inner {
+          background-color: var(--s-color-main-hover);
+          border-color: var(--s-color-main-hover);
+        }
+      }
+      &.is-disabled {
+        #{$radio-button-class}__inner {
+          color: var(--s-color-basic-white);
+        }
+      }
+      &.is-disabled,
+      &.is-disabled:hover {
+        #{$radio-button-class}__inner {
+          background-color: var(--s-color-main-inactive);
+          border-color: var(--s-color-main-inactive);
+        }
+      }
+    }
+  }
+  &-group {
+    @include radio-button-size;
+    @include radio-button-size("small", $s-size-medium, $s-font-size-big);
+    @include radio-button-size("medium", $s-size-big, $s-font-size-big);
+  }
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 5b8ccd38..4d403700 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -27,6 +27,10 @@ $s-border-radius-default: 4px !default;
 // Fonts
 $font-family-default: 'Sora', sans-serif !important;
 $font-family-mono: 'JetBrainsMono', monospace !important;
+// Font sizes
+$s-font-size-big: 14px !default;
+$s-font-size-small: 12px !default;
+
 // Responsive
 $--sm: 640px !default;
 $--md: 1024px !default;

From bf5a20d12ed596fb1a9065b6c23b46e4bd0b398e Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 21 Oct 2020 11:30:04 +0300
Subject: [PATCH 3/7] Slider and Radio Button Group Components: Changed size
 values to library ones.

---
 src/components/Radio/SRadioGroup.vue |  6 ++++--
 src/components/Slider/SSlider.vue    |  6 ++++--
 src/components/Slider/consts.ts      |  6 ++++++
 src/components/Slider/index.ts       |  3 ++-
 src/stories/SRadio.stories.ts        |  8 +-------
 src/stories/SSlider.stories.ts       | 11 ++---------
 src/styles/radio.scss                |  6 +++---
 src/styles/slider.scss               |  2 +-
 8 files changed, 23 insertions(+), 25 deletions(-)
 create mode 100644 src/components/Slider/consts.ts

diff --git a/src/components/Radio/SRadioGroup.vue b/src/components/Radio/SRadioGroup.vue
index e8e1c946..93382e17 100644
--- a/src/components/Radio/SRadioGroup.vue
+++ b/src/components/Radio/SRadioGroup.vue
@@ -11,6 +11,8 @@
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 
+import { RadioSize } from './consts'
+
 @Component
 export default class SRadio extends Vue {
   /**
@@ -18,11 +20,11 @@ export default class SRadio extends Vue {
    */
   @Prop() readonly value!: string | number | boolean
   /**
-   * Size of the radio item. Possible values: `"medium"`, `"small"`, `"mini"`.
+   * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`
    *
    * By default it's set to `"medium"`
    */
-  @Prop({ default: 'medium', type: String }) readonly size!: 'medium' | 'small' | 'mini'
+  @Prop({ default: RadioSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Whether the nesting radios are disabled.
    */
diff --git a/src/components/Slider/SSlider.vue b/src/components/Slider/SSlider.vue
index 8baf9a3b..53a018bb 100644
--- a/src/components/Slider/SSlider.vue
+++ b/src/components/Slider/SSlider.vue
@@ -29,6 +29,8 @@
 import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
 import { ElSlider } from 'element-ui/types/slider'
 
+import { SliderInputSize } from './consts'
+
 @Component
 export default class SSlider extends Vue {
   /**
@@ -68,9 +70,9 @@ export default class SSlider extends Vue {
    */
   @Prop({ default: true, type: Boolean }) readonly showInputControls!: boolean
   /**
-   * Size of the input box
+   * Size of the input box. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`
    */
-  @Prop({ default: 'small', type: String }) readonly inputSize!: 'large' | 'medium' | 'small' | 'mini'
+  @Prop({ default: SliderInputSize.SMALL, type: String }) readonly inputSize!: string
   /**
    * Debounce delay when typing, in milliseconds, works when show-input is true
    */
diff --git a/src/components/Slider/consts.ts b/src/components/Slider/consts.ts
new file mode 100644
index 00000000..3e4ca1e0
--- /dev/null
+++ b/src/components/Slider/consts.ts
@@ -0,0 +1,6 @@
+export enum SliderInputSize {
+  BIG = 'big',
+  MEDIUM = 'medium',
+  SMALL = 'small',
+  MINI = 'mini'
+}
diff --git a/src/components/Slider/index.ts b/src/components/Slider/index.ts
index b78fc957..67073618 100644
--- a/src/components/Slider/index.ts
+++ b/src/components/Slider/index.ts
@@ -1,3 +1,4 @@
 import SSlider from './SSlider.vue'
+import { SliderInputSize } from './consts'
 
-export { SSlider }
+export { SSlider, SliderInputSize }
diff --git a/src/stories/SRadio.stories.ts b/src/stories/SRadio.stories.ts
index a436f6e4..15a21449 100644
--- a/src/stories/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -3,12 +3,6 @@ import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 import { SRadio, SRadioGroup, SRow, SCol } from '../components'
 import { RadioSize } from '../components/Radio'
 
-enum RadioButtonSize {
-  MEDIUM = 'medium',
-  SMALL = 'small',
-  MINI = 'mini'
-}
-
 export default {
   component: SRadio,
   title: 'Design System/Components/Radio',
@@ -121,7 +115,7 @@ export const radioButtonGroup = () => ({
   }),
   props: {
     size: {
-      default: select('Size', Object.values(RadioButtonSize), RadioButtonSize.MEDIUM)
+      default: select('Size', Object.values(RadioSize), RadioSize.MEDIUM)
     },
     disabled: {
       default: boolean('Disabled', false)
diff --git a/src/stories/SSlider.stories.ts b/src/stories/SSlider.stories.ts
index 5f2f76da..57dd9b62 100644
--- a/src/stories/SSlider.stories.ts
+++ b/src/stories/SSlider.stories.ts
@@ -1,13 +1,6 @@
 import { text, number, boolean, select, object, withKnobs } from '@storybook/addon-knobs'
 
-import { SSlider } from '../components/Slider'
-
-enum InputSize {
-  LARGE = 'large',
-  MEDIUM = 'medium',
-  SMALL = 'small',
-  MINI = 'mini'
-}
+import { SSlider, SliderInputSize } from '../components/Slider'
 
 export default {
   component: SSlider,
@@ -122,7 +115,7 @@ export const withInput = () => ({
       default: boolean('Show Input Controls', true)
     },
     inputSize: {
-      default: select('Size of the input box', Object.values(InputSize), InputSize.SMALL)
+      default: select('Size of the input box', Object.values(SliderInputSize), SliderInputSize.SMALL)
     },
     debounce: {
       default: number('Debounce delay when typing (in milliseconds)', 300)
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 9d19cb04..e2980814 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -5,7 +5,7 @@ $radio-button-border-width: 1px;
 $radio-button-class: ".el-radio-button";
 
 @mixin radio-button-size(
-  $modifier: "mini",
+  $modifier: "small",
   $size: $s-size-small,
   $font-size: $s-font-size-small
 ) {
@@ -160,7 +160,7 @@ $radio-button-class: ".el-radio-button";
   }
   &-group {
     @include radio-button-size;
-    @include radio-button-size("small", $s-size-medium, $s-font-size-big);
-    @include radio-button-size("medium", $s-size-big, $s-font-size-big);
+    @include radio-button-size("medium", $s-size-medium, $s-font-size-big);
+    @include radio-button-size("big", $s-size-big, $s-font-size-big);
   }
 }
diff --git a/src/styles/slider.scss b/src/styles/slider.scss
index 0c35fafb..6728a46c 100644
--- a/src/styles/slider.scss
+++ b/src/styles/slider.scss
@@ -93,5 +93,5 @@
   @include slider-input-size;
   @include slider-input-size("small", $s-size-small);
   @include slider-input-size("medium", $s-size-medium);
-  @include slider-input-size("large", $s-size-big);
+  @include slider-input-size("big", $s-size-big);
 }

From 0d8f2dc343a29c137bd24a1a17f87a34d7ef81a9 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 21 Oct 2020 11:59:46 +0300
Subject: [PATCH 4/7] Radio Button Group Component: Fixed left border color for
 variant with more than two items.

---
 src/styles/radio.scss | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index e2980814..cc7c3601 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,8 +1,9 @@
 @import "./variables";
 @import "./common";
 
-$radio-button-border-width: 1px;
 $radio-button-class: ".el-radio-button";
+$radio-button-border-width: 1px;
+$radio-button-border-color: var(--s-color-main-brand);
 
 @mixin radio-button-size(
   $modifier: "small",
@@ -123,7 +124,32 @@ $radio-button-class: ".el-radio-button";
   &-button {
     &:hover {
       #{$radio-button-class}__inner {
-        border-color: var(--s-color-main-brand);
+        border-color: $radio-button-border-color;
+      }
+      &:not(:first-child):not(.is-disabled) {
+        #{$radio-button-class}__inner {
+          &:before {
+            opacity: 1;
+          }
+        }
+      }
+    }
+    &:not(:first-child):not(.is-disabled) {
+      #{$radio-button-class}__inner {
+        position: relative;
+        &:before {
+          content: "";
+          position: absolute;
+          display: block;
+          opacity: 0;
+          background-color: $radio-button-border-color;
+          height: calc(100% + #{$radio-button-border-width * 2});
+          width: $radio-button-border-width;
+          left: -#{$radio-button-border-width};
+          top: -#{$radio-button-border-width};
+          transition: inherit;
+          transition-property: opacity;
+        }
       }
     }
     &.is-disabled {

From dd210973d850fb3a14e3b2defb0eadfa368bbc9e Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 21 Oct 2020 12:01:01 +0300
Subject: [PATCH 5/7] Updated Lib version.

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

diff --git a/package.json b/package.json
index 29ac3ab9..d85285e5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

From 96acf7d88f3de3e50a2c84935a576624903131a3 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 21 Oct 2020 14:17:09 +0300
Subject: [PATCH 6/7] Refactored: Changed original colors to library ones.

---
 src/components/Switch/SSwitch.vue | 10 -------
 src/stories/SSwitch.stories.ts    | 10 +------
 src/styles/radio.scss             | 14 ++++++++++
 src/styles/slider.scss            |  3 +++
 src/styles/switch.scss            | 45 ++++++++++++++++++++++++++++---
 5 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/components/Switch/SSwitch.vue b/src/components/Switch/SSwitch.vue
index b490404f..e8b85bc4 100644
--- a/src/components/Switch/SSwitch.vue
+++ b/src/components/Switch/SSwitch.vue
@@ -2,8 +2,6 @@
   <div class="s-switch">
     <el-switch
       v-model="model"
-      :active-color="activeColor"
-      :inactive-color="inactiveColor"
       :active-icon-class="activeIconСlass"
       :inactive-icon-class="inactiveIconСlass"
       :active-text="activeText"
@@ -28,14 +26,6 @@ export default class SSwitch extends Vue {
    * Value of switch
    */
   @Prop({ default: false }) readonly value!: boolean | string | number
-  /**
-   * Background color when in on state
-   */
-  @Prop({ default: '#d0021b', type: String }) readonly activeColor!: string
-  /**
-   * Background color when in off state
-   */
-  @Prop({ default: '#f6ccd1', type: String }) readonly inactiveColor!: string
   /**
    * Class name of the icon displayed when in on state, overrides active-text
    */
diff --git a/src/stories/SSwitch.stories.ts b/src/stories/SSwitch.stories.ts
index 7ad0ef19..62c76629 100644
--- a/src/stories/SSwitch.stories.ts
+++ b/src/stories/SSwitch.stories.ts
@@ -1,4 +1,4 @@
-import { color, text, number, boolean, withKnobs } from '@storybook/addon-knobs'
+import { text, number, boolean, withKnobs } from '@storybook/addon-knobs'
 
 import { SSwitch } from '../components/Switch'
 
@@ -14,8 +14,6 @@ export const configurable = () => ({
   template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
               <s-switch
                 v-model="modelValue"
-                :active-color="activeColor"
-                :inactive-color="inactiveColor"
                 :active-text="activeText"
                 :inactive-text="inactiveText"
                 :active-value="activeValue"
@@ -33,12 +31,6 @@ export const configurable = () => ({
     changeValue: true
   }),
   props: {
-    activeColor: {
-      default: color('Active Background Color', 'rgb(208, 2, 27)')
-    },
-    inactiveColor: {
-      default: color('Inactive Background Color', 'rgb(246, 204, 209)')
-    },
     activeText: {
       default: text('Active Text', '')
     },
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index cc7c3601..6e5b0bd8 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -125,6 +125,7 @@ $radio-button-border-color: var(--s-color-main-brand);
     &:hover {
       #{$radio-button-class}__inner {
         border-color: $radio-button-border-color;
+        color: var(--s-color-main-brand);
       }
       &:not(:first-child):not(.is-disabled) {
         #{$radio-button-class}__inner {
@@ -188,5 +189,18 @@ $radio-button-border-color: var(--s-color-main-brand);
     @include radio-button-size;
     @include radio-button-size("medium", $s-size-medium, $s-font-size-big);
     @include radio-button-size("big", $s-size-big, $s-font-size-big);
+    #{$radio-button-class}__inner {
+      background-color: var(--s-color-basic-white);
+      border-color: var(--s-color-neutral-border);
+      color: var(--s-color-basic-black);
+    }
+    .is-disabled #{$radio-button-class}__inner {
+      background-color: var(--s-color-basic-white);
+    }
+    .is-active #{$radio-button-class}__inner {
+      background-color: var(--s-color-main-brand);
+      border-color: var(--s-color-main-brand);
+      color: var(--s-color-basic-white);
+    }
   }
 }
diff --git a/src/styles/slider.scss b/src/styles/slider.scss
index 6728a46c..7940b83e 100644
--- a/src/styles/slider.scss
+++ b/src/styles/slider.scss
@@ -35,6 +35,9 @@
     &__marks-text {
       color: var(--s-color-basic-black);
     }
+    &__bar {
+      background-color: var(--s-color-main-brand);
+    }
   }
   .disabled {
     .el-slider__bar {
diff --git a/src/styles/switch.scss b/src/styles/switch.scss
index 7db1a641..ef8f32d1 100644
--- a/src/styles/switch.scss
+++ b/src/styles/switch.scss
@@ -1,10 +1,47 @@
 @import "./variables";
 
+$switch-class: ".el-switch";
+
 .s-switch {
-  .el-switch__label {
-    color: var(--s-color-basic-black);
-    &.is-active {
-      color: var(--s-color-main-brand);
+  #{$switch-class} {
+    &__label {
+      color: var(--s-color-basic-black);
+      &.is-active {
+        color: var(--s-color-main-brand);
+      }
+    }
+    &__core {
+      border-color: var(--s-color-neutral-border);
+      background-color: var(--s-color-neutral-border);
+      &:after {
+        background-color: var(--s-color-basic-white);
+      }
+    }
+    &:hover,
+    &.is-checked:hover {
+      #{$switch-class}__core {
+        background-color: var(--s-color-main-hover);
+        border-color: var(--s-color-main-hover);
+      }
+    }
+    &.is-disabled {
+      opacity: 1;
+      #{$switch-class}__core {
+        background-color: var(--s-color-neutral-placeholder);
+        border-color: var(--s-color-neutral-placeholder);
+      }
+    }
+    &.is-checked {
+      #{$switch-class}__core {
+        background-color: var(--s-color-main-brand);
+        border-color: var(--s-color-main-brand);
+      }
+      &.is-disabled {
+        #{$switch-class}__core {
+          background-color: var(--s-color-main-inactive);
+          border-color: var(--s-color-main-inactive);
+        }
+      }
     }
   }
 }

From 12edfcb987451f95135ba01375d4c2f737cad2e0 Mon Sep 17 00:00:00 2001
From: alexnatalia <alekseenkonn@gmail.com>
Date: Wed, 21 Oct 2020 15:22:50 +0300
Subject: [PATCH 7/7] Refactored: Fixed some original styles.

---
 src/styles/radio.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 6e5b0bd8..8b92601b 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -189,10 +189,15 @@ $radio-button-border-color: var(--s-color-main-brand);
     @include radio-button-size;
     @include radio-button-size("medium", $s-size-medium, $s-font-size-big);
     @include radio-button-size("big", $s-size-big, $s-font-size-big);
-    #{$radio-button-class}__inner {
-      background-color: var(--s-color-basic-white);
-      border-color: var(--s-color-neutral-border);
-      color: var(--s-color-basic-black);
+    #{$radio-button-class} {
+      &__inner {
+        background-color: var(--s-color-basic-white);
+        border-color: var(--s-color-neutral-border);
+        color: var(--s-color-basic-black);
+      }
+      #{$radio-button-class}__inner {
+        box-shadow: none;
+      }
     }
     .is-disabled #{$radio-button-class}__inner {
       background-color: var(--s-color-basic-white);