Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | import { Story } from '@storybook/react';
import React, { useState } from 'react';
import Button from '../components/Button/Button';
import DialogBox, { Props as DialogBoxProps } from '../components/DialogBox/DialogBox';
import Dropdown from '../components/Dropdown';
export default {
title: 'Dialog Box',
component: DialogBox,
};
const Template: Story<DialogBoxProps> = (args) => {
return <DialogBox {...args} open={true} />;
};
const WithButtonTemplate: Story<DialogBoxProps> = (args) => {
const [opened, setOpened] = useState(false);
return (
<main>
<button onClick={() => setOpened(true)}>Click me</button>
<DialogBox {...args} open={opened} onClose={() => setOpened(false)}>
<Dropdown
fullWidth
onChange={() => {
return;
}}
options={[
{ label: 'Item 1', value: 'item1' },
{ label: 'Item 2', value: 'item2' },
{ label: 'Item 3', value: 'item3' },
]}
/>
</DialogBox>
</main>
);
};
export const Small = Template.bind({});
Small.args = {
open: true,
title: 'Title',
message: 'Message',
size: 'small',
middleButtons: [
<Button id='new-species' label='Test' onClick={() => true} size='small' key={'1'} />,
<Button id='new-species' label='Test' onClick={() => true} size='small' key={'2'} />,
],
};
export const Medium = Template.bind({});
Medium.args = {
title: 'Title',
message: 'Message',
size: 'medium',
middleButtons: [
<Button id='new-species' label='Test' onClick={() => true} size='small' key={'1'} />,
<Button id='new-species' label='Test' onClick={() => true} size='small' key={'2'} />,
],
};
export const Large = Template.bind({});
Large.args = {
title: 'Title',
message: 'Message',
size: 'large',
middleButtons: [
<Button id='new-species' label='Test' onClick={() => true} size='small' key={'1'} />,
<Button id='new-species' label='Test' onClick={() => true} size='small' key={'2'} />,
],
};
export const XLarge = Template.bind({});
XLarge.args = {
title: 'Title',
message: 'Message',
size: 'x-large',
middleButtons: [
<Button id='new-species' label='Test' onClick={() => true} size='small' key={'1'} />,
<Button id='new-species' label='Test' onClick={() => true} size='small' key={'2'} />,
],
};
export const threeButtons = Template.bind({});
threeButtons.args = {
title: 'Title',
message: 'Message',
size: 'medium',
leftButton: <Button id='new-species' label='Test' onClick={() => true} size='small' />,
rightButtons: [
<Button id='new-species' label='Test' onClick={() => true} size='small' key='1' />,
<Button id='new-species' label='Test' onClick={() => true} size='small' key='2' />,
],
};
export const noFooter = Template.bind({});
noFooter.args = {
title: 'Title',
message: 'Message',
size: 'small',
};
export const CloseOutside = WithButtonTemplate.bind({});
CloseOutside.args = {
title: 'Title',
message: 'Message',
size: 'small',
middleButtons: [
<Button id='new-species' label='Test' onClick={() => true} size='small' key={'1'} />,
<Button id='new-species' label='Test' onClick={() => true} size='small' key={'2'} />,
],
};
|