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
+      <TransactionDetailItem {...args} />
-        detailTitle={
+    </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"
+  detailText: '16565.30',
-        detailTotal="0.0089 ETH"
+  detailTotal: '0.0089 ETH',
-        subTitle={<GasTiming maxPriorityFeePerGas="1" />}
+  subTitle: 'Likely in < 30 seconds',
-        subText={
+  boldHeadings: true,
-          <>
+  flexWidthValues: false,
+  subText: (
+    <span>
       From <strong>$16565 - $19000</strong>
-          </>
+    </span>
-        }
+  ),
-      />
-    </div>
-  );
 };
-
-DefaultStory.storyName = 'Default';