import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/List',
    argTypes: {},
};
export const Simple = new Builder(args => `
	<x-list ${toProps(args)}>
		<x-list-item>
			Single line item
		</x-list-item>
		<x-list-item>
			<h4>Title line item</h4>
			<p>This is another line of text</p>
		</x-list-item>
		<x-list-item>
			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>
		</x-list-item>
		<x-list-item>
			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>

			<small slot="right">Today 35C˚</small>
		</x-list-item>
	</x-list>
	`)
    .args({})
    .build();
export const Bordered = new Builder(args => `
	<x-list ${toProps(args)}>
		<x-list-item>
			Single line item
		</x-list-item>
		<x-list-item>
			<h4>Title line item</h4>
			<p>This is another line of text</p>
		</x-list-item>
		<x-list-item>
			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>
		</x-list-item>
		<x-list-item>
			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>

			<small slot="right">Today 35C˚</small>
		</x-list-item>
	</x-list>
	`)
    .args({
    bordered: true,
})
    .build();
export const Clickable = new Builder(args => `
	<x-list ${toProps(args)}>
		<x-list-item clickable>
			Single line item
		</x-list-item>
		<x-list-item clickable>
			<h4>Title line item</h4>
			<p>This is another line of text</p>
		</x-list-item>
		<x-list-item clickable>
			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>
		</x-list-item>
		<x-list-item clickable>
			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>

			<small slot="right">Today 35C˚</small>
		</x-list-item>
	</x-list>
	`)
    .args({
    bordered: true,
})
    .build();
export const WithMeta = new Builder(args => `
	<x-list ${toProps(args)}>
		<x-list-item clickable>
			Single line item

			<small slot="right">Single meta</small>
		</x-list-item>
		<x-list-item clickable>
			<h4>Title line item</h4>
			<p>This is another line of text</p>

			<small slot="right"><b>5 min ago</b></small>
		</x-list-item>
		<x-list-item clickable>
			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>

			<small slot="right">
				<x-icon name="clock"></x-icon> 6h ago
			</small>
		</x-list-item>
		<x-list-item clickable>
			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>

			<x-badge slot="right" color="primary">pending</x-badge>
		</x-list-item>
	</x-list>
	`)
    .args({
    bordered: true,
})
    .build();
export const WithIcons = new Builder(args => `
	<x-list ${toProps(args)}>
		<x-list-item clickable>
			<x-icon slot="left" name="shopify"></x-icon>
			Single line item
		</x-list-item>
		<x-list-item clickable>
			<x-icon slot="left" name="cursor"></x-icon>

			<h4>Title line item</h4>
			<p>This is another line of text</p>
		</x-list-item>
		<x-list-item clickable>
			<x-icon slot="left" name="hand"></x-icon>

			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>
		</x-list-item>
		<x-list-item clickable>
			<x-icon slot="left" name="checkmark"></x-icon>

			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>

			<small slot="right">Today 35C˚</small>
		</x-list-item>
	</x-list>
	`)
    .args({
    bordered: true,
})
    .build();
export const WithFilledIcons = new Builder(args => `
	<x-list ${toProps(args)}>
		<x-list-item clickable>
			<x-icon slot="left" name="shopify" color="primary" filled></x-icon>

			Single line item
		</x-list-item>
		<x-list-item clickable>
			<x-icon slot="left" name="cursor" color="success" filled></x-icon>

			<h4>Title line item</h4>
			<p>This is another line of text</p>
		</x-list-item>
		<x-list-item clickable>
			<x-icon slot="left" name="hand" color="danger" filled></x-icon>

			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>
		</x-list-item>
		<x-list-item clickable>
			<x-icon slot="left" name="checkmark" color="orange" filled></x-icon>

			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>

			<small slot="right">Today 35C˚</small>
		</x-list-item>
	</x-list>
	`)
    .args({
    bordered: true,
})
    .build();
export const WithImages = new Builder(args => `
	<x-list ${toProps(args)}>
		<x-list-item clickable>
			<x-avatar slot="left" image="https://www.gravatar.com/avatar/2a30fc5b79e49fc85e6245897c5bda7d"></x-avatar>

			Single line item
		</x-list-item>
		<x-list-item clickable>
			<x-avatar slot="left" image="https://i.pinimg.com/originals/bf/57/02/bf57026ee75af2f414000cec322f7404.gif" rounded></x-avatar>

			<h4>Title line item</h4>
			<p>This is another line of text</p>
		</x-list-item>
		<x-list-item clickable>
			<x-avatar slot="left" image="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" rounded></x-avatar>

			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>
		</x-list-item>
		<x-list-item clickable>
			<x-avatar slot="left" image="https://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c" rounded></x-avatar>

			<h4>24. October 2015</h4>
			<p><b>Name Surname</b> &mdash;This is another line of text</p>

			<small slot="right">Today 35C˚</small>
		</x-list-item>
	</x-list>
	`)
    .args({
    bordered: true,
})
    .build();
