feat: add progress indicators for blocks (#34331)

client/src/components/Map/components/Block.js

@@ -110,11 +110,15 @@ export class Block extends Component {
 
   render() {
     const { blockDashedName, completedChallenges, challenges, isExpanded, intro } = this.props;
+    let completedCount = 0;
     const challengesWithCompleted = challenges.map(challenge => {
       const { id } = challenge;
       const isCompleted = completedChallenges.some(
         completedId => id === completedId
       );
+      if (isCompleted) {
+        completedCount++;
+      }
       return { ...challenge, isCompleted };
     });
     return (
@@ -122,6 +126,14 @@ export class Block extends Component {
         <div className='map-title' onClick={this.handleBlockClick}>
           <Caret />
           <h5>{blockNameify(blockDashedName)}</h5>
+          <div className='map-title-completed'>
+            <span>
+              {this.renderCheckMark(
+                completedCount === challengesWithCompleted.length
+              )}
+            </span>
+            <span>{`${completedCount}/${challengesWithCompleted.length}`}</span>
+          </div>
         </div>
         <ul>
           {isExpanded

client/src/components/Map/components/__snapshots__/Block.test.js.snap

@@ -12,6 +12,24 @@ exports[`<Block /> not expanded snapshot: block-not-expanded 1`] = `
     <h5>
       Block A
     </h5>
+    <div
+      className="map-title-completed"
+    >
+      <span>
+        <GreenNotCompleted
+          style={
+            Object {
+              "height": "15px",
+              "marginRight": "10px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
+      <span>
+        2/4
+      </span>
+    </div>
   </div>
   <ul />
 </li>
@@ -29,6 +47,24 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
     <h5>
       Block A
     </h5>
+    <div
+      className="map-title-completed"
+    >
+      <span>
+        <GreenNotCompleted
+          style={
+            Object {
+              "height": "15px",
+              "marginRight": "10px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
+      <span>
+        2/4
+      </span>
+    </div>
   </div>
   <ul>
     <li

client/src/components/Map/map.css

@@ -23,13 +23,23 @@
   border-bottom: 1px solid #e2e2e2;
 }
 
+.map-title > h5 {
+  margin-bottom: 0;
+}
+
+.map-title-completed {
+  margin-left: auto;
+  width: 90px;
+  padding-left: 20px;
+}
+
 .map-title > svg {
   width: 14px;
   margin-right: 5px;
   flex-shrink: 0;
 }
 
-li.open > .map-title svg {
+li.open > .map-title svg:first-child {
   transform: rotate(90deg);
 }