Fix dropdown component for new Storybook format (#12816)

* dropdown

* Updating default props, proptype descriptions and removing required as doesn't do anything

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

ui/components/ui/dropdown/README.mdx

@@ -0,0 +1,35 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import Dropdown from '.';
+
+# Dropdown
+
+A toggleable menu that allows the user to choose one value from a predefined list
+
+<Canvas>
+  <Story id="ui-components-ui-dropdown-dropdown-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={Dropdown} />
+
+## Usage
+
+### Options Without Names
+
+<Canvas>
+  <Story id="ui-components-ui-dropdown-dropdown-stories-js--options-without-names" />
+</Canvas>
+
+### Options With Long Names
+
+<Canvas>
+  <Story id="ui-components-ui-dropdown-dropdown-stories-js--options-with-long-names" />
+</Canvas>
+
+### Options With Long Names And Short Width
+
+<Canvas>
+  <Story id="ui-components-ui-dropdown-dropdown-stories-js--options-with-long-names-and-short-width" />
+</Canvas>

ui/components/ui/dropdown/dropdown.js

@@ -4,10 +4,10 @@ import classnames from 'classnames';
 
 const Dropdown = ({
   className,
-  disabled,
+  disabled = false,
   onChange,
   options,
-  selectedOption,
+  selectedOption = null,
   style,
   title,
 }) => {
@@ -41,26 +41,39 @@ const Dropdown = ({
 };
 
 Dropdown.propTypes = {
+  /**
+   * Additional css className to add to root of Dropdown component
+   */
   className: PropTypes.string,
+  /**
+   * Disable dropdown by setting to true
+   */
   disabled: PropTypes.bool,
+  /**
+   * Title of the dropdown
+   */
   title: PropTypes.string,
+  /**
+   * On options change handler
+   */
   onChange: PropTypes.func.isRequired,
+  /**
+   * Predefined options for component
+   */
   options: PropTypes.arrayOf(
     PropTypes.exact({
       name: PropTypes.string,
       value: PropTypes.string.isRequired,
     }),
   ).isRequired,
+  /**
+   * Selected options of dropdown
+   */
   selectedOption: PropTypes.string,
+  /**
+   * Add inline style for the component
+   */
   style: PropTypes.object,
 };
 
-Dropdown.defaultProps = {
-  className: undefined,
-  disabled: false,
-  title: undefined,
-  selectedOption: null,
-  style: undefined,
-};
-
 export default Dropdown;

ui/components/ui/dropdown/dropdown.stories.js

@@ -1,13 +1,7 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import README from './README.mdx';
-import { boolean, select, text } from '@storybook/addon-knobs';
 import Dropdown from '.';
 
-export default {
-  title: 'Components/UI/Dropdown',
-  id: __filename,
-};
-
 const unnamedOptions = [...Array(10).keys()].map((index) => {
   return { value: `option${index}` };
 });
@@ -23,65 +17,63 @@ const namedOptionsWithVeryLongNames = unnamedOptions.map((option, index) => {
   };
 });
 
-export const DefaultStory = () => (
+export default {
-  <Dropdown
+  title: 'Components/UI/Dropdown',
-    disabled={boolean('Disabled', false)}
+  id: __filename,
-    title={text('Title', 'Test dropdown name')}
+  component: Dropdown,
-    onChange={action('Selection changed')}
+  parameters: {
-    options={namedOptions}
+    docs: {
-    required={boolean('Required', false)}
+      page: README,
-    selectedOption={select(
+    },
-      'Selected Option',
+  },
-      namedOptions.map((option) => option.value),
+  argTypes: {
-      namedOptions[0].value,
+    className: { control: 'text' },
-    )}
+    disabled: { control: 'boolean' },
-  />
+    title: { control: 'text' },
-);
+    onChange: { action: 'onChange' },
+    options: { control: 'array' },
+    selectedOption: { control: 'text' },
+    style: { control: 'object' },
+  },
+};
+
+export const DefaultStory = (args) => <Dropdown {...args} />;
 
 DefaultStory.storyName = 'Default';
 
-export const OptionsWithoutNames = () => (
+DefaultStory.args = {
-  <Dropdown
+  disabled: false,
-    disabled={boolean('Disabled', false)}
+  title: 'Test Dropdown Name',
-    title={text('Title', 'Test dropdown name')}
+  options: namedOptions,
-    onChange={action('Selection changed')}
+  selectedOption: namedOptions[0].value,
-    options={unnamedOptions}
+};
-    required={boolean('Required', false)}
+
-    selectedOption={select(
+export const OptionsWithoutNames = (args) => <Dropdown {...args} />;
-      'Selected Option',
+
-      unnamedOptions.map((option) => option.value),
+OptionsWithoutNames.args = {
-      unnamedOptions[0].value,
+  disabled: false,
-    )}
+  title: 'Test Dropdown Name',
-  />
+  options: unnamedOptions,
+  selectedOption: unnamedOptions[0].value,
+};
+
+export const OptionsWithLongNames = (args) => <Dropdown {...args} />;
+
+OptionsWithLongNames.args = {
+  disabled: false,
+  title: 'Test Dropdown Name',
+  options: namedOptionsWithVeryLongNames,
+  selectedOption: namedOptionsWithVeryLongNames[0].value,
+};
+
+export const OptionsWithLongNamesAndShortWidth = (args) => (
+  <Dropdown {...args} />
 );
 
-export const OptionsWithLongNames = () => (
+OptionsWithLongNamesAndShortWidth.args = {
-  <Dropdown
+  disabled: false,
-    disabled={boolean('Disabled', false)}
+  title: 'Test Dropdown Name',
-    title={text('Title', 'Test dropdown name')}
+  options: namedOptionsWithVeryLongNames,
-    onChange={action('Selection changed')}
+  selectedOption: namedOptionsWithVeryLongNames[0].value,
-    options={namedOptionsWithVeryLongNames}
+  style: { width: '200px' },
-    required={boolean('Required', false)}
+};
-    selectedOption={select(
-      'Selected Option',
-      namedOptionsWithVeryLongNames.map((option) => option.value),
-      namedOptionsWithVeryLongNames[0].value,
-    )}
-  />
-);
-
-export const OptionsWithLongNamesAndShortWidth = () => (
-  <Dropdown
-    disabled={boolean('Disabled', false)}
-    title={text('Title', 'Test dropdown name')}
-    onChange={action('Selection changed')}
-    options={namedOptionsWithVeryLongNames}
-    required={boolean('Required', false)}
-    selectedOption={select(
-      'Selected Option',
-      namedOptionsWithVeryLongNames.map((option) => option.value),
-      namedOptionsWithVeryLongNames[0].value,
-    )}
-    style={{ width: '200px' }}
-  />
-);