Compare commits
14 Commits
main
...
feat/addin
| Author | SHA1 | Date | |
|---|---|---|---|
|
87c18b688b | ||
|
|
8e6485e774 | ||
|
7e61b54421 | ||
|
0a3f91d1bd | ||
|
|
d6b64b54a1 | ||
|
|
a7b0e36ee4 | ||
|
|
806137ecbe | ||
|
|
74d5bffaaf | ||
|
|
2dadf2e8a0 | ||
|
|
c4e6bb0269 | ||
|
|
25a8ebc40f | ||
|
|
f68243beb9 | ||
|
|
0d8f684331 | ||
|
|
3cb6eeb139 |
|
|
@ -55,15 +55,31 @@ export const Template = (args) => <Calendar {...args} />;
|
|||
</Canvas>
|
||||
|
||||
<Canvas>
|
||||
<Story name="Onclick Handlers">
|
||||
<Calendar
|
||||
startHour={8}
|
||||
endHour={17}
|
||||
events={events}
|
||||
onEventClick={(e) => alert(e.title)}
|
||||
onEmptyCellClick={(date) => alert(date.toString())}
|
||||
sortEvents
|
||||
hoverEventDuration={30}
|
||||
/>
|
||||
<Story name="Onclick Handlers"
|
||||
args={{
|
||||
startHour: 8,
|
||||
endHour: 17,
|
||||
hoverEventDuration: 30,
|
||||
}}
|
||||
argTypes={{
|
||||
startHour: {
|
||||
control: { type: "number", min: 0, max: 23, step: 1 },
|
||||
},
|
||||
endHour: {
|
||||
control: { type: "number", min: 0, max: 23, step: 1 },
|
||||
},
|
||||
hoverEventDuration: {
|
||||
control: { type: "number", min: 0, max: 60, step: 1 },
|
||||
},
|
||||
}}
|
||||
>
|
||||
{({...args}) => (
|
||||
<Calendar {...args}
|
||||
events={events}
|
||||
onEventClick={(e) => alert(e.title)}
|
||||
onEmptyCellClick={(date) => alert(date.toString())}
|
||||
sortEvents
|
||||
/>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
|||
|
|
@ -35,23 +35,37 @@ Each alert has a state to represent neutral, positive or negative responses.
|
|||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Alert">
|
||||
<VariantsTable titles={['Default']} columnMinWidth={150}>
|
||||
<VariantRow variant="Success">
|
||||
<Alert severity="success" title="Summarise what happened" message="Describe what can be done about it here." />
|
||||
</VariantRow>
|
||||
<VariantRow variant="Warning">
|
||||
<Alert severity="warning" title="Summarise what happened" message="Describe what can be done about it here." />
|
||||
</VariantRow>
|
||||
<VariantRow variant="Error">
|
||||
<Alert severity="error" title="Summarise what happened" message="Describe what can be done about it here." />
|
||||
</VariantRow>
|
||||
<VariantRow variant="Neutral">
|
||||
<Alert severity="neutral" title="Summarise what happened" message="Describe what can be done about it here." />
|
||||
</VariantRow>
|
||||
<VariantRow variant="Info">
|
||||
<Alert severity="info" title="Summarise what happened" message="Describe what can be done about it here." />
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
name="Alert"
|
||||
args={{
|
||||
severity: 'success',
|
||||
title: 'Summarise what happened',
|
||||
message: 'Describe what can be done about it here.',
|
||||
}}
|
||||
argTypes={{
|
||||
severity: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['success', 'warning', 'error', 'neutral', 'info'],
|
||||
},
|
||||
},
|
||||
title: {
|
||||
control: {
|
||||
type: 'text'
|
||||
}
|
||||
},
|
||||
message: {
|
||||
control: {
|
||||
type: 'text'
|
||||
}
|
||||
},
|
||||
}}
|
||||
>
|
||||
{({ severity, title, message }) => (
|
||||
<VariantsTable titles={['Default']} columnMinWidth={150}>
|
||||
<VariantRow variant={severity}>
|
||||
<Alert severity={severity} title={title} message={message} />
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
|||
|
|
@ -125,14 +125,29 @@ Avatar group can be composed differently based on the number of user profile.
|
|||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Avatar">
|
||||
<VariantsTable titles={['Default']} columnMinWidth={150}>
|
||||
<VariantRow variant="Sm">
|
||||
<Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
|
||||
name="Avatar"
|
||||
args={{
|
||||
size: 'sm',
|
||||
alt: 'Avatar Story',
|
||||
gravatarFallbackMd5: 'Ui@CAL.com',
|
||||
}}
|
||||
argTypes={{
|
||||
size: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['sm', 'lg'],
|
||||
},
|
||||
},
|
||||
alt: { control: 'text' },
|
||||
gravatarFallbackMd5: { control: 'text' },
|
||||
}}
|
||||
>
|
||||
{({ size, alt, gravatarFallbackMd5 }) => (
|
||||
<VariantsTable titles={['Default']} columnMinWidth={150}>
|
||||
<VariantRow variant={size}>
|
||||
<Avatar size={size} alt={alt} gravatarFallbackMd5={gravatarFallbackMd5} />
|
||||
</VariantRow>
|
||||
<VariantRow variant="Lg">
|
||||
<Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
</VariantsTable>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
|||
|
|
@ -56,28 +56,32 @@ Alet badge is used in conjunction with an item, profile or label to indicate num
|
|||
<Title offset title="Badge" suffix="Variants" />
|
||||
|
||||
<Canvas>
|
||||
<Story name="All Variants">
|
||||
<VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<Badge variant="default" >Badge text</Badge>
|
||||
<Badge variant="default" withDot>Badge text</Badge>
|
||||
<Badge variant="default" startIcon={Plus}>Badge text</Badge>
|
||||
<Story name="All Variants"
|
||||
args={{
|
||||
severity: 'default',
|
||||
label: 'Badge text',
|
||||
}}
|
||||
argTypes={{
|
||||
severity: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['default', 'success', 'gray', 'error'],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
}}>
|
||||
{({ severity, label }) => (
|
||||
<VariantsTable titles={['Default','With Dot', 'With Icon']} columnMinWidth={150}>
|
||||
<VariantRow variant={severity}>
|
||||
<Badge variant={severity}>{label}</Badge>
|
||||
<Badge variant={severity} withDot>{label}</Badge>
|
||||
<Badge variant={severity} startIcon={Plus}>{label}</Badge>
|
||||
</VariantRow>
|
||||
<VariantRow variant="Success">
|
||||
<Badge variant="success" >Badge text</Badge>
|
||||
<Badge variant="success" withDot>Badge text</Badge>
|
||||
<Badge variant="success" startIcon={Plus}>Badge text</Badge>
|
||||
</VariantRow>
|
||||
<VariantRow variant="gray">
|
||||
<Badge variant="gray" >Badge text</Badge>
|
||||
<Badge variant="gray" withDot>Badge text</Badge>
|
||||
<Badge variant="gray" startIcon={Plus}>Badge text</Badge>
|
||||
</VariantRow>
|
||||
<VariantRow variant="error">
|
||||
<Badge variant="error" >Badge text</Badge>
|
||||
<Badge variant="error" withDot>Badge text</Badge>
|
||||
<Badge variant="error" startIcon={Plus}>Badge text</Badge>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
</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 { Plus, X } from '../icon';
|
||||
import { Button } from './Button';
|
||||
|
||||
|
|
@ -87,7 +97,6 @@ Button are clickable elements that initiates user actions. Labels in the button
|
|||
|
||||
<Title offset title="Buttons" suffix="Variants" />
|
||||
|
||||
|
||||
<Canvas>
|
||||
<Story name="All variants">
|
||||
<VariantsTable titles={['Primary', 'Secondary', 'Minimal', 'Destructive',"Icon"]} columnMinWidth={150}>
|
||||
|
|
@ -128,4 +137,66 @@ Button are clickable elements that initiates user actions. Labels in the button
|
|||
</VariantRow>
|
||||
</VariantsTable>
|
||||
</Story>
|
||||
<Story name="Button Playground"
|
||||
args={{
|
||||
color: 'primary',
|
||||
size: 'base',
|
||||
loading: false,
|
||||
disabled: false,
|
||||
children: 'Button text',
|
||||
className: ''
|
||||
}}
|
||||
argTypes={{
|
||||
color: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['primary', 'secondary', 'minimal', 'destructive']
|
||||
}
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['base', 'sm']
|
||||
}
|
||||
},
|
||||
loading: {
|
||||
control: {
|
||||
type: 'boolean'
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
control: {
|
||||
type: 'boolean'
|
||||
}
|
||||
},
|
||||
children: {
|
||||
control: {
|
||||
type: 'text'
|
||||
}
|
||||
},
|
||||
className: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['', 'sb-pseudo--hover', 'sb-pseudo--focus']
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ color, size, loading, disabled, children, className }) => (
|
||||
<VariantsTable titles={["Light & Dark Modes"]} columnMinWidth={150}>
|
||||
<VariantRow variant="Button">
|
||||
<Button
|
||||
color={color}
|
||||
size={size}
|
||||
variant="default"
|
||||
loading={loading}
|
||||
disabled={disabled}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ Button group enables multiple buttons to be combined into a single unit. It offe
|
|||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="All Variatns">
|
||||
name="All Variants">
|
||||
<VariantsTable titles={["Default",'Secondary',"Minimal"]} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<ButtonGroup>
|
||||
|
|
@ -81,3 +81,38 @@ Button group enables multiple buttons to be combined into a single unit. It offe
|
|||
</VariantsTable>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="ButtonGroup Playground"
|
||||
args={{
|
||||
color: 'secondary',
|
||||
combined: false,
|
||||
}}
|
||||
argTypes={{
|
||||
color: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['primary', 'secondary', 'minimal'],
|
||||
},
|
||||
},
|
||||
combined: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{({ color, combined }) => (
|
||||
<VariantsTable titles={[`${color}`]} columnMinWidth={150}>
|
||||
<VariantRow variant="">
|
||||
<ButtonGroup combined={combined}>
|
||||
<Button StartIcon={Trash} variant="icon" color={color} />
|
||||
<Button StartIcon={Navigation} variant="icon" color={color}/>
|
||||
<Button StartIcon={Clipboard} variant="icon" color={color}/>
|
||||
</ButtonGroup>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
|||
|
|
@ -22,19 +22,37 @@ export const tip = {
|
|||
|
||||
|
||||
<Canvas>
|
||||
<Story name="Card">
|
||||
<VariantsTable titles={['']} columnMinWidth={150}>
|
||||
<VariantRow variant="Sidebar Card">
|
||||
<Story name="Card"
|
||||
args={{
|
||||
thumbnailUrl: tip.thumbnailUrl,
|
||||
mediaLink: tip.mediaLink,
|
||||
title: tip.title,
|
||||
description: tip.description,
|
||||
learnMoreHref: tip.href,
|
||||
learnMoreText: "learn more",
|
||||
}}
|
||||
argTypes={{
|
||||
thumbnailUrl: { control: { type: 'text' } },
|
||||
mediaLink: { control: { type: 'text' } },
|
||||
title: { control: { type: 'text' } },
|
||||
description: { control: { type: 'text' } },
|
||||
learnMoreHref: { control: { type: 'text' } },
|
||||
learnMoreText: { control: { type: 'text' } },
|
||||
}}>
|
||||
{({ thumbnailUrl, mediaLink, title, description, learnMoreText }) => (
|
||||
<VariantsTable titles={['']} columnMinWidth={150}>
|
||||
<VariantRow variant="Sidebar Card">
|
||||
<Card
|
||||
variant="SidebarCard"
|
||||
thumbnailUrl={tip.thumbnailUrl}
|
||||
mediaLink={tip.mediaLink}
|
||||
title={tip.title}
|
||||
description={tip.description}
|
||||
learnMore={{ href: tip.href, text: "learn more" }}
|
||||
actionButton={{ onClick: () => console.log("Clicked") }}
|
||||
/>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
variant="SidebarCard"
|
||||
thumbnailUrl={thumbnailUrl}
|
||||
mediaLink={mediaLink}
|
||||
title={title}
|
||||
description={description}
|
||||
learnMore={{ href: tip.href, text: learnMoreText }}
|
||||
actionButton={{ onClick: () => console.log("Clicked") }}
|
||||
/>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
|||
|
|
@ -13,16 +13,36 @@ 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.',
|
||||
buttonText: 'Learn More',
|
||||
}}
|
||||
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}
|
||||
buttonOnClick={() => alert("Learned More!!")}
|
||||
/>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -112,6 +112,10 @@ const GoodSelect = props => <Select {...props} components={{ Control }} />
|
|||
## Select Story
|
||||
<Canvas>
|
||||
<Story name="Default">
|
||||
<SelectField options={options} label={"Default Select"}/>
|
||||
<VariantsTable titles={['Default']} columnMinWidth={450} >
|
||||
<VariantRow>
|
||||
<SelectField options={options} label={"Default Select"}/>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -15,21 +15,46 @@ Tooltip components can be used to provide additional information about an elemen
|
|||
|
||||
|
||||
<Canvas>
|
||||
<Story name="Tooltip">
|
||||
<Story name="Tooltip"
|
||||
args={{
|
||||
alertMsg: 'Copied!',
|
||||
hoverMsg: "Copy to clipboard",
|
||||
content: 'Hover Me',
|
||||
}}
|
||||
argTypes={{
|
||||
alertMsg: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
hoverMsg: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
content: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{({ alertMsg, hoverMsg, content }) => (
|
||||
<TooltipProvider>
|
||||
<VariantsTable titles={['']} columnMinWidth={150}>
|
||||
<VariantRow variant="Default">
|
||||
<Tooltip content="Copy to clipboard">
|
||||
<Tooltip content={`${hoverMsg}`}>
|
||||
<span
|
||||
className="dark:text-darkgray-50 p-2 bg-brand-default rounded-md text-gray-100 dark:bg-darkgray-900 hover:cursor-pointer"
|
||||
onClick={() => {
|
||||
alert('Copied!');
|
||||
alert(`${alertMsg}`);
|
||||
}}>
|
||||
Hover Me
|
||||
{content}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
|||
|
|
@ -62,3 +62,41 @@ Each toast has a state to represent neutral, positive or negative responses.
|
|||
/>
|
||||
</Example>
|
||||
</Examples>
|
||||
|
||||
<Canvas>
|
||||
<Story name="TopBanner"
|
||||
args={{
|
||||
text: 'Something big is happening we want you to know about.',
|
||||
variant: 'default'
|
||||
}}
|
||||
argTypes={{
|
||||
variant: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['default', 'warning', 'error'],
|
||||
},
|
||||
},
|
||||
text: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
}}>
|
||||
{({ text, variant, ...args }) => (
|
||||
<TopBanner
|
||||
{...args}
|
||||
actions={
|
||||
<button
|
||||
className="border-b border-black text-sm"
|
||||
onClick={() => {
|
||||
alert("test");
|
||||
}}>
|
||||
Action
|
||||
</button>
|
||||
}
|
||||
variant={variant}
|
||||
text={text}
|
||||
/>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user