Radio Button Group Component

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

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"`.
    *

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>

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 }

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

src/components/Slider/consts.ts

@@ -0,0 +1,6 @@
+export enum SliderInputSize {
+  BIG = 'big',
+  MEDIUM = 'medium',
+  SMALL = 'small',
+  MINI = 'mini'
+}

src/components/Slider/index.ts

@@ -1,3 +1,4 @@
 import SSlider from './SSlider.vue'
+import { SliderInputSize } from './consts'
 
-export { SSlider }
+export { SSlider, SliderInputSize }

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

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,

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,

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)
+    }
+  }
+})

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)

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', '')
     },