@khanacademy/wonder-blocks-link 3.8.9 → 3.8.11

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 (8) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/index.js +76 -51
  3. package/docs.md +5 -0
  4. package/package.json +3 -3
  5. package/src/__tests__/__snapshots__/custom-snapshot.test.js.snap +33 -33
  6. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -242
  7. package/src/__tests__/generated-snapshot.test.js +0 -73
  8. package/src/components/link.md +0 -43
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @khanacademy/wonder-blocks-link
2
2
 
3
+ ## 3.8.11
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [5b8ba5da]
8
+ - @khanacademy/wonder-blocks-clickable@2.3.2
9
+
10
+ ## 3.8.10
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies [6ee20af9]
15
+ - @khanacademy/wonder-blocks-core@4.4.0
16
+ - @khanacademy/wonder-blocks-clickable@2.3.1
17
+
3
18
  ## 3.8.9
4
19
 
5
20
  ### Patch Changes
package/dist/index.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 9);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 10);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ([
@@ -101,35 +101,59 @@ module.exports = require("@khanacademy/wonder-blocks-color");
101
101
  /* 2 */
102
102
  /***/ (function(module, exports) {
103
103
 
104
- module.exports = require("react-router");
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
+
109
+ for (var key in source) {
110
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
111
+ target[key] = source[key];
112
+ }
113
+ }
114
+ }
115
+
116
+ return target;
117
+ }, module.exports.__esModule = true, module.exports["default"] = module.exports;
118
+ return _extends.apply(this, arguments);
119
+ }
120
+
121
+ module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
105
122
 
106
123
  /***/ }),
107
124
  /* 3 */
108
125
  /***/ (function(module, exports) {
109
126
 
110
- module.exports = require("@khanacademy/wonder-blocks-clickable");
127
+ module.exports = require("react-router");
111
128
 
112
129
  /***/ }),
113
130
  /* 4 */
131
+ /***/ (function(module, exports) {
132
+
133
+ module.exports = require("@khanacademy/wonder-blocks-clickable");
134
+
135
+ /***/ }),
136
+ /* 5 */
114
137
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
115
138
 
116
139
  "use strict";
117
140
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LinkCore; });
118
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
119
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
120
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
121
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
122
- /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
123
- /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
124
- /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
125
- /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
126
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
127
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
128
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
129
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
130
- /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
131
- /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__);
132
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
141
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
142
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
143
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
144
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
145
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
146
+ /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
147
+ /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
148
+ /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_3__);
149
+ /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
150
+ /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_4__);
151
+ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
152
+ /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__);
153
+ /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1);
154
+ /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__);
155
+ /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(4);
156
+ /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__);
133
157
 
134
158
 
135
159
 
@@ -138,9 +162,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
138
162
 
139
163
 
140
164
 
141
- const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("a");
142
- const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"]);
143
- class LinkCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
165
+ const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])("a");
166
+ const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_3__["Link"]);
167
+ class LinkCore extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
144
168
  renderInner(router) {
145
169
  const {
146
170
  children,
@@ -166,20 +190,20 @@ class LinkCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
166
190
  style: [defaultStyles, style],
167
191
  ...restProps
168
192
  };
169
- return router && !skipClientNav && Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__["isClientSideUrl"])(href) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLink, _extends({}, commonProps, {
193
+ 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, {
170
194
  to: href
171
- }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledAnchor, _extends({}, commonProps, {
195
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledAnchor, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
172
196
  href: href
173
197
  }), children);
174
198
  }
175
199
 
176
200
  render() {
177
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderInner(router));
201
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_4__["__RouterContext"].Consumer, null, router => this.renderInner(router));
178
202
  }
179
203
 
180
204
  }
181
205
  const styles = {};
182
- const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
206
+ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
183
207
  shared: {
184
208
  cursor: "pointer",
185
209
  textDecoration: "none",
@@ -208,11 +232,11 @@ const _generateStyles = (kind, light, visitable) => {
208
232
  white,
209
233
  offBlack,
210
234
  offBlack32
211
- } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a;
212
- const linkPurple = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["fade"])(offBlack, 0.08), purple);
235
+ } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a;
236
+ 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);
213
237
  const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
