1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
/* eslint-disable @gitlab/require-i18n-strings */
import TooltipOnTruncate from './tooltip_on_truncate.vue';
const defaultWidth = '250px';
export default {
component: TooltipOnTruncate,
title: 'vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue',
};
const createStory = ({ ...options }) => {
return (_, { argTypes }) => {
const comp = {
components: { TooltipOnTruncate },
props: Object.keys(argTypes),
template: `
<div class="gl-bg-blue-50" :style="{ width }">
<tooltip-on-truncate :title="title" :placement="placement" class="gl-display-block gl-text-truncate">
{{title}}
</tooltip-on-truncate>
</div>
`,
...options,
};
return comp;
};
};
export const Default = createStory();
Default.args = {
width: defaultWidth,
title: 'Hover on this text to see the content in a tooltip.',
};
export const NoOverflow = createStory();
NoOverflow.args = {
width: defaultWidth,
title: "Short text doesn't need a tooltip.",
};
export const Placement = createStory();
Placement.args = {
width: defaultWidth,
title: 'Use `placement="right"` to display this tooltip at the right.',
placement: 'right',
};
const TIMEOUT_S = 3;
export const LiveUpdates = createStory({
props: ['width', 'placement'],
data() {
return {
title: `(loading in ${TIMEOUT_S}s)`,
};
},
mounted() {
setTimeout(() => {
this.title = 'Content updated! The content is now overflowing so we use a tooltip!';
}, TIMEOUT_S * 1000);
},
});
LiveUpdates.args = {
width: defaultWidth,
};
LiveUpdates.argTypes = {
title: {
control: false,
},
};
export const TruncateTarget = createStory({
template: `
<div class="gl-bg-black" :style="{ width }">
<tooltip-on-truncate class="gl-display-flex" :truncate-target="truncateTarget" :title="title">
<div class="gl-m-5 gl-bg-blue-50 gl-text-truncate">
{{ title }}
</div>
</tooltip-on-truncate>
</div>
`,
});
TruncateTarget.args = {
width: defaultWidth,
truncateTarget: 'child',
title: 'Wrap in container and use `truncate-target="child"` prop.',
};
|
