Fix transaction-detail for new Storybook format (#12819)

ui/components/app/transaction-detail/README.mdx

@@ -0,0 +1,16 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import TransactionDetail from '.';
+
+# Transaction Detail
+
+Show transaction detail including estimated gas fee and total fee.
+
+<Canvas>
+  <Story id="ui-components-app-transaction-detail-transaction-detail-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={TransactionDetail} />
+

ui/components/app/transaction-detail/transaction-detail.component.js

@@ -36,7 +36,17 @@ export default function TransactionDetail({
 }
 
 TransactionDetail.propTypes = {
+  /**
+   * Show item content for transaction detail. Array of TransactionDetailItem components
+   */
   rows: PropTypes.arrayOf(TransactionDetailItem).isRequired,
+  /**
+   * onClick handler for the Edit link
+   */
   onEdit: PropTypes.func,
+  /**
+   * If there is a error in getting correct estimates we show a message to the user
+   * which they can acknowledge and proceed with their transaction
+   */
   userAcknowledgedGasMissing: PropTypes.bool.isRequired,
 };

ui/components/app/transaction-detail/transaction-detail.stories.js

@@ -1,13 +1,23 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
 import GasTiming from '../gas-timing/gas-timing.component';
+import README from './README.mdx';
 import TransactionDetail from '.';
 
 export default {
   title: 'Components/App/TransactionDetail',
   id: __filename,
+  component: TransactionDetail,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    rows: { control: 'array' },
+    onEdit: { action: 'onEdit' },
+  },
 };
 
 const rows = [
@@ -44,20 +54,12 @@ const rows = [
   />,
 ];
 
-export const DefaultStory = () => {
-  return (
-    <div style={{ width: '400px' }}>
-      <TransactionDetail rows={rows} />
-    </div>
-  );
+export const DefaultStory = (args) => {
+  return <TransactionDetail {...args} />;
 };
 
 DefaultStory.storyName = 'Default';
 
-export const Editable = () => {
-  return (
-    <div style={{ width: '400px' }}>
-      <TransactionDetail rows={rows} onEdit={() => action('Edit!')()} />
-    </div>
-  );
+DefaultStory.args = {
+  rows,
 };