Add Layout Documentation

docs/index.html

@@ -18,9 +18,9 @@
   <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js'></script>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js'></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
-  <script>!function(e){function __webpack_require__(r){if(_[r])return _[r].exports;var t=_[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,__webpack_require__),t.l=!0,t.exports}var r=window.webpackJsonp;window.webpackJsonp=function(_,n,o){for(var i,c,u,a=0,p=[];a<_.length;a++)c=_[a],t[c]&&p.push(t[c][0]),t[c]=0;for(i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);for(r&&r(_,n,o);p.length;)p.shift()();if(o)for(a=0;a<o.length;a++)u=__webpack_require__(__webpack_require__.s=o[a]);return u};var _={},t={2:0};__webpack_require__.e=function(e){function onScriptComplete(){n.onerror=n.onload=null,clearTimeout(o);var r=t[e];0!==r&&(r&&r[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}if(0===t[e])return Promise.resolve();if(t[e])return t[e][2];var r=new Promise(function(r,_){t[e]=[r,_]});t[e][2]=r;var _=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.charset="utf-8",n.async=!0,n.timeout=12e4,__webpack_require__.nc&&n.setAttribute("nonce",__webpack_require__.nc),n.src=__webpack_require__.p+"dist/"+e+".7088b611.js";var o=setTimeout(onScriptComplete,12e4);return n.onerror=n.onload=onScriptComplete,_.appendChild(n),r},__webpack_require__.m=e,__webpack_require__.c=_,__webpack_require__.i=function(e){return e},__webpack_require__.d=function(e,r,_){__webpack_require__.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:_})},__webpack_require__.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(r,"a",r),r},__webpack_require__.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},__webpack_require__.p="",__webpack_require__.oe=function(e){throw console.error(e),e}}([]);
+  <script>!function(e){function __webpack_require__(r){if(_[r])return _[r].exports;var t=_[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,__webpack_require__),t.l=!0,t.exports}var r=window.webpackJsonp;window.webpackJsonp=function(_,n,o){for(var i,c,u,a=0,p=[];a<_.length;a++)c=_[a],t[c]&&p.push(t[c][0]),t[c]=0;for(i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);for(r&&r(_,n,o);p.length;)p.shift()();if(o)for(a=0;a<o.length;a++)u=__webpack_require__(__webpack_require__.s=o[a]);return u};var _={},t={2:0};__webpack_require__.e=function(e){function onScriptComplete(){n.onerror=n.onload=null,clearTimeout(o);var r=t[e];0!==r&&(r&&r[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}if(0===t[e])return Promise.resolve();if(t[e])return t[e][2];var r=new Promise(function(r,_){t[e]=[r,_]});t[e][2]=r;var _=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.charset="utf-8",n.async=!0,n.timeout=12e4,__webpack_require__.nc&&n.setAttribute("nonce",__webpack_require__.nc),n.src=__webpack_require__.p+"dist/"+e+".57babb33.js";var o=setTimeout(onScriptComplete,12e4);return n.onerror=n.onload=onScriptComplete,_.appendChild(n),r},__webpack_require__.m=e,__webpack_require__.c=_,__webpack_require__.i=function(e){return e},__webpack_require__.d=function(e,r,_){__webpack_require__.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:_})},__webpack_require__.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(r,"a",r),r},__webpack_require__.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},__webpack_require__.p="",__webpack_require__.oe=function(e){throw console.error(e),e}}([]);
 </script>
   <script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
-<script type="text/javascript" src="dist/vendor.7088b611.js" defer></script><script type="text/javascript" src="dist/main.7088b611.js" defer></script></body>
+<script type="text/javascript" src="dist/vendor.57babb33.js" defer></script><script type="text/javascript" src="dist/main.57babb33.js" defer></script></body>
 
 </html>

docs/src/Scenes/Documentation/Components/Scenes/Modal.tsx

@@ -47,22 +47,22 @@ const ModalDocs = (props) => (
 
         <hr />
 
-        <Subtitle isSize={5}>ModalCardHeader</Subtitle>
+        <Title>ModalCardHeader</Title>
         <p>{noModifiers}</p>
 
         <hr />
 
-        <Subtitle isSize={5}>ModalCardTitle</Subtitle>
+        <Title>ModalCardTitle</Title>
         <p>{noModifiers}</p>
 
         <hr />
 
-        <Subtitle isSize={5}>ModalCardBody</Subtitle>
+        <Title>ModalCardBody</Title>
         <p>{noModifiers}</p>
 
         <hr />
 
-        <Subtitle isSize={5}>ModalCardFooter</Subtitle>
+        <Title>ModalCardFooter</Title>
         <p>{noModifiers}</p>
     </Container>
 )

docs/src/Scenes/Documentation/Documentation.tsx

@@ -13,6 +13,7 @@ import { Overview, OverviewMenu } from './Overview/Overview';
 import { Grid, GridMenu } from './Grid/Grid';
 import { Elements, ElementsMenu } from './Elements/Elements';
 import { Components, ComponentsMenu } from './Components/Components';
