Move styleguide to actual app

js/lib/buttons.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import _Button from 'react-bootstrap/lib/Button';
+
+export const Button = React.createClass({
+
+    render: function render() {
+        return (
+            <_Button>
+                {this.props.children}
+            </_Button>
+        )
+    }
+
+});
+
+
+export const SecondaryButton = React.createClass({
+
+    render: function render() {
+        return (
+            <_Button className='btn-secondary'>
+                {this.props.children}
+            </_Button>
+        )
+    }
+
+});

js/routes.js

@@ -31,6 +31,18 @@ let Redirect = Router.Redirect;
 let baseUrl = AppConstants.baseUrl;
 
 
+function getDebugRoutes() {
+    let StyleGuideContainer = require('./styleguide/container.js');
+    if (window.DEBUG) {
+        return (
+            <Route name="styleguide" path="styleguide" handler={StyleGuideContainer} headerTitle="Style Guide" />
+        );
+    } else {
+        return null;
+    }
+}
+
+
 const COMMON_ROUTES = (
     <Route name="app" path={baseUrl} handler={App}>
         <Redirect from={baseUrl} to="login" />
@@ -46,6 +58,7 @@ const COMMON_ROUTES = (
         <Route name="settings" path="settings" handler={SettingsContainer} />
         <Route name="coa_verify" path="verify" handler={CoaVerifyContainer} />
         <Route name="prizes" path="prizes" handler={PrizesDashboard} />
+        {getDebugRoutes()}
     </Route>
 );
 

js/styleguide/components/buttons.js

@@ -0,0 +1,47 @@
+'use strict';
+
+import React from 'react';
+import { Button, SecondaryButton } from '../../lib/buttons';
+import Panel from 'react-bootstrap/lib/Panel';
+
+
+let Buttons = React.createClass({
+
+    render() {
+        return (
+            <div>
+                <h2>Button</h2>
+                    <p><code>import &#123; Button &#125; from './js/lib/buttons';</code></p>
+                    <Panel header='example'>
+                        <div>
+                            <p>This is a paragraph with
+                                <Button>
+                                    {"a button"}
+                                </Button>
+                                that should be displayed inline
+                            </p>
+                        </div>
+
+                        <div>
+                            <p>This is a form with a large submit button
+                                <form className="ascribe-form-bordered">
+                                    <Button>
+                                        {"an inline button"}
+                                    </Button>
+                                </form>
+                            </p>
+                        </div>
+                    </Panel>
+
+                <div>
+                    <SecondaryButton>
+                        {"<SecondaryButton>"}
+                    </SecondaryButton>
+                </div>
+            </div>
+        );
+    }
+
+});
+
+export default Buttons;

js/styleguide/container.js

@@ -0,0 +1,20 @@
+'use strict';
+
+import React from 'react';
+import Buttons from './components/buttons';
+
+
+let StyleGuideContainer = React.createClass({
+
+    render() {
+        return (
+            <div>
+                <Buttons />
+            </div>
+        );
+    }
+});
+
+
+
+export default StyleGuideContainer;

styleguide/app.js

@@ -1,14 +0,0 @@
-'use strict';
-
-import React from 'react';
-import Buttons from './components/buttons';
-import Panel from 'react-bootstrap/lib/Panel';
-
-
-React.render(
-    <div className="container">
-        <h3>Buttons</h3>
-        <Buttons />
-    </div>,
-    document.getElementById('main')
-);

styleguide/components/buttons.js

@@ -1,30 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-let Buttons = React.createClass({
-    render() {
-        let classes = [
-            'btn btn-default',
-            'btn ascribe-btn',
-            'btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner',
-            'btn btn-danger btn-delete btn-sm'
-        ];
-
-        return (
-            <div>
-            {classes.map((c) => {
-                return (
-                    <span className={c}>
-                        {c}
-                    </span>
-                );
-                })
-            }
-            </div>
-        );
-    }
-
-});
-
-export default Buttons;