Merge pull request #407 from coderoad/feature/continue-tutorial-title

Feature/continue tutorial title

Author: ShMcK

web-app/src/containers/Start/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as CR from 'typings'
 import * as TT from 'typings/tutorial'
+import { Progress } from '@alifd/next'
 import BetaBadge from '../../components/BetaBadge'
 import { css, jsx } from '@emotion/core'
 import Button from '../../components/Button'
@@ -41,7 +42,29 @@ const styles = {
     justifyContent: 'flex-start' as 'flex-start',
     alignItems: 'center' as 'center',
   },
+  buttonLarge: (theme: Theme) => ({
+    padding: '0.2rem 1rem',
+    border: `solid 1px ${theme['$color-line1-3']}`,
+    borderRadius: '3px',
+    minHeight: '2rem',
+    fontSize: '16px',
+    backgroundColor: 'white',
+    lineHeight: '1.5rem',
+    color: theme['$color-text1-4'],
+    '&:hover,&:focus': css({
+      backgroundColor: theme['$color-fill1-1'],
+      borderColor: theme['$color-line1-4'],
+    }),
+  }),
+  continueTitle: (theme: Theme) => ({
+    color: theme['$color-text1-3'],
+    fontSize: '12px',
+  }),
   buttonContainer: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+    justifyContent: 'center' as 'center',
+    alignItems: 'center' as 'center',
     margin: '0.5rem',
   },
 }
@@ -50,6 +73,7 @@ interface Props {
   onContinue(): void
   onNew(): void
   tutorial?: TT.Tutorial
+  progress?: number
 }
 
 export const StartPage = (props: Props) => (
@@ -72,9 +96,11 @@ export const StartPage = (props: Props) => (
       </div>
       {props.tutorial && (
         <div css={styles.buttonContainer}>
-          <Button size="large" onClick={props.onContinue} style={{ padding: '0 1rem' }}>
-            Continue Current Tutorial
-          </Button>
+          <button onClick={props.onContinue} css={styles.buttonLarge}>
+            Continue Tutorial
+            <div css={styles.continueTitle}>"{props.tutorial.summary.title}"</div>
+            <Progress style={{ marginLeft: '1rem' }} percent={props.progress || 0} hasBorder size="large" />
+          </button>
         </div>
       )}
     </div>
@@ -88,11 +114,18 @@ interface ContainerProps {
 
 const StartPageContainer = ({ context, send }: ContainerProps) => {
   const tutorial = context.tutorial || undefined
+  let progress
+  if (tutorial) {
+    const totalLevels = tutorial.levels.length
+    const firstIncompleteLevelIndex = tutorial.levels.findIndex((level) => !context.progress.levels[level.id])
+    progress = Math.round((firstIncompleteLevelIndex / totalLevels) * 100)
+  }
   return (
     <StartPage
       onContinue={() => send({ type: 'CONTINUE_TUTORIAL' })}
       onNew={() => send({ type: 'NEW_TUTORIAL' })}
       tutorial={tutorial}
+      progress={progress}
     />
   )
 }

web-app/stories/Start.stories.tsx

@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions'
 import React from 'react'
 import { css, jsx } from '@emotion/core'
 import SideBarDecorator from './utils/SideBarDecorator'
-import StartPage from '../src/containers/Start'
+import { StartPage } from '../src/containers/Start'
 
 const styles = {
   container: {},
@@ -14,20 +14,20 @@ storiesOf('Start', module)
   .add('New', () => {
     return (
       <div css={styles.container}>
-        <StartPage send={action('send')} context={{}} />
+        <StartPage onNew={action('onNew')} onContinue={action('onContinue')} />
       </div>
     )
   })
   .add('Continue', () => {
     const tutorial = {
       summary: {
-        title: 'Tutorial Title',
+        title: 'Tutorial Title With A Really Long Name',
         summary: 'Tutorial Summary',
       },
     }
     return (
       <div css={styles.container}>
-        <StartPage send={action('send')} context={{ tutorial }} />
+        <StartPage onNew={action('onNew')} onContinue={action('onContinue')} tutorial={tutorial} progress={20} />
       </div>
     )
   })