+import { Layout, LayoutMenu } from './Layout/Layout';
 
 const pages: any = [
     {
@@ -42,8 +43,8 @@ const pages: any = [
     {
         title: 'Layout',
         to: '/layout',
-        // component: Layout,
-        // menu: LayoutMenu,
+        component: Layout,
+        menu: LayoutMenu,
     },
 ];
 
@@ -99,9 +100,6 @@ const Documentation = ({ match }) => (
                 {pages.map((page, key) => (
                     <Route path={`${match.url}${page.to}`} component={page.component} />
                 ))}
-                <Route render={
-                    props => <Container><Title hasTextAlign='centered' isSize={1}>Bloomer is production ready, but Docs are in progress.</Title></Container>
-                } />
             </Switch>
         </Section>
     </div>

docs/src/Scenes/Documentation/Elements/Scenes/Form.tsx

@@ -118,12 +118,12 @@ const FormDocs = (props) => (
 
         <hr />
 
-        <Subtitle isSize={5}>FieldBody</Subtitle>
+        <Title>FieldBody</Title>
         <p>{noModifiers}</p>
 
         <hr />
 
-        <Subtitle isSize={5}>FieldLabel</Subtitle>
+        <Title>FieldLabel</Title>
         <TableDocs rows={FieldLabelRows} />
     </Container>
 )

docs/src/Scenes/Documentation/Layout/Layout.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import NavDocs from './../../../Components/NavDocs';
+import NavRoutes from './../../../Components/NavRoutes';
+
+import Container from './Scenes/Container';
+import Hero from './Scenes/Hero';
+import Section from './Scenes/Section';
+import Footer from './Scenes/Footer';
+
+const pages = [
+    {
+        title: 'Container',
+        to: '/container',
+        component: Container,
+    },
+    {
+        title: 'Hero',
+        to: '/hero',
+        component: Hero,
+    },
+    {
+        title: 'Section',
+        to: '/section',
+        component: Section,
+    },
+    {
+        title: 'Footer',
+        to: '/footer',
+        component: Footer,
+    },
+];
+
+export const Layout = props => <NavRoutes {...props} pages={pages} />
+
+export const LayoutMenu = (props) => <NavDocs {...props} pages={pages} />

docs/src/Scenes/Documentation/Layout/Scenes/Container.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as Highlight from 'react-highlight';
+
+import { Docs } from './../../../../utils';
+import TableDocs from './../../../../Components/TableDocs';
+
+import { Container, Title } from './../../../../../../src';
+
+const ContainerRows: Docs.Row[] = [
+    {
+        prop: 'isFluid',
+        type: 'bool',
+    },
+]
+
+const ContainerDocs = (props) => (
+    <Container>
+        <Title>Container</Title>
+        <TableDocs rows={ContainerRows} />
+    </Container>
+)
+
+export default ContainerDocs;

docs/src/Scenes/Documentation/Layout/Scenes/Footer.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import * as Highlight from 'react-highlight';
+import { Link } from 'react-router-dom'
 
-import { Container } from './../../../../../../src/layout';
-import { Title, Subtitle, Table } from './../../../../../../src';
+import { noModifiers } from './../../Overview/Scenes/Helpers';
+import { Container, Title, Subtitle } from './../../../../../../src';
 
-const Footer = (props) => (
+const FooterDocs = (props) => (
     <Container>
-        Footer
+        <Title isSpaced>Footer</Title>
+        <Subtitle>{noModifiers}</Subtitle>
     </Container>
 )
 
-export default Footer;
+export default FooterDocs;

docs/src/Scenes/Documentation/Layout/Scenes/Hero.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import * as Highlight from 'react-highlight';
+
+import { Docs } from './../../../../utils';
+import TableDocs from './../../../../Components/TableDocs';
+
+import { isColor, isSize, noModifiers } from './../../Overview/Scenes/Helpers';
+import { Container, Title, Subtitle } from './../../../../../../src';
+
+const HeroRows: Docs.Row[] = [
+    isColor,
+    isSize,
+    {
+        prop: 'isBold',
+        type: 'bool',
+    },
+    {
+        prop: 'isFullHeight',
+        type: 'bool',
+    },
+]
+
+const HeroVideoRows: Docs.Row[] = [
+    {
+        prop: 'isTransparent',
+        type: 'bool',
+    },
+]
+
+const ContainerDocs = (props) => (
+    <Container>
+        <Title>Hero</Title>
+        <TableDocs rows={HeroRows} />
+
+        <hr />
+
+        <Title>HeroHeader</Title>
+        <Subtitle>{noModifiers}</Subtitle>
+
+        <hr/>
+
+        <Title>HeroVideo</Title>
+        <TableDocs rows={HeroVideoRows} />
+
+        <hr />
+
+        <Title>HeroBody</Title>
+        <Subtitle>{noModifiers}</Subtitle>
+
+        <hr />
+
+        <Title>HeroFooter</Title>
+        <Subtitle>{noModifiers}</Subtitle>
+    </Container>
+)
+
+export default ContainerDocs;

docs/src/Scenes/Documentation/Layout/Scenes/Section.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as Highlight from 'react-highlight';
+
+import { Docs } from './../../../../utils';
+import TableDocs from './../../../../Components/TableDocs';
+
+import { isColor, isSize, noModifiers } from './../../Overview/Scenes/Helpers';
+import { Container, Title, Subtitle } from './../../../../../../src';
+
+const SectionRows: Docs.Row[] = [
+    {
+        prop: 'isSize',
+        type: 'string',
+        description: <td><code>medium</code> | <code>large</code></td>,
+    },
+]
+
+const ContainerDocs = (props) => (
+    <Container>
+        <Title>Section</Title>
+        <TableDocs rows={SectionRows} />
+    </Container>
+)
+
+export default ContainerDocs;

docs/src/Scenes/Home/Home.tsx

@@ -16,6 +16,9 @@ const Home = () => (
                 <div>
                     <Button href='#/documentation' isSize='medium' isOutlined isColor='light'>Get Started</Button>
                 </div>
+                <div>
+                    <img src="https://camo.githubusercontent.com/33d7b60d09dc9b7a79c969b225755a177b27ed80/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f626c6f6f6d65722e7376673f7374796c653d666c61742d737175617265" alt="NPM Version" data-canonical-src="https://img.shields.io/npm/v/bloomer.svg?style=flat-square" style={{ maxWidth: '100%' }} />
+                </div>
             </Container>
         </HeroBody>
     </Hero>