docs(layouts): add layout examples (#1039)

* Added layouts to sidebar menu

* Added Layouts Example Component

* Added starter cards

* Added pages cards

* Cleaned up classnames

* Make cards stackable

* Removed unused folder

* Added new layouts component

* Added layouts examples and Login Form component

* Removed examples index file

* Modified login form component

* Added link to Login component

* Modified layouts folder

* Modify login form component

* Resolved lint errors

* Resolved lint errors

* Modified layout structure

* Removed unused layouts in examples

* docs(layouts): add route support

* docs(layouts): stub all layouts

* Added menu to layout

* Added wireframe images

* Modified menu items

* Added footer inverted segmentnt

* Modified inverted menu items

* Modified image src to semantic ui react

* Modified footer segment

* Fix lint errors

* Switch to camel case

* Added grid layout frameworks

* Modified style file

* Update grid layout

* Update grid layout

* Added internally celled and vertically celled grids

* Updated grid layout

* Move styling to layout style

* Added layout style

* Modified styling layout

* docs(layouts): update grid layout

* docs(layouts): fixed lint

* docs(layout) remove unused attribute

* docs(layouts): remove duplicate props

* update reponsive layout

* docs(layouts): update responsive layout

* docs(layouts): remove html class and update responsive layout

* docs(layouts): add styling for responsive layout

* docs(layouts): finish up layout and add styling

* layouts(examples): re-add layouts menu item

* layouts(examples): add missing component

* docs(Layouts): style fixes, add images

docs(Layouts): fix after rebase

* docs(Layouts): fix after rebase

* docs(Layouts): add routes, fix lint issues

* docs(Layouts): finish LoginLayout

* chore(package): add css and style loader for examples

* docs(Layout): fix route components

* docs(Layout): fix css

* docs(Layout): wip on ThemingLayout

* docs(layout): remove css and style loaders

* docs(layout): finish ResponsiveLayout

* docs(layout): fix URLs

* docs(Layout): attached content start

* docs(Layout): attached content update

* docs(Layout): complete attached content layout

* docs(layout): finish GridLayout example

* docs(Layout): bootstrap migration layout start

* docs(Layout): bootstrap migration layout update

* docs(Layout): bootstrap migration layout complete

* docs(Layout): homepage layout complete without styling

* docs(Layout): sticky layout complete without styling

* docs(Layout): make menu fixed to top in fixed menu layout

* docs(layout): finish AttachedContent example

* docs(layout): finish BootstrapMigration example

* docs(Layouts): Fix lint errors in homepage

* docs(Layout): fix lint errors in sticky layout

* docs(layout): finish FixedMenu example

* docs(layout): finish Homepage example

* style(Layouts): finish StickLayout

* feat(Layouts): add link to source

* feat(Layouts): scroll to top on view change

* refactor(GridLayout): cleanup inline styles

* code

* refactor(Layouts): use consistent import style

* refactor(ThemingLayout): remove comments, fix formatting

docs/app/Components/Layout.js → docs/app/Components/DocsLayout.js

@@ -1,18 +1,21 @@
 import AnchorJS from 'anchor-js'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
 
 import Sidebar from 'docs/app/Components/Sidebar/Sidebar'
 import style from 'docs/app/Style'
 import { scrollToAnchor } from 'docs/app/utils'
+import { getUnhandledProps } from 'src/lib'
 
 const anchors = new AnchorJS({
   icon: '#',
 })
 
-export default class Layout extends Component {
+export default class DocsLayout extends Component {
   static propTypes = {
-    children: PropTypes.node,
+    component: PropTypes.func,
+    render: PropTypes.func,
   }
 
   componentDidMount() {
@@ -43,14 +46,23 @@ export default class Layout extends Component {
     this.pathname = location.pathname
   }
 
-  render() {
+  renderChildren = props => {
+    const { component: Children, render } = this.props
+
+    if (render) return render()
     return (
       <div style={style.container}>
         <Sidebar style={style.menu} />
         <div style={style.main}>
-          {this.props.children}
+          <Children {...props} />
         </div>
       </div>
     )
   }
+
+  render() {
+    const rest = getUnhandledProps(DocsLayout, this.props)
+
+    return <Route {...rest} render={this.renderChildren} />
+  }
 }

docs/app/Components/LayoutsLayout.js

@@ -0,0 +1,80 @@
+import _ from 'lodash'
+import React, { Component, PropTypes } from 'react'
+import { NavLink, Route } from 'react-router-dom'
+
+import { Button } from 'src'
+import { getUnhandledProps } from 'src/lib'
+import { repoURL } from 'docs/app/utils'
+
+const docsButtonStyle = {
+  position: 'fixed',
+  margin: '2em',
+  bottom: 0,
+  left: 0,
+  animation: 'back-to-docs 1.5s ease-in-out infinite',
+  zIndex: 6,
+}
+
+const style = (
+  <style>{`
+    @keyframes back-to-docs {
+        0% { transform: translateY(0); }
+        50% { transform: translateY(0.35em); }
+        100% { transform: translateY(0); }
+    }
+  `}</style>
+)
+
+export default class LayoutsLayout extends Component {
+  static propTypes = {
+    component: PropTypes.func,
+    render: PropTypes.func,
+    computedMatch: PropTypes.object,
+  }
+
+  componentDidMount() {
+    scrollTo(0, 0)
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    scrollTo(0, 0)
+  }
+
+  renderChildren = props => {
+    const { component: Children, computedMatch, render } = this.props
+
+    if (render) return render()
+
+    const filename = `${_.startCase(computedMatch.params.name).replace(' ', '')}Layout.js`
+
+    return (
+      <div>
+        {style}
+        <Children {...props} />
+        <div style={docsButtonStyle}>
+          <Button
+            as={NavLink}
+            to='/layouts'
+            color='teal'
+            icon='left arrow'
+            content='Layouts'
+          />
+          <Button
+            as={NavLink}
+            to={`${repoURL}/blob/master/docs/app/Layouts/${filename}`}
+            color='secondary'
+            icon='github'
+            content='Source'
+            target='_blank'
+          />
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    const rest = getUnhandledProps(LayoutsLayout, this.props)
+
+    return <Route {...rest} render={this.renderChildren} />
+  }
+}

docs/app/Components/LayoutsRoot.js

@@ -0,0 +1,23 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import * as Layouts from '../Layouts'
+
+export default class LayoutsRoot extends Component {
+  static propTypes = {
+    match: PropTypes.shape({
+      params: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+      }),
+    }),
+  }
+
+  render() {
+    const name = _.get(this, 'props.match.params.name')
+    const layoutName = `${_.startCase(name).replace(/ /g, '')}Layout`
+    const Layout = Layouts[layoutName]
+
+    return Layout ? <Layout /> : null
+  }
+}

docs/app/Components/Sidebar/Sidebar.js

@@ -196,6 +196,9 @@ class Sidebar extends Component {
             <Menu.Item as={NavLink} to='/usage' activeClassName='active'>
               Usage
             </Menu.Item>
+            <Menu.Item as={NavLink} to='/layouts' activeClassName='active'>
+              Layouts
+            </Menu.Item>
             <Menu.Item as='a' href={repoURL}>
               <Icon name='github' /> GitHub
             </Menu.Item>