coderoad · ShMcK · Oct 30, 2019 · Oct 30, 2019 · Oct 30, 2019 · Oct 30, 2019
diff --git a/web-app/.storybook/addons.ts b/web-app/.storybook/addons.ts
@@ -1,4 +1,3 @@
 import '@storybook/addon-actions/register'
 import '@storybook/addon-knobs/register'
-import '@storybook/addon-links/register'
-import '@storybook/addon-viewport/register'
+import '@storybook/addon-links/register'
diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx
@@ -5,6 +5,7 @@ import ErrorBoundary from './components/ErrorBoundary'
 import client from './services/apollo'
 import Routes from './Routes'
 
+
 const App = () => (
   <ErrorBoundary>
     <ApolloProvider client={client}>

diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react'
+import * as T from 'typings'
+import { Button, Checkbox } from '@alifd/next'
+
+import Markdown from '../../../../../components/Markdown'
+
+interface Props {
+  order: number
+  content: string
+  status: T.ProgressStatus
+  onLoadSolution(): void
+}
+
+const styles = {
+  card: {
+    display: 'grid',
+    gridTemplateColumns: '25px 1fr',
+    padding: '1rem 1rem 1rem 0.2rem',
+  },
+  content: {
+    margin: 0,
+  },
+}
+
+const Step = (props: Props) => {
+  // TODO: extract or replace load solution
+  const [loadedSolution, setLoadedSolution] = React.useState()
+  const onClickHandler = () => {
+    if (!loadedSolution) {
+      setLoadedSolution(true)
+      props.onLoadSolution()
+    }
+  }
+  const showLoadSolution = props.status === 'ACTIVE' && !loadedSolution
+
+  return (
+    <div style={styles.card}>
+      <div>
+        <Checkbox
+          checked={props.status === 'COMPLETE'}
+          indeterminate={false /* TODO: running */}
+          disabled={props.status !== 'INCOMPLETE' /* TODO: and not running */}
+          onChange={() => {
+            /* do nothing */
+          }}
+        />
+      </div>
+      <div>
+        <Markdown>{props.content || ''}</Markdown>
+      </div>
+      <div>{showLoadSolution && <Button onClick={onClickHandler}>Load Solution</Button>}</div>
+    </div>
+  )
+}
+
+export default Step
diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx
diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx b/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,17 @@ 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}
+							onLoadSolution={onLoadSolution}
+						/>
+					})}
         </div>
       </div>
 

diff --git a/web-app/src/styles/index.css b/web-app/src/styles/index.css
@@ -10,6 +10,6 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
-.hover-select:hover {
-  cursor: pointer;
-}
+p {
+	margin: 0
+}
diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx
@@ -5,7 +5,7 @@ import { select, text, withKnobs } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 
-import StepDescription from '../src/containers/Tutorial/LevelPage/Level/StepDescription'
+import Step from '../src/containers/Tutorial/LevelPage/Level/Step'
 
 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'
@@ -33,17 +33,19 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
 storiesOf('Level', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
-  .add('Step Description', () => (
-    <StepDescription
-      text={text('text', stepText)}
-      mode={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
+  .add('Step', () => (
+    <Step
+			order={1}
+      content={text('text', stepText)}
+      status={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'COMPLETE', 'step')}
       onLoadSolution={action('onLoadSolution')}
     />
   ))
   .add('Step Markdown', () => (
-    <StepDescription
-      text={text('text', paragraphText)}
-      mode={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
+    <Step
+			order={2}
+      content={text('text', paragraphText)}
+      status={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
       onLoadSolution={action('onLoadSolution')}
     />
   ))