Feature/select tutorial style

web-app/src/Routes.tsx

@@ -3,7 +3,7 @@ import useRouter from './components/Router'
 import Workspace from './components/Workspace'
 import LoadingPage from './containers/Loading'
 import StartPage from './containers/Start'
-import NewPage from './containers/New'
+import SelectTutorialPage from './containers/SelectTutorial'
 import OverviewPage from './containers/Overview'
 import CompletedPage from './containers/Tutorial/CompletedPage'
 import LevelSummaryPage from './containers/Tutorial/LevelPage'
@@ -27,7 +27,7 @@ const Routes = () => {
           <LoadingPage text="Error" context={context} />
         </Route>
         <Route path="Setup.SelectTutorial">
-          <NewPage send={send} context={context} />
+          <SelectTutorialPage send={send} context={context} />
         </Route>
         <Route path="Setup.Summary">
           <OverviewPage send={send} context={context} />

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

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { css, jsx } from '@emotion/core'
+
+const styles = {
+  tag: {
+    padding: '3px',
+    backgroundColor: 'rgb(225, 236, 244)',
+    color: 'rgb(57, 115, 157)',
+  },
+}
+
+type Props = {
+  children: string
+}
+
+const Tag = (props: Props) => <div css={styles.tag}>{props.children}</div>
+
+export default Tag

web-app/src/containers/SelectTutorial/SelectTutorial.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import * as T from 'typings'
+import * as G from 'typings/graphql'
+import { css, jsx } from '@emotion/core'
+import TutorialItem from './TutorialItem'
+
+const styles = {
+  page: {
+    position: 'relative' as 'relative',
+    width: '100%',
+  },
+  header: {
+    height: '2rem',
+    backgroundColor: '#EBEBEB',
+    fontSize: '1rem',
+    lineHeight: '1rem',
+    padding: '10px 1rem',
+  },
+  banner: {
+    minHeight: '3rem',
+    fontSize: '1rem',
+    padding: '1rem',
+  },
+}
+
+interface Props {
+  send(action: T.Action): void
+  tutorialList: G.Tutorial[]
+}
+
+const SelectTutorial = (props: Props) => {
+  const onSelect = (tutorial: G.Tutorial) => {
+    props.send({
+      type: 'SELECT_TUTORIAL',
+      payload: {
+        tutorial,
+      },
+    })
+  }
+  return (
+    <div css={styles.page}>
+      <div css={styles.header}>
+        <span>CodeRoad</span>
+      </div>
+      <div css={styles.banner}>
+        <span>Select a tutorial to launch in this workspace:</span>
+      </div>
+      <div>
+        {props.tutorialList.map((tutorial: G.Tutorial) => (
+          <TutorialItem
+            key={tutorial.id}
+            onSelect={() => onSelect(tutorial)}
+            title={tutorial.summary.title || ''}
+            description={tutorial.summary.description || ''}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default SelectTutorial

web-app/src/containers/New/TutorialList/TutorialItem.tsx → web-app/src/containers/SelectTutorial/TutorialItem.tsx

@@ -1,11 +1,36 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
-import Card from '../../../components/Card'
-import Markdown from '../../../components/Markdown'
+import Card from '../../components/Card'
+import Tag from '../../components/Tag'
 
 const styles = {
   card: {
     cursor: 'pointer',
+    display: 'inline-flex' as 'inline-flex',
+    flexDirection: 'row' as 'row',
+    minWidth: 500,
+  },
+  left: {
+    width: 80,
+    display: 'flex' as 'flex',
+    alignItems: 'center' as 'center',
+  },
+  right: {
+    flex: '1',
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+  },
+  title: {
+    margin: 0,
+  },
+  author: {
+    margin: '0 0 2px 0',
+    color: 'grey',
+  },
+  tags: {
+    display: 'flex' as 'flex',
+    alignItems: 'center' as 'center',
+    padding: '2px',
   },
   languages: {
     display: 'flex' as 'flex',
@@ -38,11 +63,18 @@ const LanguageIcon = () => (
 )
 
 const TutorialItem = (props: Props) => (
-  <Card onClick={props.onSelect} style={styles.card}>
-    <h3>{props.title || 'Title'}</h3>
-    <Markdown minimal>{props.description || 'Description'}</Markdown>
-    <div css={styles.languages}>
-      <LanguageIcon />
+  <Card onClick={props.onSelect}>
+    <div style={styles.card}>
+      <div css={styles.left}>
+        <img src="https://via.placeholder.com/75/75" height="75px" width="75px" />
+      </div>
+      <div css={styles.right}>
+        <h2 css={styles.title}>{props.title || 'Title'}</h2>
+        <h3 css={styles.author}>Author Name</h3>
+        <div css={styles.tags}>
+          <Tag>javascript</Tag>
+        </div>
+      </div>
     </div>
   </Card>
 )

web-app/src/containers/New/index.tsx → web-app/src/containers/SelectTutorial/index.tsx

@@ -5,7 +5,7 @@ import * as G from 'typings/graphql'
 import ErrorView from '../../components/Error'
 import queryTutorials from '../../services/apollo/queries/tutorials'
 import LoadingPage from '../Loading'
-import NewPage from './NewPage'
+import SelectTutorial from './SelectTutorial'
 
 interface ContainerProps {
   send(action: T.Action): void
@@ -16,7 +16,7 @@ interface TutorialsData {
   tutorials: G.Tutorial[]
 }
 
-const NewPageContainer = (props: ContainerProps) => {
+const SelectPageContainer = (props: ContainerProps) => {
   const { data, loading, error } = useQuery<TutorialsData>(queryTutorials, {
     fetchPolicy: 'no-cache',
   })
@@ -33,7 +33,7 @@ const NewPageContainer = (props: ContainerProps) => {
     return null
   }
 
-  return <NewPage tutorialList={data.tutorials} send={props.send} />
+  return <SelectTutorial tutorialList={data.tutorials} send={props.send} />
 }
 
-export default NewPageContainer
+export default SelectPageContainer

web-app/stories/New.stories.tsx → web-app/stories/SelectTutorial.stories.tsx

@@ -1,9 +1,8 @@
 import { action } from '@storybook/addon-actions'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import NewPage from '../src/containers/New/NewPage'
-import TutorialList from '../src/containers/New/TutorialList'
-import TutorialItem from '../src/containers/New/TutorialList/TutorialItem'
+import SelectTutorial from '../src/containers/SelectTutorial/SelectTutorial'
+import TutorialItem from '../src/containers/SelectTutorial/TutorialItem'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 const tutorialList = [
@@ -25,11 +24,8 @@ const tutorialList = [
 
 storiesOf('Select Tutorial', module)
   .addDecorator(SideBarDecorator)
-  .add('New Page', () => {
-    return <NewPage tutorialList={tutorialList} />
-  })
-  .add('Tutorial List', () => {
-    return <TutorialList tutorialList={tutorialList} />
+  .add('Select Tutorial Page', () => {
+    return <SelectTutorial tutorialList={tutorialList} send={action('send')} />
   })
   .add('Tutorial Item', () => {
     const tutorial = tutorialList[0]