New: Required and optional labels added (Fixes #191)

example.json

@@ -97,3 +97,14 @@
         "body": "Body",
         "instruction": "Instruction"
     }
+
+    // course.json
+    // Priority labels configuration
+    "_globals": {
+        "_priorityLabels": {
+            "_menuItem": {
+                "_showWhenOptional": false,
+                "_showWhenRequired": false
+            }
+        }
+    }

js/BoxMenuItemView.js

@@ -13,6 +13,19 @@ class BoxMenuItemView extends MenuItemView {
     };
   }
 
+  initialize(...args) {
+    super.initialize(...args);
+    this.setUpViewData();
+  }
+
+  setUpViewData() {
+    // Use inherited getPriorityLabels() from AdaptView
+    const priorityData = this.getPriorityLabels();
+    if (priorityData) {
+      this.model.set(priorityData);
+    }
+  }
+
   onClickMenuItemButton(event) {
     if (event && event.preventDefault) event.preventDefault();
     if (this.model.get('_isLocked')) return;

less/boxMenuItem.less

@@ -9,6 +9,16 @@
     .icon-tick;
   }
 
+  &__priority {
+    display: flex;
+    align-items: center;
+    column-gap: (@icon-padding / 4);
+
+    .icon {
+      .icon-exclamation;
+    }
+  }
+
   @media (min-width: @device-width-medium) {
     width: 50%;
   }

templates/boxMenuItem.jsx

@@ -17,6 +17,8 @@ export default function BoxMenuItem (props) {
     _isComplete,
     title,
     _isOptional,
+    priorityClass,
+    priorityLabel,
     _nthChild,
     _totalChild
   } = props;
@@ -49,6 +51,19 @@ export default function BoxMenuItem (props) {
       <div className="menu-item__details boxmenu-item__details">
         <div className="menu-item__details-inner boxmenu-item__details-inner">
 
+          {priorityLabel &&
+          <div className={classes([
+            'menu-item__priority boxmenu-item__priority',
+            priorityClass
+          ])}>
+            <span className="icon" aria-hidden="true" />
+            <div
+              className="menu-item__priority-label boxmenu-item__priority-label"
+              dangerouslySetInnerHTML={{ __html: compile(priorityLabel, props) }}
+            />
+          </div>
+          }
+
           {displayTitle &&
           <div className="menu-item__title boxmenu-item__title">
             <div