Breaking: Convert indicator to jsx, add outer container (fixes 230)

js/PageLevelProgressIndicatorView.js

@@ -1,4 +1,7 @@
 import Adapt from 'core/js/adapt';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { templates } from 'core/js/reactHelpers';
 
 class PageLevelProgressIndicatorView extends Backbone.View {
 
@@ -16,25 +19,15 @@ class PageLevelProgressIndicatorView extends Backbone.View {
     this.setUpEventListeners();
     this.setPercentageComplete();
     this.render();
-    this.refresh();
   }
 
   addClasses() {
     this.$el.addClass([
-      'pagelevelprogress__indicator',
+      'pagelevelprogress__indicator-outer',
       'is-' + this.type
     ].join(' '));
   }
 
-  checkAria() {
-    if (!this.ariaLabel) {
-      this.$el.attr('aria-hidden', true);
-      return;
-    }
-    const data = this.getRenderData();
-    this.$('.js-indicator-aria-label').html(Handlebars.compile(this.ariaLabel)(data));
-  }
-
   setUpEventListeners() {
     if (this.parent) {
       this.listenToOnce(this.parent, 'postRemove', this.remove);
@@ -47,6 +40,9 @@ class PageLevelProgressIndicatorView extends Backbone.View {
   setPercentageComplete() {
     const percentage = this.calculatePercentage();
     this.model.set('percentageComplete', percentage);
+    this.$el.css({
+      '--adapt-pagelevelprogress-percentage': percentage + '%'
+    });
     return percentage;
   }
 
@@ -55,24 +51,15 @@ class PageLevelProgressIndicatorView extends Backbone.View {
   }
 
   render() {
+    this.checkCompletion();
+    this.checkAriaHidden();
     const data = this.getRenderData();
-    const template = Handlebars.templates[this.constructor.template];
-    this.$el.html(template(data));
-  }
-
-  getRenderData() {
-    const data = this.model.toJSON();
-    data.ariaLabel = this.ariaLabel;
-    data.type = this.type;
-    return data;
+    const Component = templates.pageLevelProgressIndicator;
+    ReactDOM.render(<Component {...data} />, this.el);
   }
 
   refresh() {
-    this.checkCompletion();
-    this.checkAria();
-    this.$('.js-indicator-bar').css({
-      width: this.calculatePercentage() + '%'
-    });
+    this.render();
   }
 
   checkCompletion() {
@@ -90,8 +77,20 @@ class PageLevelProgressIndicatorView extends Backbone.View {
       .toggleClass('is-incorrect', isIncorrect);
   }
 
+  checkAriaHidden() {
+    if (this.ariaLabel) return;
+    this.$el.attr('aria-hidden', true);
+  }
+
+  getRenderData() {
+    const data = this.model.toJSON();
+    data.ariaLabel = this.ariaLabel;
+    data.type = this.type;
+    return data;
+  }
+
 }
 
-PageLevelProgressIndicatorView.template = 'pageLevelProgressIndicator';
+PageLevelProgressIndicatorView.template = 'pageLevelProgressIndicator.jsx';
 
 export default PageLevelProgressIndicatorView;

less/pageLevelProgressIndicator.less

@@ -25,6 +25,7 @@
     height: inherit;
     min-width: 15%;
     background-color: @black;
+    width: var(--adapt-pagelevelprogress-percentage);
   }
 
   &__indicator .js-indicator-aria-label {

templates/pageLevelProgressIndicator.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { compile } from 'core/js/reactHelpers';
+
+export default function PageLevelProgressIndicator (props) {
+  const {
+    ariaLabel
+  } = props;
+
+  return (
+    <span className='pagelevelprogress__indicator'>
+      <span className="pagelevelprogress__indicator-inner">
+
+        <span className="pagelevelprogress__indicator-bar"></span>
+
+        {ariaLabel &&
+        <span className="aria-label">
+          {compile(ariaLabel)}
+        </span>
+        }
+
+      </span>
+    </span>
+  );
+};