Add LayoutWrapper components

src/components/LayoutWrapperFooter/LayoutWrapperFooter.css

@@ -0,0 +1,4 @@
+.root {
+  width: 100%;
+  position: relative;
+}

src/components/LayoutWrapperFooter/LayoutWrapperFooter.js

@@ -0,0 +1,30 @@
+/**
+ * This is a wrapper component for different Layouts. Footer content should be added to this wrapper.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import css from './LayoutWrapperFooter.css';
+
+const LayoutWrapperFooter = props => {
+  const { className, rootClassName, children } = props;
+  const classes = classNames(rootClassName || css.root, className);
+
+  return <div className={classes}>{children}</div>;
+};
+
+LayoutWrapperFooter.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+const { node, string } = PropTypes;
+
+LayoutWrapperFooter.propTypes = {
+  children: node.isRequired,
+  className: string,
+  rootClassName: string,
+};
+
+export default LayoutWrapperFooter;

src/components/LayoutWrapperMain/LayoutWrapperMain.css

@@ -0,0 +1,6 @@
+.root {
+  /* Expand to the full remaining width of the viewport */
+  display: flex;
+  flex-direction: column;
+  width: 100%
+}

src/components/LayoutWrapperMain/LayoutWrapperMain.js

@@ -0,0 +1,34 @@
+/**
+ * This is a wrapper component for different Layouts. Main content should be added to this wrapper.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import css from './LayoutWrapperMain.css';
+
+const LayoutWrapperMain = props => {
+  const { className, rootClassName, children } = props;
+  const classes = classNames(rootClassName || css.root, className);
+
+  return (
+    <div className={classes} role="main">
+      {children}
+    </div>
+  );
+};
+
+LayoutWrapperMain.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+const { node, string } = PropTypes;
+
+LayoutWrapperMain.propTypes = {
+  children: node.isRequired,
+  className: string,
+  rootClassName: string,
+};
+
+export default LayoutWrapperMain;

src/components/LayoutWrapperSideNav/LayoutWrapperSideNav.css

@@ -0,0 +1,28 @@
+@import '../../marketplace.css';
+
+.root {
+  /* Layout */
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 0 24px;
+
+  border-top-width: 1px;
+  border-top-color: var(--matterColorNegative);
+  border-top-style: solid;
+  background-color: var(--matterColorLight);
+  box-shadow: var(--boxShadow);
+
+  @media (--viewportLarge) {
+    padding: 113px 0 82px 15vw;
+    flex-direction: column;
+    justify-content: flex-start;
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  @media (--viewportXLarge) {
+    padding-left: 25vw;
+  }
+}

src/components/LayoutWrapperSideNav/LayoutWrapperSideNav.js

@@ -0,0 +1,30 @@
+/**
+ * This is a wrapper component for different Layouts.
+ * Navigational 'aside' content should be added to this wrapper.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import css from './LayoutWrapperSideNav.css';
+
+const LayoutWrapperSideNav = props => {
+  const { className, rootClassName, children } = props;
+  const classes = classNames(rootClassName || css.root, className);
+  return <aside className={classes}>{children}</aside>;
+};
+
+LayoutWrapperSideNav.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+const { node, string } = PropTypes;
+
+LayoutWrapperSideNav.propTypes = {
+  children: node.isRequired,
+  className: string,
+  rootClassName: string,
+};
+
+export default LayoutWrapperSideNav;

src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.css

@@ -0,0 +1,4 @@
+.root {
+  width: 100%;
+  position: relative;
+}

src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.js

@@ -0,0 +1,31 @@
+/**
+ * This is a wrapper component for different Layouts.
+ * Topbar should be added to this wrapper.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import css from './LayoutWrapperTopbar.css';
+
+const LayoutWrapperTopbar = props => {
+  const { className, rootClassName, children } = props;
+  const classes = classNames(rootClassName || css.root, className);
+
+  return <div className={classes}>{children}</div>;
+};
+
+LayoutWrapperTopbar.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+const { node, string } = PropTypes;
+
+LayoutWrapperTopbar.propTypes = {
+  children: node.isRequired,
+  className: string,
+  rootClassName: string,
+};
+
+export default LayoutWrapperTopbar;

src/components/index.js

@@ -47,6 +47,10 @@ export {
   SideNavWrapper,
   TopbarWrapper,
 } from './LayoutSideNavigation/LayoutSideNavigation';
+export { default as LayoutWrapperTopbar } from './LayoutWrapperTopbar/LayoutWrapperTopbar';
+export { default as LayoutWrapperMain } from './LayoutWrapperMain/LayoutWrapperMain';
+export { default as LayoutWrapperSideNav } from './LayoutWrapperSideNav/LayoutWrapperSideNav';
+export { default as LayoutWrapperFooter } from './LayoutWrapperFooter/LayoutWrapperFooter';
 export { default as ListingCard } from './ListingCard/ListingCard';
 export {
   default as LocationAutocompleteInput,