From 032f15f2d0d3bb34427e95172184be6b5946b4f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Sun, 10 May 2020 21:00:58 +0200
Subject: [PATCH] Add story for all grid layouts

[MAILPOET-2774]
---
 assets/js/src/common/grid/_stories/grid.tsx | 96 +++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 assets/js/src/common/grid/_stories/grid.tsx

diff --git a/assets/js/src/common/grid/_stories/grid.tsx b/assets/js/src/common/grid/_stories/grid.tsx
new file mode 100644
index 0000000000..335c71fc28
--- /dev/null
+++ b/assets/js/src/common/grid/_stories/grid.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import Heading from '../../typography/heading/heading';
+import Grid from '..';
+
+export default {
+  title: 'Grid',
+};
+
+export const Layouts = () => {
+  const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi libero sapien, tristique sollicitudin lobortis id, viverra id libero.';
+
+  return (
+    <>
+      <Heading level={3}>Column</Heading>
+      <Grid.Column>
+        {content}
+      </Grid.Column>
+
+      <div className="mailpoet-gap" />
+
+      <Heading level={3}>Column - small</Heading>
+      <Grid.Column dimension="small">
+        {content}
+      </Grid.Column>
+
+      <div className="mailpoet-gap" />
+
+      <Heading level={3}>Two columns</Heading>
+      <Grid.TwoColumns>
+        <div>{content}</div>
+        <div>{content}</div>
+      </Grid.TwoColumns>
+
+      <div className="mailpoet-gap" />
+
+      <Heading level={3}>Three columns</Heading>
+      <Grid.ThreeColumns>
+        <div>{content}</div>
+        <div>{content}</div>
+        <div>{content}</div>
+      </Grid.ThreeColumns>
+
+      <div className="mailpoet-gap" />
+
+      <Heading level={3}>Two columns list</Heading>
+      <Grid.Column>
+        <Grid.TwoColumnsList>
+          <div>
+            Option 1
+            <br />
+            Option 2
+            <br />
+            Option 3
+            <br />
+            Option 4
+            <br />
+            Option 5
+            <br />
+          </div>
+        </Grid.TwoColumnsList>
+      </Grid.Column>
+
+      <div className="mailpoet-gap" />
+
+      <Heading level={3}>Space between</Heading>
+      <Grid.Column>
+        <Grid.SpaceBetween>
+          <div>
+            Left
+            <br />
+            Part
+          </div>
+          <div>
+            Right Part
+          </div>
+        </Grid.SpaceBetween>
+      </Grid.Column>
+
+      <div className="mailpoet-gap" />
+
+      <Heading level={3}>Space between - vertically centered</Heading>
+      <Grid.Column>
+        <Grid.SpaceBetween verticalAlign="center">
+          <div>
+            Left
+            <br />
+            Part
+          </div>
+          <div>
+            Right Part
+          </div>
+        </Grid.SpaceBetween>
+      </Grid.Column>
+    </>
+  );
+};