import Builder from "../../utils/builder";
import "./example.css";
export default {
    title: 'Components/Grid',
    argTypes: {},
};
export const Simple = new Builder(() => `<x-container>
		<x-row>
			<x-col>x-col</x-col>
			<x-col>x-col</x-col>
			<x-col>x-col</x-col>
		</x-row>

		<x-row>
			<x-col>1 of 2</x-col>
			<x-col>2 of 2</x-col>
		</x-row>

		<x-row>
			<x-col>1 of 3</x-col>
			<x-col>2 of 3</x-col>
			<x-col>3 of 3</x-col>
		</x-row>
	</x-container>`)
    .args({})
    .build();
export const Nesting = new Builder(() => `<x-container>
	<x-row>
		<x-col size="9">
			<p>level 1: x-col (size = 9)</p>

			<x-row>
				<x-col>level 2: x-col</x-col>
				<x-col>level 2: x-col</x-col>
			</x-row>
		</x-col>

	</x-row>

</x-container>`)
    .args({})
    .build();
export const ColWider = new Builder(() => `<x-container>
	<x-row>
		<x-col>
			x-col
		</x-col>
		<x-col size="6">
			x-col (size = 6)
		</x-col>
		<x-col>
			x-col
		</x-col>
	</x-row>
	<x-row>
		<x-col>
			x-col
		</x-col>
		<x-col size="5">
			x-col (size = 5)
		</x-col>
		<x-col>
			x-col
		</x-col>
	</x-row>
	<x-row>
		<x-col size="8">
			x-col (size = 8)
		</x-col>
		<x-col size="4">
			x-col (size = 4)
		</x-col>
	</x-row>
</x-container>`)
    .args({})
    .build();
export const ColAuto = new Builder(() => `<x-container>
	<x-row justify="center">
		<x-col size="2">
			x-col (size = 2)
		</x-col>
		<x-col auto>
			x-col (auto) : Variable width content
		</x-col>
		<x-col size="2">
			x-col (size = 2)
		</x-col>
	</x-row>
	<x-row>
		<x-col>
			x-col
		</x-col>
		<x-col auto>
			x-col (auto) : Variable width content
		</x-col>
		<x-col size="2">
			x-col (size = 2)
		</x-col>
	</x-row>
</x-container>`)
    .args({})
    .build();
export const ColWrapping = new Builder(() => `<x-container>
	<x-row>
		<x-col size="9">
			x-col (size = 9)
		</x-col>
		<x-col size="4">
			x-col (size = 4)
			<p>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</p>
		</x-col>
		<x-col size="6">
			x-col (size = 6)
			<p>Subsequent columns continue along the new line.</p>
		</x-col>
	</x-row>
</x-container>`)
    .args({})
    .build();
export const ColOrder = new Builder(() => `<x-container>
	<x-row>
		<x-col>
			1 of 3
		</x-col>
		<x-col order="12">
			2 of 3 (order = 12)
		</x-col>
		<x-col order="1">
			3 of 3 (order = 1)
		</x-col>
	</x-row>
	<x-row>
		<x-col order="last">
			1 of 3 (order = last)
		</x-col>
		<x-col>
			2 of 3
		</x-col>
		<x-col order="first">
			3 of 3 (order = first)
		</x-col>
	</x-row>
</x-container>`)
    .args({})
    .build();
export const ColOffset = new Builder(() => `<x-container>
		<x-row>
			<x-col size="4">x-col (size = 4)</x-col>
			<x-col size="4" offset="4">x-col (size = 4 offset = 4)</x-col>
		</x-row>

		<x-row>
			<x-col size="3" offset="3">x-col (size = 3 offset = 3)</x-col>
			<x-col size="3" offset="3">x-col (size = 3 offset = 3)</x-col>
		</x-row>

		<x-row>
			<x-col size="6" offset="3">x-col (size = 6 offset = 3)</x-col>
		</x-row>
	</x-container>`)
    .args({})
    .build();
export const ColAlign = new Builder(() => `<x-container>
	<x-row with-height>
		<x-col align="start">
			x-col (align = start)
		</x-col>
		<x-col align="center">
			x-col (align = center)
		</x-col>
		<x-col align="end">
			x-col (align = end)
		</x-col>
	</x-row>
</x-container>`)
    .args({})
    .build();
export const RowAlign = new Builder(() => `<x-container>
	<x-alert>x-row align = start</x-alert>
	<x-row align="start" with-height>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
	</x-row>

	<br>

	<x-alert>x-row align = center</x-alert>
	<x-row align="center" with-height>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
	</x-row>

	<br>

	<x-alert>x-row align = end</x-alert>
	<x-row align="end" with-height>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
	</x-row>
</x-container>`)
    .args({})
    .build();
export const RowJustify = new Builder(() => `<x-container>
	<x-alert>x-row justify = start</x-alert>
	<x-row justify="start">
		<x-col size="3">
			x-col
		</x-col>
		<x-col size="3">
			x-col
		</x-col>
	</x-row>

	<br>

	<x-alert>x-row justify = center</x-alert>
	<x-row justify="center">
		<x-col size="3">
			x-col
		</x-col>
		<x-col size="3">
			x-col
		</x-col>
	</x-row>

	<br>

	<x-alert>x-row justify = end</x-alert>
	<x-row justify="end">
		<x-col size="3">
			x-col
		</x-col>
		<x-col size="3">
			x-col
		</x-col>
	</x-row>

	<br>

	<x-alert>x-row justify = around</x-alert>
	<x-row justify="around">
		<x-col size="3">
			x-col
		</x-col>
		<x-col size="3">
			x-col
		</x-col>
	</x-row>

	<br>

	<x-alert>x-row justify = between</x-alert>
	<x-row justify="between">
		<x-col size="3">
			x-col
		</x-col>
		<x-col size="3">
			x-col
		</x-col>
	</x-row>
</x-container>`)
    .args({})
    .build();
export const RowGutter = new Builder(() => `<x-container>
	<x-alert>x-row gutter = 5</x-alert>
	<x-row gutter="5">
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
	</x-row>

	<br>

	<x-alert>x-row gutter = 0</x-alert>
	<x-row gutter="0">
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
	</x-row>
</x-container>`)
    .args({})
    .build();
export const RowColumns = new Builder(() => `<x-container>
	<x-alert>x-row cols = 2</x-alert>
	<x-row cols="2">
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
	</x-row>

	<br>

	<x-alert>x-row cols = 3</x-alert>
	<x-row cols="3">
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
	</x-row>

	<br>

	<x-alert>x-row cols = 4</x-alert>
	<x-row cols="4">
		<x-col>
			x-col
		</x-col>
		<x-col>
			x-col
		</x-col>
		<x-col size="6">
			x-col (size = 6)
		</x-col>
		<x-col>
			x-col
		</x-col>
	</x-row>
</x-container>`)
    .args({})
    .build();
