1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/swaps/fee-card/fee-card.stories.js
Jurriaan Den Toonder 1521e63913
Change over FeeCard stories to use controls instead of knobs, update props in stories (#13766)
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>
2022-03-29 16:13:00 -06:00

132 lines
2.5 KiB
JavaScript

import React from 'react';
import { MAINNET_CHAIN_ID } from '../../../../shared/constants/network';
import FeeCard from './fee-card';
const containerStyle = {
width: '300px',
};
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 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
primaryFee={{
fee: primaryFee,
maxFee: primaryMaxFee,
}}
secondaryFee={{
fee: secondaryFee,
maxFee: secondaryMaxFee,
}}
{...rest}
/>
</div>
);
};
DefaultStory.storyName = 'Default';