@@ -7,131 +7,156 @@ export default {
7
7
id : 'uui-scroll-container' ,
8
8
title : 'Displays/Scroll Container' ,
9
9
component : 'uui-scroll-container' ,
10
+ argTypes : {
11
+ slot : {
12
+ control : { type : 'text' } ,
13
+ } ,
14
+ } ,
15
+ parameters : {
16
+ controls : {
17
+ exclude : [ 'styles' ] ,
18
+ } ,
19
+ } ,
10
20
} ;
11
21
12
- export const Overview : Story = ( ) =>
22
+ export const Overview : Story = props =>
13
23
html `
14
24
< uui-scroll-container style ="width:400px; height:400px; ">
15
- < h3 > You should try to be up here</ h3 >
16
- < p >
17
- clumsy, ok thank you for waiting< br />
18
- Let's see if we can get this up and running< br />
19
- umm we gotta a lot to cover over the next one and a half hour< br />
20
- so errr, Say cheese, ahh awesome, what a wonderful day
21
- </ p >
22
- < p >
23
- Thank you very much for coming errr < br />
24
- welcome to the biggest Codegarden ever< br />
25
- without a doubt our biggest ever< br />
26
- the biggest err ever Codegarden< br />
27
- we are more than 380 people err today, < br /> which is err about a little
28
- more than twenty times the people at the first Codegarden< br />
29
- err this year there is more than 700 people, < br /> which makes it more
30
- than 30 times bigger than the very first one< br />
31
- err so awesome to be back at the err the err Umbraco festival
32
- </ p >
33
- < p >
34
- Hey, before we start I just want to be the first one to use the 'hi-five
35
- I suck' tag< br />
36
- the only thing that makes this very different from my normal Christmas
37
- Eve< br />
38
- is that I don't get sweaters like these from my inlaws which makes it
39
- even better...< br />
40
- so the book will be a little delayed, and that's my fault
41
- </ p >
42
- < p >
43
- ahhh it's amazing to be back < br />
44
- umm I've really been looking forward to this< br />
45
- I love Codegarden is because we're all together< br />
46
- all the people you talk to on the forums, maillist people suddenly you
47
- see them in real life< br />
48
- this is fantastic< br />
49
- but we just have so much to share
50
- </ p >
51
- < p >
52
- You should try to be up here< br />
53
- it's scary and awesome at the same time
54
- </ p >
55
- < p >
56
- so let's err let's start< br />
57
- perhaps always people say< br />
58
- Doug has this weird thing on my machine, I can't see anything< br />
59
- aha he has notes, he's been preparing< br />
60
- which I have of course...
61
- </ p >
62
- < p >
63
- You should try to be up here< br />
64
- I was here I think as the slide says quite a number of years ago< br />
65
- We have slides and we have demos and there is so much that can go
66
- wrong< br />
67
- err which is awesome
68
- </ p >
69
- < p >
70
- So back in the day Per and I did demos and they failed< br />
71
- and then we were told you can't fail in a keynote< br />
72
- so then we made boring slideshow demos< br />
73
- and pre-recorded videos< br />
74
- and almost no dangerous demos < br />
75
- and we are so bored< br />
76
- we need stress< br />
77
- we need panic< br />
78
- we need to smell bad afterwards< br />
79
- and then Pete Duncanson isn't here< br />
80
- so we are going to have a buffet of Yellow Screens of Death
81
- </ p >
82
- < p > You should try to be up here</ p >
83
- < p >
84
- umm< br />
85
- those hats are still in use, err at the HQ you have to wear the hat
86
- < br />
87
- if you forgot to log out of the computer < br />
88
- and someone gets to post in Slack that you are giving out free beer,
89
- < br />
90
- you have to wear the hat.
91
- </ p >
92
- < p >
93
- I am really excited that so many people have come here< br />
94
- it's pretty wild to just stand up here< br />
95
- one of the reasons I love Codegarden is because we're all together< br />
96
- all the people you talk to on the forums, maillist people< br />
97
- suddenly you see them in real life and for me, that's kinda like
98
- Christmas Eve
99
- </ p >
100
- < p >
101
- just think about it for a second < br />
102
- people gathered here< br />
103
- all passionate about Umbraco< br />
104
- travelled across the world to share our ideas, our thoughts and maybe
105
- even umm... some code< br />
106
- I really think it's crazy
107
- </ p >
108
- < p >
109
- you should try to be up here < br />
110
- it's the most awesome sight ever
111
- </ p >
112
- < p > Are you ready?</ p >
113
- < p > I don't know if you can see the slides now?</ p >
114
- < p >
115
- Community and Infinity< br />
116
- Are you ready?< br />
117
- don't worry it's not as abstract as it sounds
118
- </ p >
119
- < p > there is a long break after this one so err</ p >
120
- < p > and now I have transitions</ p >
25
+ ${ props . slot
26
+ ? props . slot
27
+ : html ` < h3 > You should try to be up here</ h3 >
28
+ < p >
29
+ clumsy, ok thank you for waiting< br />
30
+ Let's see if we can get this up and running< br />
31
+ umm we gotta a lot to cover over the next one and a half hour< br />
32
+ so errr, Say cheese, ahh awesome, what a wonderful day
33
+ </ p >
34
+ < p >
35
+ Thank you very much for coming errr < br />
36
+ welcome to the biggest Codegarden ever< br />
37
+ without a doubt our biggest ever< br />
38
+ the biggest err ever Codegarden< br />
39
+ we are more than 380 people err today, < br /> which is err about a
40
+ little more than twenty times the people at the first
41
+ Codegarden< br />
42
+ err this year there is more than 700 people, < br /> which makes it
43
+ more than 30 times bigger than the very first one< br />
44
+ err so awesome to be back at the err the err Umbraco festival
45
+ </ p >
46
+ < p >
47
+ Hey, before we start I just want to be the first one to use the
48
+ 'hi-five I suck' tag< br />
49
+ the only thing that makes this very different from my normal
50
+ Christmas Eve< br />
51
+ is that I don't get sweaters like these from my inlaws which makes
52
+ it even better...< br />
53
+ so the book will be a little delayed, and that's my fault
54
+ </ p >
55
+ < p >
56
+ ahhh it's amazing to be back < br />
57
+ umm I've really been looking forward to this< br />
58
+ I love Codegarden is because we're all together< br />
59
+ all the people you talk to on the forums, maillist people suddenly
60
+ you see them in real life< br />
61
+ this is fantastic< br />
62
+ but we just have so much to share
63
+ </ p >
64
+ < p >
65
+ You should try to be up here< br />
66
+ it's scary and awesome at the same time
67
+ </ p >
68
+ < p >
69
+ so let's err let's start< br />
70
+ perhaps always people say< br />
71
+ Doug has this weird thing on my machine, I can't see anything< br />
72
+ aha he has notes, he's been preparing< br />
73
+ which I have of course...
74
+ </ p >
75
+ < p >
76
+ You should try to be up here< br />
77
+ I was here I think as the slide says quite a number of years
78
+ ago< br />
79
+ We have slides and we have demos and there is so much that can go
80
+ wrong< br />
81
+ err which is awesome
82
+ </ p >
83
+ < p >
84
+ So back in the day Per and I did demos and they failed< br />
85
+ and then we were told you can't fail in a keynote< br />
86
+ so then we made boring slideshow demos< br />
87
+ and pre-recorded videos< br />
88
+ and almost no dangerous demos < br />
89
+ and we are so bored< br />
90
+ we need stress< br />
91
+ we need panic< br />
92
+ we need to smell bad afterwards< br />
93
+ and then Pete Duncanson isn't here< br />
94
+ so we are going to have a buffet of Yellow Screens of Death
95
+ </ p >
96
+ < p > You should try to be up here</ p >
97
+ < p >
98
+ umm< br />
99
+ those hats are still in use, err at the HQ you have to wear the
100
+ hat
101
+ < br />
102
+ if you forgot to log out of the computer < br />
103
+ and someone gets to post in Slack that you are giving out free
104
+ beer,
105
+ < br />
106
+ you have to wear the hat.
107
+ </ p >
108
+ < p >
109
+ I am really excited that so many people have come here< br />
110
+ it's pretty wild to just stand up here< br />
111
+ one of the reasons I love Codegarden is because we're all
112
+ together< br />
113
+ all the people you talk to on the forums, maillist people< br />
114
+ suddenly you see them in real life and for me, that's kinda like
115
+ Christmas Eve
116
+ </ p >
117
+ < p >
118
+ just think about it for a second < br />
119
+ people gathered here< br />
120
+ all passionate about Umbraco< br />
121
+ travelled across the world to share our ideas, our thoughts and
122
+ maybe even umm... some code< br />
123
+ I really think it's crazy
124
+ </ p >
125
+ < p >
126
+ you should try to be up here < br />
127
+ it's the most awesome sight ever
128
+ </ p >
129
+ < p > Are you ready?</ p >
130
+ < p > I don't know if you can see the slides now?</ p >
131
+ < p >
132
+ Community and Infinity< br />
133
+ Are you ready?< br />
134
+ don't worry it's not as abstract as it sounds
135
+ </ p >
136
+ < p > there is a long break after this one so err</ p >
137
+ < p > and now I have transitions</ p > ` }
121
138
</ uui-scroll-container >
122
139
` ;
123
140
124
- export const NotEnoughContent : Story = ( ) =>
141
+ export const NotEnoughContent : Story = props =>
125
142
html `
126
143
< uui-scroll-container style ="width:400px; height:400px; ">
127
- Very little text, no Scrollbar appearing
144
+ ${ props . slot }
128
145
</ uui-scroll-container >
129
146
` ;
130
147
131
- export const VeryWideContent : Story = ( ) =>
148
+ NotEnoughContent . args = {
149
+ slot : 'Very little text, no Scrollbar appearing' ,
150
+ } ;
151
+
152
+ export const VeryWideContent : Story = props =>
132
153
html `
133
154
< uui-scroll-container style ="width:400px; height:400px; ">
134
- line is way toooo long
135
- WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY< br />
155
+ ${ props . slot }
136
156
</ uui-scroll-container >
137
157
` ;
158
+
159
+ VeryWideContent . args = {
160
+ slot : html ` line is way toooo long
161
+ WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY< br /> ` ,
162
+ } ;
0 commit comments