115 lines
2.8 KiB
Plaintext
115 lines
2.8 KiB
Plaintext
|
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
||
|
|
|
||
|
|
import { Title, CustomArgsTable } from "@calcom/storybook/components";
|
||
|
|
|
||
|
|
import { Dialog, DialogContent, DialogFooter, DialogClose, DialogHeader } from "./Dialog";
|
||
|
|
|
||
|
|
<Meta title="UI/Dialog" component={Dialog} />
|
||
|
|
|
||
|
|
<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>
|
||
|
|
<Story
|
||
|
|
name="Dialog"
|
||
|
|
args={{
|
||
|
|
title: "Example Dialog",
|
||
|
|
description: "Example Dialog Description",
|
||
|
|
type: "creation",
|
||
|
|
open: true,
|
||
|
|
showDivider: false,
|
||
|
|
disabled: false,
|
||
|
|
color: "minimal",
|
||
|
|
}}
|
||
|
|
argTypes={{
|
||
|
|
title: {
|
||
|
|
control: "text",
|
||
|
|
},
|
||
|
|
description: {
|
||
|
|
control: "text",
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
control: {
|
||
|
|
type: "select",
|
||
|
|
options: ["creation", "confirmation"],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
open: {
|
||
|
|
control: "boolean",
|
||
|
|
},
|
||
|
|
showDivider: {
|
||
|
|
control: "boolean",
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
control: "boolean",
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
control: {
|
||
|
|
type: "select",
|
||
|
|
options: ["minimal", "primary", "secondary", "emphasis"],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
onClick: { action: "clicked" },
|
||
|
|
}}>
|
||
|
|
{({ title, description, type, open, showDivider, disabled, color, onClick }) => (
|
||
|
|
<Dialog title="Default" open={open}>
|
||
|
|
<DialogContent type={type}>
|
||
|
|
<DialogHeader title={title} subtitle={description} />
|
||
|
|
<DialogFooter showDivider={showDivider}>
|
||
|
|
<DialogClose
|
||
|
|
disabled={disabled}
|
||
|
|
color={color}
|
||
|
|
onClick={() => {
|
||
|
|
const newPath = "?path=/story/ui-dialog--dialog&args=open:false";
|
||
|
|
window.open(newPath, "_self");
|
||
|
|
onClick();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</DialogFooter>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
)}
|
||
|
|
</Story>
|
||
|
|
</Canvas>
|