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

37 lines
1.1 KiB
Markdown

import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
import { Icon } from "@calcom/ui";
import { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer } from './';
<Meta title="UI/Skeleton" component={Skeleton} />
<Title title="Skeleton" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
## Definition
Skeletons are used as a placeholder to the content while the content is being loaded. It is used to improve the user experience by providing a visual cue that the content is loading.
## Structure
<CustomArgsTable of={Skeleton} />
<Examples title="Skeleton Avatar" >
<Example title="Primary">
<SkeletonAvatar className="h-8 w-8" />
</Example>
</Examples>
<Examples title="Skeleton Text" >
<Example title="Primary">
<SkeletonText className="h-4 w-32"/>
</Example>
</Examples>
<Examples title="Skeleton Button" >
<Example title="Primary">
<SkeletonButton className="h-8 w-32"/>
</Example>
</Examples>