From e546314e3fd6c8398b148392ecb49386ce962de5 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Fri, 16 Oct 2020 13:29:32 -0230
Subject: [PATCH] Update fee card storybook to utilize latest fee-card api
 (#9613)

* Update fee card storybook to utilize latest fee-card api

* Update ui/app/pages/swaps/fee-card/fee-card.stories.js

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

Co-authored-by: Mark Stacey <markjstacey@gmail.com>
---
 .../pages/swaps/fee-card/fee-card.stories.js  | 51 +++++++------------
 1 file changed, 18 insertions(+), 33 deletions(-)

diff --git a/ui/app/pages/swaps/fee-card/fee-card.stories.js b/ui/app/pages/swaps/fee-card/fee-card.stories.js
index db5029a95..9527dcda3 100644
--- a/ui/app/pages/swaps/fee-card/fee-card.stories.js
+++ b/ui/app/pages/swaps/fee-card/fee-card.stories.js
@@ -3,6 +3,15 @@ import { action } from '@storybook/addon-actions'
 import { text } from '@storybook/addon-knobs/react'
 import FeeCard from './fee-card'
 
+const tokenApprovalTextComponent = (
+  <span
+    key="swaps-view-quote-approve-symbol-1"
+    className="view-quote__bold"
+  >
+    ABC
+  </span>
+)
+
 const containerStyle = {
   width: '300px',
 }
@@ -24,19 +33,11 @@ export const WithAllProps = () => {
           fee: text('secondaryFee', '100 USD'),
           maxFee: text('secondaryMaxFee', '200 USD'),
         })}
-        maxFeeRow={({
-          text: text('maxFeeText', 'Max Fee'),
-          linkText: text('maxFeeLinkText', 'Edit'),
-          tooltipText: text('maxFeeTooltipText', 'Click here to edit.'),
-          onClick: action('Clicked max fee row link'),
-        })}
-        thirdRow={({
-          text: text('thirdRowText', 'Extra Option'),
-          linkText: text('thirdRowLinkText', 'Click Me'),
-          tooltipText: text('thirdRowTooltipText', 'Something happens if you click this'),
-          onClick: action('Clicked third row link'),
-          hide: false,
-        })}
+        onFeeCardMaxRowClick={action('Clicked max fee row link')}
+        tokenApprovalTextComponent={tokenApprovalTextComponent}
+        tokenApprovalSourceTokenSymbol="ABC"
+        onTokenApprovalClick={action('Clicked third row link')}
+        hideTokenApprovalRow={false}
       />
     </div>
   )
@@ -55,19 +56,8 @@ export const WithoutThirdRow = () => {
           fee: text('secondaryFee', '100 USD'),
           maxFee: text('secondaryMaxFee', '200 USD'),
         })}
-        maxFeeRow={({
-          text: text('maxFeeText', 'Max Fee'),
-          linkText: text('maxFeeLinkText', 'Edit'),
-          tooltipText: text('maxFeeTooltipText', 'Click here to edit.'),
-          onClick: action('Clicked max fee row link'),
-        })}
-        thirdRow={({
-          text: text('thirdRowText', 'Extra Option'),
-          linkText: text('thirdRowLinkText', 'Click Me'),
-          tooltipText: text('thirdRowTooltipText', 'Something happens if you click this'),
-          onClick: action('Clicked third row link'),
-          hide: true,
-        })}
+        onFeeCardMaxRowClick={action('Clicked max fee row link')}
+        hideTokenApprovalRow
       />
     </div>
   )
@@ -77,17 +67,12 @@ export const WithOnlyRequiredProps = () => {
   return (
     <div style={containerStyle}>
       <FeeCard
-        feeRowText={text('feeRowText', 'Network fees')}
         primaryFee={({
           fee: text('primaryFee', '1 ETH'),
           maxFee: text('primaryMaxFee', '2 ETH'),
         })}
-        maxFeeRow={({
-          text: text('maxFeeText', 'Max Fee'),
-          linkText: text('maxFeeLinkText', 'Edit'),
-          tooltipText: text('maxFeeTooltipText', 'Click here to edit.'),
-          onClick: action('Clicked max fee row link'),
-        })}
+        onFeeCardMaxRowClick={action('Clicked max fee row link')}
+        hideTokenApprovalRow
       />
     </div>
   )