import List from "./List";
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";

<Meta title="Text/List" component={List} />

Basic unordered (default) list. When the list items are not 'li' elements, they are automatically wrapped in 'li' tags.

<Canvas>
	<Story name="List">
        <List>
			<a>All</a>
			<a>Featured</a>
			<a>New</a>
			<a>Popular</a>
		</List>
	</Story>
</Canvas>

Ordered list

<Canvas>
	<Story name="Ordered List">
        <List tag="ol">
			<a>All</a>
			<a>Featured</a>
			<a>New</a>
			<a>Popular</a>
		</List>
	</Story>
</Canvas>

List with header (large), divider, and no bullets.

<Canvas>
	<Story name="Divider">
    	<List
			bullets={false}
			headerHasDivider={true}
			headerText="Explore"
			headerFontSize="l"
		>
			<a>All</a>
			<a>Featured</a>
			<a>New</a>
			<a>Popular</a>
		</List>
	</Story>
</Canvas>

List with non-li elements and the element wrap feature disabled.
Notice that the items' display type is no longer 'list-item' but rather defaults to that of the passed in children.

<Canvas>
	<Story name="Custom Wrapping">
    	<List
			listItemWrapElement={false}
		>
			<a>non-li item 1</a>
			<a> • non-li item 2</a>
			<a> • non-li item 3</a>
		</List>
	</Story>
</Canvas>

List directly using 'li' elements (therefore not wrapped in additional 'li' tags) and specific styling for the list item text.

<Canvas>
	<Story name="Using LI Tags">
    	<List
			bullets={false}
			headerHasDivider={true}
			headerText="Explore"
			listItemFontSize="xl"
			listItemFontWeight="300"
		>
			<li>All</li>
			<li>Featured</li>
			<li>New</li>
			<li>Popular</li>
		</List>
	</Story>
</Canvas>