import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs'; import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components' import Card from './Card'; ## Definition All Cards used in Cal.com <CustomArgsTable of={Card} /> export const tip = { id: 1, thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg", mediaLink: "https://go.cal.com/dynamic-video", title: "Dynamic booking links", description: "Booking link that allows people to quickly schedule meetings.", href: "https://cal.com/blog/cal-v-1-9", } <Canvas> <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={thumbnailUrl} mediaLink={mediaLink} title={title} description={description} learnMore={{ href: tip.href, text: learnMoreText }} actionButton={{ onClick: () => console.log("Clicked") }} /> </VariantRow> </VariantsTable> )} </Story> </Canvas>