From 80beeba1e202388c4b9fc3f7ef24c2c429d50210 Mon Sep 17 00:00:00 2001
From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com>
Date: Wed, 14 Oct 2020 15:29:58 +0300
Subject: [PATCH 1/3] Switch Component Addition (#65)

* Switch Component: Added Component and Story.
---
 src/components/Switch/SSwitch.vue | 93 +++++++++++++++++++++++++++++++
 src/components/Switch/index.ts    |  3 +
 src/components/index.ts           |  2 +
 src/index.ts                      |  3 +
 src/stories/SSwitch.stories.ts    | 61 ++++++++++++++++++++
 src/styles/index.scss             |  1 +
 src/styles/switch.scss            | 10 ++++
 src/types/components.ts           |  1 +
 8 files changed, 174 insertions(+)
 create mode 100644 src/components/Switch/SSwitch.vue
 create mode 100644 src/components/Switch/index.ts
 create mode 100644 src/stories/SSwitch.stories.ts
 create mode 100644 src/styles/switch.scss

diff --git a/src/components/Switch/SSwitch.vue b/src/components/Switch/SSwitch.vue
new file mode 100644
index 00000000..37bdb26c
--- /dev/null
+++ b/src/components/Switch/SSwitch.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="s-switch">
+    <el-switch
+      ref="el-switch"
+      v-model="model"
+      :active-color="activeColor"
+      :inactive-color="inactiveColor"
+      :active-icon-class="activeIconСlass"
+      :inactive-icon-class="inactiveIconСlass"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+      :active-value="activeValue"
+      :inactive-value="inactiveValue"
+      :name="name"
+      :width="width"
+      :disabled="disabled"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
+import { ElSwitch } from 'element-ui/types/switch'
+
+@Component
+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
+   */
+  @Prop({ default: '', type: String }) readonly activeIconСlass!: string
+  /**
+   * Class name of the icon displayed when in off state, overrides inactive-text
+   */
+  @Prop({ default: '', type: String }) readonly inactiveIconСlass!: string
+  /**
+   * Text displayed when in on state
+   */
+  @Prop({ default: '', type: String }) readonly activeText!: string
+  /**
+   * Text displayed when in off state
+   */
+  @Prop({ default: '', type: String }) readonly inactiveText!: string
+  /**
+   * Switch value when in on state
+   */
+  @Prop({ default: true }) readonly activeValue!: boolean | string | number
+  /**
+   * Switch value when in off state
+   */
+  @Prop({ default: false }) readonly inactiveValue!: boolean | string | number
+  /**
+   * Input name of switch
+   */
+  @Prop({ default: '', type: String }) readonly name!: string
+  /**
+   * Width of switch
+   */
+  @Prop({ default: 40, type: Number }) readonly width!: number
+  /**
+   * Whether switch is disabled
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  model = this.value
+
+  @Watch('value')
+  private handlePropChange (value: boolean | string | number): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: boolean | string | number): void {
+    this.$emit('input', value)
+  }
+
+  handleChange (value: boolean | string | number): void {
+    this.$emit('change', value)
+  }
+}
+</script>
diff --git a/src/components/Switch/index.ts b/src/components/Switch/index.ts
new file mode 100644
index 00000000..2040039d
--- /dev/null
+++ b/src/components/Switch/index.ts
@@ -0,0 +1,3 @@
+import SSwitch from './SSwitch.vue'
+
+export { SSwitch }
diff --git a/src/components/index.ts b/src/components/index.ts
index 573e5ba2..b5be4cd7 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -23,6 +23,7 @@ import { SInput, SJsonInput } from './Input'
 import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SPagination } from './Pagination'
+import { SSwitch } from './Switch'
 import { SRadio } from './Radio'
 import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
@@ -69,6 +70,7 @@ export {
   SScrollSections,
   SSelect,
   SSubmenu,
+  SSwitch,
   STab,
   STabs,
   STable,
diff --git a/src/index.ts b/src/index.ts
index ba537aae..c012779e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -38,6 +38,7 @@ import {
   SScrollSections,
   SSelect,
   SSubmenu,
+  SSwitch,
   STab,
   STabs,
   STable,
@@ -87,6 +88,7 @@ const components = [
   { component: SScrollSections, name: Components.SScrollSections },
   { component: SSelect, name: Components.SSelect },
   { component: SSubmenu, name: Components.SSubmenu },
+  { component: SSwitch, name: Components.SSwitch },
   { component: STab, name: Components.STab },
   { component: STabs, name: Components.STabs },
   { component: STable, name: Components.STable },
@@ -152,6 +154,7 @@ export {
   SScrollSections,
   SSelect,
   SSubmenu,
+  SSwitch,
   STab,
   STabs,
   STable,
diff --git a/src/stories/SSwitch.stories.ts b/src/stories/SSwitch.stories.ts
new file mode 100644
index 00000000..7ad0ef19
--- /dev/null
+++ b/src/stories/SSwitch.stories.ts
@@ -0,0 +1,61 @@
+import { color, text, number, boolean, withKnobs } from '@storybook/addon-knobs'
+
+import { SSwitch } from '../components/Switch'
+
+export default {
+  component: SSwitch,
+  title: 'Design System/Components/Switch',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const configurable = () => ({
+  components: { SSwitch },
+  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"
+                :inactive-value="inactiveValue"
+                :width="width"
+                :disabled="disabled"
+                @change="(value) => changeValue = value"
+              />
+              <span style="margin-top: 20px;">
+                v-model="{{ modelValue }}", @change="{{ changeValue }}"
+              </span>
+            </div>`,
+  data: () => ({
+    modelValue: true,
+    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', '')
+    },
+    inactiveText: {
+      default: text('Inactive Text', '')
+    },
+    activeValue: {
+      default: text('Active Value', 'Active Value')
+    },
+    inactiveValue: {
+      default: text('Inactive Value', 'Inactive Value')
+    },
+    width: {
+      default: number('Width', 40)
+    },
+    disabled: {
+      default: boolean('Disabled', false)
+    }
+  }
+})
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9b2002d7..12bc8763 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -18,6 +18,7 @@
 @import "./radio";
 @import "./scroll-sections";
 @import "./select";
+@import "./switch";
 @import "./tabs";
 @import "./table";
 @import "./tooltip";
diff --git a/src/styles/switch.scss b/src/styles/switch.scss
new file mode 100644
index 00000000..7db1a641
--- /dev/null
+++ b/src/styles/switch.scss
@@ -0,0 +1,10 @@
+@import "./variables";
+
+.s-switch {
+  .el-switch__label {
+    color: var(--s-color-basic-black);
+    &.is-active {
+      color: var(--s-color-main-brand);
+    }
+  }
+}
diff --git a/src/types/components.ts b/src/types/components.ts
index 3c4d1a20..7c180c2f 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -36,6 +36,7 @@ export enum Components {
   SScrollSections = 'SScrollSections',
   SSelect = 'SSelect',
   SSubmenu = 'SSubmenu',
+  SSwitch = 'SSwitch',
   STab = 'STab',
   STabs = 'STabs',
   STable = 'STable',

From 067d76c03284306e3f709136119b91675353c4f8 Mon Sep 17 00:00:00 2001
From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com>
Date: Tue, 20 Oct 2020 13:17:51 +0300
Subject: [PATCH 2/3] Slider component (#67)

Added Slider component and story.
---
 package.json                      |   2 +-
 src/components/Slider/SSlider.vue | 130 +++++++++++++++++++++
 src/components/Slider/index.ts    |   3 +
 src/components/Switch/SSwitch.vue |   3 +-
 src/components/index.ts           |   2 +
 src/index.ts                      |   3 +
 src/stories/SSlider.stories.ts    | 185 ++++++++++++++++++++++++++++++
 src/styles/index.scss             |   1 +
 src/styles/slider.scss            |  97 ++++++++++++++++
 src/styles/variables.scss         |   1 +
 src/types/components.ts           |   1 +
 11 files changed, 425 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Slider/SSlider.vue
 create mode 100644 src/components/Slider/index.ts
 create mode 100644 src/stories/SSlider.stories.ts
 create mode 100644 src/styles/slider.scss

diff --git a/package.json b/package.json
index d2d00eac..29ac3ab9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Slider/SSlider.vue b/src/components/Slider/SSlider.vue
new file mode 100644
index 00000000..8baf9a3b
--- /dev/null
+++ b/src/components/Slider/SSlider.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="s-slider">
+    <el-slider
+      v-model="model"
+      :min="min"
+      :max="max"
+      :show-tooltip="showTooltip"
+      :tooltip-class="tooltipClass"
+      :format-tooltip="formatTooltip"
+      :step="step"
+      :show-stops="showStops"
+      :show-input="showInput"
+      :show-input-controls="showInputControls"
+      :input-size="inputSize"
+      :debounce="debounce"
+      :vertical="isVertical && (height !== '')"
+      :height="height"
+      :label="label"
+      :range="range"
+      :marks="marks"
+      :disabled="disabled"
+      @input="handleInput"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
+import { ElSlider } from 'element-ui/types/slider'
+
+@Component
+export default class SSlider extends Vue {
+  /**
+   * Binding value
+   */
+  @Prop({ default: 0 }) readonly value!: number | number[]
+  /**
+   * Minimum value
+   */
+  @Prop({ default: 0, type: Number }) readonly min!: number
+  /**
+   * Maximum value
+   */
+  @Prop({ default: 100, type: Number }) readonly max!: number
+  /**
+   * Show tooltip
+   */
+  @Prop({ default: true, type: Boolean }) readonly showTooltip!: boolean
+  /**
+   * Custom class name for the tooltip
+   */
+  @Prop({ default: '', type: String }) readonly tooltipClass!: string
+  /**
+   * Step size
+   */
+  @Prop({ default: 1, type: Number }) readonly step!: number
+  /**
+   * Whether to display breakpoints
+   */
+  @Prop({ default: false, type: Boolean }) readonly showStops!: boolean
+  /**
+   * Whether to display an input box, works when range is false
+   */
+  @Prop({ default: false, type: Boolean }) readonly showInput!: boolean
+  /**
+   * Whether to display control buttons when show-input is true
+   */
+  @Prop({ default: true, type: Boolean }) readonly showInputControls!: boolean
+  /**
+   * Size of the input box
+   */
+  @Prop({ default: 'small', type: String }) readonly inputSize!: 'large' | 'medium' | 'small' | 'mini'
+  /**
+   * Debounce delay when typing, in milliseconds, works when show-input is true
+   */
+  @Prop({ default: 300, type: Number }) readonly debounce!: number
+  /**
+   * Vertical mode
+   */
+  @Prop({ default: true, type: Boolean }) readonly isVertical!: boolean
+  /**
+   * Slider height, required in vertical mode
+   */
+  @Prop({ default: '', type: String }) readonly height!: string
+  /**
+   * Label for screen reader
+   */
+  @Prop({ default: '', type: String }) readonly label!: string
+  /**
+   * Whether to select a range
+   */
+  @Prop({ default: false, type: Boolean }) readonly range!: boolean
+  /**
+   * Marks， type of key must be number and must in closed interval [min, max], each mark can custom style
+   */
+  @Prop({ default: () => {}, type: Object }) readonly marks!: object
+  /**
+   * Whether Slider is disabled
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  model = this.value
+
+  @Watch('value')
+  private handlePropChange (value: number): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: number): void {
+    this.$emit('input', value)
+    this.$emit('change', value)
+  }
+
+  handleInput (value: number): void {
+    this.$emit('input', value)
+  }
+
+  handleChange (value: number): void {
+    this.$emit('change', value)
+  }
+
+  formatTooltip (value: number): number {
+    // To format tooltip value you shoud change return value at the next line
+    // return value / 100
+    return value
+  }
+}
+</script>
diff --git a/src/components/Slider/index.ts b/src/components/Slider/index.ts
new file mode 100644
index 00000000..b78fc957
--- /dev/null
+++ b/src/components/Slider/index.ts
@@ -0,0 +1,3 @@
+import SSlider from './SSlider.vue'
+
+export { SSlider }
diff --git a/src/components/Switch/SSwitch.vue b/src/components/Switch/SSwitch.vue
index 37bdb26c..b490404f 100644
--- a/src/components/Switch/SSwitch.vue
+++ b/src/components/Switch/SSwitch.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="s-switch">
     <el-switch
-      ref="el-switch"
       v-model="model"
       :active-color="activeColor"
       :inactive-color="inactiveColor"
@@ -20,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import { ElSwitch } from 'element-ui/types/switch'
 
 @Component
diff --git a/src/components/index.ts b/src/components/index.ts
index b5be4cd7..d4cef978 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -23,6 +23,7 @@ import { SInput, SJsonInput } from './Input'
 import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SPagination } from './Pagination'
+import { SSlider } from './Slider'
 import { SSwitch } from './Switch'
 import { SRadio } from './Radio'
 import { SRow } from './Layout/Row'
@@ -69,6 +70,7 @@ export {
   SScrollSectionItem,
   SScrollSections,
   SSelect,
+  SSlider,
   SSubmenu,
   SSwitch,
   STab,
diff --git a/src/index.ts b/src/index.ts
index c012779e..db402704 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -37,6 +37,7 @@ import {
   SScrollSectionItem,
   SScrollSections,
   SSelect,
+  SSlider,
   SSubmenu,
   SSwitch,
   STab,
@@ -87,6 +88,7 @@ const components = [
   { component: SScrollSectionItem, name: Components.SScrollSectionItem },
   { component: SScrollSections, name: Components.SScrollSections },
   { component: SSelect, name: Components.SSelect },
+  { component: SSlider, name: Components.SSlider },
   { component: SSubmenu, name: Components.SSubmenu },
   { component: SSwitch, name: Components.SSwitch },
   { component: STab, name: Components.STab },
@@ -153,6 +155,7 @@ export {
   SScrollSectionItem,
   SScrollSections,
   SSelect,
+  SSlider,
   SSubmenu,
   SSwitch,
   STab,
diff --git a/src/stories/SSlider.stories.ts b/src/stories/SSlider.stories.ts
new file mode 100644
index 00000000..5f2f76da
--- /dev/null
+++ b/src/stories/SSlider.stories.ts
@@ -0,0 +1,185 @@
+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'
+}
+
+export default {
+  component: SSlider,
+  title: 'Design System/Components/Slider',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const configurable = () => ({
+  components: { SSlider },
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
+              <s-slider
+                v-model="modelValue"
+                :min="min"
+                :max="max"
+                :show-tooltip="showTooltip"
+                :step="step"
+                :show-stops="showStops"
+                :disabled="disabled"
+                @change="(value) => changeValue = value"
+              />
+              <span style="margin-top: 20px;">
+                v-model="{{ modelValue }}", @change="{{ changeValue }}"
+              </span>
+            </div>`,
+  data: () => ({
+    modelValue: 0,
+    changeValue: 0
+  }),
+  props: {
+    min: {
+      default: number('Minimum value', 0)
+    },
+    max: {
+      default: number('Maximum value', 100)
+    },
+    showTooltip: {
+      default: boolean('Show Tooltip', true)
+    },
+    step: {
+      default: number('Step size', 1)
+    },
+    showStops: {
+      default: boolean('Show Stops', false)
+    },
+    disabled: {
+      default: boolean('Disabled', false)
+    }
+  }
+})
+
+export const withCustomLabelAttribute = () => ({
+  components: { SSlider },
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
+              <s-slider
+                v-model="modelValue"
+                :label="label"
+                @change="(value) => changeValue = value"
+              />
+              <span style="margin-top: 20px;">
+                v-model="{{ modelValue }}", @change="{{ changeValue }}", label="{{ label }}"
+              </span>
+            </div>`,
+  data: () => ({
+    modelValue: 0,
+    changeValue: 0,
+    label: 'Custom slider label value'
+  })
+})
+
+export const withInitValue = () => ({
+  components: { SSlider },
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
+              <s-slider
+                v-model="modelValue"
+                @change="(value) => changeValue = value"
+              />
+              <span style="margin-top: 20px;">
+                v-model="{{ modelValue }}", @change="{{ changeValue }}"
+              </span>
+            </div>`,
+  data: () => ({
+    modelValue: 50,
+    changeValue: 0
+  })
+})
+
+export const withInput = () => ({
+  components: { SSlider },
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
+              <s-slider
+                v-model="modelValue"
+                :show-input="showInput"
+                :show-input-controls="showInputControls"
+                :input-size="inputSize"
+                :debounce="debounce"
+                @change="(value) => changeValue = value"
+              />
+              <span style="margin-top: 20px;">
+                v-model="{{ modelValue }}", @change="{{ changeValue }}"
+              </span>
+            </div>`,
+  data: () => ({
+    modelValue: 0,
+    changeValue: 0
+  }),
+  props: {
+    showInput: {
+      default: boolean('Show Input', true)
+    },
+    showInputControls: {
+      default: boolean('Show Input Controls', true)
+    },
+    inputSize: {
+      default: select('Size of the input box', Object.values(InputSize), InputSize.SMALL)
+    },
+    debounce: {
+      default: number('Debounce delay when typing (in milliseconds)', 300)
+    }
+  }
+})
+
+export const withRange = () => ({
+  components: { SSlider },
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
+              <s-slider
+                v-model="modelValue"
+                :range="range"
+                :marks="range && marks"
+                @change="(value) => changeValue = value"
+              />
+              <span style="margin-top: 20px;">
+                v-model="{{ modelValue }}", @change="{{ changeValue }}"
+              </span>
+            </div>`,
+  data: () => ({
+    modelValue: [0, 0],
+    changeValue: [0, 0]
+  }),
+  props: {
+    range: {
+      default: boolean('Range', true)
+    },
+    marks: {
+      default: object('Marks', {
+        0: '0°C',
+        8: '8°C',
+        37: '37°C'
+      })
+    }
+  }
+})
+
+export const verticalMode = () => ({
+  components: { SSlider },
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
+              <s-slider
+                v-model="modelValue"
+                :height="height"
+                @change="(value) => changeValue = value"
+              />
+              <span style="margin-top: 20px;">
+                v-model="{{ modelValue }}", @change="{{ changeValue }}"
+              </span>
+            </div>`,
+  data: () => ({
+    modelValue: 0,
+    changeValue: 0
+  }),
+  props: {
+    height: {
+      default: text('Height', '200px')
+    }
+  }
+})
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 12bc8763..ae273633 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -18,6 +18,7 @@
 @import "./radio";
 @import "./scroll-sections";
 @import "./select";
+@import "./slider";
 @import "./switch";
 @import "./tabs";
 @import "./table";
diff --git a/src/styles/slider.scss b/src/styles/slider.scss
new file mode 100644
index 00000000..0c35fafb
--- /dev/null
+++ b/src/styles/slider.scss
@@ -0,0 +1,97 @@
+@import "./variables";
+
+@mixin slider-colors(
+  $background-color: --s-color-main-brand,
+  $border-color: $background-color,
+  $color: false
+) {
+  background-color: var($background-color);
+  border-color: var($border-color);
+
+  @if $color != false {
+    color: var($color);
+  }
+}
+
+@mixin slider-input-size($modifier: "mini", $size: $s-size-mini) {
+  .el-input-number--#{$modifier} {
+    line-height: $size;
+    .el-input__inner {
+      height: $size;
+      line-height: $size;
+    }
+  }
+}
+
+.s-slider {
+  .el-slider__runway,
+  .disabled .el-slider__runway {
+    background-color: var(--s-color-neutral-placeholder);
+  }
+  .el-slider {
+    &__button {
+      @include slider-colors;
+    }
+    &__marks-text {
+      color: var(--s-color-basic-black);
+    }
+  }
+  .disabled {
+    .el-slider__bar {
+      background-color: var(--s-color-neutral-border);
+    }
+    .el-slider__button {
+      @include slider-colors(--s-color-neutral-border);
+    }
+  }
+  .el-input {
+    &__inner {
+      @include slider-colors(--s-color-neutral-placeholder);
+      &:hover:not([disabled]):not(:focus) {
+        @include slider-colors(--s-color-neutral-hover);
+      }
+      &:focus {
+        @include slider-colors(--s-color-basic-white, --s-color-neutral-border);
+      }
+    }
+    &-number {
+      &__decrease,
+      &__increase {
+        height: 100%;
+        top: 0;
+        color: var(--s-color-basic-white);
+        @include slider-colors($color: --s-color-basic-white);
+        &:hover:not(.is-disabled)
+          ~ .el-input
+          .el-input__inner:not(.is-disabled) {
+          border-color: var(--s-color-neutral-hover);
+        }
+        &.is-disabled {
+          @include slider-colors(
+            $background-color: --s-color-main-inactive,
+            $color: --s-color-basic-white
+          );
+        }
+      }
+      &__decrease {
+        left: 0;
+      }
+      &__increase {
+        right: 0;
+      }
+      &.is-disabled {
+        .el-input-number__decrease,
+        .el-input-number__increase {
+          @include slider-colors(
+            $background-color: --s-color-main-inactive,
+            $color: --s-color-basic-white
+          );
+        }
+      }
+    }
+  }
+  @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);
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 238ae45c..5b8ccd38 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -21,6 +21,7 @@ $s-color-basic-white: #FFF !default;
 $s-size-big: 56px !default;
 $s-size-medium: 40px !default;
 $s-size-small: 32px !default;
+$s-size-mini: 24px !default;
 
 $s-border-radius-default: 4px !default;
 // Fonts
diff --git a/src/types/components.ts b/src/types/components.ts
index 7c180c2f..040e6aa0 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -35,6 +35,7 @@ export enum Components {
   SScrollSectionItem = 'SScrollSectionItem',
   SScrollSections = 'SScrollSections',
   SSelect = 'SSelect',
+  SSlider = 'SSlider',
   SSubmenu = 'SSubmenu',
   SSwitch = 'SSwitch',
   STab = 'STab',

From 3dac4c9b102e1e84ad42b4c234666b05f7ae416b Mon Sep 17 00:00:00 2001
From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com>
Date: Wed, 21 Oct 2020 15:47:53 +0300
Subject: [PATCH 3/3] Radio Button Group Component (#69)

* Added Radio Button Group Component, updated some colors reletaed styles.
---
 package.json                         |   2 +-
 src/components/Radio/SRadio.vue      |  18 ++++-
 src/components/Radio/SRadioGroup.vue |  46 +++++++++++
 src/components/Radio/index.ts        |   3 +-
 src/components/Slider/SSlider.vue    |   6 +-
 src/components/Slider/consts.ts      |   6 ++
 src/components/Slider/index.ts       |   3 +-
 src/components/Switch/SSwitch.vue    |  10 ---
 src/components/index.ts              |   3 +-
 src/index.ts                         |   3 +
 src/stories/SRadio.stories.ts        | 107 +++++++++++++++++---------
 src/stories/SSlider.stories.ts       |  11 +--
 src/stories/SSwitch.stories.ts       |  10 +--
 src/styles/radio.scss                | 110 +++++++++++++++++++++++++++
 src/styles/slider.scss               |   5 +-
 src/styles/switch.scss               |  45 ++++++++++-
 src/styles/variables.scss            |   4 +
 src/types/components.ts              |   1 +
 18 files changed, 315 insertions(+), 78 deletions(-)
 create mode 100644 src/components/Radio/SRadioGroup.vue
 create mode 100644 src/components/Slider/consts.ts

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/"
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..93382e17
--- /dev/null
+++ b/src/components/Radio/SRadioGroup.vue
@@ -0,0 +1,46 @@
+<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'
+
+import { RadioSize } from './consts'
+
+@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: `"big"`, `"medium"`, `"small"`
+   *
+   * By default it's set to `"medium"`
+   */
+  @Prop({ default: RadioSize.MEDIUM, type: String }) readonly size!: string
+  /**
+   * 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/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/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/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..15a21449 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,51 @@ 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"
+                  :size="size"
+                  :isRadioButton="true"
+                >
+                  {{ 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/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/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 f7a0079d..8b92601b 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,6 +1,29 @@
 @import "./variables";
 @import "./common";
 
+$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",
+  $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 +121,91 @@
       }
     }
   }
+  &-button {
+    &: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 {
+          &: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 {
+      #{$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("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 {
+        box-shadow: none;
+      }
+    }
+    .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 0c35fafb..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 {
@@ -93,5 +96,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);
 }
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);
+        }
+      }
     }
   }
 }
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;
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',