Skip to content

Commit 74feeab

Browse files
ShMcKShMcK
authoredOct 26, 2019
Merge pull request #44 from ShMcK/feature/re-enable-storybook
Feature/re enable storybook
·
v0.19.40.2.0
2 parents 09506e1 + e646168 commit 74feeab

File tree

22 files changed

+664
-618
lines changed

22 files changed

+664
-618
lines changed
 

‎typings/graphql.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export type GithubUser = {
7676
export type Level = {
7777
__typename?: 'Level',
7878
id: Scalars['ID'],
79+
index?: number
7980
title: Scalars['String'],
8081
description: Scalars['String'],
8182
steps: Array<Step>,
@@ -583,3 +584,4 @@ export interface IntrospectionResultData {
583584
}[];
584585
};
585586
}
587+

‎web-app/.storybook/addons.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import '@storybook/addon-actions/register'
22
import '@storybook/addon-knobs/register'
33
import '@storybook/addon-links/register'
4-
4+
import '@storybook/addon-viewport/register'

‎web-app/.storybook/config.ts

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,38 @@
11
import '@alifd/next/dist/next.css'
2-
import { configure } from '@storybook/react'
2+
import {configure, addParameters} from '@storybook/react'
33
import '../src/styles/index.css'
44

55
// setup acquireVsCodeApi mock
66
// @ts-ignore
77
global.acquireVsCodeApi = () => ({
8-
postMessage(event: string) {
9-
console.log('postMessage', event)
10-
}
8+
postMessage(event: string) {
9+
console.log('postMessage', event)
10+
}
1111
})
1212

1313

1414
// automatically import all files ending in *.stories.tsx
1515
const req = require.context('../stories', true, /\.stories\.tsx$/)
1616

1717
function loadStories() {
18-
req.keys().forEach(req)
18+
req.keys().forEach(req)
1919
}
2020

21+
// set viewport width
22+
// see https://www.npmjs.com/package/@storybook/addon-viewport
23+
addParameters({
24+
viewport: {
25+
viewports: {
26+
name: 'SideMenu',
27+
styles: {
28+
width: 200,
29+
height: window.innerHeight,
30+
},
31+
type: 'mobile'
32+
},
33+
defaultViewport: 'SideMenu',
34+
},
35+
})
36+
2137
configure(loadStories, module)
38+

‎web-app/package-lock.json

