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

README.md

@@ -39,9 +39,15 @@ The attributes listed below are used in *course.json* and *contentObjects.json*
 #### *course.json*
 The following attributes, set within *course.json*, configure the defaults for **Box Menu**.
 
-**\_boxMenu** (object): The boxMenu object that contains value for **\_backgroundImage**, **\_backgroundStyles**, and **\_menuHeader**.
+**\_boxMenu** (object): The boxMenu object that contains value for **\_priorityLabels**, **\_graphic**, **\_backgroundImage**, **\_backgroundStyles**, and **\_menuHeader**.
 
->**\_graphic_** (object): The graphic object that contains values for **\_src** and **alt**. Typically used to display a logo image
+>**\_priorityLabels** (object): The priorityLabels object that contains values for **\_showPriorityWhenOptional** and **\_showPriorityWhenRequired**.
+
+>>**\_showPriorityWhenOptional** (boolean): When true, shows an "optional" label on the item if it is *optional* for course completion. Defaults to false.
+
+>>**\_showPriorityWhenRequired** (boolean): When true, shows a "required" label on the item if it is *required* for course completion. Defaults to false.
+
+>**\_graphic** (object): The graphic object that contains values for **\_src** and **alt**. Typically used to display a logo image
 
 >>**\_src** (string): File name (including path) of the image
 

example.json

@@ -1,5 +1,9 @@
     // course.json
     "_boxMenu": {
+        "_priorityLabels": {
+            "_showPriorityWhenOptional": false,
+            "_showPriorityWhenRequired": false  
+        },
         "_graphic": {
             "alt": "",
             "_src": "course/en/images/logo-graphic.jpg"

js/BoxMenuItemView.js

@@ -1,3 +1,4 @@
+import Adapt from 'core/js/adapt';
 import MenuItemView from 'core/js/views/menuItemView';
 import router from 'core/js/router';
 
@@ -13,6 +14,35 @@ class BoxMenuItemView extends MenuItemView {
     };
   }
 
+  initialize(...args) {
+    super.initialize(...args);
+    this.setUpViewData();
+  }
+
+  setUpViewData() {
+    const _boxMenu = Adapt.course.get('_boxMenu');
+    if (!_boxMenu) return;
+
+    const _priorityLabels = _boxMenu._priorityLabels;
+    if (!_priorityLabels) return;
+
+    const _globals = Adapt.course.get('_globals');
+    const _isOptional = this.model.get('_isOptional');
+
+    const optionalLabel = _globals?._accessibility?._ariaLabels?.optional;
+    const requiredLabel = _globals?._accessibility?._ariaLabels?.required;
+
+    const showPriorityWhenOptional = _priorityLabels._showPriorityWhenOptional && _isOptional && optionalLabel;
+    const showPriorityWhenRequired = _priorityLabels._showPriorityWhenRequired && !_isOptional && requiredLabel;
+
+    if (!showPriorityWhenOptional && !showPriorityWhenRequired) return;
+
+    this.model.set({
+      priorityClass: _isOptional ? 'is-optional' : 'is-required',
+      priorityLabel: _isOptional ? optionalLabel : requiredLabel
+    });
+  }
+
   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