docs: addition of controls and readme in SelectQuotePopover story (#15187)

* docs: addition of controls and readme in SelectQuotePopover story

* Content update

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

ui/pages/swaps/select-quote-popover/README.mdx

@@ -0,0 +1,64 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import Button from '.';
+import SelectQuotePopover from '.';
+
+# SelectQuotePopover
+
+`SelectQuotePopover` is a modal that displays information gathered from multiple liquidity sources.
+
+<Canvas>
+  <Story id="ui-pages-swaps-select-quote-popover-select-quote-popover-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={SelectQuotePopover} />
+
+## Usage
+
+The following describes the props and example usage for this component.
+
+### onClose
+
+Action called when close button is clicked. It's also called on submit action.
+
+### onSubmit
+
+Action called when Select button is clicked
+
+### swapToSymbol
+
+Name of the receiving symbol
+
+### quoteDataRows
+
+data provided with the following properties:
+
+| type                       | Types     |
+| -------------------------- | --------- |
+| `aggId`                    | `string`  |
+| `amountReceiving`          | `string`  |
+| `destinationTokenDecimals` | `number`  |
+| `destinationTokenSymbol`   | `string`  |
+| `destinationTokenValue`    | `string`  |
+| `isBestQuote--primary`     | `boolean` |
+| `networkFees`              | `string`  |
+| `quoteSource`              | `string`  |
+| `rawNetworkFees`           | `string`  |
+| `slippage`                 | `string`  |
+| `sourceTokenDecimals`      | `number`  |
+| `sourceTokenSymbol`        | `string`  |
+| `sourceTokenValue`         | `string`  |
+
+### initialAggId
+
+When `initialAggId` is defined, the corresponding quote is pre-selected in sort-list
+
+### onQuoteDetailsIsOpened
+
+Detail opened when click on caret of a specific quote.
+
+### hideEstimatedGasFee
+
+When the `hideEstimatedGasFee` is set to `true` it hides the Estimated network fees column

ui/pages/swaps/select-quote-popover/select-quote-popover.js

@@ -125,7 +125,6 @@ SelectQuotePopover.propTypes = {
   onClose: PropTypes.func,
   onSubmit: PropTypes.func,
   swapToSymbol: PropTypes.string,
-  renderableData: PropTypes.array,
   quoteDataRows: PropTypes.arrayOf(QUOTE_DATA_ROWS_PROPTYPES_SHAPE),
   initialAggId: PropTypes.string,
   onQuoteDetailsIsOpened: PropTypes.func,

ui/pages/swaps/select-quote-popover/select-quote-popover.stories.js

@@ -3,14 +3,44 @@ import { action } from '@storybook/addon-actions';
 import { object } from '@storybook/addon-knobs';
 import Button from '../../../components/ui/button';
 import mockQuoteData from './mock-quote-data';
+import README from './README.mdx';
 import SelectQuotePopover from '.';
 
 export default {
   title: 'Pages/Swaps/SelectQuotePopover',
   id: __filename,
+  component: SelectQuotePopover,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    swapToSymbol: {
+      control: {
+        type: 'select',
+      },
+      options: ['ETH', 'DAI'],
+    },
+    initialAggId: {
+      control: {
+        type: 'select',
+      },
+      options: ['Agg1', 'Agg2', 'Agg3', 'Agg4', 'Agg5', 'Agg6'],
+    },
+    quoteDataRows: {
+      control: 'object',
+    },
+    hideEstimatedGasFee: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    quoteDataRows: mockQuoteData,
+  },
 };
 
-export const DefaultStory = () => {
+export const DefaultStory = (args) => {
   const [showPopover, setShowPopover] = useState(false);
 
   return (
@@ -21,8 +51,9 @@ export const DefaultStory = () => {
           quoteDataRows={object('quoteDataRows', mockQuoteData)}
           onClose={() => setShowPopover(false)}
           onSubmit={action('submit SelectQuotePopover')}
-          swapToSymbol="DAI"
+          swapToSymbol={args.swapToSymbol || 'DAI'}
-          initialAggId="Agg4"
+          initialAggId={args.initialAggId || 'Agg4'}
+          hideEstimatedGasFee={args.hideEstimatedGasFee || false}
         />
       )}
     </div>