85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import { Modal } from './modal';
|
|
import { Meta, StoryObj } from '@storybook/react';
|
|
|
|
const meta: Meta<typeof Modal> = {
|
|
title: 'Components/Modal',
|
|
component: Modal,
|
|
argTypes: {
|
|
isOpen: { control: 'boolean' },
|
|
onClose: { action: 'closed' },
|
|
className: { control: 'text' },
|
|
overlayClassName: { control: 'text' },
|
|
closeButtonClassName: { control: 'text' },
|
|
disableEscapeKeyDown: { control: 'boolean' },
|
|
'aria-label': { control: 'text' },
|
|
'aria-labelledby': { control: 'text' },
|
|
'aria-describedby': { control: 'text' },
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof Modal>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
isOpen: true,
|
|
onClose: () => {
|
|
console.log('Modal closed');
|
|
},
|
|
children: (
|
|
<>
|
|
<Modal.Header>
|
|
<Modal.Title>Modal Title</Modal.Title>
|
|
<Modal.Description>
|
|
This is a simple modal description.
|
|
</Modal.Description>
|
|
</Modal.Header>
|
|
<Modal.Content>This is the main content of the modal.</Modal.Content>
|
|
<Modal.Footer>
|
|
<button className="px-4 py-2 bg-blue-500 text-white rounded">
|
|
Confirm
|
|
</button>
|
|
<button className="px-4 py-2 bg-gray-300 rounded">Cancel</button>
|
|
</Modal.Footer>
|
|
</>
|
|
),
|
|
},
|
|
};
|
|
|
|
export const CustomClasses: Story = {
|
|
args: {
|
|
...Default.args,
|
|
className: 'bg-red-100',
|
|
overlayClassName: 'bg-opacity-50',
|
|
closeButtonClassName: 'text-red-500',
|
|
},
|
|
};
|
|
|
|
export const NoEscapeClose: Story = {
|
|
args: {
|
|
...Default.args,
|
|
disableEscapeKeyDown: true,
|
|
},
|
|
};
|
|
|
|
export const WithAria: Story = {
|
|
args: {
|
|
...Default.args,
|
|
'aria-label': 'Custom Modal',
|
|
'aria-labelledby': 'modal-title',
|
|
'aria-describedby': 'modal-desc',
|
|
children: (
|
|
<>
|
|
<Modal.Header>
|
|
<Modal.Title id="modal-title">Modal Title</Modal.Title>
|
|
<Modal.Description id="modal-desc">
|
|
This is a modal with ARIA attributes.
|
|
</Modal.Description>
|
|
</Modal.Header>
|
|
<Modal.Content>Modal content here.</Modal.Content>
|
|
</>
|
|
),
|
|
},
|
|
};
|