Fix dropdown-input-pair component to for new Storybook format (#12895)

* input pair

* proptype comments

* Update

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

ui/pages/swaps/dropdown-input-pair/README.mdx

@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import DropdownInputPair from '.';
+
+# Dropdown Input Pair
+
+Dropdown to choose cryptocurrency with amount input field.
+
+<Canvas>
+  <Story id="ui-pages-swaps-dropdown-input-pair-dropdown-input-pair-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={DropdownInputPair} />

ui/pages/swaps/dropdown-input-pair/dropdown-input-pair.js

@@ -122,17 +122,56 @@ export default function DropdownInputPair({
 }
 
 DropdownInputPair.propTypes = {
+  /**
+   * Give items data for the component
+   */
   itemsToSearch: PropTypes.array,
+  /**
+   * Handler for input change
+   */
   onInputChange: PropTypes.func,
+  /**
+   * Show input value content
+   */
   inputValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Handler for onSelect
+   */
   onSelect: PropTypes.func,
+  /**
+   * Set value to left
+   */
   leftValue: PropTypes.string,
+  /**
+   * Show selected item
+   */
   selectedItem: PropTypes.object,
+  /**
+   * Doesn't look like this is used
+   */
   SearchListPlaceholder: PropTypes.func,
+  /**
+   * Define maximum item per list
+   */
   maxListItems: PropTypes.number,
+  /**
+   * Show select placeholder text
+   */
   selectPlaceHolderText: PropTypes.string,
+  /**
+   * Check if the component is loading
+   */
   loading: PropTypes.bool,
+  /**
+   * Handler for hide item
+   */
   hideItemIf: PropTypes.func,
+  /**
+   * Add custom CSS class for list container
+   */
   listContainerClassName: PropTypes.string,
+  /**
+   * Check if the component is auto focus
+   */
   autoFocus: PropTypes.bool,
 };

ui/pages/swaps/dropdown-input-pair/dropdown-input-pair.stories.js

@@ -1,4 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { useArgs } from '@storybook/client-api';
+
+import README from './README.mdx';
 import DropdownInputPair from '.';
 
 const tokens = [
@@ -115,6 +118,25 @@ const tokens = [
 export default {
   title: 'Pages/Swaps/DropdownInputPair',
   id: __filename,
+  component: DropdownInputPair,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    itemsToSearch: { control: 'array' },
+    onInputChange: { action: 'onInputChange' },
+    inputValue: { control: 'text' },
+    onSelect: { action: 'onSelect' },
+    leftValue: { control: 'text' },
+    selectedItem: { control: 'object' },
+    maxListItems: { control: 'number' },
+    selectPlaceHolderText: { control: 'text' },
+    loading: { control: 'boolean' },
+    listContainerClassName: { control: 'text' },
+    autoFocus: { control: 'boolean' },
+  },
 };
 
 const tokensToSearch = tokens.map((token) => ({
@@ -127,29 +149,27 @@ const tokensToSearch = tokens.map((token) => ({
   rightSecondaryLabel: `$${(Math.random() * 1000).toFixed(2)}`,
 }));
 
-export const DefaultStory = () => {
-  const [inputValue, setInputValue] = useState();
-
+export const DefaultStory = (args) => {
+  const [
+    { inputValue, selectedItem = tokensToSearch[0] },
+    updateArgs,
+  ] = useArgs();
   return (
-    <div
-      style={{
-        height: '600px',
-        width: '357px',
-        display: 'flex',
-        justifyContent: 'center',
-        flexFlow: 'column',
+    <DropdownInputPair
+      {...args}
+      inputValue={inputValue}
+      onInputChange={(value) => {
+        updateArgs({ ...args, inputValue: value });
       }}
-    >
-      <DropdownInputPair
-        startingItem={tokensToSearch[0]}
-        itemsToSearch={tokensToSearch}
-        maxListItems={tokensToSearch.length}
-        defaultToAll
-        onInputChange={(value) => setInputValue(value)}
-        inputValue={inputValue}
-      />
-    </div>
+      selectedItem={selectedItem}
+    />
   );
 };
 
 DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  itemsToSearch: tokensToSearch,
+  maxListItems: tokensToSearch.length,
+  loading: false,
+};