From d5ba78f90ff087c517e2949b3d678a6f3697bdec Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Thu, 25 Nov 2021 04:46:45 +0700
Subject: [PATCH] Fix button-group.stories for new Storybook documentation
 (#12621)

* button-group

* remove usage table

* Update ui/components/ui/button-group/button-group.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/button-group/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/button-group/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/button-group/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/button-group/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 ui/components/ui/button-group/README.mdx      |  63 ++++++++++
 .../ui/button-group/button-group.component.js |  24 ++++
 .../ui/button-group/button-group.stories.js   | 119 ++++++++++++------
 3 files changed, 168 insertions(+), 38 deletions(-)
 create mode 100644 ui/components/ui/button-group/README.mdx

diff --git a/ui/components/ui/button-group/README.mdx b/ui/components/ui/button-group/README.mdx
new file mode 100644
index 000000000..c075f5607
--- /dev/null
+++ b/ui/components/ui/button-group/README.mdx
@@ -0,0 +1,63 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import ButtonGroup from '.';
+
+# Button Group
+
+Button Group is a wrapper for buttons to align them horizontally
+
+<Canvas>
+  <Story id="ui-components-ui-button-group-button-group-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={ButtonGroup} />
+
+### With Disabled Button
+
+By changing the `disabled` value to true, the buttons inside the button group component will be disabled
+
+```jsx
+<ButtonGroup disabled>
+  <button>cheap</button>
+  <button>average</button>
+  <button>fast</button>
+</ButtonGroup>
+```
+
+<Canvas>
+  <Story id="ui-components-ui-button-group-button-group-stories-js--with-disabled-button" />
+</Canvas>
+
+### With Radio Button
+
+Rendering radio type button instead
+
+```jsx
+<ButtonGroup variant="radiogroup">
+  <button>cheap</button>
+  <button>average</button>
+  <button>fast</button>
+</ButtonGroup>
+```
+
+<Canvas>
+  <Story id="ui-components-ui-button-group-button-group-stories-js--with-radio-button" />
+</Canvas>
+
+### No Active Button
+
+Rendering button group without active button
+
+```jsx
+<ButtonGroup noButtonActiveByDefault>
+  <button>cheap</button>
+  <button>average</button>
+  <button>fast</button>
+</ButtonGroup>
+```
+
+<Canvas>
+  <Story id="ui-components-ui-button-group-button-group-stories-js--no-active-button" />
+</Canvas>
diff --git a/ui/components/ui/button-group/button-group.component.js b/ui/components/ui/button-group/button-group.component.js
index 9cd5d9896..65f005ac2 100644
--- a/ui/components/ui/button-group/button-group.component.js
+++ b/ui/components/ui/button-group/button-group.component.js
@@ -4,13 +4,37 @@ import classnames from 'classnames';
 
 export default class ButtonGroup extends PureComponent {
   static propTypes = {
+    /**
+     * change button active order
+     */
     defaultActiveButtonIndex: PropTypes.number,
+    /**
+     * no button are active before clicked by the user
+     */
     noButtonActiveByDefault: PropTypes.bool,
+    /**
+     * disabling every button inside button group
+     */
     disabled: PropTypes.bool,
+    /**
+     * Children must be an array of button components
+     */
     children: PropTypes.array,
+    /**
+     * Adds a className to the root div of the of the ButtonGroup component
+     */
     className: PropTypes.string,
+    /**
+     * adding style for button group component
+     */
     style: PropTypes.object,
+    /**
+     * updating value of active button in button group component
+     */
     newActiveButtonIndex: PropTypes.number,
+    /**
+     * options for rendering type of button, consist of 'default' and 'radiogroup'
+     */
     variant: PropTypes.oneOf(['radiogroup', 'default']),
   };
 
diff --git a/ui/components/ui/button-group/button-group.stories.js b/ui/components/ui/button-group/button-group.stories.js
index d71172bd0..46c4b2781 100644
--- a/ui/components/ui/button-group/button-group.stories.js
+++ b/ui/components/ui/button-group/button-group.stories.js
@@ -1,51 +1,94 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
-import classnames from 'classnames';
-import { text, boolean } from '@storybook/addon-knobs';
+
 import Button from '../button';
+import README from './README.mdx';
 import ButtonGroup from '.';
 
 export default {
-  title: 'ButtonGroup',
+  title: 'Components/UI/ButtonGroup',
   id: __filename,
+  component: ButtonGroup,
+  parameters: { docs: { page: README } },
+  argTypes: {
+    defaultActiveButtonIndex: { control: 'number' },
+    noButtonActiveByDefault: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    children: { control: 'array' },
+    className: { control: 'text' },
+    style: { control: 'object' },
+    newActiveButtonIndex: { control: 'number' },
+    variant: {
+      options: ['radiogroup', 'default'],
+      control: { type: 'select' },
+    },
+  },
 };
 
-export const withButtons = () => (
-  <ButtonGroup
-    style={{ width: '300px' }}
-    disabled={boolean('Disabled', false)}
-    defaultActiveButtonIndex={1}
-  >
-    <Button onClick={action('cheap')}>{text('Button1', 'Cheap')}</Button>
-    <Button onClick={action('average')}>{text('Button2', 'Average')}</Button>
-    <Button onClick={action('fast')}>{text('Button3', 'Fast')}</Button>
-  </ButtonGroup>
+export const DefaultStory = (args) => (
+  <ButtonGroup {...args}>{args.children}</ButtonGroup>
 );
 
-export const withDisabledButton = () => (
-  <ButtonGroup style={{ width: '300px' }} disabled={boolean('Disabled', false)}>
-    <Button onClick={action('enabled')}>{text('Button1', 'Enabled')}</Button>
-    <Button onClick={action('disabled')} disabled>
-      {text('Button2', 'Disabled')}
-    </Button>
-  </ButtonGroup>
+DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  defaultActiveButtonIndex: 1,
+  noButtonActiveByDefault: false,
+  disabled: false,
+  children: ['cheap', 'average', 'fast'].map((label, index) => (
+    <Button key={index}>{label}</Button>
+  )),
+  className: '',
+  style: { width: '300px' },
+  newActiveButtonIndex: 0,
+  variant: 'default',
+};
+
+export const WithDisabledButton = (args) => (
+  <ButtonGroup {...args}>{args.children}</ButtonGroup>
 );
 
-export const radioButtons = () => (
-  <ButtonGroup
-    style={{ width: '300px' }}
-    defaultActiveButtonIndex={1}
-    variant="radiogroup"
-  >
-    <Button onClick={action('radio 1')}>{text('Button1', '1%')}</Button>
-    <Button onClick={action('radio 2')}>{text('Button2', '2%')}</Button>
-    <Button
-      onClick={action('radio 3')}
-      className={classnames({
-        'radio-button--danger': boolean('Button3 warning', false),
-      })}
-    >
-      {text('Button3', '5%')}
-    </Button>
-  </ButtonGroup>
+WithDisabledButton.args = {
+  defaultActiveButtonIndex: 1,
+  noButtonActiveByDefault: false,
+  disabled: true,
+  children: ['cheap', 'average', 'fast'].map((label, index) => (
+    <Button key={index}>{label}</Button>
+  )),
+  className: '',
+  style: { width: '300px' },
+  newActiveButtonIndex: 0,
+  variant: 'default',
+};
+
+export const WithRadioButton = (args) => (
+  <ButtonGroup {...args}>{args.children}</ButtonGroup>
 );
+
+WithRadioButton.args = {
+  defaultActiveButtonIndex: 1,
+  noButtonActiveByDefault: false,
+  disabled: false,
+  children: ['cheap', 'average', 'fast'].map((label, index) => (
+    <Button key={index}>{label}</Button>
+  )),
+  className: '',
+  style: { width: '300px' },
+  newActiveButtonIndex: 0,
+  variant: 'radiogroup',
+};
+
+export const NoActiveButton = (args) => (
+  <ButtonGroup {...args}>{args.children}</ButtonGroup>
+);
+
+NoActiveButton.args = {
+  defaultActiveButtonIndex: 1,
+  noButtonActiveByDefault: true,
+  disabled: false,
+  children: ['cheap', 'average', 'fast'].map((label, index) => (
+    <Button key={index}>{label}</Button>
+  )),
+  className: '',
+  style: { width: '300px' },
+  newActiveButtonIndex: 0,
+  variant: 'default',
+};