Lines changed: 375 additions & 318 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web-app/package.json

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,39 +26,39 @@
2626
"extends": "react-app"
2727
},
2828
"dependencies": {
29-
"@alifd/next": "^1.17.12",
30-
"@apollo/react-hooks": "^3.1.2",
29+
"@alifd/next": "^1.18.8",
30+
"@apollo/react-hooks": "^3.1.3",
3131
"apollo-boost": "^0.4.4",
3232
"graphql": "^14.5.8",
3333
"markdown-it": "^10.0.0",
3434
"markdown-it-emoji": "^1.4.0",
3535
"markdown-it-prism": "^2.0.3",
3636
"moment": "^2.24.0",
3737
"ramda": "^0.26.1",
38-
"react": "^16.10.2",
39-
"react-dom": "^16.10.2",
38+
"react": "^16.11.0",
39+
"react-dom": "^16.11.0",
4040
"reselect": "^4.0.0",
4141
"typescript": "^3.6.4",
4242
"xstate": "^4.6.7"
4343
},
4444
"devDependencies": {
4545
"@babel/core": "^7.5.4",
46-
"@storybook/addon-actions": "^5.2.3",
47-
"@storybook/addon-knobs": "^5.2.3",
48-
"@storybook/addon-links": "^5.2.3",
49-
"@storybook/addons": "^5.2.3",
50-
"@storybook/react": "^5.2.3",
46+
"@storybook/addon-actions": "^5.2.5",
47+
"@storybook/addon-knobs": "^5.2.5",
48+
"@storybook/addon-links": "^5.2.5",
49+
"@storybook/addons": "^5.2.5",
50+
"@storybook/react": "^5.2.5",
5151
"@types/highlight.js": "^9.12.3",
52-
"@types/jest": "^24.0.18",
52+
"@types/jest": "^24.0.20",
5353
"@types/markdown-it": "0.0.9",
54-
"@types/node": "^12.7.12",
55-
"@types/ramda": "^0.26.29",
56-
"@types/react": "^16.9.5",
57-
"@types/react-dom": "^16.9.1",
54+
"@types/node": "^12.11.7",
55+
"@types/ramda": "^0.26.33",
56+
"@types/react": "^16.9.11",
57+
"@types/react-dom": "^16.9.3",
5858
"@types/storybook__react": "^4.0.2",
5959
"babel-loader": "8.0.5",
6060
"babel-plugin-import": "^1.12.1",
61-
"node-sass": "^4.12.0",
61+
"node-sass": "^4.13.0",
6262
"react-scripts": "^3.2.0",
6363
"sass-loader": "^8.0.0",
6464
"typescript-eslint-parser": "^22.0.0"

‎web-app/src/containers/Login/index.tsx

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎web-app/src/containers/New/NewPage.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as React from 'react'
2+
import * as G from 'typings/graphql'
3+
import TutorialList from './TutorialList'
4+
5+
const styles = {
6+
header: {
7+
height: '36px',
8+
backgroundColor: '#EBEBEB',
9+
fontSize: '16px',
10+
lineHeight: '16px',
11+
padding: '10px 1rem',
12+
},
13+
banner: {
14+
height: '50px',
15+
fontSize: '1rem',
16+
padding: '1rem',
17+
},
18+
}
19+
20+
interface Props {
21+
tutorialList: G.Tutorial[]
22+
}
23+
24+
const NewPage = (props: Props) => (
25+
<div>
26+
<div style={styles.header}>
27+
<span>CodeRoad</span>
28+
</div>
29+
<div style={styles.banner}>
30+
<span>Select a Tutorial to Start</span>
31+
</div>
32+
<TutorialList tutorialList={props.tutorialList} />
33+
</div>
34+
)
35+
36+
export default NewPage

‎web-app/src/containers/New/TutorialList/TutorialItem.tsx

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,48 @@
11
import * as React from 'react'
2-
import { Button } from '@alifd/next'
2+
import { Card } from '@alifd/next'
3+
4+
const styles = {
5+
card: {
6+
cursor: 'pointer',
7+
},
8+
languages: {
9+
display: 'flex' as 'flex',
10+
flexDirection: 'row' as 'row',
11+
alignItems: 'center' as 'center',
12+
justifyContent: 'flex-end' as 'flex-end',
13+
width: '100%',
14+
},
15+
languageIcon: {
16+
width: 30,
17+
height: 30,
18+
},
19+
}
320

421
interface Props {
522
title?: string
6-
text?: string
23+
description?: string
724
onSelect(): void
825
}
926

27+
// icons from https://konpa.github.io/devicon/
28+
const LanguageIcon = () => (
29+
<svg viewBox="0 0 128 128" style={styles.languageIcon}>
30+
<path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
31+
<path
32+
fill="#323330"
33+
d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"
34+
></path>
35+
</svg>
36+
)
37+
1038
const TutorialItem = (props: Props) => (
11-
<div>
39+
<Card onClick={props.onSelect} style={styles.card}>
1240
<h3>{props.title || 'Title'}</h3>
13-
<p>{props.text || 'Description'}</p>
14-
<Button onClick={props.onSelect}>Start</Button>
15-
</div>
41+
<p>{props.description || 'Description'}</p>
42+
<div style={styles.languages}>
43+
<LanguageIcon />
44+
</div>
45+
</Card>
1646
)
1747

1848
export default TutorialItem

‎web-app/src/containers/New/TutorialList/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const TutorialList = (props: Props) => {
2424
key={tutorial.id}
2525
onSelect={() => onSelect(tutorial)}
2626
title={tutorial.version.summary.title || ''}
27-
text={tutorial.version.summary.description || ''}
27+
description={tutorial.version.summary.description || ''}
2828
/>
2929
))}
3030
</div>

