From 8f5e6370b02cfe7f12971af51470b22f9c994ad2 Mon Sep 17 00:00:00 2001 From: Jaideep Guntupalli <63718527+JaideepGuntupalli@users.noreply.github.com> Date: Fri, 23 Jun 2023 14:34:26 +0530 Subject: [PATCH] feat: Added Storybook Controls (#9676) Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> --- .../components/calendar.stories.mdx | 36 ++++++--- .../ui/components/alert/alert.stories.mdx | 50 ++++++++----- .../ui/components/avatar/avatar.stories.mdx | 31 ++++++-- .../ui/components/badge/badge.stories.mdx | 48 ++++++------ .../ui/components/button/button.stories.mdx | 75 ++++++++++++++++++- .../buttonGroup/buttongroup.stories.mdx | 37 ++++++++- packages/ui/components/card/card.stories.mdx | 44 +++++++---- .../empty-screen/empty-screen.stories.mdx | 42 ++++++++--- .../form/checkbox/checkbox.stories.mdx | 55 ++++++++++---- .../components/form/select/select.stories.mdx | 6 +- .../ui/components/toast/toast.stories.mdx | 37 ++++++++- .../ui/components/tooltip/tooltip.stories.mdx | 33 +++++++- .../top-banner/topbanner.stories.mdx | 38 ++++++++++ 13 files changed, 426 insertions(+), 106 deletions(-) diff --git a/packages/features/calendars/weeklyview/components/calendar.stories.mdx b/packages/features/calendars/weeklyview/components/calendar.stories.mdx index 2ba17e64fd..1aeea475b5 100644 --- a/packages/features/calendars/weeklyview/components/calendar.stories.mdx +++ b/packages/features/calendars/weeklyview/components/calendar.stories.mdx @@ -55,15 +55,31 @@ export const Template = (args) => ; - - alert(e.title)} - onEmptyCellClick={(date) => alert(date.toString())} - sortEvents - hoverEventDuration={30} - /> + + {({...args}) => ( + alert(e.title)} + onEmptyCellClick={(date) => alert(date.toString())} + sortEvents + /> + )} diff --git a/packages/ui/components/alert/alert.stories.mdx b/packages/ui/components/alert/alert.stories.mdx index 0f2186a106..cfd93b8088 100644 --- a/packages/ui/components/alert/alert.stories.mdx +++ b/packages/ui/components/alert/alert.stories.mdx @@ -35,23 +35,37 @@ Each alert has a state to represent neutral, positive or negative responses. - - - - - - - - - - - - - - - - - + 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 }) => ( + + + + + + )} diff --git a/packages/ui/components/avatar/avatar.stories.mdx b/packages/ui/components/avatar/avatar.stories.mdx index 5e7d5fbe31..671a780a62 100644 --- a/packages/ui/components/avatar/avatar.stories.mdx +++ b/packages/ui/components/avatar/avatar.stories.mdx @@ -125,14 +125,29 @@ Avatar group can be composed differently based on the number of user profile. - - - + 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 }) => ( + + + - - - - + + )} diff --git a/packages/ui/components/badge/badge.stories.mdx b/packages/ui/components/badge/badge.stories.mdx index 817d6dcfac..d3233ca2d4 100644 --- a/packages/ui/components/badge/badge.stories.mdx +++ b/packages/ui/components/badge/badge.stories.mdx @@ -56,28 +56,32 @@ Alet badge is used in conjunction with an item, profile or label to indicate num <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> diff --git a/packages/ui/components/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx index c40d65bd37..fbdc1a6cca 100644 --- a/packages/ui/components/button/button.stories.mdx +++ b/packages/ui/components/button/button.stories.mdx @@ -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> diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx index 4ae04619fa..7201ed4b90 100644 --- a/packages/ui/components/buttonGroup/buttongroup.stories.mdx +++ b/packages/ui/components/buttonGroup/buttongroup.stories.mdx @@ -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> diff --git a/packages/ui/components/card/card.stories.mdx b/packages/ui/components/card/card.stories.mdx index c58d101120..69b83f88c9 100644 --- a/packages/ui/components/card/card.stories.mdx +++ b/packages/ui/components/card/card.stories.mdx @@ -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> diff --git a/packages/ui/components/empty-screen/empty-screen.stories.mdx b/packages/ui/components/empty-screen/empty-screen.stories.mdx index d769dc393b..9d083982c7 100644 --- a/packages/ui/components/empty-screen/empty-screen.stories.mdx +++ b/packages/ui/components/empty-screen/empty-screen.stories.mdx @@ -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> diff --git a/packages/ui/components/form/checkbox/checkbox.stories.mdx b/packages/ui/components/form/checkbox/checkbox.stories.mdx index ed23692733..16243c02d1 100644 --- a/packages/ui/components/form/checkbox/checkbox.stories.mdx +++ b/packages/ui/components/form/checkbox/checkbox.stories.mdx @@ -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> diff --git a/packages/ui/components/form/select/select.stories.mdx b/packages/ui/components/form/select/select.stories.mdx index cc4f29bef2..32b5ff9014 100644 --- a/packages/ui/components/form/select/select.stories.mdx +++ b/packages/ui/components/form/select/select.stories.mdx @@ -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> diff --git a/packages/ui/components/toast/toast.stories.mdx b/packages/ui/components/toast/toast.stories.mdx index 36eaa81f04..4a49c82e46 100644 --- a/packages/ui/components/toast/toast.stories.mdx +++ b/packages/ui/components/toast/toast.stories.mdx @@ -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> diff --git a/packages/ui/components/tooltip/tooltip.stories.mdx b/packages/ui/components/tooltip/tooltip.stories.mdx index 2d7e7e8fb0..a09c727fd5 100644 --- a/packages/ui/components/tooltip/tooltip.stories.mdx +++ b/packages/ui/components/tooltip/tooltip.stories.mdx @@ -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> diff --git a/packages/ui/components/top-banner/topbanner.stories.mdx b/packages/ui/components/top-banner/topbanner.stories.mdx index 72e7886a36..44a53efbe1 100644 --- a/packages/ui/components/top-banner/topbanner.stories.mdx +++ b/packages/ui/components/top-banner/topbanner.stories.mdx @@ -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>