Merge pull request #15 from ShMcK/style/steps-antd

Style/steps antd

Author: ShMcK

web-app/.storybook/config.ts

@@ -1,5 +1,6 @@
 import '@alifd/next/dist/next.css'
 import { configure } from '@storybook/react'
+import '../src/styles/index.css'
 
 // automatically import all files ending in *.stories.tsx
 const req = require.context('../stories', true, /\.stories\.tsx$/)

web-app/src/components/Level/LevelStageSummary.tsx

@@ -1,25 +1,25 @@
-import { Button } from '@alifd/next'
+import { Icon } from '@alifd/next'
 import * as React from 'react'
 import CC from '../../../../typings/context'
 
 import Markdown from '../Markdown'
 
 const styles = {
-  active: {
-    backgroundColor: '#e6f7ff',
-  },
   card: {
-    padding: '0.5rem 1rem',
-  },
-  completed: {
-    backgroundColor: '#f6ffed',
+    display: 'grid',
+    gridTemplateAreas: 'Content Icon',
+    gridTemplateColumns: '1fr 1.5rem',
+    gridTemplateRows: '1fr',
+    marginRight: '1.5rem',
   },
-  disabled: {
-    // backgroundColor: 'blue',
+  continueIcon: {
+    color: '#1890ff',
   },
-  options: {},
-  title: {
-    margin: 0,
+  left: {},
+  right: {
+    alignSelf: 'center',
+    justifySelf: 'center',
+    marginBottom: '1rem',
   },
 }
 
@@ -30,20 +30,13 @@ interface Props {
 
 const LevelStageSummary = (props: Props) => {
   const { stage, onNext } = props
-  const { complete, active } = stage.status
-  const cardStyle = {
-    ...styles.card,
-    ...(active ? styles.active : styles.disabled),
-    ...(complete ? styles.completed : {}),
-  }
+  const { active } = stage.status
   return (
-    <div style={cardStyle}>
-      <h3 style={styles.title}>{stage.content.title}</h3>
-      <Markdown>{stage.content.text}</Markdown>
-      <div style={styles.options}>
-        {active && <Button onClick={onNext}>Continue</Button>}
-        {complete && <div>Complete</div>}
+    <div style={styles.card} className={active ? 'hover-select' : ''} onClick={onNext}>
+      <div style={styles.left}>
+        <Markdown>{stage.content.text}</Markdown>
       </div>
+      <div style={styles.right}>{active && <Icon type="arrow-right" style={styles.continueIcon} />}</div>
     </div>
   )
 }

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

@@ -1,8 +1,8 @@
-import { Button } from '@alifd/next'
+import { Button, Step } from '@alifd/next'
 import * as React from 'react'
 import CR from 'typings'
+import CC from '../../../../typings/context'
 
-import Divider from '../Divider'
 import Markdown from '../Markdown'
 import LevelStageSummary from './LevelStageSummary'
 
@@ -18,6 +18,9 @@ const styles = {
   options: {
     padding: '0rem 1rem',
   },
+  steps: {
+    padding: '1rem 0.5rem',
+  },
   title: {},
 }
 
@@ -31,19 +34,41 @@ interface Props {
 }
 
 const Level = ({ level, stages, onNext, onBack }: Props) => {
-  const { title, text } = level.content
+  const { content, stageList } = level
+  const { title, text } = content
+  const activeIndex = stageList.findIndex((stageId: string) => {
+    return stages[stageId].status.active
+  })
+
   return (
     <div style={styles.card}>
       <div style={styles.content}>
         <h2 style={styles.title}>{title}</h2>
         <Markdown>{text}</Markdown>
       </div>
-      <Divider />
-      <div style={styles.list}>
-        {level.stageList.map((stageId: string) => {
-          const stage = stages[stageId]
-          return <LevelStageSummary key={stageId} stage={stage} onNext={onNext} />
-        })}
+      <div style={styles.steps}>
+        <Step current={activeIndex} direction="ver" animation={false}>
+          {stageList.map((stageId: string, index: number) => {
+            const stage: CC.StageWithStatus = stages[stageId]
+            const { active } = stage.status
+            const clickHandler = active ? onNext : () => {}
+            // note - must add click handler to title, content & step.item
+            // as all are separted components
+            return (
+              <Step.Item
+                key={stageId}
+                style={{ backgroundColor: 'blue' }}
+                title={
+                  <span className={active ? 'hover-select' : ''} onClick={clickHandler}>
+                    {stage.content.title || `Stage ${index + 1}`}
+                  </span>
+                }
+                content={<LevelStageSummary key={stageId} stage={stage} onNext={clickHandler} />}
+                onClick={clickHandler}
+              />
+            )
+          })}
+        </Step>
       </div>
       <div style={styles.options}>
         <Button onClick={onBack}>Back</Button>

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

@@ -0,0 +1,31 @@
+import * as React from 'react'
+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 readOnly>
+          {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/components/Step/index.tsx

@@ -1,13 +1,15 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+.hover-select:hover {
+  cursor: pointer;
 }

web-app/src/styles/index.css

@@ -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/src/tutorials/basic.ts

@@ -23,7 +23,7 @@ storiesOf('Tutorial SideBar', module)
         stage1Id: {
           content: {
             text: 'some description',
-            title: 'Stage 1',
+            title: 'First',
           },
           status: {
             active: false,
@@ -34,7 +34,7 @@ storiesOf('Tutorial SideBar', module)
         stage2Id: {
           content: {
             text: 'some description',
-            title: 'Stage 2',
+            title: 'Second',
           },
           status: {
             active: true,
@@ -45,7 +45,7 @@ storiesOf('Tutorial SideBar', module)
         stage3Id: {
           content: {
             text: 'some description',
-            title: 'Stage 3',
+            title: 'Third',
           },
           status: {
             active: false,