From e03368b9944bbe32a4406a1110a74d19cd822fe3 Mon Sep 17 00:00:00 2001
From: Daniil Senkiv <daniil.senkiv@onlyoffice.com>
Date: Fri, 26 Jul 2019 14:38:44 +0300
Subject: [PATCH] Web: components: RadioButtonGroup: fix story and readme

---
 .../input/radio-button-group/README.md        | 15 ++-----
 .../radio-button-group.stories.js             | 43 ++++++++++++++-----
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/web/ASC.Web.Storybook/stories/input/radio-button-group/README.md b/web/ASC.Web.Storybook/stories/input/radio-button-group/README.md
index 13b1f6f1ac..639d4f9e1b 100644
--- a/web/ASC.Web.Storybook/stories/input/radio-button-group/README.md
+++ b/web/ASC.Web.Storybook/stories/input/radio-button-group/README.md
@@ -14,8 +14,7 @@ import { RadioButtonGroup } from 'asc-web-components';
   selected='banana'
   options={
             [
-              { value: 'apple', label: 'Sweet apple', disabled: true },
-              { value: 'mandarin', label: 'Mandarin'},
+              { value: 'apple', label: 'Sweet apple'},
               { value: 'banana', label: 'Banana'},
               { value: 'Mandarin'}
             ]
@@ -29,15 +28,7 @@ import { RadioButtonGroup } from 'asc-web-components';
 | ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
 | `name`                 | `string` |    ✅     | -                            | -       | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup                             
 | `selected`                | `string` |    ✅    | -                            | -       | Value of the selected radiobutton      
-| `options`                | `arrayOf` |    ✅    | -           | -       | Radiobuttons data: it is array of objects, each of this can include next information: `value` (required), `label`, `disabled`
+| `options`                | `arrayOf` |    ✅    | -           | -       | Array of objects, contains props for each `<RadioButton />` component
 | `spacing`                | `number` |    -    | -           | 33       | Margin (in px) between radiobuttons
 | `isDisabled`                | `bool` |    -    | -           | `false`       | Disabling all radiobuttons in group
-| `onClick`                | `func` |    -    | -           | -       | Allow you to handle clicking events on radiobuttons
-
-#### Prop `options`
-
-| Name                  | Type     | Required | Values                       | Default | Description                                                                                            |
-| ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `value`                 | `string` |    ✅     | -                            | -       | Used as HTML `value` property for `<input>` tag. Used for identification each radiobutton  
-| `label`                | `string` |    -    | -                            | -       | Name of the radiobutton. If missed, `value` will be used
-| `disabled`                | `bool` |    -    | -                            | `false`       | Used as HTML `disabled` property for each `<input>` tag
\ No newline at end of file
+| `onClick`                | `func` |    -    | -           | -       | Allow you to handle clicking events on `<RadioButton />` component
diff --git a/web/ASC.Web.Storybook/stories/input/radio-button-group/radio-button-group.stories.js b/web/ASC.Web.Storybook/stories/input/radio-button-group/radio-button-group.stories.js
index ba147f51bd..a670bb36f3 100644
--- a/web/ASC.Web.Storybook/stories/input/radio-button-group/radio-button-group.stories.js
+++ b/web/ASC.Web.Storybook/stories/input/radio-button-group/radio-button-group.stories.js
@@ -6,13 +6,42 @@ import Section from '../../../.storybook/decorators/section';
 import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';
 import Readme from './README.md';
 import { action } from '@storybook/addon-actions';
+import { optionsKnob as options } from '@storybook/addon-knobs';
 
-const values = ['first', 'second', 'third'];
 
 storiesOf('Components|Input', module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))
-  .add('radio-button-group', () => {
+  .add('radio button group', () => {
+
+    const values = ['first', 'second', 'third'];
+    const valuesMultiSelect = {
+      radio1: 'radio1',
+      radio2: 'radio2',
+      radio3: 'radio3'
+    };
+
+    const optionsMultiSelect = options('options', valuesMultiSelect, ['radio1'], {
+      display: 'multi-select',
+    });
+
+    let children = [];
+    optionsMultiSelect.forEach(function (item, i) {
+      switch (item) {
+        case 'radio1':
+          children.push({ value: values[0], label: text('label 1', 'First radiobtn') });
+          break;
+        case 'radio2':
+          children.push({ value: values[1], label: text('label 2', 'Second radiobtn') });
+          break;
+        case 'radio3':
+          children.push({ value: values[2], label: text('label 3', 'Third radiobtn') });
+          break;
+        default:
+          break;
+      }
+    });
+
     return (
       <Section>
         <>
@@ -24,14 +53,8 @@ storiesOf('Components|Input', module)
             isDisabled={boolean('isDisabled', false)}
             selected={values[0]}
             spacing={number('spacing', 33)}
-            name={text('name of your group', 'group')}
-            options={
-              [
-                { value: values[0], label: text('label 1st radiobutton', '1st button'), disabled: boolean('disabled 1st radiobutton', true) },
-                { value: values[1], label: text('label 2nd radiobutton', '2nd button'), },
-                { value: values[2], label: text('label 3rd radiobutton', '3rd button') },
-              ]
-            }
+            name={text('name', 'group')}
+            options={children}
           />
         </>
       </Section>