From 6f55dd0ecc10a3ccd2034c9bf4adc6875e487cd4 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:40 +0200
Subject: [PATCH] Add components for different grid layouts

[MAILPOET-2774]
---
 assets/js/src/common/grid/column.tsx          | 27 +++++++++++++++++++
 assets/js/src/common/grid/index.tsx           | 13 +++++++++
 assets/js/src/common/grid/space_between.tsx   | 27 +++++++++++++++++++
 assets/js/src/common/grid/three_columns.tsx   | 13 +++++++++
 assets/js/src/common/grid/two_columns.tsx     | 13 +++++++++
 .../js/src/common/grid/two_columns_list.tsx   | 13 +++++++++
 6 files changed, 106 insertions(+)
 create mode 100644 assets/js/src/common/grid/column.tsx
 create mode 100644 assets/js/src/common/grid/index.tsx
 create mode 100644 assets/js/src/common/grid/space_between.tsx
 create mode 100644 assets/js/src/common/grid/three_columns.tsx
 create mode 100644 assets/js/src/common/grid/two_columns.tsx
 create mode 100644 assets/js/src/common/grid/two_columns_list.tsx

diff --git a/assets/js/src/common/grid/column.tsx b/assets/js/src/common/grid/column.tsx
new file mode 100644
index 0000000000..07d63d1f4a
--- /dev/null
+++ b/assets/js/src/common/grid/column.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+
+type Props = {
+  children?: React.ReactNode,
+  dimension?: 'small',
+};
+
+const Column = ({
+  children,
+  dimension,
+}: Props) => (
+  <div
+    className={
+      classnames(
+        'mailpoet-grid-column',
+        {
+          [`mailpoet-grid-column-${dimension}`]: dimension,
+        }
+      )
+    }
+  >
+    {children}
+  </div>
+);
+
+export default Column;
diff --git a/assets/js/src/common/grid/index.tsx b/assets/js/src/common/grid/index.tsx
new file mode 100644
index 0000000000..c2e319ab94
--- /dev/null
+++ b/assets/js/src/common/grid/index.tsx
@@ -0,0 +1,13 @@
+import Column from './column';
+import TwoColumns from './two_columns';
+import TwoColumnsList from './two_columns_list';
+import ThreeColumns from './three_columns';
+import SpaceBetween from './space_between';
+
+export default {
+  Column,
+  TwoColumns,
+  TwoColumnsList,
+  ThreeColumns,
+  SpaceBetween,
+};
diff --git a/assets/js/src/common/grid/space_between.tsx b/assets/js/src/common/grid/space_between.tsx
new file mode 100644
index 0000000000..7be3dc61c7
--- /dev/null
+++ b/assets/js/src/common/grid/space_between.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+
+type Props = {
+  children?: React.ReactNode,
+  verticalAlign?: 'center',
+};
+
+const SpaceBetween = ({
+  children,
+  verticalAlign,
+}: Props) => (
+  <div
+    className={
+      classnames(
+        'mailpoet-grid-space-between',
+        {
+          [`mailpoet-grid-space-between-vertical-${verticalAlign}`]: verticalAlign,
+        }
+      )
+    }
+  >
+    {children}
+  </div>
+);
+
+export default SpaceBetween;
diff --git a/assets/js/src/common/grid/three_columns.tsx b/assets/js/src/common/grid/three_columns.tsx
new file mode 100644
index 0000000000..ede67dee0c
--- /dev/null
+++ b/assets/js/src/common/grid/three_columns.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+  children?: React.ReactNode,
+};
+
+const ThreeColumns = ({ children }: Props) => (
+  <div className="mailpoet-grid-three-columns">
+    {children}
+  </div>
+);
+
+export default ThreeColumns;
diff --git a/assets/js/src/common/grid/two_columns.tsx b/assets/js/src/common/grid/two_columns.tsx
new file mode 100644
index 0000000000..c2a211d39b
--- /dev/null
+++ b/assets/js/src/common/grid/two_columns.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+  children?: React.ReactNode,
+};
+
+const TwoColumns = ({ children }: Props) => (
+  <div className="mailpoet-grid-two-columns">
+    {children}
+  </div>
+);
+
+export default TwoColumns;
diff --git a/assets/js/src/common/grid/two_columns_list.tsx b/assets/js/src/common/grid/two_columns_list.tsx
new file mode 100644
index 0000000000..46dc519260
--- /dev/null
+++ b/assets/js/src/common/grid/two_columns_list.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+  children?: React.ReactNode,
+};
+
+const TwoColumnsList = ({ children }: Props) => (
+  <div className="mailpoet-grid-two-columns-list">
+    {children}
+  </div>
+);
+
+export default TwoColumnsList;