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" }, ]; ## 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>