Skip to content

Commit 3b06ca1

Browse files
author
Krzysztof Pniak
committed
feat(stories/vue-widgets): enhances examples
1 parent c2d97e5 commit 3b06ca1

File tree

1 file changed

+236
-37
lines changed

1 file changed

+236
-37
lines changed

‎packages/vue-widget/stories/widget.stories.mdx

+236-37
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import HeadwayWidget from "../src/HeadwayWidget";
1818

1919
The simplest possible usage, just set your _account_ id.
2020

21-
<Preview>
21+
<Preview withSource="none">
2222
<Story name="Basic">
2323
{{
2424
template:
@@ -27,38 +27,102 @@ The simplest possible usage, just set your _account_ id.
2727
</Story>
2828
</Preview>
2929

30+
```html
31+
<template>
32+
<div>
33+
<headway-widget account="J1LKG7">Logo</headway-widget>
34+
</div>
35+
</template>
36+
37+
<script>
38+
import { HeadwayWidget } from "@headwayapp/vue-widget";
39+
40+
export default {
41+
name: "App",
42+
components: {
43+
"headway-widget": HeadwayWidget,
44+
},
45+
};
46+
</script>
47+
```
48+
3049
## Badge position
3150

3251
You can change badge position to one of 9 possible values. Check all of them in the Api reference at the end of this page.
3352

34-
<Preview>
53+
<Preview withSource="none">
3554
<Story name="Badge Position">
3655
{{
3756
template:
38-
'<headway-widget account="J1LKG7" id="2" badgePosition="center-left"><logo></logo></headway-widget>',
57+
'<headway-widget account="J1LKG7" id="widget-badge-position" badgePosition="center-left"><logo></logo></headway-widget>',
3958
}}
4059
</Story>
4160
</Preview>
4261

62+
```html
63+
<template>
64+
<div>
65+
<headway-widget
66+
account="J1LKG7"
67+
id="widget-badge-position"
68+
badgePosition="center-left"
69+
>Logo</headway-widget
70+
>
71+
</div>
72+
</template>
73+
74+
<script>
75+
import { HeadwayWidget } from "@headwayapp/vue-widget";
76+
77+
export default {
78+
name: "App",
79+
components: {
80+
"headway-widget": HeadwayWidget,
81+
},
82+
};
83+
</script>
84+
```
85+
4386
## Widget position
4487

4588
You can change widget position to one of 6 possible values. Check all of them in the Api reference at the end of this page.
4689

47-
<Preview>
90+
<Preview withSource="none">
4891
<Story name="Widget Position">
4992
{{
5093
template:
51-
'<headway-widget account="J1LKG7" id="3" position="center-left"><logo></logo></headway-widget>',
94+
'<headway-widget account="J1LKG7" id="widget-position" position="center-left"><logo></logo></headway-widget>',
5295
}}
5396
</Story>
5497
</Preview>
5598

99+
```html
100+
<template>
101+
<div>
102+
<headway-widget account="J1LKG7" position="center-left"
103+
>Logo</headway-widget
104+
>
105+
</div>
106+
</template>
107+
108+
<script>
109+
import { HeadwayWidget } from "@headwayapp/vue-widget";
110+
111+
export default {
112+
name: "App",
113+
components: {
114+
"headway-widget": HeadwayWidget,
115+
},
116+
};
117+
</script>
118+
```
119+
56120
## External trigger
57121

58122
Widget can be triggered by any other element on the page. To achieve that use HeadwayWidgetTrigger and set its `forId`
59123
prop to corresponding widget `id`.
60124

61-
<Preview>
125+
<Preview withSource="none">
62126
<Story name="External trigger">
63127
{{
64128
template: `<div style="display: flex">
@@ -73,12 +137,37 @@ prop to corresponding widget `id`.
73137
</Story>
74138
</Preview>
75139

140+
```html
141+
<template>
142+
<div>
143+
<headway-widget account="J1LKG7" position="center-left" id="idOfYourChoice"
144+
>Logo</headway-widget
145+
>
146+
<headway-widget-trigger forId="idOfYourChoice">
147+
<button>Trigger</button>
148+
</headway-widget-trigger>
149+
</div>
150+
</template>
151+
152+
<script>
153+
import { HeadwayWidget, HeadwayWidgetTrigger } from "@headwayapp/vue-widget";
154+
155+
export default {
156+
name: "App",
157+
components: {
158+
"headway-widget": HeadwayWidget,
159+
"headway-widget-trigger": HeadwayWidgetTrigger,
160+
},
161+
};
162+
</script>
163+
```
164+
76165
## Callbacks
77166

78167
You can add some handlers of Widget actions. Open developer tools, click around widget below and observe
79168
logged names.
80169

81-
<Preview>
170+
<Preview withSource="none">
82171
<Story name="Callbacks">
83172
{{
84173
template: `<headway-widget
@@ -94,33 +183,78 @@ logged names.
94183
</headway-widget>`,
95184
methods: {
96185
widgetReady: () => {
97-
console.log('widgetReady');
186+
console.log("widgetReady");
98187
},
99188
showWidget: () => {
100-
console.log('showWidget');
189+
console.log("showWidget");
101190
},
102191
showDetails: () => {
103-
console.log('showDetails');
192+
console.log("showDetails");
104193
},
105194
readMore: () => {
106-
console.log('readMore');
195+
console.log("readMore");
107196
},
108197
hideWidget: () => {
109-
console.log('hideWidget');
198+
console.log("hideWidget");
110199
},
111-
}
200+
},
112201
}}
113202
</Story>
114203
</Preview>
115204

205+
```html
206+
<template>
207+
<div>
208+
<headway-widget
209+
account="J1LKG7"
210+
v-on:widgetReady="widgetReady"
211+
v-on:showWidget="showWidget"
212+
v-on:showDetails="showDetails"
213+
v-on:readMore="readMore"
214+
v-on:hideWidget="hideWidget"
215+
>
216+
Logo
217+
</headway-widget>
218+
</div>
219+
</template>
220+
221+
<script>
222+
import { HeadwayWidget } from "@headwayapp/vue-widget";
223+
224+
export default {
225+
name: "App",
226+
components: {
227+
"headway-widget": HeadwayWidget,
228+
},
229+
methods: {
230+
widgetReady: () => {
231+
console.log("widgetReady");
232+
},
233+
showWidget: () => {
234+
console.log("showWidget");
235+
},
236+
showDetails: () => {
237+
console.log("showDetails");
238+
},
239+
readMore: () => {
240+
console.log("readMore");
241+
},
242+
hideWidget: () => {
243+
console.log("hideWidget");
244+
},
245+
},
246+
};
247+
</script>
248+
```
249+
116250
## Translations
117251

118252
You can translate widget labels.
119253

120254
<Preview withSource="none">
121255
<Story name="Translations">
122256
{{
123-
template: `<headway-widget account="J1LKG7" id="translations" v-bind:translations="translations">
257+
template: `<headway-widget account="J1LKG7" id="widget-translations" v-bind:translations="translations">
124258
<logo></logo>
125259
</headway-widget>`,
126260
data: () => ({
@@ -133,33 +267,98 @@ You can translate widget labels.
133267
improvement: "mejora",
134268
},
135269
footer: "Lee mas 👉",
136-
}
137-
})
270+
},
271+
}),
272+
}}
273+
</Story>
274+
</Preview>
275+
276+
```html
277+
<template>
278+
<div>
279+
<headway-widget account="J1LKG7" v-bind:translations="translations">
280+
Logo
281+
</headway-widget>
282+
</div>
283+
</template>
284+
285+
<script>
286+
import { HeadwayWidget } from "@headwayapp/vue-widget";
287+
288+
export default {
289+
name: "App",
290+
components: {
291+
"headway-widget": HeadwayWidget,
292+
},
293+
data: () => ({
294+
translations: {
295+
title: "Registro de cambios",
296+
readMore: "Lee mas",
297+
labels: {
298+
new: "nuevo",
299+
update: "actualizar",
300+
improvement: "mejora",
301+
},
302+
footer: "Lee mas 👉",
303+
},
304+
}),
305+
};
306+
</script>
307+
```
308+
309+
## Options
310+
311+
You can pass options in a classic way.
312+
313+
<Preview withSource="none">
314+
<Story name="Options">
315+
{{
316+
template: `<headway-widget account="J1LKG7" id="widget-options" v-bind:options="options">
317+
<logo></logo>
318+
</headway-widget>`,
319+
data: () => ({
320+
options: {
321+
badgePosition: "top-left",
322+
callbacks: {
323+
onShowWidget: () => {
324+
alert("Hello");
325+
},
326+
},
327+
},
328+
}),
138329
}}
139330
</Story>
140331
</Preview>
141332

