Fix transaction-detail-item for new Storybook format (#12820)
parent
9e59c3db77
commit
ac463bee71
@ -0,0 +1,15 @@ |
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; |
||||
|
||||
import TransactionDetailItem from '.'; |
||||
|
||||
# Transaction Detail Item |
||||
|
||||
Transaction detail that includes estimated gas fees. Intended to be used as an array item in the array passed to the `rows` prop of `<TransactionDetail />` |
||||
|
||||
<Canvas> |
||||
<Story id="ui-components-app-transaction-detail-item-transaction-detail-item-stories-js--default-story" /> |
||||
</Canvas> |
||||
|
||||
## Component API |
||||
|
||||
<ArgsTable of={TransactionDetailItem} /> |
@ -1,36 +1,62 @@ |
||||
import React from 'react'; |
||||
import InfoTooltip from '../../ui/info-tooltip/info-tooltip'; |
||||
import GasTiming from '../gas-timing/gas-timing.component'; |
||||
|
||||
import { COLORS } from '../../../helpers/constants/design-system'; |
||||
|
||||
import README from './README.mdx'; |
||||
import TransactionDetailItem from '.'; |
||||
|
||||
export default { |
||||
title: 'Components/App/TransactionDetailItem', |
||||
id: __filename, |
||||
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 = () => { |
||||
export const DefaultStory = (args) => { |
||||
return ( |
||||
<div style={{ width: '400px' }}> |
||||
<TransactionDetailItem |
||||
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={<GasTiming maxPriorityFeePerGas="1" />} |
||||
subText={ |
||||
<> |
||||
From <strong>$16565 - $19000</strong> |
||||
</> |
||||
} |
||||
/> |
||||
<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> |
||||
), |
||||
}; |
||||
|
Loading…
Reference in new issue