70 lines
1.9 KiB
Markdown
70 lines
1.9 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>
|