chore: add step order on collapse (#140)

Author: leangseu-edx

src/components/ProgressBar/index.jsx

@@ -70,14 +70,20 @@ export const ProgressBar = ({ className }) => {
   if (activeStepTitle === stepNames.staff) {
     activeStepTitle = stepNames.submission;
   }
+  const stepIndex = stepOrders.indexOf(activeStepTitle) + 1;
+  const totalSteps = stepOrders.length;
 
   return (
     <Navbar className={classNames('px-0', className)} expand={stepOrders.length > 4 ? 'lg' : 'md'}>
-      <Navbar.Toggle className="w-100 border-0">
+      <Navbar.Toggle className="w-100 border-primary">
         <div className="d-flex justify-content-between m-0 h3">
           <span className="d-flex">
             <Icon src={ArrowForwardIos} className="mr-2" />
             {formatMessage(stepLabels[activeStepTitle])}
+            {formatMessage(messages.step, {
+              stepIndex,
+              totalSteps,
+            })}
           </span>
           <Icon src={ArrowDropUpDown} />
         </div>

src/components/ProgressBar/index.scss

@@ -32,25 +32,27 @@
     color: white;
     border-radius: 100%;
   }
-  .active {
-    border-bottom: 2px solid black;
-  }
 }
 
 @mixin navbar-collapse-definition {
   width: 100%;
   flex-direction: column;
   align-items: start;
-  border-top: 1px solid black;
-  padding: 0 map-get($spacers, 3);
+  padding: 0;
 
   .ora-progress-divider {
     display: none;
   }
 
   .ora-progress-nav {
     width: 100%;
-    margin: 0 0.25rem;
+    &.is-active {
+      border: none;
+      background-color: $light;
+    }
+  }
+  .nav-icon {
+    margin-left: map-get($spacers, 3);
   }
 }
 

src/components/ProgressBar/messages.js

@@ -26,6 +26,11 @@ const messages = defineMessages({
     defaultMessage: 'My grade',
     description: 'My Grade step progress indicator',
   },
+  step: {
+    id: 'frontend-app-ora.ProgressBar.step',
+    defaultMessage: ' (Step {stepIndex}/{totalSteps})',
+    description: 'Step progress indicator',
+  },
 });
 
 export default messages;

src/components/StepProgressIndicator/messages.js

@@ -7,7 +7,7 @@ const messages = defineMessages({
     id: 'frontend-app-ora.StepProgressIndicator.progress',
   },
   gradeNextPeerOptional: {
-    defaultMessage: 'Grade next peer(optional)',
+    defaultMessage: 'Grade next peer (optional)',
     description: 'When peer response is optional',
     id: 'frontend-app-ora.StepProgressIndicator.optional',
   },

src/views/XBlockView/Actions/messages.js

@@ -30,7 +30,7 @@ const messages = defineMessages({
   },
   optional: {
     id: 'ora-mfe.ModalActions.optionalPeerResponse',
-    defaultMessage: '(optional)',
+    defaultMessage: ' (optional)',
     description: 'When peer response is optional',
   },
 });