‎web-app/src/containers/New/index.tsx

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,9 @@ import * as G from 'typings/graphql'
44
import * as CR from 'typings'
55

66
import queryTutorials from '../../services/apollo/queries/tutorials'
7+
import NewPage from './NewPage'
78
import LoadingPage from '../LoadingPage'
89
import ErrorView from '../../components/Error'
9-
import TutorialList from './TutorialList'
10-
11-
interface Props {
12-
tutorialList: G.Tutorial[]
13-
}
14-
15-
export const NewPage = (props: Props) => (
16-
<div>
17-
<h2>Start a New Tutorial</h2>
18-
<TutorialList tutorialList={props.tutorialList} />
19-
</div>
20-
)
2110

2211
const Loading = () => <LoadingPage text="Loading tutorials" />
2312

‎web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const styles = {
77
// backgroundColor: '#e6f7ff',
88
// },
99
card: {
10-
paddingRight: '1rem',
10+
padding: '0 1rem 1rem 0.5rem',
1111
},
1212
}
1313

‎web-app/src/containers/Tutorial/LevelPage/Level/index.tsx

Lines changed: 60 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ const styles = {
99
card: {
1010
padding: 0,
1111
},
12+
header: {
13+
height: '36px',
14+
backgroundColor: '#EBEBEB',
15+
fontSize: '16px',
16+
lineHeight: '16px',
17+
padding: '10px 1rem',
18+
},
1219
content: {
1320
padding: '0rem 1rem',
1421
paddingBottom: '1rem',
@@ -17,9 +24,24 @@ const styles = {
1724
padding: '0rem 1rem',
1825
},
1926
steps: {
20-
padding: '1rem 0rem',
27+
padding: '1rem 16px',
28+
},
29+
title: {
30+
fontSize: '1.2rem',
31+
fontWeight: 'bold' as 'bold',
32+
lineHeight: '1.2rem',
33+
},
34+
footer: {
35+
height: '36px',
36+
backgroundColor: 'black',
37+
fontSize: '16px',
38+
lineHeight: '16px',
39+
padding: '10px 1rem',
40+
color: 'white',
41+
position: 'absolute' as 'absolute',
42+
bottom: 0,
43+
width: '100%',
2144
},
22-
title: {},
2345
}
2446

2547
interface Props {
@@ -40,32 +62,50 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
4062

4163
return (
4264
<div style={styles.card}>
43-
<div style={styles.content}>
44-
<h2 style={styles.title}>{level.title}</h2>
45-
<Markdown>{level.description || ''}</Markdown>
65+
<div>
66+
<div style={styles.header}>
67+
<span>Learn</span>
68+
</div>
69+
<div style={styles.content}>
70+
<h2 style={styles.title}>{level.title}</h2>
71+
<Markdown>{level.description || ''}</Markdown>
72+
</div>
4673
</div>
47-
<div style={styles.steps}>
48-
<Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
49-
{level.steps.map((step: G.Step | null, index: number) => {
50-
if (!step) {
51-
return null
52-
}
53-
return (
54-
<Step.Item
55-
key={step.id}
56-
title={step.title || `Step ${index + 1}`}
57-
content={<StepDescription text={step.description} mode={step.status} onLoadSolution={onLoadSolution} />}
58-
/>
59-
)
60-
})}
61-
</Step>
74+
75+
<div>
76+
<div style={styles.header}>Tasks</div>
77+
<div style={styles.steps}>
78+
<Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
79+
{level.steps.map((step: G.Step | null, index: number) => {
80+
if (!step) {
81+
return null
82+
}
83+
return (
84+
<Step.Item
85+
key={step.id}
86+
title={step.title || `Step ${index + 1}`}
87+
content={
88+
<StepDescription text={step.description} mode={step.status} onLoadSolution={onLoadSolution} />
89+
}
90+
/>
91+
)
92+
})}
93+
</Step>
94+
</div>
6295
</div>
6396

6497
{level.status === 'COMPLETE' && (
6598
<div style={styles.options}>
6699
<Button onClick={onContinue}>Continue</Button>
67100
</div>
68101
)}
102+
<div>
103+
<div style={styles.footer}>
104+
<span>
105+
{level.index ? `${level.index.toString()}.` : ''} {level.title}
106+
</span>
107+
</div>
108+
</div>
69109
</div>
70110
)
71111
}

‎web-app/src/services/selectors/tutorial.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,13 @@ export const currentLevel = (context: MachineContext): G.Level => createSelector
2525
// sent with the test to ensure consistency
2626
const levels: G.Level[] = version.data.levels
2727

28-
const level: G.Level | undefined = levels.find((l: G.Level) => l.id === context.position.levelId)
29-
30-
if (!level) {
28+
const levelIndex = levels.findIndex((l: G.Level) => l.id === context.position.levelId)
29+
if (levelIndex < 0) {
3130
throw new Error('Level not found when selecting level')
3231
}
32+
const level: G.Level = levels[levelIndex]
33+
level.index = levelIndex
34+
3335
return level
3436
})(context)
3537

