Fix transaction-detail-item for new Storybook format (#12820)

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

@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import TransactionDetailItem from '.';
+
+# Transaction Detail Item
+
+Transaction detail that includes estimated gas fees. Intended to be used as an array item in the array passed to the `rows` prop of `<TransactionDetail />`
+
+<Canvas>
+  <Story id="ui-components-app-transaction-detail-item-transaction-detail-item-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={TransactionDetailItem} />

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

@@ -80,12 +80,36 @@ export default function TransactionDetailItem({
 }
 
 TransactionDetailItem.propTypes = {
+  /**
+   * Detail title text wrapped in Typography component.
+   */
   detailTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * The color of the detailTitle text accepts all Typography color props
+   */
   detailTitleColor: PropTypes.string,
+  /**
+   * Text to show on the left of the detailTotal. Wrapped in Typography component.
+   */
   detailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Total amount to show. Wrapped in Typography component. Will be bold if boldHeadings is true
+   */
   detailTotal: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Subtitle text. Checks if React.isValidElement before displaying. Displays under detailTitle
+   */
   subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Text to show under detailTotal. Wrapped in Typography component.
+   */
   subText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Whether detailTotal is bold or not. Defaults to true
+   */
   boldHeadings: PropTypes.bool,
+  /**
+   * Changes width to auto for transaction-detail-item__detail-values
+   */
   flexWidthValues: PropTypes.bool,
 };

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

@@ -1,36 +1,62 @@
 import React from 'react';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
-import GasTiming from '../gas-timing/gas-timing.component';
+
+import { COLORS } from '../../../helpers/constants/design-system';
+
+import README from './README.mdx';
 import TransactionDetailItem from '.';
 
 export default {
   title: 'Components/App/TransactionDetailItem',
   id: __filename,
+  component: TransactionDetailItem,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    detailTitle: { control: 'object' },
+    detailTitleColor: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(COLORS),
+    },
+    detailText: { control: 'text' },
+    detailTotal: { control: 'text' },
+    subTitle: { control: 'object' },
+    subText: { control: 'object' },
+  },
 };
 
-export const DefaultStory = () => {
+export const DefaultStory = (args) => {
   return (
     <div style={{ width: '400px' }}>
-      <TransactionDetailItem
-        detailTitle={
-          <>
-            <strong>Estimated gas fee</strong>
-            <InfoTooltip contentText="This is the tooltip text" position="top">
-              <i className="fa fa-info-circle" />
-            </InfoTooltip>
-          </>
-        }
-        detailText="16565.30"
-        detailTotal="0.0089 ETH"
-        subTitle={<GasTiming maxPriorityFeePerGas="1" />}
-        subText={
-          <>
-            From <strong>$16565 - $19000</strong>
-          </>
-        }
-      />
+      <TransactionDetailItem {...args} />
     </div>
   );
 };
 
 DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  detailTitle: (
+    <>
+      <strong>Estimated gas fee</strong>
+      <InfoTooltip contentText="This is the tooltip text" position="top">
+        <i className="fa fa-info-circle" />
+      </InfoTooltip>
+    </>
+  ),
+  detailText: '16565.30',
+  detailTotal: '0.0089 ETH',
+  subTitle: 'Likely in < 30 seconds',
+  boldHeadings: true,
+  flexWidthValues: false,
+  subText: (
+    <span>
+      From <strong>$16565 - $19000</strong>
+    </span>
+  ),
+};