11import React from 'react'
22
3- import { object , withKnobs } from '@storybook/addon-knobs'
3+ import { boolean , text , withKnobs } from '@storybook/addon-knobs'
44import { storiesOf } from '@storybook/react'
55import SideBarDecorator from './utils/SideBarDecorator'
66
@@ -9,46 +9,28 @@ import Step from '../src/components/Stage/StepDescription'
99const stepText =
1010'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'
1111
12+ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
13+ \`\`\`javascript
14+ var a = 12
15+
16+ function example(a) {
17+ return a + 1
18+ }
19+ \`\`\`
20+
21+ Headers can be added:
22+
23+ # h1
24+ ## h2
25+ ### h3
26+ #### h4
27+ ##### h5
28+
29+ Emojis: :) :| :(
30+ `
31+
1232storiesOf ( 'Tutorial SideBar' , module )
1333. addDecorator ( SideBarDecorator )
1434. addDecorator ( withKnobs )
15- . add ( 'Step' , ( ) => (
16- < Step
17- content = { object ( 'content' , {
18- text :stepText ,
19- } ) }
20- status = { object ( 'status' , {
21- active :true ,
22- complete :false ,
23- } ) }
24- />
25- ) )
26- . add ( 'Step Markdown' , ( ) => (
27- < Step
28- content = { object ( 'content' , {
29- text :`Markdown included \`code\`, *bold*, & _italics_.
30- \`\`\`javascript
31- var a = 12
32-
33- function example(a) {
34- return a + 1
35- }
36- \`\`\`
37-
38- Headers can be added:
39-
40- # h1
41- ## h2
42- ### h3
43- #### h4
44- ##### h5
45-
46- Emojis: :) :| :(
47- ` ,
48- } ) }
49- status = { object ( 'status' , {
50- active :false ,
51- complete :true ,
52- } ) }
53- />
54- ) )
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 ) } /> )