import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Drawer',
    component: 'x-drawer',
};
export const Simple = new Builder(args => `
<div class="buttons-group">
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis itaque quasi, ipsa aliquid quam mollitia consectetur expedita voluptatum modi possimus dolorum, consequuntur rerum dignissimos asperiores voluptate, aut debitis autem fuga?<p>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est sunt rem similique. Ullam labore laborum magni dicta nihil repellat, ab hic pariatur, inventore, quisquam voluptatem sequi fugiat sed animi?<p>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima deleniti voluptates, architecto, voluptatem in repellendus officiis voluptatum fugiat explicabo provident incidunt nesciunt ut ratione, veritatis facilis nisi! Recusandae, a facilis.</p>

	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis itaque quasi, ipsa aliquid quam mollitia consectetur expedita voluptatum modi possimus dolorum, consequuntur rerum dignissimos asperiores voluptate, aut debitis autem fuga?<p>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est sunt rem similique. Ullam labore laborum magni dicta nihil repellat, ab hic pariatur, inventore, quisquam voluptatem sequi fugiat sed animi?<p>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima deleniti voluptates, architecto, voluptatem in repellendus officiis voluptatum fugiat explicabo provident incidunt nesciunt ut ratione, veritatis facilis nisi! Recusandae, a facilis.</p>

	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis itaque quasi, ipsa aliquid quam mollitia consectetur expedita voluptatum modi possimus dolorum, consequuntur rerum dignissimos asperiores voluptate, aut debitis autem fuga?<p>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est sunt rem similique. Ullam labore laborum magni dicta nihil repellat, ab hic pariatur, inventore, quisquam voluptatem sequi fugiat sed animi?<p>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima deleniti voluptates, architecto, voluptatem in repellendus officiis voluptatum fugiat explicabo provident incidunt nesciunt ut ratione, veritatis facilis nisi! Recusandae, a facilis.</p>

	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis itaque quasi, ipsa aliquid quam mollitia consectetur expedita voluptatum modi possimus dolorum, consequuntur rerum dignissimos asperiores voluptate, aut debitis autem fuga?<p>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est sunt rem similique. Ullam labore laborum magni dicta nihil repellat, ab hic pariatur, inventore, quisquam voluptatem sequi fugiat sed animi?<p>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima deleniti voluptates, architecto, voluptatem in repellendus officiis voluptatum fugiat explicabo provident incidunt nesciunt ut ratione, veritatis facilis nisi! Recusandae, a facilis.</p>

	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis itaque quasi, ipsa aliquid quam mollitia consectetur expedita voluptatum modi possimus dolorum, consequuntur rerum dignissimos asperiores voluptate, aut debitis autem fuga?<p>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est sunt rem similique. Ullam labore laborum magni dicta nihil repellat, ab hic pariatur, inventore, quisquam voluptatem sequi fugiat sed animi?<p>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima deleniti voluptates, architecto, voluptatem in repellendus officiis voluptatum fugiat explicabo provident incidunt nesciunt ut ratione, veritatis facilis nisi! Recusandae, a facilis.</p>
	<x-drawer ${toProps(args)}>
		<x-list>
			<x-list-item>
				<x-avatar slot="left" image="https://www.gravatar.com/avatar/2a30fc5b79e49fc85e6245897c5bda7d"></x-avatar>
				<h4>Producto A</h4>
				<p>A simple short description</p>
			</x-list-item>

			<x-list-item>
				<x-avatar slot="left" image="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50"></x-avatar>
				<h4>Producto B</h4>
				<p><b>Size:</b> XL</p>
			</x-list-item>

			<x-list-item>
				<x-avatar slot="left" image="https://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c"></x-avatar>
				<h4>Producto C</h4>
				<p><b>Color:</b> Red, <b>Size:</b> 4"</p>
			</x-list-item>

			<x-list-item>
				<x-avatar slot="left" image="https://i.pinimg.com/originals/bf/57/02/bf57026ee75af2f414000cec322f7404.gif"></x-avatar>
				<h4>Producto C</h4>
				<p><b>Color:</b> Red, <b>Size:</b> 4"</p>
			</x-list-item>
		</x-list>

		<div slot="controls">
			<div class="d-flex justify-content-between align-items-center w-100">
				<x-icon size="2em" class="mr-3" name="basket"></x-icon>
				<div style="flex: 1">
				<span>Total de la orden</span>
				<h4 class="color-green">$<x-number fixed="2" value="84.65"></x-number></h4>
				</div>

				<x-fab color="primary" icon="right"></x-fab->
			</div>

			<hr />

			<div class="d-flex justify-content-start align-items-center">
				<x-avatar image="http://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c?size=200" rounded
					size="2rem" class="mr-2"></x-avatar>

				<span><b>Ivan Suazo</b> agrego <a href="#">Pizza Clasica</a> a la orden</span>
			</div>
		</div>
	</x-drawer>
</div>
`)
    .args({
    show: true,
})
    .build();
