Implement SpaceBox MDX component

It allows to adjust layout in MDX documents with dynamic margin and
padding values.

GH-132

src/components/atoms/core/mdx-elements/SpaceBox.jsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+
+/**
+ * An container component that allows to add space around the wrapped components.
+ * The prefixed props `top`, `right`, `bottom` and `left` are mapped to their corresponding CSS `margin` and `padding`
+ * properties.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.11.0
+ */
+const SpaceBox = styled.div`
+  margin: ${({ mBottom, mLeft, mRight, mTop }) => `${mTop}em ${mRight}em ${mBottom}em ${mLeft}em`};
+  padding: ${({ pBottom, pLeft, pRight, pTop }) => `${pTop}em ${pRight}em ${pBottom}em ${pLeft}em`};
+  ${({ centered }) =>
+    centered &&
+    css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    `}
+`;
+
+SpaceBox.propTypes = {
+  mBottom: PropTypes.number,
+  mLeft: PropTypes.number,
+  mRight: PropTypes.number,
+  mTop: PropTypes.number,
+  pBottom: PropTypes.number,
+  pLeft: PropTypes.number,
+  pRight: PropTypes.number,
+  pTop: PropTypes.number
+};
+
+SpaceBox.defaultProps = {
+  mBottom: 0,
+  mLeft: 0,
+  mRight: 0,
+  mTop: 0,
+  pBottom: 0,
+  pLeft: 0,
+  pRight: 0,
+  pTop: 0
+};
+
+export default SpaceBox;