|
| 1 | +import { Canvas, Meta, Story } from "@storybook/addon-docs"; |
| 2 | + |
| 3 | +import { Title, CustomArgsTable } from "@calcom/storybook/components"; |
| 4 | + |
| 5 | +import { Dialog, DialogContent, DialogFooter, DialogClose, DialogHeader } from "./Dialog"; |
| 6 | + |
| 7 | +<Meta title="UI/Dialog" component={Dialog} /> |
| 8 | + |
| 9 | +<Title title="Dialog" suffix="Brief" subtitle="Version 1.0 — Last Update: 18 Aug 2023" /> |
| 10 | + |
| 11 | +## Definition |
| 12 | + |
| 13 | +The `Dialog` component provides a flexible way to create dialogs in your application. |
| 14 | + |
| 15 | +## Structure |
| 16 | + |
| 17 | +The `Dialog` component is composed of the following components: |
| 18 | + |
| 19 | +- `Dialog`: The main component that wraps the entire dialog. It manages the dialog's open and close states. |
| 20 | + |
| 21 | +- `DialogContent`: Represents the content of the dialog. It can have different sizes, types, and an optional icon. |
| 22 | + |
| 23 | +- `DialogHeader`: Renders the header of the dialog, including the title and subtitle. |
| 24 | + |
| 25 | +- `DialogFooter`: Renders the footer of the dialog, which can contain action buttons. |
| 26 | + |
| 27 | +- `DialogClose`: Renders a close button for the dialog. |
| 28 | + |
| 29 | +## Components Arguments |
| 30 | + |
| 31 | +### Dialog |
| 32 | + |
| 33 | +<CustomArgsTable of={Dialog} /> |
| 34 | + |
| 35 | +### DialogContent |
| 36 | + |
| 37 | +<CustomArgsTable of={DialogContent} /> |
| 38 | + |
| 39 | +### DialogHeader |
| 40 | + |
| 41 | +<CustomArgsTable of={DialogHeader} /> |
| 42 | + |
| 43 | +### DialogFooter |
| 44 | + |
| 45 | +<CustomArgsTable of={DialogFooter} /> |
| 46 | + |
| 47 | +### DialogClose |
| 48 | + |
| 49 | +<CustomArgsTable of={DialogClose} /> |
| 50 | + |
| 51 | +## Dialog Story |
| 52 | + |
| 53 | +<Canvas> |
| 54 | + <Story |
| 55 | + name="Dialog" |
| 56 | + args={{ |
| 57 | + title: "Example Dialog", |
| 58 | + description: "Example Dialog Description", |
| 59 | + type: "creation", |
| 60 | + open: true, |
| 61 | + showDivider: false, |
| 62 | + disabled: false, |
| 63 | + color: "minimal", |
| 64 | + }} |
| 65 | + argTypes={{ |
| 66 | + title: { |
| 67 | + control: "text", |
| 68 | + }, |
| 69 | + description: { |
| 70 | + control: "text", |
| 71 | + }, |
| 72 | + type: { |
| 73 | + control: { |
| 74 | + type: "select", |
| 75 | + options: ["creation", "confirmation"], |
| 76 | + }, |
| 77 | + }, |
| 78 | + open: { |
| 79 | + control: "boolean", |
| 80 | + }, |
| 81 | + showDivider: { |
| 82 | + control: "boolean", |
| 83 | + }, |
| 84 | + disabled: { |
| 85 | + control: "boolean", |
| 86 | + }, |
| 87 | + color: { |
| 88 | + control: { |
| 89 | + type: "select", |
| 90 | + options: ["minimal", "primary", "secondary", "emphasis"], |
| 91 | + }, |
| 92 | + }, |
| 93 | + onClick: { action: "clicked" }, |
| 94 | + }}> |
| 95 | + {({ title, description, type, open, showDivider, disabled, color, onClick }) => ( |
| 96 | + <Dialog title="Default" open={open}> |
| 97 | + <DialogContent type={type}> |
| 98 | + <DialogHeader title={title} subtitle={description} /> |
| 99 | + <DialogFooter showDivider={showDivider}> |
| 100 | + <DialogClose |
| 101 | + disabled={disabled} |
| 102 | + color={color} |
| 103 | + onClick={() => { |
| 104 | + const newPath = "?path=/story/ui-dialog--dialog&args=open:false"; |
| 105 | + window.open(newPath, "_self"); |
| 106 | + onClick(); |
| 107 | + }} |
| 108 | + /> |
| 109 | + </DialogFooter> |
| 110 | + </DialogContent> |
| 111 | + </Dialog> |
| 112 | + )} |
| 113 | + </Story> |
| 114 | +</Canvas> |
0 commit comments