Convert knobs and actions to controls/args for MainQuoteSummary (#14758)

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>

ui/pages/swaps/main-quote-summary/README.mdx

@@ -0,0 +1,14 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import MainQuoteSummary from '.';
+
+# MainQuoteSummary
+
+MainQuoteSummary displays the quote of a swap.
+
+<Canvas>
+  <Story id="ui-pages-swaps-main-quote-summary-main-quote-summary-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={MainQuoteSummary} />

ui/pages/swaps/main-quote-summary/main-quote-summary.js

@@ -129,21 +129,54 @@ export default function MainQuoteSummary({
 }
 
 MainQuoteSummary.propTypes = {
+  /**
+   * The amount that will be sent in the smallest denomination.
+   * For example, wei is the smallest denomination for ether.
+   */
   sourceValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.instanceOf(BigNumber),
   ]).isRequired,
+
+  /**
+   * Maximum number of decimal places for the source token.
+   */
   sourceDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * The ticker symbol for the source token.
+   */
   sourceSymbol: PropTypes.string.isRequired,
+
+  /**
+   * The amount that will be received in the smallest denomination.
+   * For example, wei is the smallest denomination for ether.
+   */
   destinationValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.instanceOf(BigNumber),
   ]).isRequired,
+
+  /**
+   * Maximum number of decimal places for the destination token.
+   */
   destinationDecimals: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
   ]),
+
+  /**
+   * The ticker symbol for the destination token.
+   */
   destinationSymbol: PropTypes.string.isRequired,
+
+  /**
+   * The location of the source token icon file.
+   */
   sourceIconUrl: PropTypes.string,
+
+  /**
+   * The location of the destination token icon file.
+   */
   destinationIconUrl: PropTypes.string,
 };

ui/pages/swaps/main-quote-summary/main-quote-summary.stories.js

@@ -1,13 +1,55 @@
 import React from 'react';
-import { text, number } from '@storybook/addon-knobs';
+import README from './README.mdx';
 import MainQuoteSummary from './main-quote-summary';
 
 export default {
   title: 'Pages/Swaps/MainQuoteSummary',
   id: __filename,
+  component: MainQuoteSummary,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    sourceValue: {
+      control: 'text',
+    },
+    sourceDecimals: {
+      control: 'number',
+    },
+    sourceSymbol: {
+      control: 'text',
+    },
+    destinationValue: {
+      control: 'text',
+    },
+    destinationDecimals: {
+      control: 'number',
+    },
+    destinationSymbol: {
+      control: 'text',
+    },
+    sourceIconUrl: {
+      control: 'text',
+    },
+    destinationIconUrl: {
+      control: 'text',
+    },
+  },
+  args: {
+    sourceValue: '2000000000000000000',
+    sourceDecimals: 18,
+    sourceSymbol: 'ETH',
+    destinationValue: '200000000000000000',
+    destinationDecimals: 18,
+    destinationSymbol: 'ABC',
+    sourceIconUrl: '.storybook/images/metamark.svg',
+    destinationIconUrl: '.storybook/images/sai.svg',
+  },
 };
 
-export const DefaultStory = () => {
+export const DefaultStory = (args) => {
   return (
     <div
       style={{
@@ -17,16 +59,7 @@ export const DefaultStory = () => {
         padding: '24px',
       }}
     >
-      <MainQuoteSummary
+      <MainQuoteSummary {...args} />
-        sourceValue={text('sourceValue', '2000000000000000000')}
-        sourceDecimals={number('sourceDecimals', 18)}
-        sourceSymbol={text('sourceSymbol', 'ETH')}
-        destinationValue={text('destinationValue', '200000000000000000')}
-        destinationDecimals={number('destinationDecimals', 18)}
-        destinationSymbol={text('destinationSymbol', 'ABC')}
-        sourceIconUrl=".storybook/images/metamark.svg"
-        destinationIconUrl=".storybook/images/sai.svg"
-      />
     </div>
   );
 };