Updating React Components Dependencies

demo.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDom = require 'react-dom'
 Demo = require './src/components/demo'
 {startMathJax} = require './src/helpers/mathjax'
 
@@ -10,7 +11,7 @@ loadApp = ->
   mainDiv = document.createElement('div')
   mainDiv.id = 'react-root-container'
   document.body.appendChild(mainDiv)
-  React.render(<Demo/>, mainDiv)
+  ReactDom.render(<Demo/>, mainDiv)
   true
 
 loadApp() or document.addEventListener('readystatechange', loadApp)

index.cjsx

@@ -13,6 +13,7 @@ SmartOverflow = require './src/components/smart-overflow'
 RefreshButton = require './src/components/buttons/refresh-button'
 AsyncButton = require './src/components/buttons/async-button'
 CloseButton = require './src/components/buttons/close-button'
+ExercisePreview = require './src/components/exercise/preview'
 ExerciseIdentifierLink = require './src/components/exercise/identifier-link'
 ChapterSectionMixin = require './src/components/chapter-section-mixin'
 GetPositionMixin = require './src/components/get-position-mixin'
@@ -44,6 +45,7 @@ module.exports = {
   ResizeListenerMixin,
 
   SpyMode,
+  ExercisePreview,
   ExerciseIdentifierLink,
   KeysHelper
 }

package.json

@@ -21,82 +21,83 @@
   },
   "homepage": "https://github.com/openstax/react-components",
   "dependencies": {
-    "bootstrap": "3.3.5",
-    "camelcase": "1.2.1",
-    "classnames": "2.1.5",
-    "eventemitter2": "0.4.14",
-    "font-awesome": "4.4.0",
+    "bootstrap": "3.3.6",
+    "camelcase": "2.1.0",
+    "classnames": "2.2.3",
+    "eventemitter2": "1.0.0",
+    "font-awesome": "4.5.0",
     "keymaster": "1.6.2",
-    "markdown-it": "4.4.0",
-    "moment": "2.10.6",
+    "markdown-it": "6.0.0",
+    "moment": "2.11.2",
     "underscore": "1.8.3"
   },
   "devDependencies": {
-    "blanket": "1.1.7",
-    "chai": "2.1.2",
-    "chai-as-promised": "5.1.0",
-    "chromedriver": "2.19.0",
-    "cjsxify": "0.2.6",
+    "blanket": "1.2.2",
+    "chai": "3.5.0",
+    "chai-as-promised": "5.2.0",
+    "chromedriver": "2.21.2",
+    "cjsxify": "0.3.0",
     "coffee-jsx-loader": "0.1.3",
     "coffee-loader": "0.7.2",
     "coffee-react-transform": "3.3.0",
-    "coffee-script": "1.9.3",
-    "coffeelint": "1.13.0",
+    "coffee-script": "1.10.0",
+    "coffeelint": "1.14.2",
     "coffeelint-loader": "0.1.1",
-    "css-loader": "0.22.0",
-    "del": "1.1.1",
-    "es6-promise": "2.3.0",
-    "extract-text-webpack-plugin": "0.8.2",
-    "file-exists": "0.1.1",
-    "file-loader": "0.8.4",
-    "fixed-data-table": "0.4.1",
-    "gulp": "3.9.0",
-    "gulp-coffeelint": "0.4.0",
-    "gulp-env": "0.2.0",
-    "gulp-gzip": "1.0.0",
-    "gulp-rev": "3.0.1",
-    "gulp-tar": "1.4.0",
-    "gulp-util": "3.0.6",
+    "css-loader": "0.23.1",
+    "del": "2.2.0",
+    "es6-promise": "3.1.2",
+    "extract-text-webpack-plugin": "1.0.1",
+    "file-exists": "1.0.0",
+    "file-loader": "0.8.5",
+    "fixed-data-table": "0.6.0",
+    "gulp": "3.9.1",
+    "gulp-coffeelint": "0.6.0",
+    "gulp-env": "0.4.0",
+    "gulp-gzip": "1.2.0",
+    "gulp-rev": "7.0.0",
+    "gulp-tar": "1.8.0",
+    "gulp-util": "3.0.7",
     "gulp-watch": "4.3.5",
-    "istanbul-instrumenter-loader": "0.1.3",
-    "json-loader": "0.5.3",
-    "karma": "0.13.19",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "json-loader": "0.5.4",
+    "karma": "0.13.21",
     "karma-chai": "0.1.0",
     "karma-chai-sinon": "0.1.5",
-    "karma-chrome-launcher": "0.2.1",
-    "karma-coverage": "0.5.2",
-    "karma-mocha": "0.1.10",
-    "karma-mocha-reporter": "1.0.4",
-    "karma-nyan-reporter": "0.2.2",
-    "karma-phantomjs-launcher": "0.2.1",
-    "karma-phantomjs-shim": "1.1.1",
-    "karma-sourcemap-loader": "0.3.6",
+    "karma-chrome-launcher": "0.2.2",
+    "karma-coverage": "0.5.3",
+    "karma-mocha": "0.2.2",
+    "karma-mocha-reporter": "1.2.2",
+    "karma-nyan-reporter": "0.2.3",
+    "karma-phantomjs-launcher": "1.0.0",
+    "karma-phantomjs-shim": "1.2.0",
+    "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "1.7.0",
-    "less": "2.5.3",
-    "less-loader": "2.2.1",
-    "lodash": "3.10.1",
     "mocha": "2.2.5",
     "phantomjs": "1.9.18",
-    "react": "0.13.1",
-    "react-bootstrap": "0.23.0",
+    "react-bootstrap": "0.28.3",
+    "less": "2.6.0",
+    "less-loader": "2.2.2",
+    "lodash": "4.5.1",
+    "react": "0.14.7",
+    "react-addons-test-utils": "0.14.7",
     "react-hot-loader": "1.3.0",
     "react-scroll-components": "0.2.2",
-    "selenium-webdriver": "2.47.0",
-    "sinon": "1.17.1",
+    "selenium-webdriver": "2.52.0",
+    "sinon": "1.17.3",
     "sinon-chai": "2.8.0",
-    "style-loader": "0.12.4",
-    "url-loader": "0.5.6",
-    "webpack": "1.12.2",
-    "webpack-dev-server": "1.12.0",
-    "webpack-module-hot-accept": "1.0.3",
+    "style-loader": "0.13.0",
+    "url-loader": "0.5.7",
+    "webpack": "1.12.14",
+    "webpack-dev-server": "1.14.1",
+    "webpack-module-hot-accept": "1.0.4",
     "webpack-umd-external": "1.0.2",
     "when": "3.7.3"
   },
   "peerDependencies": {
-    "react": "^0.13.1",
-    "react-bootstrap": "^0.23.0",
-    "react-scroll-components": "^0.2.2"
+    "react": "0.14.7",
+    "react-bootstrap": "0.28.3"
   },
