Mar 21, 2020 · Mar 21, 2020
diff --git a/web-app/src/containers/SelectTutorial/SelectTutorial.tsx b/web-app/src/containers/SelectTutorial/SelectTutorial.tsx
            onSelect={() => onSelect(tutorial)}
            title={tutorial.summary.title || ''}
            description={tutorial.summary.description || ''}
            createdBy={tutorial.createdBy}
          />
        ))}
      </div>
diff --git a/web-app/src/containers/SelectTutorial/TutorialItem.tsx b/web-app/src/containers/SelectTutorial/TutorialItem.tsx
 import * as React from 'react'
 import * as G from 'typings/graphql'
 import { css, jsx } from '@emotion/core'
 import Card from '../../components/Card'
 import Tag from '../../components/Tag'
 }

 interface Props {
  title?: string
  description?: string
  title: string
  description: string
  createdBy?: G.User | null
  onSelect(): void
 }

        <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>
        <h2 css={styles.title}>{props.title}</h2>
 {props.createdBy &&<h3 css={styles.author}>{props.createdBy.name}</h3>}
        <div css={styles.tags}>
          <Tag>javascript</Tag>
        </div>
diff --git a/web-app/stories/SelectTutorial.stories.tsx b/web-app/stories/SelectTutorial.stories.tsx
      title: 'Tutorial 1',
      description: 'The first one',
    },
    createdBy: {
      name: 'First Lastname',
    },
  },
  {
    id: '2',
    summary: {
      title: 'Tutorial 2',
      description: 'The second one',
    },
    createdBy: {
      name: 'Joe Schmo',
    },
  },
 ]

        onSelect={action('onSelect')}
        title={tutorial.summary.title}
        description={tutorial.summary.description}
        createdBy={{ name: 'First Lastname' }}
      />
    )
  })
Original file line number	Diff line number	Diff line change
Expand Up		@@ -42,6 +42,7 @@ const SelectTutorial = (props: Props) => {
		onSelect={() => onSelect(tutorial)}
		title={tutorial.summary.title \|\| ''}
		description={tutorial.summary.description \|\| ''}
		createdBy={tutorial.createdBy}
		/>
		))}
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,5 @@
		import * as React from 'react'
		import * as G from 'typings/graphql'
		import { css, jsx } from '@emotion/core'
		import Card from '../../components/Card'
		import Tag from '../../components/Tag'
Expand DownExpand Up		@@ -46,8 +47,9 @@ const styles = {
		}

		interface Props {
		title?: string
		description?: string
		title: string
		description: string
		createdBy?: G.User \| null
		onSelect(): void
		}

Expand All		@@ -69,8 +71,8 @@ const TutorialItem = (props: Props) => (
		<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>
		<h2 css={styles.title}>{props.title}</h2>
		{props.createdBy &&<h3 css={styles.author}>{props.createdBy.name}</h3>}
		<div css={styles.tags}>
		<Tag>javascript</Tag>
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,13 +12,19 @@ const tutorialList = [
		title: 'Tutorial 1',
		description: 'The first one',
		},
		createdBy: {
		name: 'First Lastname',
		},
		},
		{
		id: '2',
		summary: {
		title: 'Tutorial 2',
		description: 'The second one',
		},
		createdBy: {
		name: 'Joe Schmo',
		},
		},
		]

Expand All		@@ -34,6 +40,7 @@ storiesOf('Select Tutorial', module)
		onSelect={action('onSelect')}
		title={tutorial.summary.title}
		description={tutorial.summary.description}
		createdBy={{ name: 'First Lastname' }}
		/>
		)
		})