feat(Layout): add full mode

src/components/unstable/Layout/Layout.css

@@ -9,6 +9,10 @@
     "header header"
     "nav body";
 }
+.layout__container--full {
+  height: 100vh;
+  width: 100vw;
+}
 
 .layout__header {
   grid-area: header;

src/components/unstable/Layout/Layout.examples.md

@@ -35,9 +35,9 @@ const logo = require('../../../assets/tripwire-logo.png');
   <Layout.Header>
     <TopNav id='test-top-nav'>
       <TopNav.Content className='dummy-test-classname' align="left">
-        <img src={logo} alt="TripWire Logo" width="75" />
+        <img src={logo} alt="TripWire Logo" width="75" style={{ marginTop: '8px' }} />
       </TopNav.Content>
-      <TopNav.Content align="right">
+      <TopNav.Content link>
         Audrey
       {/* dropdown or logout link goes here */}
       </TopNav.Content>

src/components/unstable/Layout/Layout.jsx

@@ -1,9 +1,29 @@
 import './Layout.css'
 import { generic } from '../../../util/component-factory'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
-const Layout = generic({ name: 'Layout', className: 'layout__container' })
+export default function Layout (props) {
+  const { className, children, full, ...rest } = props
+  const classes = classnames(
+    'layout__container',
+    full ? 'layout__container--full' : null,
+    className
+  )
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  )
+}
+Layout.displayName = 'Layout'
+Layout.propTypes = {
+  /**
+   * size the layout to the viewpost (100vh, 100vw)
+   */
+  full: PropTypes.bool
+}
 Layout.Header = generic({ name: 'LayoutHeader', className: 'layout__header' })
 Layout.Nav = generic({ name: 'LayoutNav', className: 'layout__nav' })
 Layout.Body = generic({ name: 'LayoutBody', className: 'layout__body' })
-
-export default Layout