Add components for different grid layouts

[MAILPOET-2774]

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;

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,
+};

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;

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;

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;

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;