60 lines
1.6 KiB
Markdown
60 lines
1.6 KiB
Markdown
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
|
|
|
import {
|
|
Examples,
|
|
Example,
|
|
Note,
|
|
Title,
|
|
CustomArgsTable,
|
|
VariantsTable,
|
|
VariantRow,
|
|
} from "@calcom/storybook/components";
|
|
|
|
import { Calendar } from "../icon";
|
|
import { EmptyScreen } from "./EmptyScreen";
|
|
|
|
<Meta title="UI/EmptyScreen" component={EmptyScreen} />
|
|
|
|
<Title title="EmptyScreen" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
|
|
|
|
## Definition
|
|
|
|
An empty state is where no info/ apps are added to a page with typically content. There must be a text that prompts users to learn more about why they see this state if necessary.
|
|
The CTA button can prompt the user to add the info/ apps needed for the page.
|
|
|
|
<Canvas>
|
|
<Story
|
|
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>
|