@khanacademy/wonder-blocks-link 3.8.8 → 3.8.10

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-link
 
+## 3.8.10
+
+### Patch Changes
+
+-   Updated dependencies [6ee20af9]
+    -   @khanacademy/wonder-blocks-core@4.4.0
+    -   @khanacademy/wonder-blocks-clickable@2.3.1
+
+## 3.8.9
+
+### Patch Changes
+
+-   Updated dependencies [34c7aacb]
+    -   @khanacademy/wonder-blocks-color@1.2.0
+
 ## 3.8.8
 
 ### Patch Changes

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 9);
+/******/ 	return __webpack_require__(__webpack_require__.s = 10);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -101,35 +101,59 @@ module.exports = require("@khanacademy/wonder-blocks-color");
 /* 2 */
 /***/ (function(module, exports) {
 
-module.exports = require("react-router");
+function _extends() {
+  module.exports = _extends = Object.assign ? Object.assign.bind() : 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;
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
 /* 3 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-clickable");
+module.exports = require("react-router");
 
 /***/ }),
 /* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-clickable");
+
+/***/ }),
+/* 5 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LinkCore; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__);
-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); }
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__);
 
 
 
@@ -138,9 +162,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 
 
-const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("a");
-const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"]);
-class LinkCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])("a");
+const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_3__["Link"]);
+class LinkCore extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
   renderInner(router) {
     const {
       children,
@@ -166,20 +190,20 @@ class LinkCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style: [defaultStyles, style],
       ...restProps
     };
-    return router && !skipClientNav && Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__["isClientSideUrl"])(href) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLink, _extends({}, commonProps, {
+    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, {
       to: href
-    }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledAnchor, _extends({}, commonProps, {
+    }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledAnchor, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
       href: href
     }), children);
   }
 
   render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderInner(router));
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_4__["__RouterContext"].Consumer, null, router => this.renderInner(router));
   }
 
 }
 const styles = {};
-const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
   shared: {
     cursor: "pointer",
     textDecoration: "none",
@@ -208,11 +232,11 @@ const _generateStyles = (kind, light, visitable) => {
     white,
     offBlack,
     offBlack32
-  } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a;
-  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);
+  } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a;
+  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);
   const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
   const focusColor = light ? white : blue;
-  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);
+  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);
   const defaultVisited = visitable ? {
     ":visited": {
       color: linkPurple
@@ -220,7 +244,7 @@ const _generateStyles = (kind, light, visitable) => {
   } : Object.freeze({});
   const activeVisited = visitable ? {
     ":visited": {
-      color: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(offBlack32, linkPurple)
+      color: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["mix"])(offBlack32, linkPurple)
     }
   } : Object.freeze({});
   const newStyles = {
@@ -239,36 +263,37 @@ const _generateStyles = (kind, light, visitable) => {
       ...activeVisited
     }
   };
-  styles[buttonType] = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create(newStyles);
+  styles[buttonType] = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create(newStyles);
   return styles[buttonType];
 };
 
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, exports) {
 
 module.exports = require("aphrodite");
 
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-core");
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Link; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _link_core_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-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); }
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _link_core_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
 
 
 
@@ -283,7 +308,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * `LinkCore` is a stateless component which displays the different states
  * the `Link` can take.
  *
- * Example usage:
+ * ### Usage
+ *
  * ```jsx
  * <Link
  *     href="https://khanacademy.org/"
@@ -292,7 +318,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * </Link>
  * ```
  */
-class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+class Link extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
   renderClickableBehavior(router) {
     const {
       onClick,
@@ -307,10 +333,10 @@ class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       target = undefined,
       ...sharedProps
     } = this.props;
-    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__["getClickableBehavior"])(href, skipClientNav, router);
+    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__["getClickableBehavior"])(href, skipClientNav, router);
 
     if (beforeNav) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
         disabled: false,
         href: href,
         role: "link",
