LayoutSingleColumn added

src/components/LayoutSingleColumn/LayoutSingleColumn.css

@@ -0,0 +1,18 @@
+@import '../../marketplace.css';
+
+.root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.layoutWrapperMain {
+  /* Use all available space parent element (aka root) can give */
+  flex-grow: 1;
+
+  /* Expand to the full remaining width of the viewport */
+  display: flex;
+  flex-direction: column;
+  width: 100%
+
+}

src/components/LayoutSingleColumn/LayoutSingleColumn.js

@@ -0,0 +1,73 @@
+/**
+ * LayoutSingleColumn needs to have 3-4 children:
+ * LayoutWrapperTopbar, LayoutWrapperSideNav, LayoutWrapperMain, and possibly LayoutWrapperFooter.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { LayoutWrapperTopbar, LayoutWrapperMain, LayoutWrapperFooter } from '../../components';
+
+import css from './LayoutSingleColumn.css';
+
+const prepareChildren = children => {
+  const childrenCount = React.Children.count(children);
+  if (!(childrenCount === 3 || childrenCount === 4)) {
+    throw new Error(
+      `Menu needs to have 2 - 3 children:
+      LayoutWrapperTopbar, and LayoutWrapperMain,
+      and optionally LayoutWrapperFooter.`
+    );
+  }
+
+  const childrenMap = {};
+
+  React.Children.forEach(children, child => {
+    if (child.type === LayoutWrapperTopbar) {
+      childrenMap.layoutWrapperTopbar = child;
+    } else if (child.type === LayoutWrapperMain) {
+      // LayoutWrapperMain needs different rootClassName
+      const childWithAddedCSS = React.cloneElement(child, {
+        rootClassName: css.layoutWrapperMain,
+      });
+      childrenMap.layoutWrapperMain = childWithAddedCSS;
+    } else if (child.type === LayoutWrapperFooter) {
+      childrenMap.layoutWrapperFooter = child;
+    } else {
+      throw new Error(
+        `LayoutSingleColumn has an unknown child.
+      Only LayoutWrapperTopbar, LayoutWrapperMain, LayoutWrapperFooter are allowed.`
+      );
+    }
+  });
+  return childrenMap;
+};
+
+const LayoutSingleColumn = props => {
+  const { className, rootClassName, children } = props;
+  const preparedChildren = prepareChildren(children);
+  const classes = classNames(rootClassName || css.root, className);
+  const maybeFooter = preparedChildren.layoutWrapperFooter || null;
+
+  return (
+    <div className={classes}>
+      {preparedChildren.layoutWrapperTopbar}
+      {preparedChildren.layoutWrapperMain}
+      {maybeFooter}
+    </div>
+  );
+};
+
+LayoutSingleColumn.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+const { node, string } = PropTypes;
+
+LayoutSingleColumn.propTypes = {
+  children: node.isRequired,
+  className: string,
+  rootClassName: string,
+};
+
+export default LayoutSingleColumn;

src/components/index.js

@@ -42,6 +42,7 @@ export { default as IconSpinner } from './IconSpinner/IconSpinner';
 export { default as ImageCarousel } from './ImageCarousel/ImageCarousel';
 export { default as ImageFromFile } from './ImageFromFile/ImageFromFile';
 export { default as LayoutSideNavigation } from './LayoutSideNavigation/LayoutSideNavigation';
+export { default as LayoutSingleColumn } from './LayoutSingleColumn/LayoutSingleColumn';
 export { default as LayoutWrapperTopbar } from './LayoutWrapperTopbar/LayoutWrapperTopbar';
 export { default as LayoutWrapperMain } from './LayoutWrapperMain/LayoutWrapperMain';
 export { default as LayoutWrapperSideNav } from './LayoutWrapperSideNav/LayoutWrapperSideNav';