53 lines
1.3 KiB
Plaintext
53 lines
1.3 KiB
Plaintext
import { Meta } from "@storybook/blocks";
|
|
import { Title, CustomArgsTable } from "@calcom/storybook/components";
|
|
import { Dialog, DialogContent, DialogFooter, DialogClose, DialogHeader } from "./Dialog";
|
|
import * as DialogStories from "./Dialog.stories";
|
|
|
|
<Meta of={DialogStories} />
|
|
|
|
<Title title="Dialog" suffix="Brief" subtitle="Version 1.0 — Last Update: 18 Aug 2023" />
|
|
|
|
## Definition
|
|
|
|
The `Dialog` component provides a flexible way to create dialogs in your application.
|
|
|
|
## Structure
|
|
|
|
The `Dialog` component is composed of the following components:
|
|
|
|
- `Dialog`: The main component that wraps the entire dialog. It manages the dialog's open and close states.
|
|
|
|
- `DialogContent`: Represents the content of the dialog. It can have different sizes, types, and an optional icon.
|
|
|
|
- `DialogHeader`: Renders the header of the dialog, including the title and subtitle.
|
|
|
|
- `DialogFooter`: Renders the footer of the dialog, which can contain action buttons.
|
|
|
|
- `DialogClose`: Renders a close button for the dialog.
|
|
|
|
## Components Arguments
|
|
|
|
### Dialog
|
|
|
|
<CustomArgsTable of={Dialog} />
|
|
|
|
### DialogContent
|
|
|
|
<CustomArgsTable of={DialogContent} />
|
|
|
|
### DialogHeader
|
|
|
|
<CustomArgsTable of={DialogHeader} />
|
|
|
|
### DialogFooter
|
|
|
|
<CustomArgsTable of={DialogFooter} />
|
|
|
|
### DialogClose
|
|
|
|
<CustomArgsTable of={DialogClose} />
|
|
|
|
{/* ## Dialog Story
|
|
|
|
<Canvas of={DialogStories.Default}/> */}
|