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/select-quote-popover/select-quote-popover.stories.js

64 lines
1.5 KiB
JavaScript
Raw Normal View History

import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { object } from '@storybook/addon-knobs';
import Button from '../../../components/ui/button';
import mockQuoteData from './mock-quote-data';
import README from './README.mdx';
import SelectQuotePopover from '.';
2020-10-06 20:28:38 +02:00
export default {
title: 'Pages/Swaps/SelectQuotePopover',
id: __filename,
component: SelectQuotePopover,
parameters: {
docs: {
page: README,
},
},
argTypes: {
swapToSymbol: {
control: {
type: 'select',
},
options: ['ETH', 'DAI'],
},
initialAggId: {
control: {
type: 'select',
},
options: ['Agg1', 'Agg2', 'Agg3', 'Agg4', 'Agg5', 'Agg6'],
},
quoteDataRows: {
control: 'object',
},
hideEstimatedGasFee: {
control: 'boolean',
},
},
args: {
quoteDataRows: mockQuoteData,
},
};
2020-10-06 20:28:38 +02:00
export const DefaultStory = (args) => {
const [showPopover, setShowPopover] = useState(false);
2020-10-06 20:28:38 +02:00
return (
<div>
<Button onClick={() => setShowPopover(true)}>Open Popover</Button>
{showPopover && (
<SelectQuotePopover
quoteDataRows={object('quoteDataRows', mockQuoteData)}
onClose={() => setShowPopover(false)}
onSubmit={action('submit SelectQuotePopover')}
swapToSymbol={args.swapToSymbol || 'DAI'}
initialAggId={args.initialAggId || 'Agg4'}
hideEstimatedGasFee={args.hideEstimatedGasFee || false}
2020-10-06 20:28:38 +02:00
/>
)}
</div>
);
};
DefaultStory.storyName = 'Default';