142-
```jsx
143-
const translations = {
144-
title: "Registro de cambios",
145-
readMore: "Lee mas",
146-
labels: {
147-
new: "nuevo",
148-
update: "actualizar",
149-
improvement: "mejora",
150-
},
151-
footer: "Lee mas 👉",
152-
};
153-
154-
return (
155-
<HeadwayWidget
156-
account="J1LKG7"
157-
id="widget-translations"
158-
translations={translations}
159-
>
160-
<Logo />
161-
</HeadwayWidget>
162-
);
333+
```html
334+
<template>
335+
<div>
336+
<headway-widget account="J1LKG7" v-bind:options="options">
337+
Logo
338+
</headway-widget>
339+
</div>
340+
</template>
341+
342+
<script>
343+
import { HeadwayWidget } from "@headwayapp/vue-widget";
344+
345+
export default {
346+
name: "App",
347+
components: {
348+
"headway-widget": HeadwayWidget,
349+
},
350+
data: () => ({
351+
options: {
352+
badgePosition: "top-left",
353+
callbacks: {
354+
onShowWidget: () => {
355+
alert("Hello");
356+
},
357+
},
358+
},
359+
}),
360+
};
361+
</script>
163362
```
164363

165364
## Api reference

0 commit comments

Comments
 (0)