@khanacademy/wonder-blocks-button 2.9.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/es/index.js +402 -0
- package/dist/index.js +668 -0
- package/dist/index.js.flow +2 -0
- package/docs.md +0 -0
- package/package.json +37 -0
- package/src/__tests__/__snapshots__/custom-snapshot.test.js.snap +8710 -0
- package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +4774 -0
- package/src/__tests__/custom-snapshot.test.js +117 -0
- package/src/__tests__/generated-snapshot.test.js +727 -0
- package/src/components/__tests__/button.flowtest.js +53 -0
- package/src/components/__tests__/button.test.js +826 -0
- package/src/components/button-core.js +375 -0
- package/src/components/button.js +347 -0
- package/src/components/button.md +810 -0
- package/src/components/button.stories.js +276 -0
- package/src/index.js +6 -0
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
// @flow
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import {action} from "@storybook/addon-actions";
|
|
4
|
+
import {text, radios, object, boolean} from "@storybook/addon-knobs";
|
|
5
|
+
|
|
6
|
+
import {View} from "@khanacademy/wonder-blocks-core";
|
|
7
|
+
import {Strut} from "@khanacademy/wonder-blocks-layout";
|
|
8
|
+
import Color from "@khanacademy/wonder-blocks-color";
|
|
9
|
+
|
|
10
|
+
import type {StoryComponentType} from "@storybook/react";
|
|
11
|
+
import Button from "./button.js";
|
|
12
|
+
|
|
13
|
+
export default {
|
|
14
|
+
title: "Button",
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export const buttonsWithKnobs: StoryComponentType = () => {
|
|
18
|
+
const children = text("children", "Hello, world!");
|
|
19
|
+
const kind = radios(
|
|
20
|
+
"kind",
|
|
21
|
+
{
|
|
22
|
+
"primary (default)": "primary",
|
|
23
|
+
secondary: "secondary",
|
|
24
|
+
tertiary: "tertiary",
|
|
25
|
+
},
|
|
26
|
+
"primary",
|
|
27
|
+
);
|
|
28
|
+
const color = radios(
|
|
29
|
+
"color",
|
|
30
|
+
{
|
|
31
|
+
"default (default)": "default",
|
|
32
|
+
destructive: "destructive",
|
|
33
|
+
},
|
|
34
|
+
"default",
|
|
35
|
+
);
|
|
36
|
+
const size = radios(
|
|
37
|
+
"size",
|
|
38
|
+
{large: "large", "medium (default)": "medium", small: "small"},
|
|
39
|
+
"medium",
|
|
40
|
+
);
|
|
41
|
+
const light = boolean("light", false);
|
|
42
|
+
const disabled = boolean("disabled", false);
|
|
43
|
+
const style = object("style", {maxWidth: 200});
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<Button
|
|
47
|
+
kind={kind}
|
|
48
|
+
color={color}
|
|
49
|
+
size={size}
|
|
50
|
+
light={light}
|
|
51
|
+
disabled={disabled}
|
|
52
|
+
style={style}
|
|
53
|
+
onClick={action("onClick")}
|
|
54
|
+
>
|
|
55
|
+
{children}
|
|
56
|
+
</Button>
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
buttonsWithKnobs.story = {
|
|
61
|
+
parameters: {
|
|
62
|
+
options: {
|
|
63
|
+
showAddonPanel: true,
|
|
64
|
+
},
|
|
65
|
+
chromatic: {
|
|
66
|
+
// We already have screenshots of other stories that cover more of the button states
|
|
67
|
+
disable: true,
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export const basicButtons: StoryComponentType = () => (
|
|
73
|
+
<View>
|
|
74
|
+
<View style={{flexDirection: "row"}}>
|
|
75
|
+
<Button onClick={() => {}}>Hello, world!</Button>
|
|
76
|
+
<Strut size={16} />
|
|
77
|
+
<Button onClick={() => {}} kind="secondary">
|
|
78
|
+
Hello, world!
|
|
79
|
+
</Button>
|
|
80
|
+
<Strut size={16} />
|
|
81
|
+
<Button onClick={() => {}} kind="tertiary">
|
|
82
|
+
Hello, world!
|
|
83
|
+
</Button>
|
|
84
|
+
</View>
|
|
85
|
+
<Strut size={16} />
|
|
86
|
+
<View style={{flexDirection: "row"}}>
|
|
87
|
+
<Button onClick={() => {}} disabled={true}>
|
|
88
|
+
Hello, world!
|
|
89
|
+
</Button>
|
|
90
|
+
<Strut size={16} />
|
|
91
|
+
<Button onClick={() => {}} disabled={true} kind="secondary">
|
|
92
|
+
Hello, world!
|
|
93
|
+
</Button>
|
|
94
|
+
<Strut size={16} />
|
|
95
|
+
<Button onClick={() => {}} disabled={true} kind="tertiary">
|
|
96
|
+
Hello, world!
|
|
97
|
+
</Button>
|
|
98
|
+
</View>
|
|
99
|
+
<Strut size={16} />
|
|
100
|
+
<View style={{flexDirection: "row"}}>
|
|
101
|
+
<Button onClick={() => {}} color="destructive">
|
|
102
|
+
Hello, world!
|
|
103
|
+
</Button>
|
|
104
|
+
<Strut size={16} />
|
|
105
|
+
<Button onClick={() => {}} kind="secondary" color="destructive">
|
|
106
|
+
Hello, world!
|
|
107
|
+
</Button>
|
|
108
|
+
<Strut size={16} />
|
|
109
|
+
<Button onClick={() => {}} kind="tertiary" color="destructive">
|
|
110
|
+
Hello, world!
|
|
111
|
+
</Button>
|
|
112
|
+
</View>
|
|
113
|
+
</View>
|
|
114
|
+
);
|
|
115
|
+
|
|
116
|
+
export const darkBackgroundButtons: StoryComponentType = () => (
|
|
117
|
+
<View style={{backgroundColor: Color.darkBlue}}>
|
|
118
|
+
<View style={{flexDirection: "row"}}>
|
|
119
|
+
<Button onClick={() => {}} light={true}>
|
|
120
|
+
Hello, world!
|
|
121
|
+
</Button>
|
|
122
|
+
<Strut size={16} />
|
|
123
|
+
<Button onClick={() => {}} light={true} kind="secondary">
|
|
124
|
+
Hello, world!
|
|
125
|
+
</Button>
|
|
126
|
+
<Strut size={16} />
|
|
127
|
+
<Button onClick={() => {}} light={true} kind="tertiary">
|
|
128
|
+
Hello, world!
|
|
129
|
+
</Button>
|
|
130
|
+
</View>
|
|
131
|
+
<Strut size={16} />
|
|
132
|
+
<View style={{flexDirection: "row"}}>
|
|
133
|
+
<Button onClick={() => {}} light={true} disabled={true}>
|
|
134
|
+
Hello, world!
|
|
135
|
+
</Button>
|
|
136
|
+
<Strut size={16} />
|
|
137
|
+
<Button
|
|
138
|
+
onClick={() => {}}
|
|
139
|
+
light={true}
|
|
140
|
+
disabled={true}
|
|
141
|
+
kind="secondary"
|
|
142
|
+
>
|
|
143
|
+
Hello, world!
|
|
144
|
+
</Button>
|
|
145
|
+
<Strut size={16} />
|
|
146
|
+
<Button
|
|
147
|
+
onClick={() => {}}
|
|
148
|
+
light={true}
|
|
149
|
+
disabled={true}
|
|
150
|
+
kind="tertiary"
|
|
151
|
+
>
|
|
152
|
+
Hello, world!
|
|
153
|
+
</Button>
|
|
154
|
+
</View>
|
|
155
|
+
<Strut size={16} />
|
|
156
|
+
<View style={{flexDirection: "row"}}>
|
|
157
|
+
<Button onClick={() => {}} light={true} color="destructive">
|
|
158
|
+
Hello, world!
|
|
159
|
+
</Button>
|
|
160
|
+
<Strut size={16} />
|
|
161
|
+
<Button
|
|
162
|
+
onClick={() => {}}
|
|
163
|
+
light={true}
|
|
164
|
+
kind="secondary"
|
|
165
|
+
color="destructive"
|
|
166
|
+
>
|
|
167
|
+
Hello, world!
|
|
168
|
+
</Button>
|
|
169
|
+
<Strut size={16} />
|
|
170
|
+
<Button
|
|
171
|
+
onClick={() => {}}
|
|
172
|
+
light={true}
|
|
173
|
+
kind="tertiary"
|
|
174
|
+
color="destructive"
|
|
175
|
+
>
|
|
176
|
+
Hello, world!
|
|
177
|
+
</Button>
|
|
178
|
+
</View>
|
|
179
|
+
</View>
|
|
180
|
+
);
|
|
181
|
+
|
|
182
|
+
darkBackgroundButtons.story = {
|
|
183
|
+
parameters: {
|
|
184
|
+
backgrounds: [{name: "darkBlue", value: Color.darkBlue, default: true}],
|
|
185
|
+
},
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
export const smallButtons: StoryComponentType = () => (
|
|
189
|
+
<View style={{flexDirection: "row"}}>
|
|
190
|
+
<Button onClick={() => {}} size="small">
|
|
191
|
+
Hello, world!
|
|
192
|
+
</Button>
|
|
193
|
+
<Strut size={16} />
|
|
194
|
+
<Button onClick={() => {}} size="small" kind="secondary">
|
|
195
|
+
Hello, world!
|
|
196
|
+
</Button>
|
|
197
|
+
<Strut size={16} />
|
|
198
|
+
<Button onClick={() => {}} size="small" kind="tertiary">
|
|
199
|
+
Hello, world!
|
|
200
|
+
</Button>
|
|
201
|
+
</View>
|
|
202
|
+
);
|
|
203
|
+
|
|
204
|
+
export const xlargeButtons: StoryComponentType = () => (
|
|
205
|
+
<View style={{flexDirection: "row"}}>
|
|
206
|
+
<Button onClick={() => {}} size="xlarge">
|
|
207
|
+
Hello, world!
|
|
208
|
+
</Button>
|
|
209
|
+
<Strut size={16} />
|
|
210
|
+
<Button onClick={() => {}} size="xlarge" kind="secondary">
|
|
211
|
+
Hello, world!
|
|
212
|
+
</Button>
|
|
213
|
+
<Strut size={16} />
|
|
214
|
+
<Button onClick={() => {}} size="xlarge" kind="tertiary">
|
|
215
|
+
Hello, world!
|
|
216
|
+
</Button>
|
|
217
|
+
</View>
|
|
218
|
+
);
|
|
219
|
+
|
|
220
|
+
export const longLabelsAreEllipsized: StoryComponentType = () => (
|
|
221
|
+
<Button onClick={() => {}} style={{maxWidth: 200}}>
|
|
222
|
+
label too long for the parent container
|
|
223
|
+
</Button>
|
|
224
|
+
);
|
|
225
|
+
|
|
226
|
+
export const buttonWithSpinner: StoryComponentType = () => (
|
|
227
|
+
<View style={{flexDirection: "row"}}>
|
|
228
|
+
<Button
|
|
229
|
+
onClick={() => {}}
|
|
230
|
+
spinner={true}
|
|
231
|
+
size="xlarge"
|
|
232
|
+
aria-label={"waiting"}
|
|
233
|
+
>
|
|
234
|
+
Hello, world
|
|
235
|
+
</Button>
|
|
236
|
+
<Strut size={16} />
|
|
237
|
+
<Button onClick={() => {}} spinner={true} aria-label={"waiting"}>
|
|
238
|
+
Hello, world
|
|
239
|
+
</Button>
|
|
240
|
+
<Strut size={16} />
|
|
241
|
+
<Button
|
|
242
|
+
onClick={() => {}}
|
|
243
|
+
spinner={true}
|
|
244
|
+
size="small"
|
|
245
|
+
aria-label={"waiting"}
|
|
246
|
+
>
|
|
247
|
+
Hello, world
|
|
248
|
+
</Button>
|
|
249
|
+
</View>
|
|
250
|
+
);
|
|
251
|
+
|
|
252
|
+
export const submitButtonInForm: StoryComponentType = () => (
|
|
253
|
+
<form
|
|
254
|
+
onSubmit={(e) => {
|
|
255
|
+
e.preventDefault();
|
|
256
|
+
window.alert("form submitted"); // eslint-disable-line no-alert
|
|
257
|
+
}}
|
|
258
|
+
>
|
|
259
|
+
<View>
|
|
260
|
+
Foo: <input id="foo" value="bar" />
|
|
261
|
+
<Button type="submit">Submit</Button>
|
|
262
|
+
</View>
|
|
263
|
+
</form>
|
|
264
|
+
);
|
|
265
|
+
|
|
266
|
+
submitButtonInForm.story = {
|
|
267
|
+
parameters: {
|
|
268
|
+
options: {
|
|
269
|
+
showAddonPanel: true,
|
|
270
|
+
},
|
|
271
|
+
chromatic: {
|
|
272
|
+
// We already have screenshots of other stories that cover more of the button states
|
|
273
|
+
disable: true,
|
|
274
|
+
},
|
|
275
|
+
},
|
|
276
|
+
};
|