214
238
  const focusColor = light ? white : blue;
215
- const activeColor = light ? Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["fade"])(blue, 0.32), white) : Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(offBlack32, blue);
239
+ 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);
216
240
  const defaultVisited = visitable ? {
217
241
  ":visited": {
218
242
  color: linkPurple
@@ -220,7 +244,7 @@ const _generateStyles = (kind, light, visitable) => {
220
244
  } : Object.freeze({});
221
245
  const activeVisited = visitable ? {
222
246
  ":visited": {
223
- color: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(offBlack32, linkPurple)
247
+ color: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["mix"])(offBlack32, linkPurple)
224
248
  }
225
249
  } : Object.freeze({});
226
250
  const newStyles = {
@@ -239,36 +263,37 @@ const _generateStyles = (kind, light, visitable) => {
239
263
  ...activeVisited
240
264
  }
241
265
  };
242
- styles[buttonType] = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create(newStyles);
266
+ styles[buttonType] = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create(newStyles);
243
267
  return styles[buttonType];
244
268
  };
245
269
 
246
270
  /***/ }),
247
- /* 5 */
271
+ /* 6 */
248
272
  /***/ (function(module, exports) {
249
273
 
250
274
  module.exports = require("aphrodite");
251
275
 
252
276
  /***/ }),
253
- /* 6 */
277
+ /* 7 */
254
278
  /***/ (function(module, exports) {
255
279
 
256
280
  module.exports = require("@khanacademy/wonder-blocks-core");
257
281
 
258
282
  /***/ }),
259
- /* 7 */
283
+ /* 8 */
260
284
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
261
285
 
262
286
  "use strict";
263
287
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Link; });
264
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
265
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
266
- /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
267
- /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_1__);
268
- /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
269
- /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__);
270
- /* harmony import */ var _link_core_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
271
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
288
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
289
+ /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
290
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
291
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
292
+ /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
293
+ /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_2__);
294
+ /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
295
+ /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__);
296
+ /* harmony import */ var _link_core_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
272
297
 
273
298
 
274
299
 
@@ -293,7 +318,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
293
318
  * </Link>
294
319
  * ```
295
320
  */
296
- class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
321
+ class Link extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
297
322
  renderClickableBehavior(router) {
298
323
  const {
299
324
  onClick,
@@ -308,10 +333,10 @@ class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
308
333
  target = undefined,
309
334
  ...sharedProps
310
335
  } = this.props;
311
- const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__["getClickableBehavior"])(href, skipClientNav, router);
336
+ const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__["getClickableBehavior"])(href, skipClientNav, router);
312
337
 
313
338
  if (beforeNav) {
314
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
339
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
315
340
  disabled: false,
316
341
  href: href,
317
342
  role: "link",
@@ -324,7 +349,7 @@ class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
324
349
  tabIndex: clickableTabIndex,
325
350
  ...childrenProps
326
351
  }) => {
327
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_link_core_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({}, sharedProps, state, childrenProps, {
352
+ 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, {
328
353
  skipClientNav: skipClientNav,
329
354
  href: href,
330
355
  target: target // If tabIndex is provide to the component we allow
@@ -335,7 +360,7 @@ class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
335
360
  }), children);
336
361
  });
337
362
  } else {
338
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
363
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
339
364
  disabled: false,
340
365
  href: href,
341
366
  role: "link",
@@ -348,7 +373,7 @@ class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
348
373
  tabIndex: clickableTabIndex,
349
374
  ...childrenProps
350
375
  }) => {
351
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_link_core_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({}, sharedProps, state, childrenProps, {
376
+ 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, {
352
377
  skipClientNav: skipClientNav,
353
378
  href: href,
354
379
  target: target // If tabIndex is provide to the component we allow
@@ -362,7 +387,7 @@ class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
362
387
  }
363
388
 
364
389
  render() {
365
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_1__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
390
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_2__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
366
391
  }
367
392
 
368
393
  }
@@ -373,18 +398,18 @@ Link.defaultProps = {
373
398
  };
374
399
 
375
400
  /***/ }),
376
- /* 8 */
401
+ /* 9 */
377
402
  /***/ (function(module, exports) {
378
403
 
379
404
  module.exports = require("react-router-dom");
380
405
 
381
406
  /***/ }),
382
- /* 9 */
407
+ /* 10 */
383
408
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
384
409
 
385
410
  "use strict";
386
411
  __webpack_require__.r(__webpack_exports__);
387
- /* harmony import */ var _components_link_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
412
+ /* harmony import */ var _components_link_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
388
413
  /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_link_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
389
414
 
390
415
 
package/docs.md CHANGED
@@ -0,0 +1,5 @@
1
+ Documentation for `@khanacademy/wonder-blocks-link` is now in Storybook.
2
+
3
+ Visit the [Storybook
4
+ Link](https://khan.github.io/wonder-blocks/?path=/docs/link) docs on GitHub
5
+ Pages.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-link",
3
- "version": "3.8.9",
3
+ "version": "3.8.11",
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.3.0",
19
+ "@khanacademy/wonder-blocks-clickable": "^2.3.2",
20
20
  "@khanacademy/wonder-blocks-color": "^1.2.0",
21
- "@khanacademy/wonder-blocks-core": "^4.3.2"
21
+ "@khanacademy/wonder-blocks-core": "^4.4.0"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "aphrodite": "^1.2.5",
package/src/__tests__/__snapshots__/custom-snapshot.test.js.snap CHANGED
@@ -18,7 +18,7 @@ exports[`Link <Link tabIndex={-1}> 1`] = `
18
18
  onTouchEnd={[Function]}
