@khanacademy/wonder-blocks-icon-button 3.4.11 → 3.4.12

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/docs.md +5 -0
  3. package/package.json +2 -2
  4. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -544
  5. package/src/__tests__/generated-snapshot.test.js +0 -86
  6. package/src/components/icon-button.md +0 -69
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @khanacademy/wonder-blocks-icon-button
2
2
 
3
+ ## 3.4.12
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [3bae2aba]
8
+ - @khanacademy/wonder-blocks-icon@1.2.31
9
+
3
10
  ## 3.4.11
4
11
 
5
12
  ### Patch Changes
package/docs.md CHANGED
@@ -0,0 +1,5 @@
1
+ Documentation for `@khanacademy/wonder-blocks-icon-button` is now in Storybook.
2
+
3
+ Visit the [Storybook
4
+ IconButton](https://khan.github.io/wonder-blocks/?path=/docs/iconbutton) docs on
5
+ GitHub Pages.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-icon-button",
3
- "version": "3.4.11",
3
+ "version": "3.4.12",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -19,7 +19,7 @@
19
19
  "@khanacademy/wonder-blocks-clickable": "^2.3.1",
20
20
  "@khanacademy/wonder-blocks-color": "^1.2.0",
21
21
  "@khanacademy/wonder-blocks-core": "^4.4.0",
22
- "@khanacademy/wonder-blocks-icon": "^1.2.30"
22
+ "@khanacademy/wonder-blocks-icon": "^1.2.31"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "aphrodite": "^1.2.5",
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap DELETED
@@ -1,544 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`wonder-blocks-icon-button example 1 1`] = `
4
- <div
5
- className=""
6
- style={
7
- {
8
- "alignItems": "stretch",
9
- "borderStyle": "solid",
10
- "borderWidth": 0,
11
- "boxSizing": "border-box",
12
- "display": "flex",
13
- "flexDirection": "row",
14
- "margin": 0,
15
- "minHeight": 0,
16
- "minWidth": 0,
17
- "padding": 0,
18
- "position": "relative",
19
- "zIndex": 0,
20
- }
21
- }
22
- >
23
- <button
24
- aria-label="search"
25
- className=""
26
- disabled={false}
27
- onBlur={[Function]}
28
- onClick={[Function]}
29
- onDragStart={[Function]}
30
- onFocus={[Function]}
31
- onKeyDown={[Function]}
32
- onKeyUp={[Function]}
33
- onMouseDown={[Function]}
34
- onMouseEnter={[Function]}
35
- onMouseLeave={[Function]}
36
- onMouseUp={[Function]}
37
- onTouchCancel={[Function]}
38
- onTouchEnd={[Function]}
39
- onTouchStart={[Function]}
40
- style={
41
- {
42
- "::MozFocusInner": {
43
- "border": 0,
44
- },
45
- ":focus": {
46
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
47
- },
48
- "alignItems": "center",
49
- "background": "none",
50
- "border": "none",
51
- "boxSizing": "border-box",
52
- "color": "#1865f2",
53
- "cursor": "pointer",
54
- "display": "inline-flex",
55
- "height": 40,
56
- "justifyContent": "center",
57
- "margin": -8,
58
- "outline": "none",
59
- "padding": 0,
60
- "position": "relative",
61
- "textDecoration": "none",
62
- "touchAction": "manipulation",
63
- "width": 40,
64
- }
65
- }
66
- tabIndex={0}
67
- type="button"
68
- >
69
- <svg
70
- className=""
71
- height={24}
72
- style={
73
- {
74
- "display": "inline-block",
75
- "flexGrow": 0,
76
- "flexShrink": 0,
77
- "verticalAlign": "text-bottom",
78
- }
79
- }
80
- viewBox="0 0 24 24"
81
- width={24}
82
- >
83
- <path
84
- d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
85
- fill="currentColor"
86
- />
87
- </svg>
88
- </button>
89
- <div
90
- aria-hidden="true"
91
- className=""
92
- style={
93
- {
94
- "MsFlexBasis": 16,
95
- "MsFlexPreferredSize": 16,
96
- "WebkitFlexBasis": 16,
97
- "alignItems": "stretch",
98
- "borderStyle": "solid",
99
- "borderWidth": 0,
100
- "boxSizing": "border-box",
101
- "display": "flex",
102
- "flexBasis": 16,
103
- "flexDirection": "column",
104
- "flexShrink": 0,
105
- "margin": 0,
106
- "minHeight": 0,
107
- "minWidth": 0,
108
- "padding": 0,
109
- "position": "relative",
110
- "width": 16,
111
- "zIndex": 0,
112
- }
113
- }
114
- />
115
- <button
116
- aria-label="search"
117
- className=""
118
- disabled={false}
119
- onBlur={[Function]}
120
- onClick={[Function]}
121
- onDragStart={[Function]}
122
- onFocus={[Function]}
123
- onKeyDown={[Function]}
124
- onKeyUp={[Function]}
125
- onMouseDown={[Function]}
126
- onMouseEnter={[Function]}
127
- onMouseLeave={[Function]}
128
- onMouseUp={[Function]}
129
- onTouchCancel={[Function]}
130
- onTouchEnd={[Function]}
131
- onTouchStart={[Function]}
132
- style={
133
- {
134
- "::MozFocusInner": {
135
- "border": 0,
136
- },
137
- ":focus": {
138
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
139
- },
140
- "alignItems": "center",
141
- "background": "none",
142
- "border": "none",
143
- "boxSizing": "border-box",
144
- "color": "#21242c",
145
- "cursor": "pointer",
146
- "display": "inline-flex",
147
- "height": 40,
148
- "justifyContent": "center",
149
- "margin": -8,
150
- "outline": "none",
151
- "padding": 0,
152
- "position": "relative",
153
- "textDecoration": "none",
154
- "touchAction": "manipulation",
155
- "width": 40,
156
- }
157
- }
158
- tabIndex={0}
159
- type="button"
160
- >
161
- <svg
162
- className=""
163
- height={24}
164
- style={
165
- {
166
- "display": "inline-block",
167
- "flexGrow": 0,
168
- "flexShrink": 0,
169
- "verticalAlign": "text-bottom",
170
- }
171
- }
172
- viewBox="0 0 24 24"
173
- width={24}
174
- >
175
- <path
176
- d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
177
- fill="currentColor"
178
- />
179
- </svg>
180
- </button>
181
- <div
182
- aria-hidden="true"
183
- className=""
184
- style={
185
- {
186
- "MsFlexBasis": 16,
187
- "MsFlexPreferredSize": 16,
188
- "WebkitFlexBasis": 16,
189
- "alignItems": "stretch",
190
- "borderStyle": "solid",
191
- "borderWidth": 0,
192
- "boxSizing": "border-box",
193
- "display": "flex",
194
- "flexBasis": 16,
195
- "flexDirection": "column",
196
- "flexShrink": 0,
197
- "margin": 0,
198
- "minHeight": 0,
199
- "minWidth": 0,
200
- "padding": 0,
201
- "position": "relative",
202
- "width": 16,
203
- "zIndex": 0,
204
- }
205
- }
206
- />
207
- <a
208
- aria-label="search"
209
- className=""
210
- href="/search"
211
- onBlur={[Function]}
212
- onClick={[Function]}
213
- onDragStart={[Function]}
214
- onFocus={[Function]}
215
- onKeyDown={[Function]}
216
- onKeyUp={[Function]}
217
- onMouseDown={[Function]}
218
- onMouseEnter={[Function]}
219
- onMouseLeave={[Function]}
220
- onMouseUp={[Function]}
221
- onTouchCancel={[Function]}
222
- onTouchEnd={[Function]}
223
- onTouchStart={[Function]}
224
- style={
225
- {
226
- ":focus": {
227
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
228
- },
229
- "alignItems": "center",
230
- "background": "none",
231
- "border": "none",
232
- "boxSizing": "border-box",
233
- "color": "rgba(33,36,44,0.64)",
234
- "cursor": "pointer",
235
- "display": "inline-flex",
236
- "height": 40,
237
- "justifyContent": "center",
238
- "margin": -8,
239
- "outline": "none",
240
- "padding": 0,
241
- "position": "relative",
242
- "textDecoration": "none",
243
- "touchAction": "manipulation",
244
- "width": 40,
245
- }
246
- }
247
- tabIndex={0}
248
- >
249
- <svg
250
- className=""
251
- height={24}
252
- style={
253
- {
254
- "display": "inline-block",
255
- "flexGrow": 0,
256
- "flexShrink": 0,
257
- "verticalAlign": "text-bottom",
258
- }
259
- }
260
- viewBox="0 0 24 24"
261
- width={24}
262
- >
263
- <path
264
- d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
265
- fill="currentColor"
266
- />
267
- </svg>
268
- </a>
269
- <div
270
- aria-hidden="true"
271
- className=""
272
- style={
273
- {
274
- "MsFlexBasis": 16,
275
- "MsFlexPreferredSize": 16,
276
- "WebkitFlexBasis": 16,
277
- "alignItems": "stretch",
278
- "borderStyle": "solid",
279
- "borderWidth": 0,
280
- "boxSizing": "border-box",
281
- "display": "flex",
282
- "flexBasis": 16,
283
- "flexDirection": "column",
284
- "flexShrink": 0,
285
- "margin": 0,
286
- "minHeight": 0,
287
- "minWidth": 0,
288
- "padding": 0,
289
- "position": "relative",
290
- "width": 16,
291
- "zIndex": 0,
292
- }
293
- }
294
- />
295
- <button
296
- aria-label="search"
297
- className=""
298
- disabled={true}
299
- onBlur={[Function]}
300
- onClick={[Function]}
301
- onDragStart={[Function]}
302
- onFocus={[Function]}
303
- onKeyDown={[Function]}
304
- onKeyUp={[Function]}
305
- onMouseDown={[Function]}
306
- onMouseEnter={[Function]}
307
- onMouseLeave={[Function]}
308
- onMouseUp={[Function]}
309
- onTouchCancel={[Function]}
310
- onTouchEnd={[Function]}
311
- onTouchStart={[Function]}
312
- style={
313
- {
314
- "::MozFocusInner": {
315
- "border": 0,
316
- },
317
- ":focus": {
318
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
319
- },
320
- "alignItems": "center",
321
- "background": "none",
322
- "border": "none",
323
- "boxSizing": "border-box",
324
- "color": "rgba(33,36,44,0.32)",
325
- "cursor": "default",
326
- "display": "inline-flex",
327
- "height": 40,
328
- "justifyContent": "center",
329
- "margin": -8,
330
- "outline": "none",
331
- "padding": 0,
332
- "position": "relative",
333
- "textDecoration": "none",
334
- "touchAction": "manipulation",
335
- "width": 40,
336
- }
337
- }
338
- tabIndex={0}
339
- type="button"
340
- >
341
- <svg
342
- className=""
343
- height={24}
344
- style={
345
- {
346
- "display": "inline-block",
347
- "flexGrow": 0,
348
- "flexShrink": 0,
349
- "verticalAlign": "text-bottom",
350
- }
351
- }
352
- viewBox="0 0 24 24"
353
- width={24}
354
- >
355
- <path
356
- d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
357
- fill="currentColor"
358
- />
359
- </svg>
360
- </button>
361
- <div
362
- aria-hidden="true"
363
- className=""
364
- style={
365
- {
366
- "MsFlexBasis": 16,
367
- "MsFlexPreferredSize": 16,
368
- "WebkitFlexBasis": 16,
369
- "alignItems": "stretch",
370
- "borderStyle": "solid",
371
- "borderWidth": 0,
372
- "boxSizing": "border-box",
373
- "display": "flex",
374
- "flexBasis": 16,
375
- "flexDirection": "column",
376
- "flexShrink": 0,
377
- "margin": 0,
378
- "minHeight": 0,
379
- "minWidth": 0,
380
- "padding": 0,
381
- "position": "relative",
382
- "width": 16,
383
- "zIndex": 0,
384
- }
385
- }
386
- />
387
- <button
388
- aria-label="search"
389
- className=""
390
- disabled={true}
391
- onBlur={[Function]}
392
- onClick={[Function]}
393
- onDragStart={[Function]}
394
- onFocus={[Function]}
395
- onKeyDown={[Function]}
396
- onKeyUp={[Function]}
397
- onMouseDown={[Function]}
398
- onMouseEnter={[Function]}
399
- onMouseLeave={[Function]}
400
- onMouseUp={[Function]}
401
- onTouchCancel={[Function]}
402
- onTouchEnd={[Function]}
403
- onTouchStart={[Function]}
404
- style={
405
- {
406
- "::MozFocusInner": {
407
- "border": 0,
408
- },
409
- ":focus": {
410
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
411
- },
412
- "alignItems": "center",
413
- "background": "none",
414
- "border": "none",
415
- "boxSizing": "border-box",
416
- "color": "rgba(33,36,44,0.32)",
417
- "cursor": "default",
418
- "display": "inline-flex",
419
- "height": 40,
420
- "justifyContent": "center",
421
- "margin": -8,
422
- "outline": "none",
423
- "padding": 0,
424
- "position": "relative",
425
- "textDecoration": "none",
426
- "touchAction": "manipulation",
427
- "width": 40,
428
- }
429
- }
430
- tabIndex={0}
431
- type="button"
432
- >
433
- <svg
434
- className=""
435
- height={24}
436
- style={
437
- {
438
- "display": "inline-block",
439
- "flexGrow": 0,
440
- "flexShrink": 0,
441
- "verticalAlign": "text-bottom",
442
- }
443
- }
444
- viewBox="0 0 24 24"
445
- width={24}
446
- >
447
- <path
448
- d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
449
- fill="currentColor"
450
- />
451
- </svg>
452
- </button>
453
- </div>
454
- `;
455
-
456
- exports[`wonder-blocks-icon-button example 2 1`] = `
457
- <div
458
- className=""
459
- style={
460
- {
461
- "alignItems": "stretch",
462
- "backgroundColor": "#0b2149",
463
- "borderStyle": "solid",
464
- "borderWidth": 0,
465
- "boxSizing": "border-box",
466
- "display": "flex",
467
- "flexDirection": "row",
468
- "margin": 0,
469
- "minHeight": 0,
470
- "minWidth": 0,
471
- "padding": 10,
472
- "position": "relative",
473
- "zIndex": 0,
474
- }
475
- }
476
- >
477
- <button
478
- aria-label="search"
479
- className=""
480
- disabled={false}
481
- onBlur={[Function]}
482
- onClick={[Function]}
483
- onDragStart={[Function]}
484
- onFocus={[Function]}
485
- onKeyDown={[Function]}
486
- onKeyUp={[Function]}
487
- onMouseDown={[Function]}
488
- onMouseEnter={[Function]}
489
- onMouseLeave={[Function]}
490
- onMouseUp={[Function]}
491
- onTouchCancel={[Function]}
492
- onTouchEnd={[Function]}
493
- onTouchStart={[Function]}
494
- style={
495
- {
496
- "::MozFocusInner": {
497
- "border": 0,
498
- },
499
- ":focus": {
500
- "WebkitTapHighlightColor": "rgba(0,0,0,0)",
501
- },
502
- "alignItems": "center",
503
- "background": "none",
504
- "border": "none",
505
- "boxSizing": "border-box",
506
- "color": "#ffffff",
507
- "cursor": "pointer",
508
- "display": "inline-flex",
509
- "height": 40,
510
- "justifyContent": "center",
511
- "margin": -8,
512
- "outline": "none",
513
- "padding": 0,
514
- "position": "relative",
515
- "textDecoration": "none",
516
- "touchAction": "manipulation",
517
- "width": 40,
518
- }
519
- }
520
- tabIndex={0}
521
- type="button"
522
- >
523
- <svg
524
- className=""
525
- height={24}
526
- style={
527
- {
528
- "display": "inline-block",
529
- "flexGrow": 0,
530
- "flexShrink": 0,
531
- "verticalAlign": "text-bottom",
532
- }
533
- }
534
- viewBox="0 0 24 24"
535
- width={24}
536
- >
537
- <path
538
- d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
539
- fill="currentColor"
540
- />
541
- </svg>
542
- </button>
543
- </div>
544
- `;
package/src/__tests__/generated-snapshot.test.js DELETED
@@ -1,86 +0,0 @@
1
- // This file is auto-generated by gen-snapshot-tests.js
2
- // Do not edit this file. To make changes to these snapshot tests:
3
- // 1. edit the markdown documentation files in the package,
4
- // packages/wonder-blocks-icon-button
5
- // 2. Run `yarn run gen-snapshot-tests`.
6
- import React from "react";
7
- import renderer from "react-test-renderer";
8
-
9
- // Mock react-dom as jest doesn't like findDOMNode.
10
- jest.mock("react-dom");
11
- import {View} from "@khanacademy/wonder-blocks-core";
12
- import {icons} from "@khanacademy/wonder-blocks-icon";
13
- import IconButton from "@khanacademy/wonder-blocks-icon-button";
14
- import {Strut} from "@khanacademy/wonder-blocks-layout";
15
- import Color from "@khanacademy/wonder-blocks-color";
16
- import {StyleSheet} from "aphrodite";
17
-
18
- describe("wonder-blocks-icon-button", () => {
19
- it("example 1", () => {
20
- const example = (
21
- <View
22
- style={{
23
- flexDirection: "row",
24
- }}
25
- >
26
- <IconButton
27
- icon={icons.search}
28
- aria-label="search"
29
- onClick={(e) => console.log("hello")}
30
- />
31
- <Strut size={16} />
32
- <IconButton
33
- icon={icons.search}
34
- aria-label="search"
35
- kind="secondary"
36
- onClick={(e) => console.log("hello")}
37
- />
38
- <Strut size={16} />
39
- <IconButton
40
- icon={icons.search}
41
- aria-label="search"
42
- kind="tertiary"
43
- href="/search"
44
- />
45
- <Strut size={16} />
46
- <IconButton
47
- disabled={true}
48
- icon={icons.search}
49
- aria-label="search"
50
- onClick={(e) => console.log("hello")}
51
- />
52
- <Strut size={16} />
53
- <IconButton
54
- disabled={true}
55
- icon={icons.search}
56
- aria-label="search"
57
- href="/search"
58
- />
59
- </View>
60
- );
61
- const tree = renderer.create(example).toJSON();
62
- expect(tree).toMatchSnapshot();
63
- });
64
-
65
- it("example 2", () => {
66
- const styles = StyleSheet.create({
67
- row: {
68
- flexDirection: "row",
69
- backgroundColor: Color.darkBlue,
70
- padding: 10,
71
- },
72
- });
73
- const example = (
74
- <View style={[styles.row]}>
75
- <IconButton
76
- icon={icons.search}
77
- aria-label="search"
78
- light={true}
79
- onClick={(e) => console.log("hello")}
80
- />
81
- </View>
82
- );
83
- const tree = renderer.create(example).toJSON();
84
- expect(tree).toMatchSnapshot();
85
- });
86
- });
package/src/components/icon-button.md DELETED
@@ -1,69 +0,0 @@
1
- Primary, secondary, and tertiary IconButton examples:
2
- ```js
3
- import {View} from "@khanacademy/wonder-blocks-core";
4
- import {icons} from "@khanacademy/wonder-blocks-icon";
5
- import IconButton from "@khanacademy/wonder-blocks-icon-button";
6
- import {Strut} from "@khanacademy/wonder-blocks-layout";
7
-
8
- <View style={{flexDirection: "row"}}>
9
- <IconButton
10
- icon={icons.search}
11
- aria-label="search"
12
- onClick={(e) => console.log("hello")}
13
- />
14
- <Strut size={16} />
15
- <IconButton
16
- icon={icons.search}
17
- aria-label="search"
18
- kind="secondary"
19
- onClick={(e) => console.log("hello")}
20
- />
21
- <Strut size={16} />
22
- <IconButton
23
- icon={icons.search}
24
- aria-label="search"
25
- kind="tertiary"
26
- href="/search"
27
- />
28
- <Strut size={16} />
29
- <IconButton
30
- disabled={true}
31
- icon={icons.search}
32
- aria-label="search"
33
- onClick={(e) => console.log("hello")}
34
- />
35
- <Strut size={16} />
36
- <IconButton
37
- disabled={true}
38
- icon={icons.search}
39
- aria-label="search"
40
- href="/search"
41
- />
42
- </View>
43
- ```
44
-
45
- An IconButton on a dark background. Only the primary kind is allowed.
46
- ```js
47
- import Color from "@khanacademy/wonder-blocks-color";
48
- import {View} from "@khanacademy/wonder-blocks-core";
49
- import {icons} from "@khanacademy/wonder-blocks-icon";
50
- import IconButton from "@khanacademy/wonder-blocks-icon-button";
51
- import {StyleSheet} from "aphrodite";
52
-
53
- const styles = StyleSheet.create({
54
- row: {
55
- flexDirection: "row",
56
- backgroundColor: Color.darkBlue,
57
- padding: 10,
58
- },
59
- });
60
-
61
- <View style={[styles.row]}>
62
- <IconButton
63
- icon={icons.search}
64
- aria-label="search"
65
- light={true}
66
- onClick={(e) => console.log("hello")}
67
- />
68
- </View>
69
- ```