Add grid system components

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@freenow/wave",
-    "version": "1.17.1",
+    "version": "1.17.2-canary.0",
     "description": "React components of the Wave design system for your Front-End project",
     "main": "lib/cjs/index.js",
     "typings": "lib/types/index.d.ts",

src/components/Box/Box.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import { Colors } from '../../essentials';
-import { Box, BoxProps } from './Box';
+import { Box } from './Box';
 
 describe('Box', () => {
     it('renders without any props', () => {

src/components/Grid/Grid.spec.tsx

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react';
+import * as React from 'react';
+import { Row, Column } from './Grid';
+
+describe('Grid', () => {
+    it('renders without props', () => {
+        expect(
+            render(
+                <Row>
+                    <Column>Column 1</Column>
+                    <Column>Column 2</Column>
+                    <Column>Column 3</Column>
+                </Row>
+            ).container.firstChild
+        ).toMatchSnapshot();
+    });
+
+    it('renders columns with span', () => {
+        expect(
+            render(
+                <Row>
+                    <Column span={4}>Column 1</Column>
+                    <Column span={8}>Column 2</Column>
+                </Row>
+            ).container.firstChild
+        ).toMatchSnapshot();
+    });
+
+    it('renders columns with offset', () => {
+        expect(
+            render(
+                <Row>
+                    <Column>Column 1</Column>
+                    <Column offset={10}>Column 2</Column>
+                </Row>
+            ).container.firstChild
+        ).toMatchSnapshot();
+    });
+});

src/components/Grid/Grid.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+import { Spaces } from '../../essentials/Spaces/Spaces';
+import { Box, BoxProps } from '../Box/Box';
+
+const AMOUNT_OF_DECIMALS = 4;
+const COLUMN_WIDTH = 100 / 12;
+const GAP = Spaces[3];
+
+type ColumnOffset = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+type ColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+const BorderBoxWrapper = styled(Box)`
+    box-sizing: border-box;
+`;
+
+type RowProps = BoxProps;
+
+const Row: FC<RowProps> = (props: RowProps) => (
+    <Box display="flex" flexWrap="wrap" marginRight={`-${GAP}`} {...props} />
+);
+
+interface ColumnProps extends BoxProps {
+    span?: ColumnSpan;
+    offset?: ColumnOffset;
+}
+
+const Column: FC<ColumnProps> = ({ span = 1, offset = 0, ...restProps }: ColumnProps) => {
+    const marginLeft = offset * COLUMN_WIDTH;
+    const width = span * COLUMN_WIDTH;
+
+    return (
+        <BorderBoxWrapper
+            flex={`0 0 ${width.toFixed(AMOUNT_OF_DECIMALS)}%`}
+            marginLeft={marginLeft ? `${marginLeft.toFixed(AMOUNT_OF_DECIMALS)}%` : undefined}
+            paddingRight={GAP}
+            {...restProps}
+        />
+    );
+};
+
+export { Row, RowProps, Column, ColumnProps };

src/components/Grid/__snapshots__/Grid.spec.tsx.snap

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid renders columns with offset 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -1.5rem;
+}
+
+.c1 {
+  -webkit-flex: 0 0 8.3333%;
+  -ms-flex: 0 0 8.3333%;
+  flex: 0 0 8.3333%;
+  padding-right: 1.5rem;
+  box-sizing: border-box;
+}
+
+.c2 {
+  -webkit-flex: 0 0 8.3333%;
+  -ms-flex: 0 0 8.3333%;
+  flex: 0 0 8.3333%;
+  margin-left: 83.3333%;
+  padding-right: 1.5rem;
+  box-sizing: border-box;
+}
+
+<div
+  class="c0"
+  display="flex"
+>
+  <div
+    class="c1"
+  >
+    Column 1
+  </div>
+  <div
+    class="c2"
+  >
+    Column 2
+  </div>
+</div>
+`;
+
+exports[`Grid renders columns with span 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -1.5rem;
+}
+
+.c1 {
+  -webkit-flex: 0 0 33.3333%;
+  -ms-flex: 0 0 33.3333%;
+  flex: 0 0 33.3333%;
+  padding-right: 1.5rem;
+  box-sizing: border-box;
+}
+
+.c2 {
+  -webkit-flex: 0 0 66.6667%;
+  -ms-flex: 0 0 66.6667%;
+  flex: 0 0 66.6667%;
+  padding-right: 1.5rem;
+  box-sizing: border-box;
+}
+
+<div
+  class="c0"
+  display="flex"
+>
+  <div
+    class="c1"
+  >
+    Column 1
+  </div>
+  <div
+    class="c2"
+  >
+    Column 2
+  </div>
+</div>
+`;
+
+exports[`Grid renders without props 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -1.5rem;
+}
+
+.c1 {
+  -webkit-flex: 0 0 8.3333%;
+  -ms-flex: 0 0 8.3333%;
+  flex: 0 0 8.3333%;
+  padding-right: 1.5rem;
+  box-sizing: border-box;
+}
+
+<div
+  class="c0"
+  display="flex"
+>
+  <div
+    class="c1"
+  >
+    Column 1
+  </div>
+  <div
+    class="c1"
+  >
+    Column 2
+  </div>
+  <div
+    class="c1"
+  >
+    Column 3
+  </div>
+</div>
+`;