Update: display padlock for locked items (fixes #209) (#210)

Author: kirsty-hames

less/pageLevelProgress.less

@@ -14,15 +14,27 @@
   &__item-btn {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
   }
 
   &__item-title {
     width: 75%;
   }
 
   &__indicator {
-    margin: 0 calc(~'12.5% - 1rem');
+    margin-inline-start: calc(~'25% - 1rem');
+  }
+
+  &__item-btn:not(.is-locked) .pagelevelprogress__item-icon {
+    display: none;
+  }
+
+  &__item-btn.is-locked .pagelevelprogress__item-icon .icon {
+    .icon-padlock-locked;
+  }
+
+  &__item-btn.is-locked .pagelevelprogress__indicator {
+    display: none;
   }
 
   &__item-optional {

templates/pageLevelProgressItem.jsx

@@ -72,6 +72,10 @@ export default function PageLevelProgressItem(props) {
         </span>
         }
 
+        <span className='pagelevelprogress__item-icon'>
+          <span className='icon' aria-hidden="true"></span>
+        </span>
+
       </button>
       <div className='pagelevelprogress__item-children'>
         <div role="list" className="js-children">