cleanup Stage story

Author: ShMcK

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

@@ -24,11 +24,10 @@ const styles = {
 
 interface Props {
   stage: T.Stage
-  complete: boolean
   onContinue(): void
 }
 
-const Stage = ({ stage, onContinue, complete }: Props) => {
+const Stage = ({ stage, onContinue }: Props) => {
   if (!stage.steps) {
     throw new Error('No Stage steps found')
   }
@@ -50,7 +49,7 @@ const Stage = ({ stage, onContinue, complete }: Props) => {
             if (!step) {
               return null
             }
-            const hide = status === 'INCOMPLETE'
+            const hide = step.status === 'INCOMPLETE'
             return (
               <Step.Item
                 key={step.id}
@@ -62,7 +61,7 @@ const Stage = ({ stage, onContinue, complete }: Props) => {
         </Step>
       </div>
 
-      {complete && (
+      {stage.status === 'COMPLETE' && (
         <div style={styles.options}>
           <Button onClick={onContinue}>Continue</Button>
         </div>

web-app/stories/Stage.stories.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 
 import { action } from '@storybook/addon-actions'
-import { boolean, object, withKnobs } from '@storybook/addon-knobs'
+import { 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'
@@ -13,44 +12,38 @@ storiesOf('Tutorial SideBar', module)
   .addDecorator(withKnobs)
   .add('Stage', () => (
     <Stage
-      steps={object('steps', {
-        step1Id: {
-          content: {
+      stage={{
+        id: '1',
+        title: 'Stage Title',
+        text: 'A description of the stage',
+        steps: [
+          {
+            id: '1',
             title: 'Sum',
             text: 'Write a function `sum` that adds two numbers together',
+            status: 'COMPLETE',
           },
-          hints: [],
-          status: {
-            active: false,
-            complete: true,
-          },
-        },
-        step2Id: {
-          content: {
+          {
+            id: '2',
             title: 'Multiply',
             text: `Write a function \`multiply\` that multiplies two numbers together
 
-\`\`\`
-function someExample(a) {
-  return a * 1
-}
-\`\`\`
-            `,
+    \`\`\`
+    function someExample(a) {
+      return a * 1
+    }
+    \`\`\`
+                `,
+            status: 'ACTIVE',
           },
-          hints: [],
-          status: { active: true, complete: false },
-        },
-        step3Id: {
-          content: {
+          {
+            id: '3',
             title: 'Divide',
             text: 'Write a function `divide` that divides',
+            status: 'INCOMPLETE',
           },
-          hints: [],
-          status: { active: false, complete: false },
-        },
-      })}
-      stage={object('stage', demo.data.stages.stage1Id)}
-      complete={boolean('complete', false)}
+        ],
+      }}
       onContinue={action('onContinue')}
     />
   ))