@kadconsulting/dry
Version:
KAD Reusable Component Library
149 lines • 4.72 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import Toast, { ToastGroup } from './Toast';
import { Button } from '../index';
const meta = {
title: 'Components/Toast',
component: Toast,
tags: ['autodocs'],
argTypes: {
message: { control: 'text' },
type: {
control: 'select',
options: ['info', 'success', 'warning', 'error'],
},
duration: { control: 'number' },
position: {
control: 'select',
options: [
'top-left',
'top-right',
'bottom-left',
'bottom-right',
'center',
'top-right-plus-60',
],
},
layout: {
control: 'radio',
options: ['vertical', 'horizontal'],
},
closable: { control: 'boolean' },
persistent: { control: 'boolean' },
additionalText: { control: 'text' },
backgroundColor: { control: 'color' },
textColor: { control: 'color' },
borderRadius: { control: 'text' },
boxShadow: { control: 'text' },
easing: { control: 'text' },
animationDuration: { control: 'number' },
},
};
export default meta;
export const Default = {
args: {
message: 'This is a default toast message',
type: 'info',
duration: 3000,
position: 'top-right',
},
};
export const SuccessToast = {
args: {
...Default.args,
message: 'Operation completed successfully!',
type: 'success',
},
};
export const ErrorToast = {
args: {
...Default.args,
message: 'An error occurred. Please try again.',
type: 'error',
},
};
export const WarningToast = {
args: {
...Default.args,
message: 'Warning: Your session will expire soon.',
type: 'warning',
},
};
export const PersistentToast = {
args: {
...Default.args,
message: 'This toast will not auto-close',
persistent: true,
},
};
export const CustomDurationToast = {
args: {
...Default.args,
message: 'This toast will close after 10 seconds',
duration: 10000,
},
};
export const ToastWithAdditionalText = {
args: {
...Default.args,
message: 'Main message',
additionalText: 'This is additional information for the toast.',
},
};
export const ToastWithActions = {
args: {
...Default.args,
message: 'Action required',
actions: (_jsx(Button, { onClick: () => alert('Action performed!'), children: "Perform Action" })),
},
};
export const ToastWithAdditionalButtons = {
args: {
...Default.args,
message: 'Multiple actions available',
additionalButtons: [
{ text: 'Action 1', onClick: () => alert('Action 1 performed!') },
{ text: 'Action 2', onClick: () => alert('Action 2 performed!') },
],
},
};
export const CustomStyledToast = {
args: {
...Default.args,
message: 'Custom styled toast',
backgroundColor: '#f0f0f0',
textColor: '#333',
borderRadius: '16px',
boxShadow: '0 8px 16px rgba(0, 0, 0, 0.2)',
},
};
export const HorizontalLayoutToast = {
args: {
...Default.args,
message: 'Horizontal layout toast',
layout: 'horizontal',
},
};
export const ToastGroupStory = {
render: (args) => (_jsxs(ToastGroup, { ...args, children: [_jsx(Toast, { message: 'Toast 1', type: 'info' }), _jsx(Toast, { message: 'Toast 2', type: 'success' }), _jsx(Toast, { message: 'Toast 3', type: 'warning' })] })),
args: {
position: 'top-right',
layout: 'vertical',
spacing: 16,
},
};
export const InteractiveToastDemo = {
render: () => {
const [toasts, setToasts] = React.useState([]);
const addToast = (type) => {
const newToast = {
message: `This is a ${type} toast`,
type,
onClose: () => setToasts((toasts) => toasts.filter((t) => t !== newToast)),
};
setToasts([...toasts, newToast]);
};
return (_jsxs("div", { children: [_jsx(Button, { onClick: () => addToast('info'), children: "Add Info Toast" }), _jsx(Button, { onClick: () => addToast('success'), children: "Add Success Toast" }), _jsx(Button, { onClick: () => addToast('warning'), children: "Add Warning Toast" }), _jsx(Button, { onClick: () => addToast('error'), children: "Add Error Toast" }), toasts.map((toast, index) => (_jsx(Toast, { ...toast }, index)))] }));
},
};
//# sourceMappingURL=Toast.stories.js.map