cal.pub0.org/packages/ui/components/toast/toast.stories.mdx

68 lines
1.8 KiB
Plaintext
Raw Normal View History

import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import {
Examples,
Example,
Note,
Title,
VariantsTable,
VariantColumn,
RowTitles,
CustomArgsTable,
VariantRow
} from "@calcom/storybook/components";
import { SuccessToast,ErrorToast,WarningToast,DefaultToast } from './';
<Meta title="UI/Toasts" component={DefaultToast} />
<Title title="Toasts" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
## Definition
Toasts are used to show an action has had a impact. If a user submits a form a toast should be shown to notify the user there has been a success
## Structure
<CustomArgsTable of={DefaultToast} />
<Examples title="Toasts" >
<Example title="Default">
<DefaultToast message="Default Toast" toastVisible={true}/>
</Example>
<Example title="Success">
<SuccessToast message="Success Toast" toastVisible={true}/>
</Example>
<Example title="Warning">
<WarningToast message="Warning Toast" toastVisible={true}/>
</Example>
<Example title="Error">
<ErrorToast message="Error Toast" toastVisible={true}/>
</Example>
</Examples>
## Toast Story
<Canvas>
<Story name="Default"
args={{
message: 'Default Toast',
toastVisible: true
}}
argTypes={{
message: { control: 'text' },
toastVisible: { control: 'boolean'}
}}>
{({message, toastVisible}) => (
<VariantsTable titles={['Default','Success', 'Warning', 'Error']} columnMinWidth={150}>
<VariantRow variant="Default">
<DefaultToast message={message} toastVisible={toastVisible}/>
<SuccessToast message={message} toastVisible={toastVisible}/>
<WarningToast message={message} toastVisible={toastVisible}/>
<ErrorToast message={message} toastVisible={toastVisible}/>
</VariantRow>
</VariantsTable>
)}
</Story>
</Canvas>