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" },

];

<Title title="List" suffix="Brief" subtitle="Version 2.0 — Last Update: 24 Aug 2023" />

The List component is used to render an unordered list with default styling

List takes an array of objects to display a list in the UI

<CustomArgsTable of={List} />

<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" />

<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>

)}