91f381bce9
* migrate from react-icons to lucide-react * replace react-icon with lucide-dev: Webhook Icon * add lucide transformer * Fix LinkIcon import * Update yarn.lock to include monorepo deps * Migrated icons in ChargeCardDialog * Port Storybook to new icons as well * Adjust Info & Globe icons size to match react-icons size --------- Co-authored-by: Alex van Andel <me@alexvanandel.com>
29 lines
1.1 KiB
Plaintext
29 lines
1.1 KiB
Plaintext
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">
|
|
<VariantsTable titles={[]} columnMinWidth={150}>
|
|
<VariantRow variant="Default">
|
|
<EmptyScreen
|
|
Icon={Calendar}
|
|
headline="Empty state header"
|
|
description="Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo. Learn More."
|
|
buttonText="Button text"
|
|
/>
|
|
</VariantRow>
|
|
</VariantsTable>
|
|
</Story>
|
|
</Canvas>
|