Fix slider component to for new Storybook format (#12897)

* slider

* removing args table as it doesn't work with mui withStyles

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

ui/components/ui/slider/README.mdx

@@ -0,0 +1,37 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import Slider from '.';
+
+# Slider
+
+Slider component to choose a value from predefined range of values.
+
+<Canvas>
+  <Story id="ui-components-ui-slider-slider-stories-js--default-story" />
+</Canvas>
+
+## Usage
+
+### With Steps
+
+Slider with predefined total steps
+
+<Canvas>
+  <Story id="ui-components-ui-slider-slider-stories-js--with-steps" />
+</Canvas>
+
+### With Header
+
+Slider with header title
+
+<Canvas>
+  <Story id="ui-components-ui-slider-slider-stories-js--with-header" />
+</Canvas>
+
+### With Footer
+
+Slider with footer
+
+<Canvas>
+  <Story id="ui-components-ui-slider-slider-stories-js--with-footer" />
+</Canvas>

ui/components/ui/slider/slider.component.js

@@ -118,17 +118,53 @@ Slider.defaultProps = {
 };
 
 Slider.propTypes = {
+  /**
+   * Show edit text
+   */
   editText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Show info text
+   */
   infoText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Show title detail text
+   */
   titleDetail: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Show title text
+   */
   titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Show tooltip Text
+   */
   tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Show value text
+   */
   valueText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Set maximum step
+   */
   max: PropTypes.number,
+  /**
+   * Set minimum step
+   */
   min: PropTypes.number,
+  /**
+   * Handler for onChange
+   */
   onChange: PropTypes.func,
+  /**
+   * Handler for onEdit
+   */
   onEdit: PropTypes.func,
+  /**
+   * Total steps
+   */
   step: PropTypes.number,
+  /**
+   * Show value on slider
+   */
   value: PropTypes.number,
 };
 

ui/components/ui/slider/slider.stories.js

@@ -1,36 +1,53 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import README from './README.mdx';
 import Slider from '.';
 
 export default {
   title: 'Components/UI/Slider',
   id: __filename,
+  component: Slider,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    editText: { control: 'text' },
+    infoText: { control: 'text' },
+    titleDetail: { control: 'text' },
+    titleText: { control: 'text' },
+    tooltipText: { control: 'text' },
+    valueText: { control: 'text' },
+    max: { control: 'number' },
+    min: { control: 'number' },
+    onChange: { action: 'onChange' },
+    onEdit: { action: 'onEdit' },
+    step: { control: 'number' },
+    value: { control: 'number' },
+  },
 };
 
-export const DefaultStory = () => <Slider />;
-
+export const DefaultStory = (args) => <Slider {...args} />;
 DefaultStory.storyName = 'Default';
 
-export const WithSteps = () => <Slider step={10} />;
+export const WithSteps = (args) => <Slider {...args} />;
+WithSteps.args = {
+  step: 10,
+};
 
-export const WithHeader = () => (
-  <Slider
-    titleText="Slider Title Text"
-    tooltipText="Slider Tooltip Text"
-    valueText="$ 00.00"
-    titleDetail="100 GWEI"
-  />
-);
+export const WithHeader = (args) => <Slider {...args} />;
+WithHeader.args = {
+  titleText: 'Slider Title Text',
+  tooltipText: 'Slider Tooltip Text',
+  valueText: '$ 00.00',
+  titleDetail: '100 GWEI',
+};
 
-export const WithFooter = () => (
-  <Slider
-    titleText="Slider Title Text"
-    tooltipText="Slider Tooltip Text"
-    valueText="$ 00.00"
-    titleDetail="100 GWEI"
-    infoText="Footer Info Text"
-    onEdit={() => {
-      action('On edit click')();
-    }}
-  />
-);
+export const WithFooter = (args) => <Slider {...args} />;
+WithFooter.args = {
+  titleText: 'Slider Title Text',
+  tooltipText: 'Slider Tooltip Text',
+  valueText: '$ 00.00',
+  titleDetail: '100 GWEI',
+  infoText: 'Footer Info Text',
+};