m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Update fee card storybook to utilize latest fee-card api (#9613)

Browse Source 
* 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>
This commit is contained in:
Dan J Miller 2020-10-16 13:29:32 -02:30 committed by GitHub
parent 0a874e2a87
commit e546314e3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ui/app/pages/swaps/fee-card/fee-card.stories.js
View File

@ -3,6 +3,15 @@ import { action } from '@storybook/addon-actions'
import { text } from '@storybook/addon-knobs/react' import { text } from '@storybook/addon-knobs/react'
import FeeCard from './fee-card' import FeeCard from './fee-card'
const tokenApprovalTextComponent = (
<span
key="swaps-view-quote-approve-symbol-1"
className="view-quote__bold"
>
ABC
</span>
)
const containerStyle = { const containerStyle = {
width: '300px', width: '300px',
} }
@ -24,19 +33,11 @@ export const WithAllProps = () => {
fee: text('secondaryFee', '100 USD'), fee: text('secondaryFee', '100 USD'),
maxFee: text('secondaryMaxFee', '200 USD'), maxFee: text('secondaryMaxFee', '200 USD'),
})} })}
maxFeeRow={({ onFeeCardMaxRowClick={action('Clicked max fee row link')}
text: text('maxFeeText', 'Max Fee'), tokenApprovalTextComponent={tokenApprovalTextComponent}
linkText: text('maxFeeLinkText', 'Edit'), tokenApprovalSourceTokenSymbol="ABC"
tooltipText: text('maxFeeTooltipText', 'Click here to edit.'), onTokenApprovalClick={action('Clicked third row link')}
onClick: action('Clicked max fee row link'), hideTokenApprovalRow={false}
})}
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,
})}
/> />
</div> </div>
) )
@ -55,19 +56,8 @@ export const WithoutThirdRow = () => {
fee: text('secondaryFee', '100 USD'), fee: text('secondaryFee', '100 USD'),
maxFee: text('secondaryMaxFee', '200 USD'), maxFee: text('secondaryMaxFee', '200 USD'),
})} })}
maxFeeRow={({ onFeeCardMaxRowClick={action('Clicked max fee row link')}
text: text('maxFeeText', 'Max Fee'), hideTokenApprovalRow
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,
})}
/> />
</div> </div>
) )
@ -77,17 +67,12 @@ export const WithOnlyRequiredProps = () => {
return ( return (
<div style={containerStyle}> <div style={containerStyle}>
<FeeCard <FeeCard
feeRowText={text('feeRowText', 'Network fees')}
primaryFee={({ primaryFee={({
fee: text('primaryFee', '1 ETH'), fee: text('primaryFee', '1 ETH'),
maxFee: text('primaryMaxFee', '2 ETH'), maxFee: text('primaryMaxFee', '2 ETH'),
})} })}
maxFeeRow={({ onFeeCardMaxRowClick={action('Clicked max fee row link')}
text: text('maxFeeText', 'Max Fee'), hideTokenApprovalRow
linkText: text('maxFeeLinkText', 'Edit'),
tooltipText: text('maxFeeTooltipText', 'Click here to edit.'),
onClick: action('Clicked max fee row link'),
})}
/> />
</div> </div>
) )