1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/components/app/transaction-detail-item/transaction-detail-item.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

63 lines
1.3 KiB
JavaScript

import React from 'react';
import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
import { COLORS } from '../../../helpers/constants/design-system';
import README from './README.mdx';
import TransactionDetailItem from '.';
export default {
title: 'Components/App/TransactionDetailItem',
component: TransactionDetailItem,
parameters: {
docs: {
page: README,
},
},
argTypes: {
detailTitle: { control: 'object' },
detailTitleColor: {
control: {
type: 'select',
},
options: Object.values(COLORS),
},
detailText: { control: 'text' },
detailTotal: { control: 'text' },
subTitle: { control: 'object' },
subText: { control: 'object' },
},
};
export const DefaultStory = (args) => {
return (
<div style={{ width: '400px' }}>
<TransactionDetailItem {...args} />
</div>
);
};
DefaultStory.storyName = 'Default';
DefaultStory.args = {
detailTitle: (
<>
<strong>Estimated gas fee</strong>
<InfoTooltip contentText="This is the tooltip text" position="top">
<i className="fa fa-info-circle" />
</InfoTooltip>
</>
),
detailText: '16565.30',
detailTotal: '0.0089 ETH',
subTitle: 'Likely in < 30 seconds',
boldHeadings: true,
flexWidthValues: false,
subText: (
<span>
From <strong>$16565 - $19000</strong>
</span>
),
};