add Level page summary

web-app/src/Routes.tsx

@@ -6,7 +6,7 @@ import Router from './components/Router'
 import LoadingPage from './containers/LoadingPage'
 import ContinuePage from './containers/Continue'
 import NewPage from './containers/New'
-import SummaryPage from './containers/Tutorial/SummaryPage'
+import OverviewPage from './containers/Overview'
 import LevelSummaryPage from './containers/Tutorial/LevelPage'
 import CompletedPage from './containers/Tutorial/CompletedPage'
 
@@ -34,7 +34,7 @@ const Routes = () => {
           <LoadingPage text="Loading..." />
         </Route>
         <Route path="Tutorial.Summary">
-          <SummaryPage send={tempSend} context={{} as CR.MachineContext} />
+          <OverviewPage send={tempSend} context={{} as CR.MachineContext} />
         </Route>
         <Route path="Tutorial.Level">
           <LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />

web-app/src/containers/Overview/OverviewPage.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import { Button } from '@alifd/next'
+import * as G from 'typings/graphql'
+
+const styles = {
+  summary: {
+    padding: '0rem 1rem 1rem 1rem',
+  },
+  title: {
+    fontWeight: 'bold' as 'bold',
+  },
+  description: {
+    fontSize: '1rem',
+  },
+  header: {
+    height: '36px',
+    backgroundColor: '#EBEBEB',
+    fontSize: '16px',
+    lineHeight: '16px',
+    padding: '10px 1rem',
+  },
+  levelList: {
+    padding: '0rem 1rem',
+  },
+  options: {
+    display: 'flex' as 'flex',
+    flexDirection: 'row' as 'row',
+    alignItems: 'center' as 'center',
+    justifyContent: 'flex-end' as 'flex-end',
+    position: 'absolute' as 'absolute',
+    bottom: 0,
+    height: '50px',
+    padding: '1rem',
+    backgroundColor: 'black',
+    width: '100%',
+  },
+  startButton: {
+    backgroundColor: 'gold',
+    fontWeight: 'bold' as 'bold',
+  },
+}
+
+interface Props {
+  title: string
+  description: string
+  levels: G.Level[]
+  onNext(): void
+}
+
+const Summary = ({ title, description, levels, onNext }: Props) => (
+  <div>
+    <div style={styles.header}>
+      <span>CodeRoad</span>
+    </div>
+    <div style={styles.summary}>
+      <h2 style={styles.title}>{title}</h2>
+      <p style={styles.description}>{description}</p>
+    </div>
+    <div>
+      <div style={styles.header}>
+        <span>Levels</span>
+      </div>
+      <div style={styles.levelList}>
+        {levels.map((level: G.Level, index: number) => (
+          <div key={index}>
+            <h4>
+              {index + 1}. {level.title}
+            </h4>
+            <div>{level.description}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div style={styles.options}>
+      {/* TODO: Add back button */}
+      <Button style={styles.startButton} onClick={() => onNext()}>
+        Start
+      </Button>
+    </div>
+  </div>
+)
+
+export default Summary

web-app/src/containers/Tutorial/SummaryPage/index.tsx → web-app/src/containers/Overview/index.tsx

@@ -3,9 +3,9 @@ import * as G from 'typings/graphql'
 import * as CR from 'typings'
 import { useQuery } from '@apollo/react-hooks'
 
-import queryTutorial from '../../../services/apollo/queries/tutorial'
+import queryTutorial from '../../services/apollo/queries/tutorial'
 import Summary from './Summary'
-import ErrorView from '../../../components/Error'
+import ErrorView from '../../components/Error'
 
 interface PageProps {
   context: CR.MachineContext

web-app/stories/Level.stories.tsx

@@ -8,7 +8,7 @@ import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 import Level from '../src/containers/Tutorial/LevelPage/Level/index'
 
-storiesOf('Tutorial SideBar', module)
+storiesOf('Level', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Level', () => {

web-app/stories/New.stories.tsx

@@ -28,7 +28,7 @@ const tutorialList = [
   },
 ]
 
-storiesOf('New', module)
+storiesOf('Start', module)
   .addDecorator(SideBarDecorator)
   .add('New Page', () => {
     return <NewPage tutorialList={tutorialList} />

web-app/stories/Overview.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { linkTo } from '@storybook/addon-links'
+import { storiesOf } from '@storybook/react'
+
+import SideBarDecorator from './utils/SideBarDecorator'
+import OverViewPage from '../src/containers/Overview/OverviewPage'
+
+storiesOf('Overview', module)
+  .addDecorator(SideBarDecorator)
+  .add('OverView Page', () => {
+    const levels = [
+      {
+        id: 'L1',
+        title: 'The First Level',
+        description: 'A Summary of the first level',
+      },
+      {
+        id: 'L2',
+        title: 'The Second Level',
+        description: 'A Summary of the second level',
+      },
+      {
+        id: 'L3',
+        title: 'The Third Level',
+        description: 'A Summary of the third level',
+      },
+    ]
+    return (
+      <OverViewPage
+        title="Some Title"
+        description="Some description"
+        levels={levels}
+        onNext={linkTo('Tutorial SideBar', 'Level')}
+      />
+    )
+  })

web-app/stories/Step.stories.tsx

@@ -30,7 +30,7 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
   Emojis: :) :| :(
   `
 
-storiesOf('Tutorial SideBar', module)
+storiesOf('Level', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Step Description', () => (