setup step using step components

web-app/src/components/Stage/StepDescription/index.tsx

@@ -0,0 +1,33 @@
+import { Checkbox } from '@alifd/next'
+import * as React from 'react'
+// import CC from '../../typings/client'
+import CR from 'typings'
+import Markdown from '../../Markdown'
+
+const styles = {
+  // active: {
+  //   backgroundColor: '#e6f7ff',
+  // },
+  card: {
+    paddingRight: '1rem',
+  },
+}
+
+interface Props {
+  content: CR.TutorialStepContent
+  status: any // CC.StageStepStatus
+}
+
+const StepDescription = ({ content, status }: Props) => {
+  const hidden = !status.active && !status.complete
+  if (hidden) {
+    return null
+  }
+  return (
+    <div style={styles.card}>
+      <Markdown>{content.text}</Markdown>
+    </div>
+  )
+}
+
+export default StepDescription

web-app/src/components/Stage/index.tsx

@@ -1,10 +1,9 @@
-import { Button } from '@alifd/next'
+import { Button, Step } from '@alifd/next'
 import * as React from 'react'
 import CR from 'typings'
 
-import Divider from '../Divider'
 import Markdown from '../Markdown'
-import Step from '../Step'
+import StepDescription from './StepDescription'
 
 const styles = {
   card: {
@@ -17,6 +16,9 @@ const styles = {
   options: {
     padding: '0rem 1rem',
   },
+  steps: {
+    padding: '1rem 0rem',
+  },
   title: {},
 }
 
@@ -30,19 +32,33 @@ interface Props {
 }
 
 const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
-  const { title, text } = stage.content
+  const { stepList, content } = stage
+  const { title, text } = content
+  // grab the active step
+  const activeIndex = stepList.findIndex((stepId: string) => {
+    return steps[stepId].status.active
+  })
+  // only display up until the active step
+  const filteredStepList = stepList.slice(0, activeIndex + 1)
   return (
     <div style={styles.card}>
       <div style={styles.content}>
         <h2 style={styles.title}>{title}</h2>
         <Markdown>{text}</Markdown>
       </div>
-      <Divider />
-      <div>
-        {stage.stepList.map((stepId: string) => {
-          const step = steps[stepId]
-          return <Step key={stepId} content={step.content} status={step.status} />
-        })}
+      <div style={styles.steps}>
+        <Step current={activeIndex} direction="ver" shape="dot" animation>
+          {filteredStepList.map((stepId: string, index: number) => {
+            const step = steps[stepId]
+            return (
+              <Step.Item
+                key={stepId}
+                title={step.content.title || `Step ${index + 1}`}
+                content={<StepDescription content={step.content} status={step.status} />}
+              />
+            )
+          })}
+        </Step>
       </div>
 
       {complete && (

web-app/src/tutorials/basic.ts

@@ -41,7 +41,7 @@ const basic: CR.Tutorial = {
       step1Id: {
         content: {
           title: 'Sum',
-          text: 'Write a function that adds two numbers together',
+          text: 'Write a function `add` that adds two numbers together',
         },
         actions: {
           setup: {
@@ -58,7 +58,7 @@ const basic: CR.Tutorial = {
       step2Id: {
         content: {
           title: 'Multiply',
-          text: 'Write a function that multiplies two numbers together',
+          text: 'Write a function `multiply` that multiplies two numbers together',
         },
         actions: {
           setup: {
@@ -74,7 +74,7 @@ const basic: CR.Tutorial = {
       step3Id: {
         content: {
           title: 'Divide',
-          text: 'Write a function that divides',
+          text: 'Write a function `divide` that divides',
         },
         actions: {
           setup: {

web-app/stories/Stage.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 
-import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import { withKnobs, object, boolean } from '@storybook/addon-knobs'
-import SideBarDecorator from './utils/SideBarDecorator'
+import { boolean, object, withKnobs } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
 import demo from './data/basic'
+import SideBarDecorator from './utils/SideBarDecorator'
 
 import Stage from '../src/components/Stage'
 
@@ -17,7 +17,7 @@ storiesOf('Tutorial SideBar', module)
         step1Id: {
           content: {
             title: 'Sum',
-            text: 'Write a function that adds two numbers together',
+            text: 'Write a function `sum` that adds two numbers together',
           },
           hints: [],
           status: {
@@ -28,21 +28,28 @@ storiesOf('Tutorial SideBar', module)
         step2Id: {
           content: {
             title: 'Multiply',
-            text: 'Write a function that multiplies two numbers together',
+            text: `Write a function \`multiply\` that multiplies two numbers together
+
+\`\`\`
+function someExample(a) {
+  return a * 1
+}
+\`\`\`
+            `,
           },
           hints: [],
-          status: { active: true, complete: false },
+          status: { active: false, complete: true },
         },
         step3Id: {
           content: {
             title: 'Divide',
-            text: 'Write a function that divides',
+            text: 'Write a function `divide` that divides',
           },
           hints: [],
-          status: { active: false, complete: false },
+          status: { active: true, complete: false },
         },
       })}
-      stage={object('stage', demo.data.stages['stage1Id'])}
+      stage={object('stage', demo.data.stages.stage1Id)}
       complete={boolean('complete', false)}
       onNextStage={action('onNextStage')}
     />

web-app/stories/Step.stories.tsx

@@ -4,7 +4,7 @@ import { object, withKnobs } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 
-import Step from '../src/components/Step'
+import Step from '../src/components/Stage/StepDescription'
 
 const stepText =
   'This is a long paragraph of step text intended to wrap around the side after a short period of writing to demonstrate text wrap among other things'