add click handler to levels

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,15 +1,26 @@
-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 = {
   card: {
-    // padding: '0.5rem 1rem',
+    display: 'grid',
+    gridTemplateAreas: 'Content Icon',
+    gridTemplateColumns: '1fr 1.5rem',
+    gridTemplateRows: '1fr',
     marginRight: '1.5rem',
   },
-  options: {},
+  continueIcon: {
+    color: '#1890ff',
+  },
+  left: {},
+  right: {
+    alignSelf: 'center',
+    justifySelf: 'center',
+    marginBottom: '1rem',
+  },
 }
 
 interface Props {
@@ -21,9 +32,11 @@ const LevelStageSummary = (props: Props) => {
   const { stage, onNext } = props
   const { active } = stage.status
   return (
-    <div style={styles.card}>
-      <Markdown>{stage.content.text}</Markdown>
-      <div style={styles.options}>{active && <Button onClick={onNext}>Continue</Button>}</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,7 +1,8 @@
 import { Button, Step } from '@alifd/next'
 import * as React from 'react'
 import CR from 'typings'
-3
+import CC from '../../../../typings/context'
+
 import Markdown from '../Markdown'
 import LevelStageSummary from './LevelStageSummary'
 
@@ -38,6 +39,7 @@ const Level = ({ level, stages, onNext, onBack }: Props) => {
   const activeIndex = stageList.findIndex((stageId: string) => {
     return stages[stageId].status.active
   })
+
   return (
     <div style={styles.card}>
       <div style={styles.content}>
@@ -47,12 +49,22 @@ const Level = ({ level, stages, onNext, onBack }: Props) => {
       <div style={styles.steps}>
         <Step current={activeIndex} direction="ver" animation={false}>
           {stageList.map((stageId: string, index: number) => {
-            const stage = stages[stageId]
+            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}
-                title={stage.content.title || `Stage ${index + 1}`}
-                content={<LevelStageSummary key={stageId} stage={stage} onNext={onNext} />}
+                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}
               />
             )
           })}

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

@@ -1,6 +1,4 @@
-import { Checkbox } from '@alifd/next'
 import * as React from 'react'
-// import CC from '../../typings/client'
 import CR from 'typings'
 import Markdown from '../../Markdown'
 

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

@@ -47,7 +47,7 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
         <Markdown>{text}</Markdown>
       </div>
       <div style={styles.steps}>
-        <Step current={activeIndex} direction="ver" shape="dot" animation>
+        <Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
           {filteredStepList.map((stepId: string, index: number) => {
             const step = steps[stepId]
             return (

web-app/src/styles/index.css

@@ -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/stories/Level.stories.tsx

@@ -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,