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

59 lines
1.8 KiB
Markdown

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';
<Meta title="UI/Card" component={Card} />
<Title title="Card" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023"/>
## 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>