test status indicator progress

Signed-off-by: shmck <[email protected]>

Author: ShMcK

typings/index.d.ts

@@ -1,7 +1,7 @@
 import * as E from './error'
 import * as TT from './tutorial'
 
-export type ProgressStatus = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE'
+export type ProgressStatus = 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE' | 'FAIL'
 
 export interface Progress {
   levels: {

web-app/src/containers/Tutorial/components/Step.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
 import TestStatusIcon from './TestStatusIcon'
+import Icon from '../../../components/Icon'
 import Hints from './Hints'
 import Markdown from '../../../components/Markdown'
 
@@ -54,8 +55,7 @@ const Step = (props: Props) => {
     <div>
       <div css={styles.card}>
         <div css={styles.statusContainer}>
-          {props.status === 'ACTIVE' && <TestStatusIcon size="small" />}
-          {props.status === 'COMPLETE' && <TestStatusIcon size="small" checked />}
+          <TestStatusIcon size="small" status={props.status} />
         </div>
         <div>
           {/* content */}
@@ -65,13 +65,22 @@ const Step = (props: Props) => {
           {/* subtasks */}
           {props.subtasks ? (
             <ul css={styles.subtasks}>
-              {props.subtasks.map((subtask) => (
-                <li key={subtask.name} css={styles.subtask}>
-                  <TestStatusIcon size="xs" checked={props.status === 'COMPLETE' || subtask.pass} />
+              {props.subtasks.map((subtask) => {
+                let subtaskStatus: 'COMPLETE' | 'ACTIVE'
+                if (props.status === 'COMPLETE') {
+                  subtaskStatus = 'COMPLETE'
+                } else {
+                  subtaskStatus = subtask.pass ? 'COMPLETE' : 'ACTIVE'
+                }
 
-                  <span style={{ marginLeft: '0.5rem' }}>{subtask.name}</span>
-                </li>
-              ))}
+                return (
+                  <li key={subtask.name} css={styles.subtask}>
+                    <TestStatusIcon size="xs" status={subtaskStatus} />
+
+                    <span style={{ marginLeft: '0.5rem' }}>{subtask.name}</span>
+                  </li>
+                )
+              })}
             </ul>
           ) : null}
           {/* hints */}

web-app/src/containers/Tutorial/components/TestStatusIcon.tsx

@@ -2,23 +2,29 @@ import * as React from 'react'
 import Icon from '../../../components/Icon'
 
 interface Props {
-  size: 'small' | 'xs' | 'xxs'
-  checked?: boolean
+  size: 'small' | 'xs'
+  status: 'COMPLETE' | 'ACTIVE' | 'INCOMPLETE' | 'FAIL'
 }
 
-const colors = {
-  complete: '#37B809',
-  incomplete: 'lightgrey',
+const styles = {
+  complete: {
+    icon: 'success-filling',
+    color: '#37B809',
+  },
+  active: {
+    icon: 'success-filling',
+    color: 'lightgrey',
+  },
+  fail: {
+    icon: 'warning',
+    color: '#ff9300',
+  },
 }
 
 const TestStatusIcon = (props: Props) => {
-  return (
-    <Icon
-      type="success-filling"
-      size={props.size}
-      style={{ color: props.checked ? colors.complete : colors.incomplete }}
-    />
-  )
+  // @ts-ignore
+  const style: { icon: string; color: string } = styles[props.status.toLowerCase()]
+  return <Icon type="success-filling" size={props.size} style={{ color: style.color }} />
 }
 
 export default TestStatusIcon

web-app/stories/Step.stories.tsx

@@ -69,6 +69,17 @@ storiesOf('Step', module)
       setHintIndex={action('setHintIndex')}
     />
   ))
+  .add('Fail Step', () => (
+    <Step
+      index={1}
+      content={text('text', stepText)}
+      status="FAIL"
+      onLoadSolution={action('onLoadSolution')}
+      subtasks={null}
+      hintIndex={0}
+      setHintIndex={action('setHintIndex')}
+    />
+  ))
   .add('Step Markdown', () => (
     <Step
       index={2}
@@ -80,7 +91,7 @@ storiesOf('Step', module)
       setHintIndex={action('setHintIndex')}
     />
   ))
-  .add('Substasks', () => (
+  .add('Subtasks', () => (
     <Step
       index={2}
       content={'A task with subtasks'}