+  "peerDependencies": {},
   "config": {
     "blanket": {
       "pattern": "src"

resources/styles/_components.less

@@ -5,6 +5,7 @@
 @import './components/html/index';
 @import './components/exercise/step-card';
 @import './components/exercise/group';
+@import './components/exercise/preview';
 @import './components/breadcrumbs/step';
 @import './components/question';
 @import './components/close';

resources/styles/components/breadcrumbs/coach.less

@@ -0,0 +1,141 @@
+@concept-coach-breadcrumb-background: @openstax-white;
+@concept-coach-breadcrumb-color: @openstax-neutral;
+@concept-coach-breadcrumb-border-radius: 0;
+
+.make-breadcrumb-clickable() {
+  &.active {
+    color: @openstax-white;
+    background: @openstax-info;
+    border-color: @openstax-info;
+    cursor: default;
+    font-weight: 400;
+  }
+
+  &:hover,
+  &:focus {
+    border-color: @openstax-info;
+    outline: none;
+  }
+}
+
+.concept-coach-breadcrumbs() {
+  .task-breadcrumbs {
+    margin: 1rem 0;
+  }
+
+  .openstax-breadcrumbs-step {
+    border-width: 2px;
+    border-style: solid;
+    border-radius: @concept-coach-breadcrumb-border-radius;
+    background: @concept-coach-breadcrumb-background;
+    border-color: @concept-coach-breadcrumb-background;
+    color: @concept-coach-breadcrumb-color;
+    margin-right: 1rem;
+    font-size: 2.5rem;
+    line-height: 3.8rem;
+    width: auto;
+    position: relative;
+
+    &:hover,
+    &.active {
+      box-shadow: none;
+      border-radius: @concept-coach-breadcrumb-border-radius;
+      .scale(1);
+    }
+
+    .transition(~'background 0.1s ease-in-out, border-color 0.1s ease-in-out');
+    .make-breadcrumb-clickable();
+
+    &::before {
+      font-weight: 300;
+      position: relative;
+    }
+
+    &.disabled {
+      background: transparent;
+      border-color: transparent;
+      color: lighten(@concept-coach-breadcrumb-color, 25%);
+      cursor: default;
+
+      &:hover {
+        border-color: transparent;
+      }
+    }
+
+    &.end:not(.disabled) {
+      background: @openstax-white;
+      border-color: @openstax-white;
+      color: @concept-coach-breadcrumb-color;
+      cursor: pointer;
+    }
+
+    &:not(.active) {      
+      &.status-incorrect,
+      &.status-correct {
+        background: @concept-coach-breadcrumb-background;
+      }
+      &.status-incorrect {
+        color: @openstax-incorrect-color;
+      }
+
+      &.status-correct {
+        color: @openstax-correct-color;
+      }
+    }
+
+
+    &.breadcrumb-end[data-label] {
+      top: -0.5em;
+
+      &::before {
+        text-align: center;
+        width: 100%;
+        padding: 0 1rem;
+        font-style: italic;
+        text-transform: capitalize;
+        content: attr(data-label);
+      }
+    }
+  }
+
+  .icon-end {
+    display: none;
+  }
+
+  .icon-stack {
+    > .icon-sm,
+    > .icon-lg {
+      top: -1.5rem;
+      left: 2.2rem;
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+      border: 3px solid @openstax-neutral-light;
+    }
+  }
+
+
+  .icon-incorrect,
+  .icon-correct {
+    .fa-icon();
+    font-size: 2.4rem;
+    line-height: 1.8rem;
+    background: @openstax-white;
+  }
+
+  .icon-incorrect {
+    color: @openstax-incorrect-color;
+
+    &::after {    
+      content: @fa-var-times-circle;
+    }
+  }
+
+  .icon-correct {
+    color: @openstax-correct-color;
+
+    &::after {
+      content: @fa-var-check-circle;    
+    }
+  }
+}