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 | import { Story } from '@storybook/react';
import React from 'react';
import { Box } from '@mui/material';
import Confirm, { ConfirmProps } from '../components/Confirm';
export default {
title: 'Confirm',
component: Confirm,
};
const Template: Story<ConfirmProps> = (args) => {
return <Confirm {...args} />;
};
export const Default = Template.bind({});
Default.args = {
confirmButtonText: 'Ok',
closeButtonText: 'Cancel',
message: 'Hello World',
onClose: () => window.alert('closed'),
onConfirm: () => window.alert('confirmed'),
open: true,
size: 'large',
textStyle: { color: 'blue' },
title: 'Confirm This!',
};
export const DestructiveNoCancel = Template.bind({});
DestructiveNoCancel.args = {
confirmButtonIcon: 'iconTrashCan',
confirmButtonPriority: 'primary',
confirmButtonText: 'Destroy',
confirmButtonType: 'destructive',
message: ['Nukem', 'Are you sure??'],
onConfirm: () => window.alert('gone'),
title: 'Delete all the things!',
};
export const Disabled = Template.bind({});
Disabled.args = {
confirmButtonDisabled: true,
confirmButtonPriority: 'secondary',
confirmButtonText: 'Ok',
confirmButtonType: 'passive',
message: 'Hello World',
onConfirm: () => window.alert('confirmed'),
title: 'Disabled Confirm',
};
export const Hidden = Template.bind({});
Hidden.args = {
confirmButtonText: 'Ok',
message: 'Hello World',
onConfirm: () => window.alert('confirmed'),
open: false,
title: 'Hidden Confirm',
};
export const CustomContent = Template.bind({});
CustomContent.args = {
confirmButtonText: 'Ok',
message: (
<Box display='flex' flexDirection='column' textAlign='left'>
<h2>Welcome</h2>
<h3>to wherever</h3>
<h4>you are</h4>
</Box>
),
onConfirm: () => window.alert('confirmed'),
title: 'Custom Confirm',
};
|