1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 20:39:08 +01:00
metamask-extension/ui/pages/swaps/fee-card/fee-card.stories.js
Nidhi Kumari c5368c152b
Added storybook check to CI (#17092)
* added storybook test runner

* added test runner in ci

* updated test for ci and fixed lint error

* updated lavamoat policy

* updated test command

* updated playwright

* changed command to storybook;ci

* updated command

* updated instance for test-storybook

* updated playwright

* added playwright step

* replaced concurrently with start-server-and-test

* updated the static storybook directory

* replaced first with last

* updated lock file

* replaced first with last

* updated test-storybook with maxworkers

* updated .depchechrc

* updated yml

* removed id from banner base

* replaced broken stories with .stories-to-do.js extesnsion

* updated token allowance story

* removed duplicacies from yarn

* fixed lavamoat

* removed filename comment

* updated links for docs

* fixed file extension for stories

* updated path for stories.json

* updated stories.json path

* yarn updated

* updated stories

* updated yarn

* updated wait on
2023-01-21 00:57:46 +05:30

122 lines
2.3 KiB
JavaScript

import React from 'react';
import { CHAIN_IDS } from '../../../../shared/constants/network';
import FeeCard from './fee-card';
const containerStyle = {
width: '300px',
};
export default {
title: 'Pages/Swaps/FeeCard',
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',
},
},
},
args: {
primaryFee: '1 ETH',
primaryMaxFee: '2 ETH',
secondaryFee: '100 USD',
secondaryMaxFee: '200 USD',
hideTokenApprovalRow: false,
tokenApprovalSourceTokenSymbol: 'ABC',
metaMaskFee: '0.875',
numberOfQuotes: 6,
chainId: CHAIN_IDS.MAINNET,
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';