mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
429847a686
Our Storybook dependencies have been updated to v6.1.9, from v5. This was done to address a security vulnerability in a transitive dependency of these packages (`highlight.js`). The primary changes required by this Storybook update were the change in import path for the `withKnobs` hook, the change in background config format, and the webpack configuration. Storybook seems to work correctly. The migration was guided by the Storybook changelog[1] and the Storybook v6 migration guide[2]. There is one Storybook error remaining; it fails to load the Euclid font. This is a pre-existing error though, so we can fix it in a later PR. The `yarn.lock` file was deduplicated in this PR as well, as it was required to fix various install warnings that were introduced with this update. [1]: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md [2]: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md
77 lines
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import { action } from '@storybook/addon-actions'
|
|
import { text } from '@storybook/addon-knobs'
|
|
import FeeCard from './fee-card'
|
|
|
|
const tokenApprovalTextComponent = (
|
|
<span key="swaps-view-quote-approve-symbol-1" className="view-quote__bold">
|
|
ABC
|
|
</span>
|
|
)
|
|
|
|
const containerStyle = {
|
|
width: '300px',
|
|
}
|
|
|
|
export default {
|
|
title: 'FeeCard',
|
|
}
|
|
|
|
export const WithAllProps = () => {
|
|
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')}
|
|
tokenApprovalTextComponent={tokenApprovalTextComponent}
|
|
tokenApprovalSourceTokenSymbol="ABC"
|
|
onTokenApprovalClick={action('Clicked third row link')}
|
|
hideTokenApprovalRow={false}
|
|
/>
|
|
</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
|
|
/>
|
|
</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
|
|
/>
|
|
</div>
|
|
)
|
|
}
|