konobangu/apps/storybook/stories/dialog.stories.tsx

63 lines
1.5 KiB
TypeScript

import type { Meta, StoryObj } from '@storybook/react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@konobangu/design-system/components/ui/dialog';
/**
* A window overlaid on either the primary window or another dialog window,
* rendering the content underneath inert.
*/
const meta = {
title: 'ui/Dialog',
component: Dialog,
tags: ['autodocs'],
argTypes: {},
render: (args) => (
<Dialog {...args}>
<DialogTrigger>Open</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</DialogDescription>
</DialogHeader>
<DialogFooter className="gap-4">
<button type="button" className="hover:underline">
Cancel
</button>
<DialogClose>
<button
type="button"
className="rounded bg-primary px-4 py-2 text-primary-foreground"
>
Continue
</button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
),
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof Dialog>;
export default meta;
type Story = StoryObj<typeof meta>;
/**
* The default form of the dialog.
*/
export const Default: Story = {};