setup Step styles

web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx → web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx

@@ -1,43 +1,47 @@
 import * as React from 'react'
+import * as T from 'typings'
+import { Button, Checkbox } from '@alifd/next'
+
 import Markdown from '../../../../../components/Markdown'
-import { Button } from '@alifd/next'
+
+interface Props {
+  order: number
+  content: string
+  status: T.ProgressStatus
+  onLoadSolution(): void
+}
 
 const styles = {
-  // active: {
-  //   backgroundColor: '#e6f7ff',
-  // },
   card: {
+		display: 'grid',
+
     padding: '0 1rem 1rem 0.5rem',
   },
 }
 
-interface Props {
-  text?: string | null
-  mode: 'INCOMPLETE' | 'ACTIVE' | 'COMPLETE'
-  onLoadSolution(): void
-}
-
-const StepDescription = ({ text, mode, onLoadSolution }: Props) => {
+const Step = (props: Props) => {
   const [loadedSolution, setLoadedSolution] = React.useState()
 
   const onClickHandler = () => {
     if (!loadedSolution) {
       setLoadedSolution(true)
-      onLoadSolution()
+      props.onLoadSolution()
     }
   }
 
-  if (mode === 'INCOMPLETE') {
-    return null
-  }
+  const showLoadSolution = status === 'ACTIVE' && !loadedSolution
 
-  const showLoadSolution = mode === 'ACTIVE' && !loadedSolution
   return (
     <div style={styles.card}>
-      <Markdown>{text || ''}</Markdown>
+      <Checkbox
+        checked={status === 'COMPLETE'}
+        indeterminate={false}
+        disabled={status === 'INCOMPLETE'}
+      />
+      <Markdown>{props.content || ''}</Markdown>
       {showLoadSolution && <Button onClick={onClickHandler}>Load Solution</Button>}
     </div>
   )
 }
 
-export default StepDescription
+export default Step

web-app/src/containers/Tutorial/LevelPage/Level/index.tsx

@@ -1,10 +1,10 @@
-import { Button, Step } from '@alifd/next'
+import { Button } from '@alifd/next'
 import * as React from 'react'
 import * as G from 'typings/graphql'
 import * as T from 'typings'
 
+import Step from './Step'
 import Markdown from '../../../../components/Markdown'
-import StepDescription from './StepDescription'
 
 const styles = {
   card: {
@@ -56,11 +56,6 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
     throw new Error('No Stage steps found')
   }
 
-  // grab the active step
-  const activeIndex: number = level.steps.findIndex((step: G.Step & { status: T.ProgressStatus } | null) => {
-    return step && step.status === 'ACTIVE'
-  })
-
   return (
     <div style={styles.card}>
       <div>
@@ -76,20 +71,16 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
       <div>
         <div style={styles.header}>Tasks</div>
         <div style={styles.steps}>
-          <Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
-            {level.steps.map((step: G.Step & { status: T.ProgressStatus } | null, index: number) => {
-              if (!step) {
-                return null
-              }
-              return (
-                <Step.Item
-                  key={step.id}
-                  title={step.title || `Step ${index + 1}`}
-                  content={<StepDescription text={step.content} mode={step.status} onLoadSolution={onLoadSolution} />}
-                />
-              )
-            })}
-          </Step>
+					{level.steps.map((step: G.Step & { status: T.ProgressStatus } | null, index: number) => {
+						if (!step) {
+							return null
+						}
+						return <Step
+							order={index + 1}
+							status={step.status}
+							content={step.content}
+						/>
+					})}
         </div>
       </div>