Merge commit '436ffab' into AD-907-bootstrap-styleguide

Conflicts:
	js/routes.js
	sass/main.scss

gulpfile.js

@@ -77,6 +77,10 @@ gulp.task('serve', ['browser-sync', 'run-server', 'sass:build', 'sass:watch', 'c
     opn('http://www.localhost.com:3000');
 });
 
+gulp.task('styleguide', ['browser-sync', 'run-server', 'sass:build', 'sass:watch', 'copy'], function() {
+    bundle(true, './styleguide/app.js');
+});
+
 gulp.task('jest', function(done) {
     jest.runCLI({ config : config.jestOptions }, ".", function() {
         done();
@@ -153,11 +157,13 @@ gulp.task('lint:watch', function () {
     gulp.watch('js/**/*.js', ['lint']);
 });
 
-function bundle(watch) {
-    var bro;
+function bundle(watch, sourceFile, destDir) {
+    var bro,
+        sourceFile = sourceFile || './js/app.js',
+        destDir = destDir || './build/js';
 
     if (watch) {
-        bro = watchify(browserify('./js/app.js',
+        bro = watchify(browserify(sourceFile,
             // Assigning debug to have sourcemaps
             _.assign(watchify.args, {
                 debug: true
@@ -166,7 +172,7 @@ function bundle(watch) {
             rebundle(bro, true);
         });
     } else {
-        bro = browserify('./js/app.js', {
+        bro = browserify(sourceFile, {
             debug: true
         });
     }
@@ -192,7 +198,7 @@ function bundle(watch) {
                 mangle: true
             })))
             .on('error', notify.onError('Error: <%= error.message %>'))
-            .pipe(gulp.dest('./build/js'))
+            .pipe(gulp.dest(destDir))
             .on('error', notify.onError('Error: <%= error.message %>'))
             .pipe(browserSync.stream())
             .on('error', notify.onError('Error: <%= error.message %>'));

js/lib/buttons.js

@@ -0,0 +1,53 @@
+/**
+ *
+ */
+
+'use strict';
+
+import React from 'react';
+import _Button from 'react-bootstrap/lib/Button';
+import classnames from 'classnames';
+
+
+const DISABLED_STATUSES = ['loading', 'disabled'];
+
+
+function ButtonFactory(btnClassName) {
+
+    let GenericButton = React.createClass({
+        propTypes: {
+            status: React.PropTypes.oneOf(['loading', 'disabled']),
+            children: React.PropTypes.oneOfType([React.PropTypes.arrayOf(React.PropTypes.element),
+                                                 React.PropTypes.element])
+        },
+
+        getInitialState: function() {
+            return {
+                status: this.props.status
+            };
+        },
+
+        render: function render() {
+            let disabled = DISABLED_STATUSES.indexOf(this.state.status) !== -1;
+            let className = '';
+
+            if (this.state.status !== 'disabled') {
+                className = this.state.status;
+            }
+
+            return (
+                <_Button bsStyle={btnClassName} className={classnames(className)} disabled={disabled}>
+                    {this.props.children}
+                </_Button>
+            );
+        }
+
+    });
+
+    return GenericButton;
+}
+
+
+export const Button = ButtonFactory('btn-primary');
+export const SecondaryButton = ButtonFactory('btn-secondary');
+export const DangerButton = ButtonFactory('btn-danger');

js/routes.js

@@ -30,6 +30,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" />

js/styleguide/components/buttons.js

@@ -0,0 +1,78 @@
+'use strict';
+
+import React from 'react';
+import { Button, SecondaryButton, DangerButton } 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, SecondaryButton, DangerButton &#125; from './js/lib/buttons';</code></p>
+                    <Panel header='example'>
+                        <h4>In the wild</h4>
+                        <div>
+                            <p>This is a paragraph with <Button>{"a button"}</Button> that should be displayed inline</p>
+                        </div>
+
+                        <h4>Different states</h4>
+                        <div>
+                            <Button>button</Button>
+                            <Button status="disabled">disabled</Button>
+                            <Button status="loading">loading</Button>
+                        </div>
+
+                        <h4>In a form</h4>
+                        <div>
+                            <p>This is a form with a large submit button
+                                <form className="ascribe-form-bordered">
+                                    <div className="footer">
+                                        <Button>
+                                            Submit nao
+                                        </Button>
+                                    </div>
+                                </form>
+                            </p>
+                        </div>
+
+                        <h4>In a form with multiple buttons</h4>
+                        <div>
+                            <p>This is a form with many buttons
+                                <form className="ascribe-form-bordered">
+                                    <div className="footer">
+                                        <Button>
+                                            Submit nao
+                                        </Button>
+
+                                        <Button>
+                                            Submit later
+                                        </Button>
+
+                                        <SecondaryButton>
+                                            Cancel
+                                        </SecondaryButton>
+
+                                        <DangerButton>
+                                            Delete
+                                        </DangerButton>
+                                    </div>
+                                </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;

sass/ascribe_custom_styles.scss

@@ -0,0 +1,77 @@
+$ascribe-brand-color: #02b6a3;
+
+body {
+    background-color: #fdfdfd;
+}
+
+.btn-primary {
+    color: white;
+    background-color: $ascribe-brand-color;
+    border-color: $ascribe-brand-color;
+}
+
+.btn-primary:active:hover,
+.btn-primary:active:focus {
+        background-color: darken($ascribe-brand-color, 20%);
+        border-color: darken($ascribe-brand-color, 20%);
+}
+
+.btn-primary[disabled],
+.btn-primary[disabled]:hover,
+.btn-primary[disabled]:focus,
+.btn-primary[disabled]:active {
+    background-color: lighten($ascribe-brand-color, 10%);
+    border-color: lighten($ascribe-brand-color, 10%);
+}
+
+/*
+.ascribe-piece-list-toolbar-filter-widget {
+    button {
+        color: $ascribe-brand-color;
+        background-color: transparent;
+        border-color: transparent;
+        &:hover, &:active {
+            color: white;
+            background-color: $ascribe-brand-color;
+            border-color: $ascribe-brand-color;
+        }
+    }
+}
+
+.navbar-default {
+    background-color: white;
+    border-color: $ascribe-color-borders;
+}
+
+.navbar-default .navbar-nav > .active > {
+    a, a:hover, a:focus {
+        background-color: transparent;
+        color: $ascribe-brand-color;
+        border-bottom: 1px solid $ascribe-brand-color;
+    }
+}
+
+.ascribe-settings-wrapper {
+    background-color: white;
+    &:hover{
+        border-left-color: rgba($ascribe-brand-color, .4);
+    }
+    &:last-of-type {
+        border-bottom-color: rgba(0, 0, 0, .05);
+    }
+}
+
+.ascribe-settings-wrapper.is-focused {
+    background-color: rgba($ascribe-brand-color, .05);
+    border-left-color: rgba($ascribe-brand-color, 1);
+}
+
+.ascribe-settings-property-collapsible-toggle input[type=checkbox]:checked + .checkbox:before {
+    color: $ascribe-brand-color;
+}
+
+#intercom-container .intercom-launcher-button {
+    background-color: $ascribe-brand-color !important;
+    border-color: $ascribe-brand-color !important;
+}
+*/

sass/ascribe_login.scss

@@ -49,7 +49,6 @@ $break-small: 764px;
     }
 }
 
-
 .ascribe-login-wrapper {
     margin: 0 auto;
     max-width: 600px;

sass/lib/buttons.scss

@@ -0,0 +1,56 @@
+/**
+ * Styles for the buttons
+ *
+ * The style of a button is context-dependent. This means that if the button
+ * is placed in a form, for example, and is the only child, it will be displayed
+ * with 100% width. If the button is together with other buttons, it will
+ * be displayed with auto width and pushed on the right.
+ *
+ */
+
+@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons';
+
+
+// Buttons that are one next to the other will have 1px margin on the left
+.btn + .btn {
+    margin-left: 1px;
+}
+
+// Buttons in the footer of a form are aligned on the right
+form .footer {
+    text-align: right;
+
+    // A single button in the footer of a form will take all the space available
+    > .btn:only-child {
+        width: 100%;
+    }
+}
+
+.btn.loading {
+    background-image: url('//s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    // force transparency so we don't need to go crazy with all the states of the button.
+    color: rgba(0, 0, 0, 0) !important;
+}
+
+/**
+ * Colors
+ */
+
+.btn-primary {
+    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+}
+
+.btn-secondary {
+    @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
+}
+
+.btn-danger {
+    @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+    border-color: transparent;
+    background-color: transparent;
+    color: $btn-secondary-color;
+}

sass/lib/defaults.scss

@@ -0,0 +1,11 @@
+$btn-primary-bg: #02b6a3;
+$btn-primary-color: #fff;
+$btn-primary-border: $btn-primary-bg;
+
+$btn-secondary-bg: #ddd;
+$btn-secondary-color: #666;
+$btn-secondary-border: $btn-secondary-bg;
+
+$btn-danger-bg: #ec4742;
+$btn-danger-color: #fff;
+$btn-danger-border: $btn-danger-bg;

sass/lib/index.scss

@@ -0,0 +1,2 @@
+@import 'defaults';
+@import 'buttons';

sass/main.scss

@@ -8,10 +8,11 @@ $BASE_URL: '<%= BASE_URL %>';
 @import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
 @import '../node_modules/react-star-rating/dist/css/react-star-rating.min';
 @import '../node_modules/react-datepicker/dist/react-datepicker';
+@import 'lib/index';
 @import 'glyphicons-social';
 @import 'ascribe_theme';
-@import './ascribe-fonts/style';
-@import './ascribe-fonts/ascribe-fonts';
+@import 'ascribe-fonts/style';
+@import 'ascribe-fonts/ascribe-fonts';
 @import 'ascribe_login';
 @import 'ascribe_table';
 @import 'ascribe_accordion_list';
@@ -238,18 +239,17 @@ hr {
     }
 }
 .btn-ascribe {
+    background-color: #fff;
     border: 1px solid #444;
     border-radius: 0 !important;
+    color: #222 !important;
     font-family: sans-serif !important;
     line-height: 2em;
     margin-left: 0 !important;
-    font-family: sans-serif !important;
-    border-radius: 0 !important;
-    color: #222 !important;
 }
 
-.btn-ascribe:active, .btn-ascribe:hover {
-    color: #FFF !important;
+.btn-ascribe:active,
+.btn-ascribe:hover {
     background-color: #444;
 }