@khanacademy/wonder-blocks-clickable 2.3.1 → 2.3.2

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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/es/index.js +1 -2
  3. package/dist/index.js +1 -2
  4. package/docs.md +4 -6
  5. package/package.json +1 -1
  6. package/src/components/__tests__/clickable-behavior.test.js +312 -374
  7. package/src/components/__tests__/clickable.test.js +113 -103
  8. package/src/components/clickable.js +0 -2
  9. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -426
  10. package/src/__tests__/generated-snapshot.test.js +0 -176
  11. package/src/components/clickable.md +0 -203
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap DELETED
@@ -1,426 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`wonder-blocks-clickable 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": "column",
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-disabled={false}
25
- aria-label=""
26
- className=""
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
- role="tab"
41
- style={
42
- {
43
- "::MozFocusInner": {
44
- "border": 0,
45
- },
46
- "MozOsxFontSmoothing": "inherit",
47
- "WebkitFontSmoothing": "inherit",
48
- "background": "transparent",
49
- "border": "none",
50
- "boxSizing": "border-box",
51
- "color": "inherit",
52
- "cursor": "pointer",
53
- "font": "inherit",
54
- "lineHeight": "normal",
55
- "margin": 0,
56
- "outline": "none",
57
- "overflow": "visible",
58
- "padding": 0,
59
- "textDecoration": "none",
60
- "touchAction": "manipulation",
61
- "userSelect": "none",
62
- "width": "auto",
63
- }
64
- }
65
- tabIndex={0}
66
- type="button"
67
- >
68
- <div
69
- className=""
70
- style={
71
- {
72
- "alignItems": "stretch",
73
- "borderStyle": "solid",
74
- "borderWidth": 0,
75
- "boxSizing": "border-box",
76
- "display": "flex",
77
- "flexDirection": "column",
78
- "margin": 0,
79
- "minHeight": 0,
80
- "minWidth": 0,
81
- "padding": 0,
82
- "position": "relative",
83
- "zIndex": 0,
84
- }
85
- }
86
- >
87
- <span
88
- className=""
89
- style={
90
- {
91
- "MozOsxFontSmoothing": "grayscale",
92
- "WebkitFontSmoothing": "antialiased",
93
- "display": "block",
94
- "fontFamily": "Lato, "Noto Sans", sans-serif",
95
- "fontSize": 16,
96
- "fontWeight": 400,
97
- "lineHeight": "22px",
98
- }
99
- }
100
- >
101
- This text is clickable!
102
- </span>
103
- </div>
104
- </button>
105
- </div>
106
- `;
107
-
108
- exports[`wonder-blocks-clickable example 2 1`] = `
109
- <div
110
- className=""
111
- style={
112
- {
113
- "alignItems": "stretch",
114
- "backgroundColor": "#0b2149",
115
- "borderStyle": "solid",
116
- "borderWidth": 0,
117
- "boxSizing": "border-box",
118
- "color": "#ffffff",
119
- "display": "flex",
120
- "flexDirection": "column",
121
- "margin": 0,
122
- "minHeight": 0,
123
- "minWidth": 0,
124
- "padding": 12,
125
- "position": "relative",
126
- "zIndex": 0,
127
- }
128
- }
129
- >
130
- <button
131
- aria-disabled={false}
132
- aria-label=""
133
- className=""
134
- onBlur={[Function]}
135
- onClick={[Function]}
136
- onDragStart={[Function]}
137
- onFocus={[Function]}
138
- onKeyDown={[Function]}
139
- onKeyUp={[Function]}
140
- onMouseDown={[Function]}
141
- onMouseEnter={[Function]}
142
- onMouseLeave={[Function]}
143
- onMouseUp={[Function]}
144
- onTouchCancel={[Function]}
145
- onTouchEnd={[Function]}
146
- onTouchStart={[Function]}
147
- role="tab"
148
- style={
149
- {
150
- "::MozFocusInner": {
151
- "border": 0,
152
- },
153
- "MozOsxFontSmoothing": "inherit",
154
- "WebkitFontSmoothing": "inherit",
155
- "background": "transparent",
156
- "border": "none",
157
- "boxSizing": "border-box",
158
- "color": "inherit",
159
- "cursor": "pointer",
160
- "font": "inherit",
161
- "lineHeight": "normal",
162
- "margin": 0,
163
- "outline": "none",
164
- "overflow": "visible",
165
- "padding": 0,
166
- "textDecoration": "none",
167
- "touchAction": "manipulation",
168
- "userSelect": "none",
169
- "width": "auto",
170
- }
171
- }
172
- tabIndex={0}
173
- type="button"
174
- >
175
- <div
176
- className=""
177
- style={
178
- {
179
- "alignItems": "stretch",
180
- "borderStyle": "solid",
181
- "borderWidth": 0,
182
- "boxSizing": "border-box",
183
- "display": "flex",
184
- "flexDirection": "column",
185
- "margin": 0,
186
- "minHeight": 0,
187
- "minWidth": 0,
188
- "padding": 0,
189
- "position": "relative",
190
- "zIndex": 0,
191
- }
192
- }
193
- >
194
- <span
195
- className=""
196
- style={
197
- {
198
- "MozOsxFontSmoothing": "grayscale",
199
- "WebkitFontSmoothing": "antialiased",
200
- "display": "block",
201
- "fontFamily": "Lato, "Noto Sans", sans-serif",
202
- "fontSize": 16,
203
- "fontWeight": 400,
204
- "lineHeight": "22px",
205
- }
206
- }
207
- >
208
- This text is clickable!
209
- </span>
210
- </div>
211
- </button>
212
- </div>
213
- `;
214
-
215
- exports[`wonder-blocks-clickable example 3 1`] = `
216
- <div
217
- className=""
218
- style={
219
- {
220
- "alignItems": "center",
221
- "borderStyle": "solid",
222
- "borderWidth": 0,
223
- "boxSizing": "border-box",
224
- "display": "flex",
225
- "flexDirection": "row",
226
- "margin": 0,
227
- "minHeight": 0,
228
- "minWidth": 0,
229
- "padding": 0,
230
- "position": "relative",
231
- "zIndex": 0,
232
- }
233
- }
234
- >
235
- <a
236
- aria-label=""
237
- className=""
238
- href="/foo"
239
- onBlur={[Function]}
240
- onClick={[Function]}
241
- onDragStart={[Function]}
242
- onFocus={[Function]}
243
- onKeyDown={[Function]}
244
- onKeyUp={[Function]}
245
- onMouseDown={[Function]}
246
- onMouseEnter={[Function]}
247
- onMouseLeave={[Function]}
248
- onMouseUp={[Function]}
249
- onTouchCancel={[Function]}
250
- onTouchEnd={[Function]}
251
- onTouchStart={[Function]}
252
- style={
253
- {
254
- "MozOsxFontSmoothing": "inherit",
255
- "WebkitFontSmoothing": "inherit",
256
- "background": "transparent",
257
- "border": "none",
258
- "boxSizing": "border-box",
259
- "color": "inherit",
260
- "cursor": "pointer",
261
- "font": "inherit",
262
- "lineHeight": "normal",
263
- "margin": 0,
264
- "marginRight": 24,
265
- "outline": "none",
266
- "overflow": "visible",
267
- "padding": 0,
268
- "textDecoration": "none",
269
- "touchAction": "manipulation",
270
- "userSelect": "none",
271
- "width": "auto",
272
- }
273
- }
274
- tabIndex={0}
275
- >
276
- <h1>
277
- Uses Client-side Nav
278
- </h1>
279
- </a>
280
- <a
281
- aria-label=""
282
- className=""
283
- href="/foo"
284
- onBlur={[Function]}
285
- onClick={[Function]}
286
- onDragStart={[Function]}
287
- onFocus={[Function]}
288
- onKeyDown={[Function]}
289
- onKeyUp={[Function]}
290
- onMouseDown={[Function]}
291
- onMouseEnter={[Function]}
292
- onMouseLeave={[Function]}
293
- onMouseUp={[Function]}
294
- onTouchCancel={[Function]}
295
- onTouchEnd={[Function]}
296
- onTouchStart={[Function]}
297
- style={
298
- {
299
- "MozOsxFontSmoothing": "inherit",
300
- "WebkitFontSmoothing": "inherit",
301
- "background": "transparent",
302
- "border": "none",
303
- "boxSizing": "border-box",
304
- "color": "inherit",
305
- "cursor": "pointer",
306
- "font": "inherit",
307
- "lineHeight": "normal",
308
- "margin": 0,
309
- "marginRight": 24,
310
- "outline": "none",
311
- "overflow": "visible",
312
- "padding": 0,
313
- "textDecoration": "none",
314
- "touchAction": "manipulation",
315
- "userSelect": "none",
316
- "width": "auto",
317
- }
318
- }
319
- tabIndex={0}
320
- >
321
- <h1>
322
- Avoids Client-side Nav
323
- </h1>
324
- </a>
325
- </div>
326
- `;
327
-
328
- exports[`wonder-blocks-clickable example 4 1`] = `
329
- <div
330
- className=""
331
- style={
332
- {
333
- "alignItems": "stretch",
334
- "borderStyle": "solid",
335
- "borderWidth": 0,
336
- "boxSizing": "border-box",
337
- "display": "flex",
338
- "flexDirection": "column",
339
- "margin": 0,
340
- "minHeight": 0,
341
- "minWidth": 0,
342
- "padding": 0,
343
- "position": "relative",
344
- "zIndex": 0,
345
- }
346
- }
347
- >
348
- <a
349
- aria-label=""
350
- className=""
351
- href="https://www.khanacademy.org/about/tos"
352
- onBlur={[Function]}
353
- onClick={[Function]}
354
- onDragStart={[Function]}
355
- onFocus={[Function]}
356
- onKeyDown={[Function]}
357
- onKeyUp={[Function]}
358
- onMouseDown={[Function]}
359
- onMouseEnter={[Function]}
360
- onMouseLeave={[Function]}
361
- onMouseUp={[Function]}
362
- onTouchCancel={[Function]}
363
- onTouchEnd={[Function]}
364
- onTouchStart={[Function]}
365
- style={
366
- {
367
- "MozOsxFontSmoothing": "inherit",
368
- "WebkitFontSmoothing": "inherit",
369
- "background": "transparent",
370
- "border": "none",
371
- "boxSizing": "border-box",
372
- "color": "inherit",
373
- "cursor": "pointer",
374
- "font": "inherit",
375
- "lineHeight": "normal",
376
- "margin": 0,
377
- "outline": "none",
378
- "overflow": "visible",
379
- "padding": 0,
380
- "textDecoration": "none",
381
- "touchAction": "manipulation",
382
- "userSelect": "none",
383
- "width": "auto",
384
- }
385
- }
386
- tabIndex={0}
387
- >
388
- <div
389
- className=""
390
- style={
391
- {
392
- "alignItems": "stretch",
393
- "borderStyle": "solid",
394
- "borderWidth": 0,
395
- "boxSizing": "border-box",
396
- "display": "flex",
397
- "flexDirection": "column",
398
- "margin": 0,
399
- "minHeight": 0,
400
- "minWidth": 0,
401
- "padding": 0,
402
- "position": "relative",
403
- "zIndex": 0,
404
- }
405
- }
406
- >
407
- <span
408
- className=""
409
- style={
410
- {
411
- "MozOsxFontSmoothing": "grayscale",
412
- "WebkitFontSmoothing": "antialiased",
413
- "display": "block",
414
- "fontFamily": "Lato, "Noto Sans", sans-serif",
415
- "fontSize": 16,
416
- "fontWeight": 400,
417
- "lineHeight": "22px",
418
- }
419
- }
420
- >
421
- This text should navigate using the keyboard
422
- </span>
423
- </div>
424
- </a>
425
- </div>
426
- `;
package/src/__tests__/generated-snapshot.test.js DELETED
@@ -1,176 +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-clickable
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 {StyleSheet} from "aphrodite";
12
- import Clickable from "@khanacademy/wonder-blocks-clickable";
13
- import {View} from "@khanacademy/wonder-blocks-core";
14
- import Color from "@khanacademy/wonder-blocks-color";
15
- import {Body} from "@khanacademy/wonder-blocks-typography";
16
- import Spacing from "@khanacademy/wonder-blocks-spacing";
17
- import {MemoryRouter, Route, Switch} from "react-router-dom";
18
-
19
- import ClickableBehavior from "./../components/clickable-behavior.js";
20
-
21
- describe("wonder-blocks-clickable", () => {
22
- it("example 1", () => {
23
- const styles = StyleSheet.create({
24
- hovered: {
25
- textDecoration: "underline",
26
- backgroundColor: Color.teal,
27
- },
28
- pressed: {
29
- color: Color.blue,
30
- },
31
- focused: {
32
- outline: `solid 4px ${Color.offBlack64}`,
33
- },
34
- });
35
- const example = (
36
- <View>
37
- <Clickable
38
- onClick={() => alert("You clicked some text!")}
39
- hideDefaultFocusRing={true}
40
- role="tab"
41
- >
42
- {({hovered, focused, pressed}) => (
43
- <View
44
- style={[
45
- hovered && styles.hovered,
46
- focused && styles.focused,
47
- pressed && styles.pressed,
48
- ]}
49
- >
50
- <Body>This text is clickable!</Body>
51
- </View>
52
- )}
53
- </Clickable>
54
- </View>
55
- );
56
- const tree = renderer.create(example).toJSON();
57
- expect(tree).toMatchSnapshot();
58
- });
59
-
60
- it("example 2", () => {
61
- const styles = StyleSheet.create({
62
- background: {
63
- backgroundColor: Color.darkBlue,
64
- color: Color.white,
65
- padding: Spacing.small_12,
66
- },
67
- hovered: {
68
- textDecoration: "underline",
69
- backgroundColor: Color.purple,
70
- },
71
- pressed: {
72
- color: Color.blue,
73
- },
74
- });
75
- const example = (
76
- <View style={styles.background}>
77
- <Clickable
78
- onClick={() => alert("You clicked some text!")}
79
- role="tab"
80
- light={true}
81
- >
82
- {({hovered, focused, pressed}) => (
83
- <View
84
- style={[
85
- hovered && styles.hovered,
86
- pressed && styles.pressed,
87
- ]}
88
- >
89
- <Body>This text is clickable!</Body>
90
- </View>
91
- )}
92
- </Clickable>
93
- </View>
94
- );
95
- const tree = renderer.create(example).toJSON();
96
- expect(tree).toMatchSnapshot();
97
- });
98
-
99
- it("example 3", () => {
100
- const styles = StyleSheet.create({
101
- row: {
102
- flexDirection: "row",
103
- alignItems: "center",
104
- },
105
- h1: {
106
- marginRight: Spacing.large_24,
107
- },
108
- }); // NOTE: In actual code you would use BrowserRouter instead
109
-
110
- const example = (
111
- <MemoryRouter>
112
- <View style={styles.row}>
113
- <Clickable
114
- href="/foo"
115
- style={styles.h1}
116
- onClick={() =>
117
- console.log("I'm still on the same page!")
118
- }
119
- >
120
- {(eventState) => <h1>Uses Client-side Nav</h1>}
121
- </Clickable>
122
- <Clickable href="/foo" style={styles.h1} skipClientNav>
123
- {(eventState) => <h1>Avoids Client-side Nav</h1>}
124
- </Clickable>
125
- <Switch>
126
- <Route path="/foo">
127
- <View id="foo">Hello, world!</View>
128
- </Route>
129
- </Switch>
130
- </View>
131
- </MemoryRouter>
132
- );
133
- const tree = renderer.create(example).toJSON();
134
- expect(tree).toMatchSnapshot();
135
- });
136
-
137
- it("example 4", () => {
138
- const styles = StyleSheet.create({
139
- hovered: {
140
- textDecoration: "underline",
141
- backgroundColor: Color.teal,
142
- },
143
- pressed: {
144
- color: Color.blue,
145
- },
146
- focused: {
147
- outline: `solid 4px ${Color.lightBlue}`,
148
- },
149
- });
150
- const example = (
151
- <View>
152
- <Clickable
153
- href="https://www.khanacademy.org/about/tos"
154
- skipClientNav={true}
155
- hideDefaultFocusRing={true}
156
- >
157
- {({hovered, focused, pressed}) => (
158
- <View
159
- style={[
160
- hovered && styles.hovered,
161
- focused && styles.focused,
162
- pressed && styles.pressed,
163
- ]}
164
- >
165
- <Body>
166
- This text should navigate using the keyboard
167
- </Body>
168
- </View>
169
- )}
170
- </Clickable>
171
- </View>
172
- );
173
- const tree = renderer.create(example).toJSON();
174
- expect(tree).toMatchSnapshot();
175
- });
176
- });