Merge pull request #106 from tchaffee/fix/checkmarks

fix: curriculum completion checkmark styling

packages/learn/src/components/Map/components/Block.js

@@ -11,6 +11,7 @@ import { toggleMapModal, userSelector } from '../../../redux/app';
 import Caret from '../../icons/Caret';
 /* eslint-disable max-len */
 import GreenPass from '../../../templates/Challenges/components/icons/GreenPass';
+import GreenNotCompleted from '../../../templates/Challenges/components/icons/GreenNotCompleted';
 /* eslint-enable max-len */
 const mapStateToProps = (state, ownProps) => {
   const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
@@ -44,6 +45,8 @@ const propTypes = {
   toggleMapModal: PropTypes.func.isRequired
 };
 
+const mapIconStyle = { height: '15px', marginRight: '10px', width: '15px' };
+
 export class Block extends PureComponent {
   constructor(...props) {
     super(...props);
@@ -79,24 +82,36 @@ export class Block extends PureComponent {
 
   renderChallenges(intro, challenges) {
     // TODO: Split this into a Challenge Component and add tests
-    return [intro].concat(challenges).map(challenge => (
+    // TODO: The styles badge and map-badge on the completion span do not exist
+    return [intro].concat(challenges).map(challenge => {
+      const completedClass = challenge.isCompleted
+        ? ' map-challenge-title-completed'
+        : '';
+      return (
         <li
-        className='map-challenge-title'
+          className={'map-challenge-title' + completedClass}
           key={'map-challenge' + challenge.fields.slug}
           >
+          <span className='badge map-badge'>
+            {challenge.isCompleted ? (
+              <GreenPass
+                style={ mapIconStyle }
+              />
+            ) : (
+              <GreenNotCompleted
+                style={ mapIconStyle }
+              />
+            )}
+          </span>
           <Link
             onClick={this.handleChallengeClick(challenge.fields.slug)}
             to={challenge.fields.slug}
             >
             {challenge.title || challenge.frontmatter.title}
           </Link>
-        {challenge.isCompleted ? (
-          <span className='badge map-badge'>
-            <GreenPass style={{ height: '15px' }} />
-          </span>
-        ) : null}
         </li>
-    ));
+      );
+    });
   }
 
   render() {

packages/learn/src/components/Map/components/__snapshots__/Block.test.js.snap

@@ -34,6 +34,19 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
     <li
       className="map-challenge-title"
     >
+      <span
+        className="badge map-badge"
+      >
+        <GreenNotCompleted
+          style={
+            Object {
+              "height": "15px",
+              "marginRight": "10px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
       <Unknown
         onClick={[Function]}
         to="/super-block-one/block-a"
@@ -42,14 +55,8 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
       </Unknown>
     </li>
     <li
-      className="map-challenge-title"
+      className="map-challenge-title map-challenge-title-completed"
     >
-      <Unknown
-        onClick={[Function]}
-        to="/super-block-one/block-a/challenge-one"
-      >
-        Challenge One
-      </Unknown>
       <span
         className="badge map-badge"
       >
@@ -57,24 +64,12 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
           style={
             Object {
               "height": "15px",
+              "marginRight": "10px",
+              "width": "15px",
             }
           }
         />
       </span>
-    </li>
-    <li
-      className="map-challenge-title"
-    >
-      <Unknown
-        onClick={[Function]}
-        to="/super-block-one/block-a/challenge-two"
-      >
-        Challenge Two
-      </Unknown>
-    </li>
-    <li
-      className="map-challenge-title"
-    >
       <Unknown
         onClick={[Function]}
         to="/super-block-one/block-a/challenge-one"
@@ -85,12 +80,52 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
     <li
       className="map-challenge-title"
     >
+      <span
+        className="badge map-badge"
+      >
+        <GreenNotCompleted
+          style={
+            Object {
+              "height": "15px",
+              "marginRight": "10px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
       <Unknown
         onClick={[Function]}
         to="/super-block-one/block-a/challenge-two"
       >
         Challenge Two
       </Unknown>
+    </li>
+    <li
+      className="map-challenge-title"
+    >
+      <span
+        className="badge map-badge"
+      >
+        <GreenNotCompleted
+          style={
+            Object {
+              "height": "15px",
+              "marginRight": "10px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
+      <Unknown
+        onClick={[Function]}
+        to="/super-block-one/block-a/challenge-one"
+      >
+        Challenge One
+      </Unknown>
+    </li>
+    <li
+      className="map-challenge-title map-challenge-title-completed"
+    >
       <span
         className="badge map-badge"
       >
@@ -98,10 +133,18 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
           style={
             Object {
               "height": "15px",
+              "marginRight": "10px",
+              "width": "15px",
             }
           }
         />
       </span>
+      <Unknown
+        onClick={[Function]}
+        to="/super-block-one/block-a/challenge-two"
+      >
+        Challenge Two
+      </Unknown>
     </li>
   </ul>
 </li>

packages/learn/src/components/Map/map.css

@@ -27,3 +27,7 @@ li.open > .map-title svg {
 .map-challenge-title {
   margin-bottom: 0.25rem;
 }
+
+.map-challenge-title-completed {
+  opacity: 0.5;
+}

packages/learn/src/templates/Challenges/classic/Show.js

@@ -86,16 +86,16 @@ const propTypes = {
 
 class ShowClassic extends PureComponent {
   constructor() {
-    super()
+    super();
 
     this.resizeProps = {
       onStopResize: this.onStopResize.bind(this),
       onResize: this.onResize.bind(this)
-    }
+    };
 
     this.state = {
       resizing: false
-    }
+    };
   }
 
   onResize() {
@@ -176,7 +176,9 @@ class ShowClassic extends PureComponent {
       .map(key => files[key])
       .map((file, index) => (
         <ReflexContainer key={file.key + index} orientation='horizontal'>
-          {index !== 0 && <ReflexSplitter propagate={true} {...this.resizeProps} />}
+          {index !== 0 && (
+            <ReflexSplitter propagate={true} {...this.resizeProps} />
+          )}
           <ReflexElement
             flex={1}
             propagateDimensions={true}
@@ -228,10 +230,17 @@ class ShowClassic extends PureComponent {
             />
           </ReflexElement>
           <ReflexSplitter propagate={true} {...this.resizeProps} />
-          <ReflexElement flex={1} {...this.resizeProps}>{editors}</ReflexElement>
+          <ReflexElement flex={1} {...this.resizeProps}>
+            {editors}
+          </ReflexElement>
           <ReflexSplitter propagate={true} {...this.resizeProps} />
           <ReflexElement flex={0.5} {...this.resizeProps}>
-            {showPreview ? <Preview className='full-height' disableIframe={this.state.resizing} /> : null}
+            {showPreview ? (
+              <Preview
+                className='full-height'
+                disableIframe={this.state.resizing}
+              />
+            ) : null}
             <Spacer />
             <TestSuite tests={tests} />
           </ReflexElement>

packages/learn/src/templates/Challenges/components/Preview.js

@@ -12,16 +12,16 @@ const propTypes = {
 
 class Preview extends PureComponent {
   constructor(...props) {
-    super(...props)
+    super(...props);
 
     this.state = {
       iframeStatus: this.props.disableIframe
-    }
+    };
   }
 
   componentWillReceiveProps(nextProps) {
     if (this.props.disableIframe !== nextProps.disableIframe) {
-      this.setState({ iframeStatus: !this.state.iframeStatus })
+      this.setState({ iframeStatus: !this.state.iframeStatus });
     }
   }
 

packages/learn/src/templates/Challenges/components/icons/GreenNotCompleted.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const propTypes = {};
+
+function GreenNotCompleted(props) {
+  return (
+    <svg
+      height='50'
+      viewBox='0 0 200 200'
+      width='50'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+      >
+      <g>
+        <title>Not Passed</title>
+        <circle
+          cx='100'
+          cy='99'
+          fill='#FFFFFF'
+          r='95'
+          stroke='#006400'
+          strokeDasharray='null'
+          strokeLinecap='null'
+          strokeLinejoin='null'
+          strokeWidth='5'
+        />
+      </g>
+    </svg>
+  );
+}
+
+GreenNotCompleted.displayName = 'GreenNotCompleted';
+GreenNotCompleted.propTypes = propTypes;
+
+export default GreenNotCompleted;

packages/learn/src/templates/Challenges/components/test-suite.css

@@ -23,3 +23,8 @@
   align-items: center;
   margin-left: 3px;
 }
+
+.test-status-icon > svg {
+  width: 50px;
+  height: 50px;
+}