From d5b85c0e5412416d7a938b17f1dda08ae8e5beeb Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Wed, 8 Dec 2021 01:36:16 +0800
Subject: [PATCH] Fix radio-group component to for new Storybook format
 (#12900)

* radio-group

* tweak proptype descs
---
 ui/components/ui/radio-group/README.mdx       | 15 +++++++
 .../ui/radio-group/radio-group.component.js   | 12 ++++++
 .../ui/radio-group/radio-group.stories.js     | 43 ++++++++++++-------
 3 files changed, 55 insertions(+), 15 deletions(-)
 create mode 100644 ui/components/ui/radio-group/README.mdx

diff --git a/ui/components/ui/radio-group/README.mdx b/ui/components/ui/radio-group/README.mdx
new file mode 100644
index 000000000..d9d1b447a
--- /dev/null
+++ b/ui/components/ui/radio-group/README.mdx
@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import RadioGroup from '.';
+
+# Radio Group
+
+A multiple-exclusion scope for a set of radio buttons.
+
+<Canvas>
+  <Story id="ui-components-ui-radio-group-radio-group-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={RadioGroup} />
diff --git a/ui/components/ui/radio-group/radio-group.component.js b/ui/components/ui/radio-group/radio-group.component.js
index 90c136fb9..a0501b4fc 100644
--- a/ui/components/ui/radio-group/radio-group.component.js
+++ b/ui/components/ui/radio-group/radio-group.component.js
@@ -85,9 +85,21 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
 }
 
 RadioGroup.propTypes = {
+  /**
+   * Predefined options for radio group
+   */
   options: PropTypes.array,
+  /**
+   * Show selected value
+   */
   selectedValue: PropTypes.string,
+  /**
+   * Show name as label
+   */
   name: PropTypes.string,
+  /**
+   * Handler for onChange
+   */
   onChange: PropTypes.func,
 };
 
diff --git a/ui/components/ui/radio-group/radio-group.stories.js b/ui/components/ui/radio-group/radio-group.stories.js
index e5b99a31b..481cb9aef 100644
--- a/ui/components/ui/radio-group/radio-group.stories.js
+++ b/ui/components/ui/radio-group/radio-group.stories.js
@@ -1,30 +1,43 @@
 import React from 'react';
 import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas';
+import README from './README.mdx';
 import RadioGroup from '.';
 
 export default {
   title: 'Components/UI/RadioGroup',
   id: __filename,
+  component: RadioGroup,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    options: { control: 'array' },
+    selectedValue: { control: 'text' },
+    name: { control: 'text' },
+    onChange: { action: 'onChange' },
+  },
 };
 
-export const DefaultStory = () => {
+export const DefaultStory = (args) => {
   return (
     <div className="radio-group" style={{ minWidth: '600px' }}>
-      <RadioGroup
-        name="gas-recommendation"
-        options={[
-          { value: GAS_RECOMMENDATIONS.LOW, label: 'Low', recommended: false },
-          {
-            value: GAS_RECOMMENDATIONS.MEDIUM,
-            label: 'Medium',
-            recommended: false,
-          },
-          { value: GAS_RECOMMENDATIONS.HIGH, label: 'High', recommended: true },
-        ]}
-        selectedValue={GAS_RECOMMENDATIONS.HIGH}
-      />
+      <RadioGroup {...args} />
     </div>
   );
 };
-
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  name: 'gas-recommendation',
+  options: [
+    { value: GAS_RECOMMENDATIONS.LOW, label: 'Low', recommended: false },
+    {
+      value: GAS_RECOMMENDATIONS.MEDIUM,
+      label: 'Medium',
+      recommended: false,
+    },
+    { value: GAS_RECOMMENDATIONS.HIGH, label: 'High', recommended: true },
+  ],
+  selectedValue: GAS_RECOMMENDATIONS.HIGH,
+};