19
19
  onTouchStart={[Function]}
20
20
  style={
21
- Object {
21
+ {
22
22
  "color": "#1865f2",
23
23
  "cursor": "pointer",
24
24
  "outline": "none",
@@ -49,7 +49,7 @@ exports[`Link <Link tabIndex={0}> 1`] = `
49
49
  onTouchEnd={[Function]}
50
50
  onTouchStart={[Function]}
51
51
  style={
52
- Object {
52
+ {
53
53
  "color": "#1865f2",
54
54
  "cursor": "pointer",
55
55
  "outline": "none",
@@ -80,7 +80,7 @@ exports[`Link <Link tabIndex={1}> 1`] = `
80
80
  onTouchEnd={[Function]}
81
81
  onTouchStart={[Function]}
82
82
  style={
83
- Object {
83
+ {
84
84
  "color": "#1865f2",
85
85
  "cursor": "pointer",
86
86
  "outline": "none",
@@ -111,7 +111,7 @@ exports[`LinkCore kind:primary href:# light:false visitable:false focused 1`] =
111
111
  onTouchEnd={[Function]}
112
112
  onTouchStart={[Function]}
113
113
  style={
114
- Object {
114
+ {
115
115
  "color": "#1865f2",
116
116
  "cursor": "pointer",
117
117
  "outline": "none",
@@ -142,7 +142,7 @@ exports[`LinkCore kind:primary href:# light:false visitable:false hovered 1`] =
142
142
  onTouchEnd={[Function]}
143
143
  onTouchStart={[Function]}
144
144
  style={
145
- Object {
145
+ {
146
146
  "color": "#1865f2",
147
147
  "cursor": "pointer",
148
148
  "outline": "none",
@@ -173,7 +173,7 @@ exports[`LinkCore kind:primary href:# light:false visitable:false pressed 1`] =
173
173
  onTouchEnd={[Function]}
174
174
  onTouchStart={[Function]}
175
175
  style={
176
- Object {
176
+ {
177
177
  "color": "#1b50b3",
178
178
  "cursor": "pointer",
179
179
  "outline": "none",
@@ -204,8 +204,8 @@ exports[`LinkCore kind:primary href:# light:false visitable:true focused 1`] = `
204
204
  onTouchEnd={[Function]}
205
205
  onTouchStart={[Function]}
206
206
  style={
207
- Object {
208
- ":visited": Object {
207
+ {
208
+ ":visited": {
209
209
  "color": "#8755ee",
210
210
  },
211
211
  "color": "#1865f2",
@@ -238,8 +238,8 @@ exports[`LinkCore kind:primary href:# light:false visitable:true hovered 1`] = `
238
238
  onTouchEnd={[Function]}
239
239
  onTouchStart={[Function]}
240
240
  style={
241
- Object {
242
- ":visited": Object {
241
+ {
242
+ ":visited": {
243
243
  "color": "#8755ee",
244
244
  },
245
245
  "color": "#1865f2",
@@ -272,8 +272,8 @@ exports[`LinkCore kind:primary href:# light:false visitable:true pressed 1`] = `
272
272
  onTouchEnd={[Function]}
273
273
  onTouchStart={[Function]}
274
274
  style={
275
- Object {
276
- ":visited": Object {
275
+ {
276
+ ":visited": {
277
277
  "color": "#6645b0",
278
278
  },
279
279
  "color": "#1b50b3",
@@ -306,7 +306,7 @@ exports[`LinkCore kind:primary href:# light:true visitable:false focused 1`] = `
306
306
  onTouchEnd={[Function]}
307
307
  onTouchStart={[Function]}
308
308
  style={
309
- Object {
309
+ {
310
310
  "color": "#ffffff",
311
311
  "cursor": "pointer",
312
312
  "outline": "none",
@@ -337,7 +337,7 @@ exports[`LinkCore kind:primary href:# light:true visitable:false hovered 1`] = `
337
337
  onTouchEnd={[Function]}
338
338
  onTouchStart={[Function]}
339
339
  style={
340
- Object {
340
+ {
341
341
  "color": "#ffffff",
342
342
  "cursor": "pointer",
343
343
  "outline": "none",
@@ -368,7 +368,7 @@ exports[`LinkCore kind:primary href:# light:true visitable:false pressed 1`] = `
368
368
  onTouchEnd={[Function]}
369
369
  onTouchStart={[Function]}
370
370
  style={
371
- Object {
371
+ {
372
372
  "color": "#b5cefb",
373
373
  "cursor": "pointer",
374
374
  "outline": "none",
@@ -399,7 +399,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
399
399
  onTouchEnd={[Function]}
400
400
  onTouchStart={[Function]}
401
401
  style={
402
- Object {
402
+ {
403
403
  "color": "#1865f2",
404
404
  "cursor": "pointer",
405
405
  "outline": "none",
@@ -430,7 +430,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
430
430
  onTouchEnd={[Function]}
431
431
  onTouchStart={[Function]}
432
432
  style={
433
- Object {
433
+ {
434
434
  "color": "#1865f2",
435
435
  "cursor": "pointer",
436
436
  "outline": "none",
@@ -461,7 +461,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
461
461
  onTouchEnd={[Function]}
462
462
  onTouchStart={[Function]}
463
463
  style={
464
- Object {
464
+ {
465
465
  "color": "#1b50b3",
466
466
  "cursor": "pointer",
467
467
  "outline": "none",
@@ -492,8 +492,8 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
492
492
  onTouchEnd={[Function]}
493
493
  onTouchStart={[Function]}
494
494
  style={
495
- Object {
496
- ":visited": Object {
495
+ {
496
+ ":visited": {
497
497
  "color": "#8755ee",
498
498
  },
499
499
  "color": "#1865f2",
@@ -526,8 +526,8 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
526
526
  onTouchEnd={[Function]}
527
527
  onTouchStart={[Function]}
528
528
  style={
529
- Object {
530
- ":visited": Object {
529
+ {
530
+ ":visited": {
531
531
  "color": "#8755ee",
532
532
  },
533
533
  "color": "#1865f2",
@@ -560,8 +560,8 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
560
560
  onTouchEnd={[Function]}
561
561
  onTouchStart={[Function]}
562
562
  style={
563
- Object {
564
- ":visited": Object {
563
+ {
564
+ ":visited": {
565
565
  "color": "#6645b0",
566
566
  },
567
567
  "color": "#1b50b3",
@@ -594,7 +594,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
594
594
  onTouchEnd={[Function]}
595
595
  onTouchStart={[Function]}
596
596
  style={
597
- Object {
597
+ {
598
598
  "color": "#ffffff",
599
599
  "cursor": "pointer",
600
600
  "outline": "none",
@@ -625,7 +625,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
625
625
  onTouchEnd={[Function]}
626
626
  onTouchStart={[Function]}
627
627
  style={
628
- Object {
628
+ {
629
629
  "color": "#ffffff",
630
630
  "cursor": "pointer",
631
631
  "outline": "none",
@@ -656,7 +656,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
656
656
  onTouchEnd={[Function]}
657
657
  onTouchStart={[Function]}
658
658
  style={
659
- Object {
659
+ {
660
660
  "color": "#b5cefb",
661
661
  "cursor": "pointer",
662
662
  "outline": "none",
@@ -687,7 +687,7 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false focused 1`]
687
687
  onTouchEnd={[Function]}
688
688
  onTouchStart={[Function]}
689
689
  style={
690
- Object {
690
+ {
691
691
  "color": "#1865f2",
692
692
  "cursor": "pointer",
693
693
  "outline": "none",
@@ -718,7 +718,7 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false hovered 1`]
718
718
  onTouchEnd={[Function]}
719
719
  onTouchStart={[Function]}
720
720
  style={
721
- Object {
721
+ {
722
722
  "color": "#1865f2",
723
723
  "cursor": "pointer",
724
724
  "outline": "none",
@@ -749,7 +749,7 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false pressed 1`]
749
749
  onTouchEnd={[Function]}
750
750
  onTouchStart={[Function]}
751
751
  style={
752
- Object {
752
+ {
753
753
  "color": "#1b50b3",
754
754
  "cursor": "pointer",
755
755
  "outline": "none",
@@ -780,7 +780,7 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
780
780
  onTouchEnd={[Function]}
781
781
  onTouchStart={[Function]}
782
782
  style={
783
- Object {
783
+ {
784
784
  "color": "#1865f2",
785
785
  "cursor": "pointer",
786
786
  "outline": "none",
@@ -811,7 +811,7 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
811
811
  onTouchEnd={[Function]}
812
812
  onTouchStart={[Function]}
813
813
  style={
814
- Object {
814
+ {
815
815
  "color": "#1865f2",
816
816
  "cursor": "pointer",
817
817
  "outline": "none",
@@ -842,7 +842,7 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
842
842
  onTouchEnd={[Function]}
843
843
  onTouchStart={[Function]}
844
844
  style={
845
- Object {
845
+ {
846
846
  "color": "#1b50b3",
847
847
  "cursor": "pointer",
848
848
  "outline": "none",
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap DELETED
@@ -1,242 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`wonder-blocks-link example 1 1`] = `
4
- <div
5
- className=""
6
- style={
7
- Object {
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
- <p>
24
- I am a
25
- <a
26
- className=""
27
- href="#nonexistent-link"
28
- onBlur={[Function]}
29
- onClick={[Function]}
30
- onDragStart={[Function]}
31
- onFocus={[Function]}
32
- onKeyDown={[Function]}
33
- onKeyUp={[Function]}
34
- onMouseDown={[Function]}
35
- onMouseEnter={[Function]}
36
- onMouseLeave={[Function]}
37
- onMouseUp={[Function]}
38
- onTouchCancel={[Function]}
39
- onTouchEnd={[Function]}
40
- onTouchStart={[Function]}
41
- style={
42
- Object {
43
- "color": "#1865f2",
44
- "cursor": "pointer",
45
- "outline": "none",
46
- "textDecoration": "none",
47
- }
48
- }
49
- tabIndex={0}
50
- >
51
- Primary Link
52
- </a>
53
- .
54
-
55
- <span
56
- style={
57
- Object {
58
- "color": "rgba(33,36,44,0.64)",
59
- }
60
- }
61
- >
62
- My friend the
63
- <a
64
- className=""
65
- href="#secondary-nonexistent-link"
66
- onBlur={[Function]}
67
- onClick={[Function]}
68
- onDragStart={[Function]}
69
- onFocus={[Function]}
70
- onKeyDown={[Function]}
71
- onKeyUp={[Function]}
72
- onMouseDown={[Function]}
73
- onMouseEnter={[Function]}
74
- onMouseLeave={[Function]}
75
- onMouseUp={[Function]}
76
- onTouchCancel={[Function]}
77
- onTouchEnd={[Function]}
78
- onTouchStart={[Function]}
79
- style={
80
- Object {
81
- "color": "#21242c",
82
- "cursor": "pointer",
83
- "outline": "none",
84
- "textDecoration": "none",
85
- }
86
- }
87
- tabIndex={0}
88
- >
89
- Secondary Link
90
- </a>
91
-
92
- is used here with a lighter text.
93
- </span>
94
-
95
- We also have a
96
- <a
97
- className=""
98
- href="#"
99
- onBlur={[Function]}
100
- onClick={[Function]}
101
- onDragStart={[Function]}
102
- onFocus={[Function]}
103
- onKeyDown={[Function]}
104
- onKeyUp={[Function]}
105
- onMouseDown={[Function]}
106
- onMouseEnter={[Function]}
107
- onMouseLeave={[Function]}
108
- onMouseUp={[Function]}
109
- onTouchCancel={[Function]}
110
- onTouchEnd={[Function]}
111
- onTouchStart={[Function]}
112
- style={
113
- Object {
114
- ":visited": Object {
115
- "color": "#8755ee",
116
- },
117
- "color": "#1865f2",
118
- "cursor": "pointer",
119
- "outline": "none",
120
- "textDecoration": "none",
121
- }
122
- }
123
- tabIndex={0}
124
- >
125
- Visitable Primary Link
126
- </a>
127
-
128
- friend.
129
- </p>
130
- <p
131
- style={
132
- Object {
133
- "backgroundColor": "#0b2149",
134
- "color": "rgba(255,255,255,0.64)",
135
- "padding": 10,
136
- }
137
- }
138
- >
139
- I am a
140
-
141
- <a
142
- className=""
143
- href="#dark-link"
144
- onBlur={[Function]}
145
- onClick={[Function]}
146
- onDragStart={[Function]}
147
- onFocus={[Function]}
148
- onKeyDown={[Function]}
149
- onKeyUp={[Function]}
150
- onMouseDown={[Function]}
151
- onMouseEnter={[Function]}
152
- onMouseLeave={[Function]}
153
- onMouseUp={[Function]}
154
- onTouchCancel={[Function]}
155
- onTouchEnd={[Function]}
156
- onTouchStart={[Function]}
157
- style={
158
- Object {
159
- "color": "#ffffff",
160
- "cursor": "pointer",
161
- "outline": "none",
162
- "textDecoration": "none",
163
- }
164
- }
165
- tabIndex={0}
166
- >
167
- Primary Link
168
- </a>
169
-
170
- used on a dark background. My friend the Secondary Link isn't supported on this dark background.
171
- </p>
172
- </div>
173
- `;
174
-
175
- exports[`wonder-blocks-link example 2 1`] = `
176
- <div
177
- className=""
178
- style={
179
- Object {
180
- "alignItems": "stretch",
181
- "borderStyle": "solid",
182
- "borderWidth": 0,
183
- "boxSizing": "border-box",
184
- "display": "flex",
185
- "flexDirection": "column",
186
- "margin": 0,
187
- "minHeight": 0,
188
- "minWidth": 0,
189
- "padding": 0,
190
- "position": "relative",
191
- "zIndex": 0,
192
- }
193
- }
194
- >
195
- <a
196
- className=""
197
- href="#nonexistent-link"
198
- id="typography-link"
199
- onBlur={[Function]}
200
- onClick={[Function]}
201
- onDragStart={[Function]}
202
- onFocus={[Function]}
203
- onKeyDown={[Function]}
204
- onKeyUp={[Function]}
205
- onMouseDown={[Function]}
206
- onMouseEnter={[Function]}
207
- onMouseLeave={[Function]}
208
- onMouseUp={[Function]}
209
- onTouchCancel={[Function]}
210
- onTouchEnd={[Function]}
211
- onTouchStart={[Function]}
212
- style={
213
- Object {
214
- "color": "#1865f2",
215
- "cursor": "pointer",
216
- "outline": "none",
217
- "textDecoration": "none",
218
- }
219
- }
220
- tabIndex={0}
221
- >
222
- <h4
223
- className=""
224
- style={
225
- Object {
226
- "MozOsxFontSmoothing": "grayscale",
227
- "WebkitFontSmoothing": "antialiased",
228
- "display": "block",
229
- "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
230
- "fontSize": 20,
231
- "fontWeight": 700,
232
- "lineHeight": "24px",
233
- "marginBottom": 0,
234
- "marginTop": 0,
235
- }
236
- }
237
- >
238
- Heading inside a Link element
239
- </h4>
240
- </a>
241
- </div>
242
- `;
package/src/__tests__/generated-snapshot.test.js DELETED
@@ -1,73 +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-link
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 Color from "@khanacademy/wonder-blocks-color";
12
- import {View} from "@khanacademy/wonder-blocks-core";
13
- import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
14
- import Link from "@khanacademy/wonder-blocks-link";
15
-
16
- describe("wonder-blocks-link", () => {
17
- it("example 1", () => {
18
- const example = (
19
- <View>
20
- <p>
21
- I am a <Link href="#nonexistent-link">Primary Link</Link>.{" "}
22
- <span
23
- style={{
24
- color: Color.offBlack64,
25
- }}
26
- >
27
- My friend the
28
- <Link
29
- href="#secondary-nonexistent-link"
30
- kind="secondary"
31
- >
32
- Secondary Link
33
- </Link>{" "}
34
- is used here with a lighter text.
35
- </span>{" "}
36
- We also have a
37
- <Link href="#" visitable={true}>
38
- Visitable Primary Link
39
- </Link>{" "}
40
- friend.
41
- </p>
42
- <p
43
- style={{
44
- backgroundColor: Color.darkBlue,
45
- color: Color.white64,
46
- padding: 10,
47
- }}
48
- >
49
- I am a{" "}
50
- <Link href="#dark-link" light={true}>
51
- Primary Link
52
- </Link>{" "}
53
- used on a dark background. My friend the Secondary Link
54
- isn't supported on this dark background.
55
- </p>
56
- </View>
57
- );
58
- const tree = renderer.create(example).toJSON();
59
- expect(tree).toMatchSnapshot();
60
- });
61
-
62
- it("example 2", () => {
63
- const example = (
64
- <View>
65
- <Link href="#nonexistent-link" id="typography-link">
66
- <HeadingSmall>Heading inside a Link element</HeadingSmall>
67
- </Link>
68
- </View>
69
- );
70
- const tree = renderer.create(example).toJSON();
71
- expect(tree).toMatchSnapshot();
72
- });
73
- });
package/src/components/link.md DELETED
@@ -1,43 +0,0 @@
1
- ### Example: Link
2
-
3
- ```js
4
- import Color from "@khanacademy/wonder-blocks-color";
5
- import {View} from "@khanacademy/wonder-blocks-core";
6
-
7
- <View>
8
- <p>
9
- I am a <Link href="#nonexistent-link">Primary Link</Link>. <span
10
- style={{color: Color.offBlack64}}>My friend the
11
- <Link href="#secondary-nonexistent-link" kind="secondary">Secondary Link
12
- </Link> is used here with a lighter text.</span> We also have a
13
- <Link href="#" visitable={true}>Visitable Primary Link</Link> friend.
14
- </p>
15
- <p style={{backgroundColor: Color.darkBlue, color: Color.white64, padding: 10}}>
16
- I am a <Link href="#dark-link" light={true}>Primary Link</Link> used on
17
- a dark background. My friend the Secondary Link isn't supported on this
18
- dark background.
19
- </p>
20
- </View>
21
- ```
22
-
23
- ### Example: Link with Typography element
24
-
25
- You can also use a Typography element instead of plain text.
26
-
27
- ```js
28
- import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
29
- import {View} from "@khanacademy/wonder-blocks-core";
30
- import Link from "@khanacademy/wonder-blocks-link";
31
-
32
- <View>
33
- <Link href="#nonexistent-link" id="typography-link">
34
- <HeadingSmall>Heading inside a Link element</HeadingSmall>
35
- </Link>
36
- </View>
37
- ```
38
-
39
- ### Running callbacks on navigation
40
-
41
- The `onClick`, `beforeNav`, and `safeWithNav` props can be used to run callbacks
42
- when navigating to the new URL. Which prop to use depends on the use case. See
43
- the [Button](#section-button) documentation for details.