-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
Button.stories.js
63 lines (58 loc) · 1.5 KB
/
Button.stories.js
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
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
// More on how to set up stories at: https://storybook.js.org/docs/ember/writing-stories/introduction
export default {
title: 'Example/Button',
render: (args) => ({
template: hbs`<button {{action this.onClick}}>{{this.label}}</button>`,
context: args,
}),
argTypes: {
label: { control: 'text' },
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
tags: ['autodocs'],
};
// More on writing stories with args: https://storybook.js.org/docs/ember/writing-stories/args
export const Text = {
args: {
label: 'Button',
onClick: action('onClick'),
},
};
export const Emoji = {
args: {
label: '😀 😎 👍 💯',
onClick: action('onClick'),
},
};
export const TextWithAction = {
render: () => ({
template: hbs`
<button {{action this.onClick}}>
Trigger Action
</button>
`,
context: {
onClick: () => action('This was clicked')(),
},
}),
name: 'With an action',
parameters: {
notes: 'My notes on a button with emojis',
},
};
export const ButtonWithLinkToAnotherStory = {
render: () => ({
template: hbs`
<button {{action this.onClick}}>
Go to Welcome Story
</button>
`,
context: {
onClick: linkTo('Configure your project'),
},
}),
name: 'button with link to another story',
};