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

Change over FeeCard stories to use controls instead of knobs, update props in stories (#13766)

Browse Source 
This PR changes over the deprecated knobs and actions in `fee-card.stories.js` to controls.
I attempted to create a `README.mdx`, but unfortunately the `<ArgsTable of={FeeCard} />` refused to render out any of the documentation comments I added to the `FeeCard.propTypes`, thus that has not been included (and no documentation has been added to the propTypes of FeeCard).

_Please note:_ currently nested arg types are not possible in StoryBook, but discussions are open: https://github.com/storybookjs/storybook/issues/11486. This means that the StoryBook shows `primaryFee`, `primaryMaxFee`, `secondaryFee` and `secondaryMaxFee`, but these are mapped to the 2 `primaryFee` and `secondaryFee` props of the component. This is visible if the developer clicks on the `Show code` button at the docs page in StoryBook.

Signed-off-by: Jurriaan Den Toonder <1493561+Fastjur@users.noreply.github.com>
This commit is contained in:
Jurriaan Den Toonder 2022-03-30 00:13:00 +02:00 committed by GitHub
parent 4e6d61abcb
commit 1521e63913
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 106 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,7 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { text, boolean, number, object } from '@storybook/addon-knobs';
import { MAINNET_CHAIN_ID } from '../../../../shared/constants/network';
import FeeCard from './fee-card';
const tokenApprovalTextComponent = (
<span key="fee-card-approve-symbol" className="view-quote__bold">
ABC
</span>
);
const containerStyle = {
width: '300px',
};
@ -17,83 +9,123 @@ const containerStyle = {
export default {
title: 'Pages/Swaps/FeeCard',
id: __filename,
component: FeeCard,
argTypes: {
primaryFee: {
control: {
type: 'text',
},
},
primaryMaxFee: {
control: {
type: 'text',
},
},
secondaryFee: {
control: {
type: 'text',
},
},
secondaryMaxFee: {
control: {
type: 'text',
},
},
onFeeCardMaxRowClick: {
action: 'Clicked max fee row edit link',
},
hideTokenApprovalRow: {
control: {
type: 'boolean',
},
},
tokenApprovalSourceTokenSymbol: {
control: {
type: 'text',
},
},
onTokenApprovalClick: {
action: 'Clicked on token approval',
},
metaMaskFee: {
control: {
type: 'text',
},
},
onQuotesClick: {
action: 'Clicked on quotes link',
},
numberOfQuotes: {
control: {
type: 'number',
},
},
chainId: {
control: {
type: 'text',
},
},
smartTransactionsOptInStatus: {
control: {
type: 'boolean',
},
},
smartTransactionsEnabled: {
control: {
type: 'boolean',
},
},
isBestQuote: {
control: {
type: 'boolean',
},
},
supportsEIP1559V2: {
control: {
type: 'boolean',
},
},
},
args: {
primaryFee: '1 ETH',
primaryMaxFee: '2 ETH',
secondaryFee: '100 USD',
secondaryMaxFee: '200 USD',
hideTokenApprovalRow: false,
tokenApprovalSourceTokenSymbol: 'ABC',
metaMaskFee: '0.875',
numberOfQuotes: 6,
chainId: MAINNET_CHAIN_ID,
isBestQuote: true,
},
};
export const WithAllProps = () => {
export const DefaultStory = (args) => {
// Please note, currently nested arg types are not possible, but discussions are open:
// https://github.com/storybookjs/storybook/issues/11486
const {
primaryFee,
primaryMaxFee,
secondaryFee,
secondaryMaxFee,
...rest
} = args;
return (
<div style={containerStyle}>
<FeeCard
feeRowText={text('feeRowText', 'Network fees')}
primaryFee={{
fee: text('primaryFee', '1 ETH'),
maxFee: text('primaryMaxFee', '2 ETH'),
fee: primaryFee,
maxFee: primaryMaxFee,
}}
secondaryFee={{
fee: text('secondaryFee', '100 USD'),
maxFee: text('secondaryMaxFee', '200 USD'),
fee: secondaryFee,
maxFee: secondaryMaxFee,
}}
chainId={MAINNET_CHAIN_ID}
networkAndAccountSupports1559={false}
onFeeCardMaxRowClick={action('Clicked max fee row link')}
tokenApprovalTextComponent={tokenApprovalTextComponent}
tokenApprovalSourceTokenSymbol="ABC"
onTokenApprovalClick={action('Clicked third row link')}
hideTokenApprovalRow={false}
metaMaskFee="0.875"
savings={object('savings 1', { total: '8.55' })}
onQuotesClick={action('Clicked quotes link')}
numberOfQuotes={number('numberOfQuotes', 6)}
isBestQuote={boolean('isBestQuote', true)}
conversionRate={300}
currentCurrency="usd"
{...rest}
/>
</div>
);
};
export const WithoutThirdRow = () => {
return (
<div style={containerStyle}>
<FeeCard
feeRowText={text('feeRowText', 'Network fees')}
primaryFee={{
fee: text('primaryFee', '1 ETH'),
maxFee: text('primaryMaxFee', '2 ETH'),
}}
secondaryFee={{
fee: text('secondaryFee', '100 USD'),
maxFee: text('secondaryMaxFee', '200 USD'),
}}
onFeeCardMaxRowClick={action('Clicked max fee row link')}
hideTokenApprovalRow
onQuotesClick={action('Clicked quotes link')}
numberOfQuotes={number('numberOfQuotes', 1)}
isBestQuote={boolean('isBestQuote', true)}
savings={object('savings 1', { total: '8.55' })}
metaMaskFee="0.875"
chainId={MAINNET_CHAIN_ID}
networkAndAccountSupports1559={false}
/>
</div>
);
};
export const WithOnlyRequiredProps = () => {
return (
<div style={containerStyle}>
<FeeCard
primaryFee={{
fee: text('primaryFee', '1 ETH'),
maxFee: text('primaryMaxFee', '2 ETH'),
}}
onFeeCardMaxRowClick={action('Clicked max fee row link')}
hideTokenApprovalRow
metaMaskFee="0.875"
onQuotesClick={action('Clicked quotes link')}
numberOfQuotes={2}
chainId={MAINNET_CHAIN_ID}
networkAndAccountSupports1559={false}
/>
</div>
);
};
DefaultStory.storyName = 'Default';