From 9e59c3db7715639e524ee6a2e26bc5f7fefb3c3b Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Wed, 8 Dec 2021 00:39:44 +0800
Subject: [PATCH] Fix transaction-detail for new Storybook format (#12819)

---
 .../app/transaction-detail/README.mdx         | 16 +++++++++++
 .../transaction-detail.component.js           | 10 +++++++
 .../transaction-detail.stories.js             | 28 ++++++++++---------
 3 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 ui/components/app/transaction-detail/README.mdx

diff --git a/ui/components/app/transaction-detail/README.mdx b/ui/components/app/transaction-detail/README.mdx
new file mode 100644
index 000000000..3a1959b14
--- /dev/null
+++ b/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} />
+
diff --git a/ui/components/app/transaction-detail/transaction-detail.component.js b/ui/components/app/transaction-detail/transaction-detail.component.js
index 57cf9ffc0..46dbb5fed 100644
--- a/ui/components/app/transaction-detail/transaction-detail.component.js
+++ b/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,
 };
diff --git a/ui/components/app/transaction-detail/transaction-detail.stories.js b/ui/components/app/transaction-detail/transaction-detail.stories.js
index 64ad4fce6..a53ada8c6 100644
--- a/ui/components/app/transaction-detail/transaction-detail.stories.js
+++ b/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,
 };