1 | import { GlSprintf, GlButton, GlLink } from '../../../index';
|
2 | import readme from './sprintf.md';
|
3 |
|
4 | const generateProps = ({ message = 'Written by %{author}', placeholders } = {}) => ({
|
5 | message,
|
6 | placeholders,
|
7 | });
|
8 |
|
9 | const makeStory =
|
10 | (options) =>
|
11 | (args, { argTypes }) => ({
|
12 | components: {
|
13 | GlSprintf,
|
14 | GlButton,
|
15 | GlLink,
|
16 | },
|
17 | props: Object.keys(argTypes),
|
18 | ...options,
|
19 | });
|
20 |
|
21 | export const SentenceWithLink = makeStory({
|
22 | template: `
|
23 | <div class="gl-font-base">
|
24 | <gl-sprintf :message="message" :placeholders="placeholders">
|
25 | <template #link="{ content }">
|
26 | <gl-link href="#" target="_blank">{{ content }}</gl-link>
|
27 | </template>
|
28 | </gl-sprintf>
|
29 | </div>
|
30 | `,
|
31 | });
|
32 | Object.assign(SentenceWithLink, {
|
33 | args: generateProps({
|
34 | message: 'Click %{linkStart}here%{linkEnd} to reticulate splines.',
|
35 | }),
|
36 | parameters: { storyshots: { disable: true } },
|
37 | });
|
38 |
|
39 | export const SentenceWithLinkWithCustomPlaceholders = makeStory({
|
40 | template: `
|
41 | <div class="gl-font-base">
|
42 | <gl-sprintf :message="message" :placeholders="placeholders">
|
43 | <template #link="{ content }">
|
44 | <gl-link href="#" target="_blank">{{ content }}</gl-link>
|
45 | </template>
|
46 | </gl-sprintf>
|
47 | </div>
|
48 | `,
|
49 | });
|
50 | Object.assign(SentenceWithLinkWithCustomPlaceholders, {
|
51 | args: generateProps({
|
52 | message: 'Click %{my_custom_start}here%{my_custom_end} to reticulate splines.',
|
53 | placeholders: { link: ['my_custom_start', 'my_custom_end'] },
|
54 | }),
|
55 | parameters: { storyshots: { disable: true } },
|
56 | });
|
57 |
|
58 | export const BasicPlaceholder = makeStory({
|
59 | data: () => ({ authorName: 'Some author' }),
|
60 | template: `
|
61 | <div class="gl-font-base">
|
62 | <gl-sprintf :message="message" :placeholders="placeholders">
|
63 | <template #author>
|
64 | <span class="gl-font-weight-bold">{{ authorName }}</span>
|
65 | </template>
|
66 | </gl-sprintf>
|
67 | </div>
|
68 | `,
|
69 | });
|
70 | Object.assign(BasicPlaceholder, {
|
71 | args: generateProps(),
|
72 | parameters: { storyshots: { disable: true } },
|
73 | });
|
74 |
|
75 | export const BasicButtonPlaceholder = makeStory({
|
76 | data: () => ({ authorName: 'Some author' }),
|
77 | template: `
|
78 | <div class="gl-font-base">
|
79 | <gl-sprintf :message="message" :placeholders="placeholders">
|
80 | <template #author>
|
81 | <gl-button>{{ authorName }}</gl-button>
|
82 | </template>
|
83 | </gl-sprintf>
|
84 | </div>
|
85 | `,
|
86 | });
|
87 | Object.assign(BasicButtonPlaceholder, {
|
88 | args: generateProps(),
|
89 | parameters: { storyshots: { disable: true } },
|
90 | });
|
91 |
|
92 | export default {
|
93 | title: 'utilities/sprintf',
|
94 | component: GlSprintf,
|
95 | parameters: {
|
96 | docs: {
|
97 | description: {
|
98 | component: readme,
|
99 | },
|
100 | },
|
101 | },
|
102 | };
|