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

<Meta title="Layout/Divider" component={Divider} />

A horizontal divider with medium (20px) top and bottom margin.

<Canvas>
	<Story name="Divider">
		<div>
			<div>Some text</div>
			<Divider marginSize="m" />
			<div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
				tincidunt nec orci ac elementum. Sed vitae ligula non dolor
				egestas congue. Etiam at luctus sem. Sed metus lorem, dapibus
				non congue nec, mattis eu leo. In condimentum mi nec tristique
				pretium. Aliquam vel urna vitae justo accumsan auctor. Mauris
				purus orci, hendrerit et dignissim eu, efficitur non dui. Donec
				fringilla ipsum eu rutrum ultricies. Mauris vel neque fermentum,
				porta justo id, pretium mauris. Donec rhoncus, ante et laoreet
				tincidunt, leo lorem dapibus dolor, vel ultrices metus odio et
				felis.
			</div>
		</div>
	</Story>
</Canvas>

<Canvas>
	<Story name="L Margin">
		<div>
			<div>Some text</div>
			<Divider marginSizeTop="l" />
			<div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
				tincidunt nec orci ac elementum. Sed vitae ligula non dolor
				egestas congue. Etiam at luctus sem. Sed metus lorem, dapibus
				non congue nec, mattis eu leo. In condimentum mi nec tristique
				pretium. Aliquam vel urna vitae justo accumsan auctor. Mauris
				purus orci, hendrerit et dignissim eu, efficitur non dui. Donec
				fringilla ipsum eu rutrum ultricies. Mauris vel neque fermentum,
				porta justo id, pretium mauris. Donec rhoncus, ante et laoreet
				tincidunt, leo lorem dapibus dolor, vel ultrices metus odio et
				felis.
			</div>
		</div>
	</Story>
</Canvas>

A horizontal divider with extra-large (40px) margin below it.

<Canvas>
	<Story name="XL Margin">
		<div>
			<div>Some text</div>
			<Divider marginSizeBottom="xl" />
			<div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
				tincidunt nec orci ac elementum. Sed vitae ligula non dolor
				egestas congue. Etiam at luctus sem. Sed metus lorem, dapibus
				non congue nec, mattis eu leo. In condimentum mi nec tristique
				pretium. Aliquam vel urna vitae justo accumsan auctor. Mauris
				purus orci, hendrerit et dignissim eu, efficitur non dui. Donec
				fringilla ipsum eu rutrum ultricies. Mauris vel neque fermentum,
				porta justo id, pretium mauris. Donec rhoncus, ante et laoreet
				tincidunt, leo lorem dapibus dolor, vel ultrices metus odio et
				felis.
			</div>
		</div>
	</Story>
</Canvas>

Divider with a horizontally and vertically centered child element.

<Canvas>
	<Story name="Centered Badge">
		<div>
			<div>Some text</div>
			<Divider marginSize="m">
				<div style={{ background: "yellow", padding: "5px 10px" }}>
					Some Badge
				</div>
			</Divider>
			<div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
				tincidunt nec orci ac elementum. Sed vitae ligula non dolor
				egestas congue. Etiam at luctus sem. Sed metus lorem, dapibus
				non congue nec, mattis eu leo. In condimentum mi nec tristique
				pretium. Aliquam vel urna vitae justo accumsan auctor. Mauris
				purus orci, hendrerit et dignissim eu, efficitur non dui. Donec
				fringilla ipsum eu rutrum ultricies. Mauris vel neque fermentum,
				porta justo id, pretium mauris. Donec rhoncus, ante et laoreet
				tincidunt, leo lorem dapibus dolor, vel ultrices metus odio et
				felis.
			</div>
		</div>
	</Story>
</Canvas>