@khanacademy/wonder-blocks-link 3.8.14 → 3.8.15
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/CHANGELOG.md +10 -0
- package/package.json +4 -4
- package/src/components/__tests__/link.test.js +67 -94
- package/dist/index.js +0 -406
- package/dist/index.js.flow +0 -2
- package/docs.md +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-link
|
|
2
2
|
|
|
3
|
+
## 3.8.15
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [b561425a]
|
|
8
|
+
- Updated dependencies [a566e232]
|
|
9
|
+
- Updated dependencies [d2b21a6e]
|
|
10
|
+
- @khanacademy/wonder-blocks-core@4.6.0
|
|
11
|
+
- @khanacademy/wonder-blocks-clickable@2.4.2
|
|
12
|
+
|
|
3
13
|
## 3.8.14
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-link",
|
|
3
|
-
"version": "3.8.
|
|
3
|
+
"version": "3.8.15",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"license": "MIT",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime": "^7.18.6",
|
|
19
|
-
"@khanacademy/wonder-blocks-clickable": "^2.4.
|
|
19
|
+
"@khanacademy/wonder-blocks-clickable": "^2.4.2",
|
|
20
20
|
"@khanacademy/wonder-blocks-color": "^1.2.0",
|
|
21
|
-
"@khanacademy/wonder-blocks-core": "^4.
|
|
21
|
+
"@khanacademy/wonder-blocks-core": "^4.6.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"aphrodite": "^1.2.5",
|
|
@@ -27,6 +27,6 @@
|
|
|
27
27
|
"react-router-dom": "5.3.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"wb-dev-build-settings": "^0.
|
|
30
|
+
"wb-dev-build-settings": "^0.5.0"
|
|
31
31
|
}
|
|
32
32
|
}
|
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
// @flow
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import {MemoryRouter, Route, Switch} from "react-router-dom";
|
|
4
|
-
import {
|
|
5
|
-
import "
|
|
4
|
+
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
|
|
5
|
+
import userEvent from "@testing-library/user-event";
|
|
6
6
|
|
|
7
7
|
import Link from "../link.js";
|
|
8
8
|
|
|
9
|
-
const wait = (delay: number = 0) =>
|
|
10
|
-
new Promise((resolve, reject) => {
|
|
11
|
-
// eslint-disable-next-line no-restricted-syntax
|
|
12
|
-
return setTimeout(resolve, delay);
|
|
13
|
-
});
|
|
14
|
-
|
|
15
9
|
describe("Link", () => {
|
|
16
10
|
beforeEach(() => {
|
|
17
11
|
// Note: window.location.assign needs a mock function in the testing
|
|
@@ -22,12 +16,13 @@ describe("Link", () => {
|
|
|
22
16
|
|
|
23
17
|
afterEach(() => {
|
|
24
18
|
window.location.assign.mockClear();
|
|
19
|
+
jest.clearAllMocks();
|
|
25
20
|
});
|
|
26
21
|
|
|
27
22
|
describe("client-side navigation", () => {
|
|
28
23
|
test("works for known URLs", () => {
|
|
29
24
|
// Arrange
|
|
30
|
-
|
|
25
|
+
render(
|
|
31
26
|
<MemoryRouter>
|
|
32
27
|
<div>
|
|
33
28
|
<Link href="/foo">Click me!</Link>
|
|
@@ -41,16 +36,16 @@ describe("Link", () => {
|
|
|
41
36
|
);
|
|
42
37
|
|
|
43
38
|
// Act
|
|
44
|
-
const
|
|
45
|
-
|
|
39
|
+
const link = screen.getByText("Click me!");
|
|
40
|
+
userEvent.click(link);
|
|
46
41
|
|
|
47
42
|
// Assert
|
|
48
|
-
expect(
|
|
43
|
+
expect(screen.getByText("Hello, world!")).toBeInTheDocument();
|
|
49
44
|
});
|
|
50
45
|
|
|
51
46
|
test("navigation to without route does not render", () => {
|
|
52
47
|
// Arrange
|
|
53
|
-
|
|
48
|
+
render(
|
|
54
49
|
<MemoryRouter>
|
|
55
50
|
<div>
|
|
56
51
|
<Link href="/unknown">Click me!</Link>
|
|
@@ -64,16 +59,16 @@ describe("Link", () => {
|
|
|
64
59
|
);
|
|
65
60
|
|
|
66
61
|
// Act
|
|
67
|
-
const
|
|
68
|
-
|
|
62
|
+
const link = screen.getByText("Click me!");
|
|
63
|
+
userEvent.click(link);
|
|
69
64
|
|
|
70
65
|
// Assert
|
|
71
|
-
expect(
|
|
66
|
+
expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
|
|
72
67
|
});
|
|
73
68
|
|
|
74
|
-
test("waits until beforeNav resolves before navigating",
|
|
69
|
+
test("waits until beforeNav resolves before navigating", () => {
|
|
75
70
|
// Arrange
|
|
76
|
-
|
|
71
|
+
render(
|
|
77
72
|
<MemoryRouter>
|
|
78
73
|
<div>
|
|
79
74
|
<Link href="/foo" beforeNav={() => Promise.resolve()}>
|
|
@@ -89,20 +84,16 @@ describe("Link", () => {
|
|
|
89
84
|
);
|
|
90
85
|
|
|
91
86
|
// Act
|
|
92
|
-
const
|
|
93
|
-
|
|
94
|
-
button: 0,
|
|
95
|
-
});
|
|
96
|
-
await wait(0);
|
|
97
|
-
wrapper.update();
|
|
87
|
+
const link = screen.getByText("Click me!");
|
|
88
|
+
userEvent.click(link);
|
|
98
89
|
|
|
99
90
|
// Assert
|
|
100
|
-
expect(
|
|
91
|
+
expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
|
|
101
92
|
});
|
|
102
93
|
|
|
103
|
-
test("doesn't navigate before beforeNav resolves",
|
|
94
|
+
test("doesn't navigate before beforeNav resolves", () => {
|
|
104
95
|
// Arrange
|
|
105
|
-
|
|
96
|
+
render(
|
|
106
97
|
<MemoryRouter>
|
|
107
98
|
<div>
|
|
108
99
|
<Link href="/foo" beforeNav={() => Promise.resolve()}>
|
|
@@ -118,18 +109,16 @@ describe("Link", () => {
|
|
|
118
109
|
);
|
|
119
110
|
|
|
120
111
|
// Act
|
|
121
|
-
const
|
|
122
|
-
|
|
123
|
-
button: 0,
|
|
124
|
-
});
|
|
112
|
+
const link = screen.getByText("Click me!");
|
|
113
|
+
userEvent.click(link);
|
|
125
114
|
|
|
126
115
|
// Assert
|
|
127
|
-
expect(
|
|
116
|
+
expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
|
|
128
117
|
});
|
|
129
118
|
|
|
130
|
-
test("does not navigate if beforeNav rejects",
|
|
119
|
+
test("does not navigate if beforeNav rejects", () => {
|
|
131
120
|
// Arrange
|
|
132
|
-
|
|
121
|
+
render(
|
|
133
122
|
<MemoryRouter>
|
|
134
123
|
<div>
|
|
135
124
|
<Link href="/foo" beforeNav={() => Promise.reject()}>
|
|
@@ -145,21 +134,17 @@ describe("Link", () => {
|
|
|
145
134
|
);
|
|
146
135
|
|
|
147
136
|
// Act
|
|
148
|
-
const
|
|
149
|
-
|
|
150
|
-
button: 0,
|
|
151
|
-
});
|
|
152
|
-
await wait(0);
|
|
153
|
-
wrapper.update();
|
|
137
|
+
const link = screen.getByText("Click me!");
|
|
138
|
+
userEvent.click(link);
|
|
154
139
|
|
|
155
140
|
// Assert
|
|
156
|
-
expect(
|
|
141
|
+
expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
|
|
157
142
|
});
|
|
158
143
|
|
|
159
144
|
test("runs safeWithNav if set", async () => {
|
|
160
145
|
// Arrange
|
|
161
146
|
const safeWithNavMock = jest.fn();
|
|
162
|
-
|
|
147
|
+
render(
|
|
163
148
|
<MemoryRouter>
|
|
164
149
|
<div>
|
|
165
150
|
<Link
|
|
@@ -179,21 +164,19 @@ describe("Link", () => {
|
|
|
179
164
|
);
|
|
180
165
|
|
|
181
166
|
// Act
|
|
182
|
-
const
|
|
183
|
-
|
|
184
|
-
button: 0,
|
|
185
|
-
});
|
|
186
|
-
await wait(0);
|
|
187
|
-
wrapper.update();
|
|
167
|
+
const link = screen.getByText("Click me!");
|
|
168
|
+
userEvent.click(link);
|
|
188
169
|
|
|
189
170
|
// Assert
|
|
190
|
-
|
|
171
|
+
await waitFor(() => {
|
|
172
|
+
expect(safeWithNavMock).toHaveBeenCalled();
|
|
173
|
+
});
|
|
191
174
|
});
|
|
192
175
|
|
|
193
176
|
test("doesn't run safeWithNav until beforeNav resolves", () => {
|
|
194
177
|
// Arrange
|
|
195
178
|
const safeWithNavMock = jest.fn();
|
|
196
|
-
|
|
179
|
+
render(
|
|
197
180
|
<MemoryRouter>
|
|
198
181
|
<div>
|
|
199
182
|
<Link
|
|
@@ -213,10 +196,8 @@ describe("Link", () => {
|
|
|
213
196
|
);
|
|
214
197
|
|
|
215
198
|
// Act
|
|
216
|
-
const
|
|
217
|
-
|
|
218
|
-
button: 0,
|
|
219
|
-
});
|
|
199
|
+
const link = screen.getByText("Click me!");
|
|
200
|
+
userEvent.click(link);
|
|
220
201
|
|
|
221
202
|
// Assert
|
|
222
203
|
expect(safeWithNavMock).not.toHaveBeenCalled();
|
|
@@ -227,7 +208,7 @@ describe("Link", () => {
|
|
|
227
208
|
test("doesn't redirect if safeWithNav hasn't resolved yet when skipClientNav=true", () => {
|
|
228
209
|
// Arrange
|
|
229
210
|
jest.spyOn(window.location, "assign").mockImplementation(() => {});
|
|
230
|
-
|
|
211
|
+
render(
|
|
231
212
|
<Link
|
|
232
213
|
href="/foo"
|
|
233
214
|
safeWithNav={() => Promise.resolve()}
|
|
@@ -238,10 +219,8 @@ describe("Link", () => {
|
|
|
238
219
|
);
|
|
239
220
|
|
|
240
221
|
// Act
|
|
241
|
-
const
|
|
242
|
-
|
|
243
|
-
button: 0,
|
|
244
|
-
});
|
|
222
|
+
const link = screen.getByText("Click me!");
|
|
223
|
+
userEvent.click(link);
|
|
245
224
|
|
|
246
225
|
// Assert
|
|
247
226
|
expect(window.location.assign).not.toHaveBeenCalled();
|
|
@@ -250,7 +229,7 @@ describe("Link", () => {
|
|
|
250
229
|
test("redirects after safeWithNav resolves when skipClientNav=true", async () => {
|
|
251
230
|
// Arrange
|
|
252
231
|
jest.spyOn(window.location, "assign").mockImplementation(() => {});
|
|
253
|
-
|
|
232
|
+
render(
|
|
254
233
|
<Link
|
|
255
234
|
href="/foo"
|
|
256
235
|
safeWithNav={() => Promise.resolve()}
|
|
@@ -261,21 +240,19 @@ describe("Link", () => {
|
|
|
261
240
|
);
|
|
262
241
|
|
|
263
242
|
// Act
|
|
264
|
-
const
|
|
265
|
-
|
|
266
|
-
button: 0,
|
|
267
|
-
});
|
|
268
|
-
await wait(0);
|
|
269
|
-
wrapper.update();
|
|
243
|
+
const link = screen.getByText("Click me!");
|
|
244
|
+
userEvent.click(link);
|
|
270
245
|
|
|
271
246
|
// Assert
|
|
272
|
-
|
|
247
|
+
await waitFor(() => {
|
|
248
|
+
expect(window.location.assign).toHaveBeenCalledWith("/foo");
|
|
249
|
+
});
|
|
273
250
|
});
|
|
274
251
|
|
|
275
252
|
test("redirects after beforeNav and safeWithNav resolve when skipClientNav=true", async () => {
|
|
276
253
|
// Arrange
|
|
277
254
|
jest.spyOn(window.location, "assign").mockImplementation(() => {});
|
|
278
|
-
|
|
255
|
+
render(
|
|
279
256
|
<Link
|
|
280
257
|
href="/foo"
|
|
281
258
|
beforeNav={() => Promise.resolve()}
|
|
@@ -287,21 +264,19 @@ describe("Link", () => {
|
|
|
287
264
|
);
|
|
288
265
|
|
|
289
266
|
// Act
|
|
290
|
-
const
|
|
291
|
-
|
|
292
|
-
button: 0,
|
|
293
|
-
});
|
|
294
|
-
await wait(0);
|
|
295
|
-
wrapper.update();
|
|
267
|
+
const link = screen.getByText("Click me!");
|
|
268
|
+
userEvent.click(link);
|
|
296
269
|
|
|
297
270
|
// Assert
|
|
298
|
-
|
|
271
|
+
await waitFor(() => {
|
|
272
|
+
expect(window.location.assign).toHaveBeenCalledWith("/foo");
|
|
273
|
+
});
|
|
299
274
|
});
|
|
300
275
|
|
|
301
276
|
test("doesn't redirect before beforeNav resolves when skipClientNav=true", () => {
|
|
302
277
|
// Arrange
|
|
303
278
|
jest.spyOn(window.location, "assign").mockImplementation(() => {});
|
|
304
|
-
|
|
279
|
+
render(
|
|
305
280
|
<Link
|
|
306
281
|
href="/foo"
|
|
307
282
|
beforeNav={() => Promise.resolve()}
|
|
@@ -312,10 +287,8 @@ describe("Link", () => {
|
|
|
312
287
|
);
|
|
313
288
|
|
|
314
289
|
// Act
|
|
315
|
-
const
|
|
316
|
-
|
|
317
|
-
button: 0,
|
|
318
|
-
});
|
|
290
|
+
const link = screen.getByText("Click me!");
|
|
291
|
+
userEvent.click(link);
|
|
319
292
|
|
|
320
293
|
// Assert
|
|
321
294
|
expect(window.location.assign).not.toHaveBeenCalled();
|
|
@@ -325,38 +298,38 @@ describe("Link", () => {
|
|
|
325
298
|
describe("raw events", () => {
|
|
326
299
|
test("onKeyDown", () => {
|
|
327
300
|
// Arrange
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
<Link href="/" onKeyDown={
|
|
301
|
+
let keyCode;
|
|
302
|
+
render(
|
|
303
|
+
<Link href="/" onKeyDown={(e) => (keyCode = e.keyCode)}>
|
|
331
304
|
Click me!
|
|
332
305
|
</Link>,
|
|
333
306
|
);
|
|
334
307
|
|
|
335
308
|
// Act
|
|
336
|
-
|
|
309
|
+
const link = screen.getByText("Click me!");
|
|
310
|
+
// eslint-disable-next-line testing-library/prefer-user-event
|
|
311
|
+
fireEvent.keyDown(link, {keyCode: 32});
|
|
337
312
|
|
|
338
313
|
// Assert
|
|
339
|
-
expect(
|
|
340
|
-
expect.objectContaining({keyCode: 32}),
|
|
341
|
-
);
|
|
314
|
+
expect(keyCode).toEqual(32);
|
|
342
315
|
});
|
|
343
316
|
|
|
344
317
|
test("onKeyUp", () => {
|
|
345
318
|
// Arrange
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
<Link href="/"
|
|
319
|
+
let keyCode;
|
|
320
|
+
render(
|
|
321
|
+
<Link href="/" onKeyUp={(e) => (keyCode = e.keyCode)}>
|
|
349
322
|
Click me!
|
|
350
323
|
</Link>,
|
|
351
324
|
);
|
|
352
325
|
|
|
353
326
|
// Act
|
|
354
|
-
|
|
327
|
+
const link = screen.getByText("Click me!");
|
|
328
|
+
// eslint-disable-next-line testing-library/prefer-user-event
|
|
329
|
+
fireEvent.keyUp(link, {keyCode: 32});
|
|
355
330
|
|
|
356
331
|
// Assert
|
|
357
|
-
expect(
|
|
358
|
-
expect.objectContaining({keyCode: 32}),
|
|
359
|
-
);
|
|
332
|
+
expect(keyCode).toEqual(32);
|
|
360
333
|
});
|
|
361
334
|
});
|
|
362
335
|
});
|
package/dist/index.js
DELETED
|
@@ -1,406 +0,0 @@
|
|
|
1
|
-
module.exports =
|
|
2
|
-
/******/ (function(modules) { // webpackBootstrap
|
|
3
|
-
/******/ // The module cache
|
|
4
|
-
/******/ var installedModules = {};
|
|
5
|
-
/******/
|
|
6
|
-
/******/ // The require function
|
|
7
|
-
/******/ function __webpack_require__(moduleId) {
|
|
8
|
-
/******/
|
|
9
|
-
/******/ // Check if module is in cache
|
|
10
|
-
/******/ if(installedModules[moduleId]) {
|
|
11
|
-
/******/ return installedModules[moduleId].exports;
|
|
12
|
-
/******/ }
|
|
13
|
-
/******/ // Create a new module (and put it into the cache)
|
|
14
|
-
/******/ var module = installedModules[moduleId] = {
|
|
15
|
-
/******/ i: moduleId,
|
|
16
|
-
/******/ l: false,
|
|
17
|
-
/******/ exports: {}
|
|
18
|
-
/******/ };
|
|
19
|
-
/******/
|
|
20
|
-
/******/ // Execute the module function
|
|
21
|
-
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
22
|
-
/******/
|
|
23
|
-
/******/ // Flag the module as loaded
|
|
24
|
-
/******/ module.l = true;
|
|
25
|
-
/******/
|
|
26
|
-
/******/ // Return the exports of the module
|
|
27
|
-
/******/ return module.exports;
|
|
28
|
-
/******/ }
|
|
29
|
-
/******/
|
|
30
|
-
/******/
|
|
31
|
-
/******/ // expose the modules object (__webpack_modules__)
|
|
32
|
-
/******/ __webpack_require__.m = modules;
|
|
33
|
-
/******/
|
|
34
|
-
/******/ // expose the module cache
|
|
35
|
-
/******/ __webpack_require__.c = installedModules;
|
|
36
|
-
/******/
|
|
37
|
-
/******/ // define getter function for harmony exports
|
|
38
|
-
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
39
|
-
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
40
|
-
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
|
41
|
-
/******/ }
|
|
42
|
-
/******/ };
|
|
43
|
-
/******/
|
|
44
|
-
/******/ // define __esModule on exports
|
|
45
|
-
/******/ __webpack_require__.r = function(exports) {
|
|
46
|
-
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
47
|
-
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
48
|
-
/******/ }
|
|
49
|
-
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
50
|
-
/******/ };
|
|
51
|
-
/******/
|
|
52
|
-
/******/ // create a fake namespace object
|
|
53
|
-
/******/ // mode & 1: value is a module id, require it
|
|
54
|
-
/******/ // mode & 2: merge all properties of value into the ns
|
|
55
|
-
/******/ // mode & 4: return value when already ns object
|
|
56
|
-
/******/ // mode & 8|1: behave like require
|
|
57
|
-
/******/ __webpack_require__.t = function(value, mode) {
|
|
58
|
-
/******/ if(mode & 1) value = __webpack_require__(value);
|
|
59
|
-
/******/ if(mode & 8) return value;
|
|
60
|
-
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
|
61
|
-
/******/ var ns = Object.create(null);
|
|
62
|
-
/******/ __webpack_require__.r(ns);
|
|
63
|
-
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
|
64
|
-
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
|
65
|
-
/******/ return ns;
|
|
66
|
-
/******/ };
|
|
67
|
-
/******/
|
|
68
|
-
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
69
|
-
/******/ __webpack_require__.n = function(module) {
|
|
70
|
-
/******/ var getter = module && module.__esModule ?
|
|
71
|
-
/******/ function getDefault() { return module['default']; } :
|
|
72
|
-
/******/ function getModuleExports() { return module; };
|
|
73
|
-
/******/ __webpack_require__.d(getter, 'a', getter);
|
|
74
|
-
/******/ return getter;
|
|
75
|
-
/******/ };
|
|
76
|
-
/******/
|
|
77
|
-
/******/ // Object.prototype.hasOwnProperty.call
|
|
78
|
-
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
|
79
|
-
/******/
|
|
80
|
-
/******/ // __webpack_public_path__
|
|
81
|
-
/******/ __webpack_require__.p = "";
|
|
82
|
-
/******/
|
|
83
|
-
/******/
|
|
84
|
-
/******/ // Load entry module and return exports
|
|
85
|
-
/******/ return __webpack_require__(__webpack_require__.s = 10);
|
|
86
|
-
/******/ })
|
|
87
|
-
/************************************************************************/
|
|
88
|
-
/******/ ([
|
|
89
|
-
/* 0 */
|
|
90
|
-
/***/ (function(module, exports) {
|
|
91
|
-
|
|
92
|
-
module.exports = require("react");
|
|
93
|
-
|
|
94
|
-
/***/ }),
|
|
95
|
-
/* 1 */
|
|
96
|
-
/***/ (function(module, exports) {
|
|
97
|
-
|
|
98
|
-
module.exports = require("@khanacademy/wonder-blocks-color");
|
|
99
|
-
|
|
100
|
-
/***/ }),
|
|
101
|
-
/* 2 */
|
|
102
|
-
/***/ (function(module, exports) {
|
|
103
|
-
|
|
104
|
-
function _extends() {
|
|
105
|
-
module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
106
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
107
|
-
var source = arguments[i];
|
|
108
|
-
for (var key in source) {
|
|
109
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
110
|
-
target[key] = source[key];
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
return target;
|
|
115
|
-
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
116
|
-
return _extends.apply(this, arguments);
|
|
117
|
-
}
|
|
118
|
-
module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
119
|
-
|
|
120
|
-
/***/ }),
|
|
121
|
-
/* 3 */
|
|
122
|
-
/***/ (function(module, exports) {
|
|
123
|
-
|
|
124
|
-
module.exports = require("react-router");
|
|
125
|
-
|
|
126
|
-
/***/ }),
|
|
127
|
-
/* 4 */
|
|
128
|
-
/***/ (function(module, exports) {
|
|
129
|
-
|
|
130
|
-
module.exports = require("@khanacademy/wonder-blocks-clickable");
|
|
131
|
-
|
|
132
|
-
/***/ }),
|
|
133
|
-
/* 5 */
|
|
134
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
135
|
-
|
|
136
|
-
"use strict";
|
|
137
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LinkCore; });
|
|
138
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
|
|
139
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
140
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
141
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
142
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
|
|
143
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
|
|
144
|
-
/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
|
|
145
|
-
/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_3__);
|
|
146
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
|
|
147
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_4__);
|
|
148
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
|
|
149
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__);
|
|
150
|
-
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1);
|
|
151
|
-
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__);
|
|
152
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(4);
|
|
153
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__);
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])("a");
|
|
163
|
-
const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_3__["Link"]);
|
|
164
|
-
class LinkCore extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
165
|
-
renderInner(router) {
|
|
166
|
-
const {
|
|
167
|
-
children,
|
|
168
|
-
skipClientNav,
|
|
169
|
-
focused,
|
|
170
|
-
hovered,
|
|
171
|
-
href,
|
|
172
|
-
kind,
|
|
173
|
-
light,
|
|
174
|
-
visitable,
|
|
175
|
-
pressed,
|
|
176
|
-
style,
|
|
177
|
-
testId,
|
|
178
|
-
waiting: _,
|
|
179
|
-
...restProps
|
|
180
|
-
} = this.props;
|
|
181
|
-
|
|
182
|
-
const linkStyles = _generateStyles(kind, light, visitable);
|
|
183
|
-
|
|
184
|
-
const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && linkStyles.default, pressed ? linkStyles.active : (hovered || focused) && linkStyles.focus];
|
|
185
|
-
const commonProps = {
|
|
186
|
-
"data-test-id": testId,
|
|
187
|
-
style: [defaultStyles, style],
|
|
188
|
-
...restProps
|
|
189
|
-
};
|
|
190
|
-
return router && !skipClientNav && Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__["isClientSideUrl"])(href) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledLink, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
|
|
191
|
-
to: href
|
|
192
|
-
}), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledAnchor, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
|
|
193
|
-
href: href
|
|
194
|
-
}), children);
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
render() {
|
|
198
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_4__["__RouterContext"].Consumer, null, router => this.renderInner(router));
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
}
|
|
202
|
-
const styles = {};
|
|
203
|
-
const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
|
|
204
|
-
shared: {
|
|
205
|
-
cursor: "pointer",
|
|
206
|
-
textDecoration: "none",
|
|
207
|
-
outline: "none"
|
|
208
|
-
}
|
|
209
|
-
});
|
|
210
|
-
|
|
211
|
-
const _generateStyles = (kind, light, visitable) => {
|
|
212
|
-
const buttonType = kind + light.toString() + visitable.toString();
|
|
213
|
-
|
|
214
|
-
if (styles[buttonType]) {
|
|
215
|
-
return styles[buttonType];
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
if (kind === "secondary" && light) {
|
|
219
|
-
throw new Error("Secondary Light links are not supported");
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
if (visitable && (kind !== "primary" || kind === "primary" && light)) {
|
|
223
|
-
throw new Error("Only primary (not light) link is visitable");
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
const {
|
|
227
|
-
blue,
|
|
228
|
-
purple,
|
|
229
|
-
white,
|
|
230
|
-
offBlack,
|
|
231
|
-
offBlack32
|
|
232
|
-
} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a;
|
|
233
|
-
const linkPurple = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["fade"])(offBlack, 0.08), purple);
|
|
234
|
-
const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
|
|
235
|
-
const focusColor = light ? white : blue;
|
|
236
|
-
const activeColor = light ? Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["fade"])(blue, 0.32), white) : Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["mix"])(offBlack32, blue);
|
|
237
|
-
const defaultVisited = visitable ? {
|
|
238
|
-
":visited": {
|
|
239
|
-
color: linkPurple
|
|
240
|
-
}
|
|
241
|
-
} : Object.freeze({});
|
|
242
|
-
const activeVisited = visitable ? {
|
|
243
|
-
":visited": {
|
|
244
|
-
color: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["mix"])(offBlack32, linkPurple)
|
|
245
|
-
}
|
|
246
|
-
} : Object.freeze({});
|
|
247
|
-
const newStyles = {
|
|
248
|
-
default: {
|
|
249
|
-
color: defaultTextColor,
|
|
250
|
-
...defaultVisited
|
|
251
|
-
},
|
|
252
|
-
focus: {
|
|
253
|
-
textDecoration: "underline currentcolor solid",
|
|
254
|
-
color: focusColor,
|
|
255
|
-
...defaultVisited
|
|
256
|
-
},
|
|
257
|
-
active: {
|
|
258
|
-
color: activeColor,
|
|
259
|
-
textDecoration: "underline currentcolor solid",
|
|
260
|
-
...activeVisited
|
|
261
|
-
}
|
|
262
|
-
};
|
|
263
|
-
styles[buttonType] = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create(newStyles);
|
|
264
|
-
return styles[buttonType];
|
|
265
|
-
};
|
|
266
|
-
|
|
267
|
-
/***/ }),
|
|
268
|
-
/* 6 */
|
|
269
|
-
/***/ (function(module, exports) {
|
|
270
|
-
|
|
271
|
-
module.exports = require("aphrodite");
|
|
272
|
-
|
|
273
|
-
/***/ }),
|
|
274
|
-
/* 7 */
|
|
275
|
-
/***/ (function(module, exports) {
|
|
276
|
-
|
|
277
|
-
module.exports = require("@khanacademy/wonder-blocks-core");
|
|
278
|
-
|
|
279
|
-
/***/ }),
|
|
280
|
-
/* 8 */
|
|
281
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
282
|
-
|
|
283
|
-
"use strict";
|
|
284
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Link; });
|
|
285
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
|
|
286
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
287
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
288
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
289
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
|
|
290
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_2__);
|
|
291
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
|
|
292
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__);
|
|
293
|
-
/* harmony import */ var _link_core_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
/**
|
|
301
|
-
* Reusable link component.
|
|
302
|
-
*
|
|
303
|
-
* Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
|
|
304
|
-
* `LinkCore`. `ClickableBehavior` handles interactions and state changes.
|
|
305
|
-
* `LinkCore` is a stateless component which displays the different states
|
|
306
|
-
* the `Link` can take.
|
|
307
|
-
*
|
|
308
|
-
* ### Usage
|
|
309
|
-
*
|
|
310
|
-
* ```jsx
|
|
311
|
-
* <Link
|
|
312
|
-
* href="https://khanacademy.org/"
|
|
313
|
-
* >
|
|
314
|
-
* Label
|
|
315
|
-
* </Link>
|
|
316
|
-
* ```
|
|
317
|
-
*/
|
|
318
|
-
class Link extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
319
|
-
renderClickableBehavior(router) {
|
|
320
|
-
const {
|
|
321
|
-
onClick,
|
|
322
|
-
beforeNav = undefined,
|
|
323
|
-
safeWithNav,
|
|
324
|
-
href,
|
|
325
|
-
skipClientNav,
|
|
326
|
-
children,
|
|
327
|
-
tabIndex,
|
|
328
|
-
onKeyDown,
|
|
329
|
-
onKeyUp,
|
|
330
|
-
target = undefined,
|
|
331
|
-
...sharedProps
|
|
332
|
-
} = this.props;
|
|
333
|
-
const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__["getClickableBehavior"])(href, skipClientNav, router);
|
|
334
|
-
|
|
335
|
-
if (beforeNav) {
|
|
336
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
|
|
337
|
-
disabled: false,
|
|
338
|
-
href: href,
|
|
339
|
-
role: "link",
|
|
340
|
-
onClick: onClick,
|
|
341
|
-
beforeNav: beforeNav,
|
|
342
|
-
safeWithNav: safeWithNav,
|
|
343
|
-
onKeyDown: onKeyDown,
|
|
344
|
-
onKeyUp: onKeyUp
|
|
345
|
-
}, (state, { ...childrenProps
|
|
346
|
-
}) => {
|
|
347
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_link_core_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, sharedProps, state, childrenProps, {
|
|
348
|
-
skipClientNav: skipClientNav,
|
|
349
|
-
href: href,
|
|
350
|
-
target: target,
|
|
351
|
-
tabIndex: tabIndex
|
|
352
|
-
}), children);
|
|
353
|
-
});
|
|
354
|
-
} else {
|
|
355
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
|
|
356
|
-
disabled: false,
|
|
357
|
-
href: href,
|
|
358
|
-
role: "link",
|
|
359
|
-
onClick: onClick,
|
|
360
|
-
safeWithNav: safeWithNav,
|
|
361
|
-
target: target,
|
|
362
|
-
onKeyDown: onKeyDown,
|
|
363
|
-
onKeyUp: onKeyUp
|
|
364
|
-
}, (state, { ...childrenProps
|
|
365
|
-
}) => {
|
|
366
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_link_core_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, sharedProps, state, childrenProps, {
|
|
367
|
-
skipClientNav: skipClientNav,
|
|
368
|
-
href: href,
|
|
369
|
-
target: target,
|
|
370
|
-
tabIndex: tabIndex
|
|
371
|
-
}), children);
|
|
372
|
-
});
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
render() {
|
|
377
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_2__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
}
|
|
381
|
-
Link.defaultProps = {
|
|
382
|
-
kind: "primary",
|
|
383
|
-
light: false,
|
|
384
|
-
visitable: false
|
|
385
|
-
};
|
|
386
|
-
|
|
387
|
-
/***/ }),
|
|
388
|
-
/* 9 */
|
|
389
|
-
/***/ (function(module, exports) {
|
|
390
|
-
|
|
391
|
-
module.exports = require("react-router-dom");
|
|
392
|
-
|
|
393
|
-
/***/ }),
|
|
394
|
-
/* 10 */
|
|
395
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
396
|
-
|
|
397
|
-
"use strict";
|
|
398
|
-
__webpack_require__.r(__webpack_exports__);
|
|
399
|
-
/* harmony import */ var _components_link_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
|
|
400
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_link_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
/***/ })
|
|
406
|
-
/******/ ]);
|
package/dist/index.js.flow
DELETED