Skip to content

Commit c99429a

Browse files
committed
docs(storybook): add dynamic default slot
1 parent a9e7570 commit c99429a

File tree

1 file changed

+137
-112
lines changed

1 file changed

+137
-112
lines changed

packages/uui-scroll-container/lib/uui-scroll-container.story.ts

Lines changed: 137 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -7,131 +7,156 @@ export default {
77
id: 'uui-scroll-container',
88
title: 'Displays/Scroll Container',
99
component: 'uui-scroll-container',
10+
argTypes: {
11+
slot: {
12+
control: { type: 'text' },
13+
},
14+
},
15+
parameters: {
16+
controls: {
17+
exclude: ['styles'],
18+
},
19+
},
1020
};
1121

12-
export const Overview: Story = () =>
22+
export const Overview: Story = props =>
1323
html`
1424
<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>`}
121138
</uui-scroll-container>
122139
`;
123140

124-
export const NotEnoughContent: Story = () =>
141+
export const NotEnoughContent: Story = props =>
125142
html`
126143
<uui-scroll-container style="width:400px; height:400px;">
127-
Very little text, no Scrollbar appearing
144+
${props.slot}
128145
</uui-scroll-container>
129146
`;
130147

131-
export const VeryWideContent: Story = () =>
148+
NotEnoughContent.args = {
149+
slot: 'Very little text, no Scrollbar appearing',
150+
};
151+
152+
export const VeryWideContent: Story = props =>
132153
html`
133154
<uui-scroll-container style="width:400px; height:400px;">
134-
line is way toooo long
135-
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY<br />
155+
${props.slot}
136156
</uui-scroll-container>
137157
`;
158+
159+
VeryWideContent.args = {
160+
slot: html` line is way toooo long
161+
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY<br />`,
162+
};

0 commit comments

Comments
 (0)