-
Notifications
You must be signed in to change notification settings - Fork 0
/
IconButton.stories.js
63 lines (60 loc) · 2.41 KB
/
IconButton.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
export default {
title: "Buttons/IconButton",
};
const Template = () => {
return `
<div class="p-6">
<button class="icon-button" aria-label="Twitter" data-label="Twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="icon-button" aria-label="閉じる" data-label="閉じる">
<i class="fas fa-times"></i>
</button>
<button class="icon-button" aria-label="ホーム" data-label="ホーム">
<i class="fas fa-home"></i>
</button>
<button class="icon-button" aria-label="その他" data-label="その他">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
`;
};
export const Default = Template.bind({});
const LargeTemplate = () => {
return `
<div class="p-6">
<button class="icon-button text-lg w-12 h-12" aria-label="Twitter" data-label="Twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="icon-button text-lg w-12 h-12" aria-label="閉じる" data-label="閉じる">
<i class="fas fa-times"></i>
</button>
<button class="icon-button text-lg w-12 h-12" aria-label="ホーム" data-label="ホーム">
<i class="fas fa-home"></i>
</button>
<button class="icon-button text-lg w-12 h-12" aria-label="その他" data-label="その他">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
`;
};
export const Large = LargeTemplate.bind({});
const SmallTemplate = () => {
return `
<div class="p-6">
<button class="icon-button text-xs w-6 h-6" aria-label="Twitter" data-label="Twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="icon-button text-xs w-6 h-6" aria-label="閉じる" data-label="閉じる">
<i class="fas fa-times"></i>
</button>
<button class="icon-button text-xs w-6 h-6" aria-label="ホーム" data-label="ホーム">
<i class="fas fa-home"></i>
</button>
<button class="icon-button text-xs w-6 h-6" aria-label="その他" data-label="その他">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
`;
};
export const Small = SmallTemplate.bind({});