feat: Added controls for empty-screen, checkbox and toast storybook
This commit is contained in:
parent
c4e6bb0269
commit
2dadf2e8a0
|
@ -13,16 +13,35 @@ The CTA button can prompt the user to add the info/ apps needed for the page.
|
|||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="EmptyScreen">
|
||||
<VariantsTable titles={[]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<EmptyScreen
|
||||
Icon={Calendar}
|
||||
headline="Empty state header"
|
||||
description="Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo. Learn More."
|
||||
buttonText="Button text"
|
||||
/>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
name="EmptyScreen"
|
||||
args={{
|
||||
headline: 'Empty state header',
|
||||
description: 'Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo. Learn More.',
|
||||
buttonText: 'Button text',
|
||||
}}
|
||||
argTypes={{
|
||||
headline: {
|
||||
control: 'text',
|
||||
},
|
||||
description: {
|
||||
control: 'text',
|
||||
},
|
||||
buttonText: {
|
||||
control: 'text',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{({ headline, description, buttonText }) => (
|
||||
<VariantsTable titles={[]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<EmptyScreen
|
||||
Icon={Calendar}
|
||||
headline={headline}
|
||||
description={description}
|
||||
buttonText={buttonText}
|
||||
/>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
@ -45,20 +45,45 @@ Checkboxes are used in forms and databases to indicate an answer to a question,
|
|||
</Examples>
|
||||
|
||||
<Canvas>
|
||||
<Story name="Checkbox">
|
||||
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<Checkbox label="Default" />
|
||||
<Checkbox label="Error" error/>
|
||||
<Checkbox label="Disabled" disabled/>
|
||||
<Checkbox label="Disabled Checked" checked disabled />
|
||||
</VariantRow>
|
||||
<VariantRow variant="Description As Label">
|
||||
<Checkbox description="Default" descriptionAsLabel />
|
||||
<Checkbox description="Error" error descriptionAsLabel/>
|
||||
<Checkbox description="Disabled" disabled descriptionAsLabel/>
|
||||
<Checkbox description="Disabled Checked" checked disabled descriptionAsLabel/>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
<Story name="Checkbox"
|
||||
args={{
|
||||
label: "Default",
|
||||
description: "Default Description",
|
||||
error: false,
|
||||
disabled: false,
|
||||
}}
|
||||
argTypes={{
|
||||
label: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
description: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
error: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ label, description, error, disabled }) => (
|
||||
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<Checkbox label={label} error={error} disabled={disabled} />
|
||||
</VariantRow>
|
||||
<VariantRow variant="Description As Label">
|
||||
<Checkbox description={description} error={error} disabled={disabled} descriptionAsLabel/>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
@ -1,5 +1,15 @@
|
|||
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
VariantsTable,
|
||||
VariantColumn,
|
||||
RowTitles,
|
||||
CustomArgsTable,
|
||||
VariantRow
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import { SuccessToast,ErrorToast,WarningToast,DefaultToast } from './';
|
||||
|
||||
|
@ -30,3 +40,28 @@ Toasts are used to show an action has had a impact. If a user submits a form a t
|
|||
<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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user