@@ -323,7 +349,7 @@ class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         tabIndex: clickableTabIndex,
         ...childrenProps
       }) => {
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_link_core_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({}, sharedProps, state, childrenProps, {
+        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, {
           skipClientNav: skipClientNav,
           href: href,
           target: target // If tabIndex is provide to the component we allow
@@ -334,7 +360,7 @@ class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         }), children);
       });
     } else {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
         disabled: false,
         href: href,
         role: "link",
@@ -347,7 +373,7 @@ class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         tabIndex: clickableTabIndex,
         ...childrenProps
       }) => {
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_link_core_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({}, sharedProps, state, childrenProps, {
+        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, {
           skipClientNav: skipClientNav,
           href: href,
           target: target // If tabIndex is provide to the component we allow
@@ -361,7 +387,7 @@ class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   }
 
   render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_1__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_2__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
   }
 
 }
@@ -372,18 +398,18 @@ Link.defaultProps = {
 };
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-router-dom");
 
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_link_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
+/* harmony import */ var _components_link_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_link_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "3.8.8",
+  "version": "3.8.10",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,9 +16,9 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.3.0",
-    "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.2"
+    "@khanacademy/wonder-blocks-clickable": "^2.3.1",
+    "@khanacademy/wonder-blocks-color": "^1.2.0",
+    "@khanacademy/wonder-blocks-core": "^4.4.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/__tests__/__snapshots__/custom-snapshot.test.js.snap

@@ -18,7 +18,7 @@ exports[`Link <Link tabIndex={-1}> 1`] = `
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -49,7 +49,7 @@ exports[`Link <Link tabIndex={0}> 1`] = `
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -80,7 +80,7 @@ exports[`Link <Link tabIndex={1}> 1`] = `
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -111,7 +111,7 @@ exports[`LinkCore kind:primary href:# light:false visitable:false focused 1`] =
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -142,7 +142,7 @@ exports[`LinkCore kind:primary href:# light:false visitable:false hovered 1`] =
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -173,7 +173,7 @@ exports[`LinkCore kind:primary href:# light:false visitable:false pressed 1`] =
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1b50b3",
       "cursor": "pointer",
       "outline": "none",
@@ -204,8 +204,8 @@ exports[`LinkCore kind:primary href:# light:false visitable:true focused 1`] = `
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
-      ":visited": Object {
+    {
+      ":visited": {
         "color": "#8755ee",
       },
       "color": "#1865f2",
@@ -238,8 +238,8 @@ exports[`LinkCore kind:primary href:# light:false visitable:true hovered 1`] = `
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
-      ":visited": Object {
+    {
+      ":visited": {
         "color": "#8755ee",
       },
       "color": "#1865f2",
@@ -272,8 +272,8 @@ exports[`LinkCore kind:primary href:# light:false visitable:true pressed 1`] = `
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
-      ":visited": Object {
+    {
+      ":visited": {
         "color": "#6645b0",
       },
       "color": "#1b50b3",
@@ -306,7 +306,7 @@ exports[`LinkCore kind:primary href:# light:true visitable:false focused 1`] = `
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#ffffff",
       "cursor": "pointer",
       "outline": "none",
@@ -337,7 +337,7 @@ exports[`LinkCore kind:primary href:# light:true visitable:false hovered 1`] = `
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#ffffff",
       "cursor": "pointer",
       "outline": "none",
@@ -368,7 +368,7 @@ exports[`LinkCore kind:primary href:# light:true visitable:false pressed 1`] = `
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#b5cefb",
       "cursor": "pointer",
       "outline": "none",
@@ -399,7 +399,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -430,7 +430,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -461,7 +461,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:fal
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1b50b3",
       "cursor": "pointer",
       "outline": "none",
@@ -492,8 +492,8 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
-      ":visited": Object {
+    {
+      ":visited": {
         "color": "#8755ee",
       },
       "color": "#1865f2",
@@ -526,8 +526,8 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
-      ":visited": Object {
+    {
+      ":visited": {
         "color": "#8755ee",
       },
       "color": "#1865f2",
@@ -560,8 +560,8 @@ exports[`LinkCore kind:primary href:#non-existent-link light:false visitable:tru
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
-      ":visited": Object {
+    {
+      ":visited": {
         "color": "#6645b0",
       },
       "color": "#1b50b3",
@@ -594,7 +594,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#ffffff",
       "cursor": "pointer",
       "outline": "none",
@@ -625,7 +625,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#ffffff",
       "cursor": "pointer",
       "outline": "none",
@@ -656,7 +656,7 @@ exports[`LinkCore kind:primary href:#non-existent-link light:true visitable:fals
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#b5cefb",
       "cursor": "pointer",
       "outline": "none",
@@ -687,7 +687,7 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false focused 1`]
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -718,7 +718,7 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false hovered 1`]
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -749,7 +749,7 @@ exports[`LinkCore kind:secondary href:# light:false visitable:false pressed 1`]
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1b50b3",
       "cursor": "pointer",
       "outline": "none",
@@ -780,7 +780,7 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -811,7 +811,7 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1865f2",
       "cursor": "pointer",
       "outline": "none",
@@ -842,7 +842,7 @@ exports[`LinkCore kind:secondary href:#non-existent-link light:false visitable:f
   onTouchEnd={[Function]}
   onTouchStart={[Function]}
   style={
-    Object {
+    {
       "color": "#1b50b3",
       "cursor": "pointer",
       "outline": "none",

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -4,7 +4,7 @@ exports[`wonder-blocks-link example 1 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -39,7 +39,7 @@ exports[`wonder-blocks-link example 1 1`] = `
       onTouchEnd={[Function]}
       onTouchStart={[Function]}
       style={
-        Object {
+        {
           "color": "#1865f2",
           "cursor": "pointer",
           "outline": "none",
@@ -54,7 +54,7 @@ exports[`wonder-blocks-link example 1 1`] = `
      
     <span
       style={
-        Object {
+        {
           "color": "rgba(33,36,44,0.64)",
         }
       }
@@ -77,7 +77,7 @@ exports[`wonder-blocks-link example 1 1`] = `
         onTouchEnd={[Function]}
         onTouchStart={[Function]}
         style={
-          Object {
+          {
             "color": "#21242c",
             "cursor": "pointer",
             "outline": "none",
@@ -110,8 +110,8 @@ exports[`wonder-blocks-link example 1 1`] = `
       onTouchEnd={[Function]}
       onTouchStart={[Function]}
       style={
-        Object {
-          ":visited": Object {
+        {
+          ":visited": {
             "color": "#8755ee",
           },
           "color": "#1865f2",
@@ -129,8 +129,8 @@ exports[`wonder-blocks-link example 1 1`] = `
   </p>
   <p
     style={
-      Object {
-        "backgroundColor": "#0a2a66",
+      {
+        "backgroundColor": "#0b2149",
         "color": "rgba(255,255,255,0.64)",
         "padding": 10,
       }
@@ -155,7 +155,7 @@ exports[`wonder-blocks-link example 1 1`] = `
       onTouchEnd={[Function]}
       onTouchStart={[Function]}
       style={
-        Object {
+        {
           "color": "#ffffff",
           "cursor": "pointer",
           "outline": "none",
@@ -176,7 +176,7 @@ exports[`wonder-blocks-link example 2 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -210,7 +210,7 @@ exports[`wonder-blocks-link example 2 1`] = `
     onTouchEnd={[Function]}
     onTouchStart={[Function]}
     style={
-      Object {
+      {
         "color": "#1865f2",
         "cursor": "pointer",
         "outline": "none",
@@ -222,11 +222,11 @@ exports[`wonder-blocks-link example 2 1`] = `
     <h4
       className=""
       style={
-        Object {
+        {
           "MozOsxFontSmoothing": "grayscale",
           "WebkitFontSmoothing": "antialiased",
           "display": "block",
-          "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+          "fontFamily": "Lato, "Noto Sans", sans-serif",
           "fontSize": 20,
           "fontWeight": 700,
           "lineHeight": "24px",

package/src/components/__docs__/link.argtypes.js

@@ -0,0 +1,143 @@
+// @flow
+
+export default {
+    children: {
+        control: {type: "text"},
+        description:
+            "Text to appear on the link. It can be a plain text or Typography element.",
+        table: {type: {summary: "string | React.Element<Typography>"}},
+        type: {required: true},
+    },
+    href: {
+        control: {type: "text"},
+        description: "URL to navigate to.",
+        table: {type: {summary: "string"}},
+        type: {required: true},
+    },
+    id: {
+        control: {type: "text"},
+        description: "An optional id attribute.",
+        table: {type: {summary: "string"}},
+        type: {required: false},
+    },
+    kind: {
+        control: {type: "select"},
+        description:
+            "Kind of Link. Note: Secondary light Links are not supported.",
+        options: ["primary", "secondary"],
+        table: {
+            type: {summary: `"primary" | "secondary"`},
+        },
+        type: {required: false},
+    },
+    light: {
+        control: {type: "boolean"},
+        description: "Whether the button is on a dark/colored background.",
+        table: {
+            type: {summary: "boolean"},
+        },
+    },
+    visitable: {
+        control: {type: "boolean"},
+        description:
+            "Whether the link should change color once it's visited. Secondary or primary (light) links are not allowed to be visitable.",
+        table: {
+            type: {summary: "boolean"},
+        },
+    },
+    rel: {
+        control: {type: "text"},
+        description: `Specifies the type of relationship between the current
+            document and the linked document. Should only be used when
+            \`href\` is specified. This defaults to "noopener noreferrer"
+            when \`target="_blank"\`, but can be overridden by setting this
+            prop to something else.`,
+        table: {
+            type: {summary: "string"},
+        },
+    },
+    tabIndex: {
+        control: {type: "number"},
+        description: "Set the tabindex attribute on the rendered element.",
+        table: {
+            defaultValue: {summary: 0},
+            type: {summary: "number"},
+        },
+    },
+    testId: {
+        control: {type: "text"},
+        description: "Test ID used for e2e testing.",
+        table: {
+            type: {summary: "string"},
+        },
+    },
+
+    style: {
+        control: {type: "object"},
+        description: "custom styles.",
+        table: {type: {summary: "StyleType"}},
+    },
+    className: {
+        control: {type: "text"},
+        description: "Adds CSS classes to the Link.",
+        table: {type: {summary: "string"}},
+    },
+    beforeNav: {
+        description: `Run async code before navigating to the URL passed to
+            \`href\`. If the promise returned rejects then navigation will not
+            occur. If both safeWithNav and beforeNav are provided, beforeNav
+            will be run first and safeWithNav will only be run if beforeNav
+            does not reject.`,
+        table: {
+            category: "Navigation",
+            type: {summary: "() => Promise<mixed>"},
+        },
+    },
+    safeWithNav: {
+        description: `Run async code in the background while client-side
+        navigating. If the browser does a full page load navigation, the
+        callback promise must be settled before the navigation will occur.
+        Errors are ignored so that navigation is guaranteed to succeed.`,
+        table: {
+            category: "Navigation",
+            type: {summary: "() => Promise<mixed>"},
+        },
+    },
+    skipClientNav: {
+        control: {type: "boolean"},
+        description: `Whether to avoid using client-side navigation.
+            If the URL passed to href is local to the client-side, e.g.
+            /math/algebra/eval-exprs, then it tries to use react-router-dom's
+            Link component which handles the client-side navigation. You can set
+            \`skipClientNav\` to true avoid using client-side nav entirely.`,
+        table: {
+            category: "Navigation",
+            type: {summary: "boolean"},
+        },
+    },
+    onClick: {
+        description: `Function to call when button is clicked.
+        This should NOT be used to redirect to a different URL or to
+        prevent navigation via e.preventDefault(). The event passed to this
+        handler will have its preventDefault() and stopPropagation() methods
+        stubbed out.`,
+        table: {
+            category: "Events",
+            type: {summary: "(e: SyntheticEvent<>) => mixed"},
+        },
+    },
+    onKeyDown: {
+        description: `Respond to raw "keydown" event.`,
+        table: {
+            category: "Events",
+            type: {summary: "(e: SyntheticKeyboardEvent<>) => mixed"},
+        },
+    },
+    onKeyUp: {
+        description: `Respond to raw "keyup" event.`,
+        table: {
+            category: "Events",
+            type: {summary: "(e: SyntheticKeyboardEvent<>) => mixed"},
+        },
+    },
+};

package/src/components/__docs__/link.stories.js

@@ -0,0 +1,197 @@
+// @flow
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import {MemoryRouter, Route, Switch} from "react-router-dom";
+
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Link from "@khanacademy/wonder-blocks-link";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {
+    Body,
+    HeadingSmall,
+    LabelLarge,
+} from "@khanacademy/wonder-blocks-typography";
+import type {StoryComponentType} from "@storybook/react";
+
+import LinkArgTypes from "./link.argtypes.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import {name, version} from "../../../package.json";
+
+export default {
+    title: "Link",
+    component: Link,
+    parameters: {
+        componentSubtitle: ((
+            <ComponentInfo name={name} version={version} />
+        ): any),
+    },
+    argTypes: LinkArgTypes,
+};
+
+export const Default: StoryComponentType = (args) => (
+    <Link target="_blank" {...args} />
+);
+
+Default.args = {
+    href: "/",
+    children: "Hello, world!",
+};
+
+export const Basic: StoryComponentType = () => (
+    <Link href="#">Hello, world!</Link>
+);
+
+Basic.parameters = {
+    docs: {
+        storyDescription: `Minimal link usage.
+            This links to the top of the page.`,
+    },
+};
+
+export const Variants: StoryComponentType = () => (
+    <Body>
+        I am a <Link href="#nonexistent-link">Primary Link</Link>.{" "}
+        <span style={{color: Color.offBlack64}}>
+            My friend the{" "}
+            <Link href="#secondary-nonexistent-link" kind="secondary">
+                Secondary Link
+            </Link>{" "}
+            is used here with a lighter text.
+        </span>{" "}
+        We also have a{" "}
+        <Link href="#" visitable={true}>
+            Visitable Primary Link
+        </Link>{" "}
+        friend.
+    </Body>
+);
+
+Variants.parameters = {
+    docs: {
+        storyDescription: `Primary links are blue, secondary links are black,
+            and visitable links turn purple after they've been clicked on.`,
+    },
+};
+
+export const LightVariants: StoryComponentType = () => (
+    <Body style={styles.darkBackground}>
+        I am a{" "}
+        <Link href="#dark-link" light={true}>
+            Primary Link
+        </Link>{" "}
+        used on a dark background. My friend the Secondary Link is not supported
+        on this dark background.
+    </Body>
+);
+
+LightVariants.parameters = {
+    docs: {
+        storyDescription: `Links are white on a dark background when the
+            \`light\` prop is true. Secondary \`light\` links are not supported.
+            Links also cannot be \`visitable\` if they're \`light\`. If
+            a link has \`light\` set to \`true\` and you try to set \`kind\`
+            to \`"secondary"\` or \`visitable\` to \`true\`, it will throw
+            an error.`,
+    },
+};
+
+export const WithTypography: StoryComponentType = () => (
+    <Link href="#nonexistent-link" id="typography-link">
+        <HeadingSmall>Heading inside a Link element</HeadingSmall>
+    </Link>
+);
+
+WithTypography.parameters = {
+    docs: {
+        storyDescription: `Wonder Blocks Typography elements can also be used
+            inside Links instead of plain text. Here, we have a \`Link\`
+            containing a \`HeadingSmall\`.`,
+    },
+};
+
+export const WithStyle: StoryComponentType = () => (
+    <Link href="#" style={styles.pinkLink}>
+        This link has a style.
+    </Link>
+);
+
+WithStyle.parameters = {
+    docs: {
+        storyDescription: `Link can take a \`style\` prop. Here, the
+            Link has been given a style in which the \`color\` field has
+            been set to \`Colors.pink\`.`,
+    },
+};
+
+export const Navigation: StoryComponentType = () => (
+    <MemoryRouter>
+        <View>
+            <View style={styles.row}>
+                <Link
+                    href="/foo"
+                    style={styles.heading}
+                    onClick={() => {
+                        // eslint-disable-next-line no-console
+                        console.log("I'm still on the same page!");
+                    }}
+                >
+                    <LabelLarge>Uses Client-side Nav</LabelLarge>
+                </Link>
+                <Link
+                    href="/iframe.html?id=link--default&viewMode=story"
+                    style={styles.heading}
+                    skipClientNav
+                >
+                    <LabelLarge>Avoids Client-side Nav</LabelLarge>
+                </Link>
+            </View>
+            <View style={styles.navigation}>
+                <Switch>
+                    <Route path="/foo">
+                        <View id="foo">
+                            The first link does client-side navigation here.
+                        </View>
+                    </Route>
+                    <Route path="*">See navigation changes here</Route>
+                </Switch>
+            </View>
+        </View>
+    </MemoryRouter>
+);
+
+Navigation.parameters = {
+    docs: {
+        storyDescription: `If you want to navigate to an external URL
+            and/or reload the window, make sure to use \`href\` and
+            \`skipClientNav={true}\`, as shown in this example.
+            **For navigation callbacks:** The \`onClick\`, \`beforeNav\`, and
+            \`safeWithNav\` props can be used to run callbacks when navigating
+            to the new URL. Which prop to use depends on the use case. See the
+            [Button documentation](/story/button-navigation-callbacks--before-nav-callbacks&viewMode=docs)
+            for details.`,
+    },
+};
+
+const styles = StyleSheet.create({
+    darkBackground: {
+        backgroundColor: Color.darkBlue,
+        color: Color.white64,
+        padding: 10,
+    },
+    heading: {
+        marginRight: Spacing.large_24,
+    },
+    navigation: {
+        border: `1px dashed ${Color.lightBlue}`,
+        marginTop: Spacing.large_24,
+        padding: Spacing.large_24,
+    },
+    pinkLink: {
+        color: Color.pink,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+});

package/src/components/link.js

@@ -172,7 +172,8 @@ type DefaultProps = {|
  * `LinkCore` is a stateless component which displays the different states
  * the `Link` can take.
  *
- * Example usage:
+ * ### Usage
+ *
  * ```jsx
  * <Link
  *     href="https://khanacademy.org/"