98 lines
2.6 KiB
Markdown
98 lines
2.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 { List, ListItem, ListItemTitle, ListItemText } from "./List";
|
|
|
|
export const listItems = [
|
|
{ title: "Title 1", description: "Description 1" },
|
|
{ title: "Title 2", description: "Description 2" },
|
|
{ title: "Title 3", description: "Description 3" },
|
|
];
|
|
|
|
<Meta title="UI/List" component={List} />
|
|
|
|
<Title title="List" suffix="Brief" subtitle="Version 2.0 — Last Update: 24 Aug 2023" />
|
|
|
|
## Definition
|
|
|
|
The List component is used to render an unordered list with default styling
|
|
|
|
## Structure
|
|
|
|
List takes an array of objects to display a list in the UI
|
|
### List
|
|
<CustomArgsTable of={List} />
|
|
|
|
### ListItem
|
|
<CustomArgsTable of={ListItem} />
|
|
|
|
<Examples>
|
|
<Example title="Default">
|
|
<List>
|
|
{listItems.map((item) => (
|
|
<ListItem rounded={false}>
|
|
<ListItemTitle className="mr-2">{item.title}</ListItemTitle>
|
|
<ListItemText>{item.description}</ListItemText>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Example>
|
|
<Example title="Round Container">
|
|
<List roundContainer={false}>
|
|
{listItems.map((item) => (
|
|
<ListItem rounded={false}>
|
|
<ListItemTitle className="mr-2">{item.title}</ListItemTitle>
|
|
<ListItemText>{item.description}</ListItemText>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Example>
|
|
<Example title="No Border Treatment">
|
|
<List noBorderTreatment={true}>
|
|
{listItems.map((item) => (
|
|
<ListItem rounded={false}>
|
|
<ListItemTitle className="mr-2">{item.title}</ListItemTitle>
|
|
<ListItemText>{item.description}</ListItemText>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Example>
|
|
</Examples>
|
|
|
|
<Title offset title="List" suffix="Variants" />
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="List"
|
|
args={{
|
|
roundContainer: true,
|
|
noBorderTreatment: false,
|
|
rounded: false,
|
|
expanded: false
|
|
}}>
|
|
{({ roundContainer, noBorderTreatment, rounded, expanded }) => (
|
|
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
|
<VariantRow>
|
|
<List roundContainer={roundContainer} noBorderTreatment={noBorderTreatment}>
|
|
{listItems.map((item) => (
|
|
<ListItem rounded={rounded} expanded={expanded}>
|
|
<ListItemTitle className="mr-2">{item.title}</ListItemTitle>
|
|
<ListItemText>{item.description}</ListItemText>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</VariantRow>
|
|
</VariantsTable>
|
|
)}
|
|
</Story>
|
|
</Canvas>
|