‎web-app/stories/Continue.stories.tsx

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎web-app/stories/Level.stories.tsx

Lines changed: 55 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,68 @@
11
import React from 'react'
2+
import * as G from '../../typings/graphql'
23

3-
import { object, withKnobs } from '@storybook/addon-knobs'
44
import { action } from '@storybook/addon-actions'
5-
import { linkTo } from '@storybook/addon-links'
5+
import { withKnobs } from '@storybook/addon-knobs'
66
import { storiesOf } from '@storybook/react'
7-
import SideBarDecorator from './utils/SideBarDecorator'
87

9-
import apolloProvider from './utils/ApolloDecorator'
10-
import Level from '../src/containers/Tutorial/LevelPage/Level'
11-
import LevelSummaryPageContainer, { LevelSummaryPage } from '../src/containers/Tutorial/LevelPage'
8+
import SideBarDecorator from './utils/SideBarDecorator'
9+
import Level from '../src/containers/Tutorial/LevelPage/Level/index'
1210

1311
storiesOf('Tutorial SideBar', module)
1412
.addDecorator(SideBarDecorator)
1513
.addDecorator(withKnobs)
16-
.add('Level', () => (
17-
<Level
18-
level={object('level', {
19-
id: '1',
20-
title: 'Sum Level',
21-
text: 'A description of this stage',
22-
stages: [
23-
{
24-
id: '1',
25-
title: 'First',
26-
text: 'some description',
27-
status: 'COMPLETED',
14+
.add('Level', () => {
15+
const level: G.Level & { index: number } = {
16+
id: 'L1',
17+
index: 2,
18+
title: 'A Title',
19+
description: 'Some description',
20+
setup: null,
21+
status: 'ACTIVE',
22+
steps: [
23+
{
24+
id: 'L1:S1',
25+
title: 'First Step',
26+
description: 'First step description',
27+
setup: {
28+
id: 'L1:S1:SETUP',
29+
commits: ['abcdefg'],
2830
},
29-
{
30-
id: '2',
31-
title: 'Second',
32-
text: 'The second one',
33-
status: 'ACTIVE',
31+
solution: {
32+
id: 'L1:S1:SOLUTION',
33+
commits: ['hijklmn'],
3434
},
35-
{
36-
id: '3',
37-
title: 'Third',
38-
text: 'The third one',
39-
status: 'INCOMPLETE',
35+
status: 'COMPLETE',
36+
},
37+
{
38+
id: 'L1:S2',
39+
title: 'Second Step',
40+
description: 'Second step description',
41+
setup: {
42+
id: 'L1:S2:SETUP',
43+
commits: ['abcdefg'],
4044
},
41-
],
42-
})}
43-
onNext={linkTo('Tutorial SideBar', 'Stage')}
44-
onBack={linkTo('TUtorial SideBar', 'Summary')}
45-
/>
46-
))
47-
.add('Level Summary', () => {
48-
return (
49-
<LevelSummaryPage
50-
send={action('send')}
51-
level={{
52-
id: '1',
53-
title: 'Sum Level',
54-
text: 'A description of this stage',
55-
stages: [
56-
{
57-
id: '1',
58-
title: 'First',
59-
text: 'some description',
60-
status: 'COMPLETE',
61-
},
62-
{
63-
id: '2',
64-
title: 'Second',
65-
text: 'The second one',
66-
status: 'ACTIVE',
67-
},
68-
{
69-
id: '3',
70-
title: 'Third',
71-
text: 'The third one',
72-
status: 'INCOMPLETE',
73-
},
74-
],
75-
}}
76-
/>
77-
)
78-
})
79-
.addDecorator(apolloProvider)
80-
.add('Level Summary Container', () => {
81-
return <LevelSummaryPageContainer send={action('send')} />
45+
solution: {
46+
id: 'L1:S2:SOLUTION',
47+
commits: ['hijklmn'],
48+
},
49+
status: 'ACTIVE',
50+
},
51+
{
52+
id: 'L1:S3',
53+
title: 'Third Step',
54+
description: 'Third step description',
55+
setup: {
56+
id: 'L1:S3:SETUP',
57+
commits: ['abcdefg'],
58+
},
59+
solution: {
60+
id: 'L1:S3:SOLUTION',
61+
commits: ['hijklmn'],
62+
},
63+
status: 'INCOMPLETE',
64+
},
65+
],
66+
}
67+
return <Level level={level} onContinue={action('onContinue')} onLoadSolution={action('onLoadSolution')} />
8268
})

‎web-app/stories/Loading.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'
22

33
import { storiesOf } from '@storybook/react'
4-
import SideBarDecorator from './utils/SideBarDecorator'
54

5+
import SideBarDecorator from './utils/SideBarDecorator'
66
import LoadingPage from '../src/containers/LoadingPage'
77

88
storiesOf('Components', module)

‎web-app/stories/Login.stories.tsx

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎web-app/stories/New.stories.tsx

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,42 @@
11
import React from 'react'
22
import { storiesOf } from '@storybook/react'
33
import { action } from '@storybook/addon-actions'
4-
import * as T from '../../typings/graphql'
5-
import apolloProvider from './utils/ApolloDecorator'
64

5+
import SideBarDecorator from './utils/SideBarDecorator'
6+
import NewPage from '../src/containers/New/NewPage'
77
import TutorialList from '../src/containers/New/TutorialList'
88
import TutorialItem from '../src/containers/New/TutorialList/TutorialItem'
9-
import NewContainer from '../src/containers/New'
109

11-
storiesOf('New', module)
12-
.add('Tutorial', () => {
13-
const tutorial = {
14-
id: '1',
15-
title: 'Tutorial 1',
16-
text: 'The first one',
17-
}
18-
return <TutorialItem onSelect={action('onSelect')} title={tutorial.title} text={tutorial.text} />
19-
})
20-
.add('TutorialList', () => {
21-
const tutorialList = [
22-
{
23-
id: '1',
10+
const tutorialList = [
11+
{
12+
id: '1',
13+
version: {
14+
summary: {
2415
title: 'Tutorial 1',
25-
text: 'The first one',
16+
description: 'The first one',
2617
},
27-
{
28-
id: '2',
18+
},
19+
},
20+
{
21+
id: '2',
22+
version: {
23+
summary: {
2924
title: 'Tutorial 2',
30-
text: 'The second one',
25+
description: 'The second one',
3126
},
32-
]
33-
return <TutorialList tutorialList={tutorialList} onNew={action('onNew')} />
27+
},
28+
},
29+
]
30+
31+
storiesOf('New', module)
32+
.addDecorator(SideBarDecorator)
33+
.add('New Page', () => {
34+
return <NewPage tutorialList={tutorialList} />
35+
})
36+
.add('Tutorial List', () => {
37+
return <TutorialList tutorialList={tutorialList} />
38+
})
39+
.add('Tutorial Item', () => {
40+
const tutorial = tutorialList[0]
41+
return <TutorialItem onSelect={action('onSelect')} title={tutorial.title} description={tutorial.description} />
3442
})
35-
.addDecorator(apolloProvider)
36-
.add('Container', () => <NewContainer />)

‎web-app/stories/Router.stories.tsx

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎web-app/stories/Stage.stories.tsx

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎web-app/stories/Step.stories.tsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,49 @@
11
import React from 'react'
22

3-
import { boolean, text, withKnobs } from '@storybook/addon-knobs'
3+
import { action } from '@storybook/addon-actions'
4+
import { select, text, withKnobs } from '@storybook/addon-knobs'
45
import { storiesOf } from '@storybook/react'
56
import SideBarDecorator from './utils/SideBarDecorator'
67

7-
import Step from '../src/containers/Tutorial/StagePage/Stage/StepDescription'
8+
import StepDescription from '../src/containers/Tutorial/LevelPage/Level/StepDescription'
89

910
const stepText =
1011
'This is a long paragraph of step text intended to wrap around the side after a short period of writing to demonstrate text wrap among other things'
1112

1213
const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
1314
\`\`\`javascript
1415
var a = 12
15-
16+
1617
function example(a) {
1718
return a + 1
1819
}
1920
\`\`\`
20-
21+
2122
Headers can be added:
22-
23+
2324
# h1
2425
## h2
2526
### h3
2627
#### h4
2728
##### h5
28-
29+
2930
Emojis: :) :| :(
3031
`
3132

3233
storiesOf('Tutorial SideBar', module)
3334
.addDecorator(SideBarDecorator)
3435
.addDecorator(withKnobs)
35-
.add('Step', () => <Step text={text('text', stepText)} hide={boolean('hide', false)} />)
36-
.add('Step Markdown', () => <Step text={text('text', paragraphText)} hide={boolean('hide', false)} />)
36+
.add('Step Description', () => (
37+
<StepDescription
38+
text={text('text', stepText)}
39+
mode={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
40+
onLoadSolution={action('onLoadSolution')}
41+
/>
42+
))
43+
.add('Step Markdown', () => (
44+
<StepDescription
45+
text={text('text', paragraphText)}
46+
mode={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
47+
onLoadSolution={action('onLoadSolution')}
48+
/>
49+
))

‎web-app/stories/Summary.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import React from 'react'
22

33
import { linkTo } from '@storybook/addon-links'
44
import { storiesOf } from '@storybook/react'
5-
import SideBarDecorator from './utils/SideBarDecorator'
65

6+
import SideBarDecorator from './utils/SideBarDecorator'
77
import Summary from '../src/containers/Tutorial/SummaryPage/Summary'
88

99
storiesOf('Tutorial SideBar', module)
1010
.addDecorator(SideBarDecorator)
1111
.add('Summary', () => (
12-
<Summary title="Some Title" text="Some description" onNext={linkTo('Tutorial SideBar', 'Level')} />
12+
<Summary title="Some Title" description="Some description" onNext={linkTo('Tutorial SideBar', 'Level')} />
1313
))

0 commit comments

Comments
 (0)
Please sign in to comment.