Add progress indicators

src/components/stepnavigation/stepnavigation.jsx

@@ -1,44 +1,28 @@
 var classNames = require('classnames');
 var React = require('react');
 
-module.exports = {
-    StepNavigationIndicator: React.createClass({
-        type: 'StepNavigationIndicator',
-        propTypes: {
-            selected: React.PropTypes.bool,
-            active: React.PropTypes.bool
-        },
-        getDefaultProps: function () {
-            return {
-                selected: false,
-                active: false
-            };
-        },
-        render: function () {
-            var classes = classNames(
-                'indicator',
-                {
-                    'selected': this.props.selected,
-                    'active': this.props.selected
-                },
-                this.props.className
-            );
-            return (
-                <li {... this.props} className={classes} />
-            );
-        }
-    }),
-    StepNavigation: React.createClass({
-        type: 'Navigation',
-        render: function () {
-            var classes = classNames(
-                'step-navigation',
-                this.props.className);
-            return (
-                <ul className={classes}>
-                    {this.props.children}
-                </ul>
-            );
-        }
-    })
-};
+require('./stepnavigation.scss');
+
+var StepNavigation = React.createClass({
+    type: 'Navigation',
+    render: function () {
+        return (
+            <ul className={classNames('step-navigation', this.props.className)}>
+                {Array.apply(null, Array(this.props.steps)).map(function (v, step) {
+                    return (
+                        <li key={step}
+                            className={classNames({
+                                active: step < this.props.active,
+                                selected: step === this.props.active
+                            })}
+                        >
+                            <div className="indicator" />
+                        </li>
+                    );
+                }.bind(this))}
+            </ul>
+        );
+    }
+});
+
+module.exports = StepNavigation;

src/components/stepnavigation/stepnavigation.scss

@@ -0,0 +1,31 @@
+@import "../../colors";
+@import "../../frameless";
+
+.step-navigation {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+        display: inline-block;
+        border-radius: 8px / $em;
+        padding: 4px / $em;
+
+        .indicator {
+            border-radius: 4px / $em;
+            background-color: $ui-white;
+            width: 8px / $em;
+            height: 8px / $em;
+        }
+
+        &.active {
+            .indicator {
+                background-color: $ui-aqua;
+            }
+        }
+
+        &.selected {
+            border: 1px solid $ui-white;
+        }
+    }
+}

src/views/teacherregistration/steps.jsx

@@ -17,6 +17,7 @@ var RadioGroup = require('../../components/forms/radio-group.jsx');
 var Select = require('../../components/forms/select.jsx');
 var Slide = require('../../components/slide/slide.jsx');
 var Spinner = require('../../components/spinner/spinner.jsx');
+var StepNavigation = require('../../components/stepnavigation/stepnavigation.jsx');
 var TextArea = require('../../components/forms/textarea.jsx');
 
 var DEFAULT_COUNTRY = 'us';
@@ -124,6 +125,7 @@ module.exports = {
                             </Button>
                         </Form>
                     </Card>
+                    <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
                 </Slide>
             );
         }
@@ -200,6 +202,7 @@ module.exports = {
                             </Button>
                         </Form>
                     </Card>
+                    <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
                 </Slide>
             );
         }
@@ -230,6 +233,7 @@ module.exports = {
                             </Button>
                         </Form>
                     </Card>
+                    <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
                 </Slide>
             );
         }
@@ -268,6 +272,7 @@ module.exports = {
                             </Button>
                         </Form>
                     </Card>
+                    <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
                 </Slide>
             );
         }
@@ -341,6 +346,7 @@ module.exports = {
                             </Button>
                         </Form>
                     </Card>
+                    <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
                 </Slide>
             );
         }
@@ -451,6 +457,7 @@ module.exports = {
                             </Button>
                         </Form>
                     </Card>
+                    <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
                 </Slide>
             );
         }
@@ -476,6 +483,7 @@ module.exports = {
                             </Button>
                         </Form>
                     </Card>
+                    <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
                 </Slide>
             );
         }
@@ -512,6 +520,7 @@ module.exports = {
                             </Button>
                         </Form>
                     </Card>
+                    <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
                 </Slide>
             );
         }

src/views/teacherregistration/teacherregistration.scss

@@ -26,6 +26,10 @@
         width: 100%;
     }
 
+    .step-navigation {
+        text-align: center;
+    }
+
     .demographics-checkbox-is-robot {
         display: none;
     }