diff --git a/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx b/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx index c47a134bfb7..36f851dcffc 100644 --- a/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx +++ b/packages/libs/react-ui/src/components/Dialog/Dialog.stories.tsx @@ -1,12 +1,11 @@ import { Button } from '@components/Button'; -import { Dialog } from '@components/Dialog'; -import type { IModalProps } from '@components/Modal'; +import { Dialog, IDialogProps } from '@components/Dialog'; import { Stack } from '@components/Stack'; import { Text } from '@components/Typography'; import type { Meta, StoryObj } from '@storybook/react'; import React, { useState } from 'react'; -const meta: Meta<{ title?: string } & IModalProps> = { +const meta: Meta = { title: 'Overlays/Dialog', parameters: { docs: { @@ -17,14 +16,42 @@ A Dialog is a type of modal that is used to display information or prompt the us }, }, }, + argTypes: { + isOpen: { + description: + 'Controls whether the dialog is open or closed. If true, the dialog will be open. If false, the dialog will be closed.', + table: { + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' }, + }, + }, + onOpenChange: { + control: { type: 'function' }, + description: + 'Function that is called when the dialog is opened or closed. It is passed a boolean value that indicates whether the dialog is open or closed.', + table: { + type: { summary: 'function' }, + }, + }, + title: { + control: { type: 'text' }, + description: 'Title of the dialog.', + table: { + type: { summary: 'string' }, + }, + }, + }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const DialogStory: Story = { name: 'Dialog', - render: () => { + args: { + title: 'Dialog Title', + }, + render: ({ title }) => { const [isOpen, setIsOpen] = useState(false); return ( @@ -33,7 +60,7 @@ export const DialogStory: Story = { setIsOpen(isOpen)} - title="Dialog Title" + title={title} > {(state) => (