@khanacademy/wonder-blocks-link - npm Package Compare versions

Comparing version 3.6.1 to 3.6.2

components/link-core.js

@@ -12,3 +12,3 @@ // @flow
     ClickableState,
-} from "@khanacademy/wonder-blocks-core";
+} from "@khanacademy/wonder-blocks-clickable";
 import type {StyleDeclaration} from "aphrodite";
@@ -15,0 +15,0 @@ import type {SharedProps} from "./link.js";

components/link.js

 // @flow
 import * as React from "react";
 import PropTypes from "prop-types";
-import {getClickableBehavior} from "@khanacademy/wonder-blocks-core";
+import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 
@@ -191,2 +191,3 @@ import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
             onKeyUp,
+            target,
             ...sharedProps
@@ -209,2 +210,3 @@ } = this.props;
                 safeWithNav={safeWithNav}
+                target={target}
                 onKeyDown={onKeyDown}
@@ -211,0 +213,0 @@ onKeyUp={onKeyUp}

dist/es/index.js

 import { createElement, Component } from 'react';
 import PropTypes from 'prop-types';
-import { addStyle, getClickableBehavior } from '@khanacademy/wonder-blocks-core';
+import { getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { StyleSheet } from 'aphrodite';
 import { Link as Link$1 } from 'react-router-dom';
+import { addStyle } from '@khanacademy/wonder-blocks-core';
 import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
@@ -370,3 +371,4 @@
           onKeyUp = _this$props.onKeyUp,
-          sharedProps = _objectWithoutProperties(_this$props, ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp"]);
+          target = _this$props.target,
+          sharedProps = _objectWithoutProperties(_this$props, ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"]);
 
@@ -381,2 +383,3 @@ var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
         safeWithNav: safeWithNav,
+        target: target,
         onKeyDown: onKeyDown,
@@ -383,0 +386,0 @@ onKeyUp: onKeyUp

dist/index.js

@@ -92,3 +92,3 @@ module.exports =
 
-module.exports = require("@khanacademy/wonder-blocks-color");
+module.exports = require("react");
 
@@ -99,3 +99,3 @@ /***/ }),
 
-module.exports = require("react");
+module.exports = require("@khanacademy/wonder-blocks-color");
 
@@ -138,3 +138,3 @@ /***/ }),
 // EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(1);
+var external_react_ = __webpack_require__(0);
 
@@ -145,5 +145,2 @@ // EXTERNAL MODULE: external "prop-types"
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(2);
-
 // EXTERNAL MODULE: external "aphrodite"
@@ -155,57 +152,999 @@ var external_aphrodite_ = __webpack_require__(4);
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
-var wonder_blocks_color_ = __webpack_require__(0);
-var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
+var wonder_blocks_core_ = __webpack_require__(2);
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-link/components/link-core.js
+// CONCATENATED MODULE: ./packages/wonder-blocks-clickable/dist/es/index.js
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-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); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+  return obj;
+}
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+    return target;
+  };
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  return _extends.apply(this, arguments);
+}
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
 
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
 
+  return keys;
+}
 
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
 
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
 
+  return target;
+}
 
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
 
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+var getAppropriateTriggersForRole = function getAppropriateTriggersForRole(role) {
+  switch (role) {
+    // Triggers on ENTER, but not SPACE
+    case "link":
+      return {
+        triggerOnEnter: true,
+        triggerOnSpace: false
+      };
+    // Triggers on SPACE, but not ENTER
+
+    case "checkbox":
+    case "radio":
+    case "listbox":
+    case "option":
+      return {
+        triggerOnEnter: false,
+        triggerOnSpace: true
+      };
+    // Triggers on both ENTER and SPACE
+
+    case "button":
+    case "menuitem":
+    case "menu":
+    default:
+      return {
+        triggerOnEnter: true,
+        triggerOnSpace: true
+      };
+  }
+};
+
+var disabledHandlers = {
+  onClick: function onClick() {
+    return void 0;
+  },
+  onMouseEnter: function onMouseEnter() {
+    return void 0;
+  },
+  onMouseLeave: function onMouseLeave() {
+    return void 0;
+  },
+  onMouseDown: function onMouseDown() {
+    return void 0;
+  },
+  onMouseUp: function onMouseUp() {
+    return void 0;
+  },
+  onDragStart: function onDragStart() {
+    return void 0;
+  },
+  onTouchStart: function onTouchStart() {
+    return void 0;
+  },
+  onTouchEnd: function onTouchEnd() {
+    return void 0;
+  },
+  onTouchCancel: function onTouchCancel() {
+    return void 0;
+  },
+  onKeyDown: function onKeyDown() {
+    return void 0;
+  },
+  onKeyUp: function onKeyUp() {
+    return void 0;
+  },
+  onFocus: function onFocus() {
+    return void 0;
+  },
+  onBlur: function onBlur() {
+    return void 0;
+  },
+  tabIndex: -1
+};
+var keyCodes = {
+  enter: 13,
+  space: 32
+};
+var startState = {
+  hovered: false,
+  focused: false,
+  pressed: false,
+  waiting: false
+};
+/**
+ * Add hover, focus, and active status updates to a clickable component.
+ *
+ * Via mouse:
+ *
+ * 1. Hover over button -> hover state
+ * 2. Mouse down -> active state
+ * 3. Mouse up -> default state
+ * 4. Press tab -> focus state
+ *
+ * Via touch:
+ *
+ * 1. Touch down -> press state
+ * 2. Touch up -> default state
+ *
+ * Via keyboard:
+ *
+ * 1. Tab to focus -> focus state
+ * 2. Keydown (spacebar/enter) -> active state
+ * 3. Keyup (spacebar/enter) -> focus state
+ *
+ * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
+ * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel, onKeyDown,
+ * onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the component
+ * that has the ClickableBehavior. You cannot override these handlers without
+ * potentially breaking the functionality of ClickableBehavior.
+ *
+ * There are internal props triggerOnEnter and triggerOnSpace that can be set
+ * to false if one of those keys shouldn't count as a click on this component.
+ * Be careful about setting those to false -- make certain that the component
+ * shouldn't process that key.
+ *
+ * See [this document](https://docs.google.com/document/d/1DG5Rg2f0cawIL5R8UqnPQpd7pbdObk8OyjO5ryYQmBM/edit#)
+ * for a more thorough explanation of expected behaviors and potential cavaets.
+ *
+ * `ClickableBehavior` accepts a function as `children` which is passed state
+ * and an object containing event handlers. The `children` function should
+ * return a clickable React Element of some sort.
+ *
+ * Example:
+ *
+ * ```js
+ * class MyClickableComponent extends React.Component<Props> {
+ *     render() {
+ *         const ClickableBehavior = getClickableBehavior();
+ *         return <ClickableBehavior
+ *             disabled={this.props.disabled}
+ *             onClick={this.props.onClick}
+ *         >
+ *             {({hovered}, handlers) =>
+ *                 <RoundRect
+ *                      textcolor='white'
+ *                      backgroundColor={hovered ? 'red' : 'blue'}}
+ *                      {...handlers}
+ *                 >
+ *                      {this.props.children}
+ *                 </RoundRect>
+ *             }
+ *         </ClickableBehavior>
+ *     }
+ * }
+ * ```
+ *
+ * This follows a pattern called [Function as Child Components]
+ * (https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9).
+ *
+ * WARNING: Do not use this component directly, use getClickableBehavior
+ * instead. getClickableBehavior takes three arguments (href, directtNav, and
+ * router) and returns either the default ClickableBehavior or a react-router
+ * aware version.
+ *
+ * The react-router aware version is returned if `router` is a react-router-dom
+ * router, `skipClientNav` is not `true`, and `href` is an internal URL.
+ *
+ * The `router` can be accessed via this.context.router from a component
+ * rendered as a descendant of a BrowserRouter.
+ * See https://reacttraining.com/react-router/web/guides/basic-components.
+ */
+
+var es_ClickableBehavior = /*#__PURE__*/function (_React$Component) {
+  _inherits(ClickableBehavior, _React$Component);
+
+  var _super = _createSuper(ClickableBehavior);
+
+  _createClass(ClickableBehavior, null, [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      // If new props are disabled, reset the hovered/focused/pressed states
+      if (props.disabled) {
+        return startState;
+      } else {
+        // Cannot return undefined
+        return null;
+      }
+    }
+  }]);
+
+  function ClickableBehavior(props) {
+    var _this;
+
+    _classCallCheck(this, ClickableBehavior);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "waitingForClick", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "enterClick", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "dragging", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+      var _this$props = _this.props,
+          _this$props$onClick = _this$props.onClick,
+          onClick = _this$props$onClick === void 0 ? undefined : _this$props$onClick,
+          _this$props$beforeNav = _this$props.beforeNav,
+          beforeNav = _this$props$beforeNav === void 0 ? undefined : _this$props$beforeNav,
+          _this$props$safeWithN = _this$props.safeWithNav,
+          safeWithNav = _this$props$safeWithN === void 0 ? undefined : _this$props$safeWithN;
+
+      if (_this.enterClick) {
+        return;
+      }
+
+      if (onClick || beforeNav || safeWithNav) {
+        _this.waitingForClick = false;
+      }
+
+      _this.runCallbackAndMaybeNavigate(e);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (e) {
+      // When the left button is pressed already, we want it to be pressed
+      if (e.buttons === 1) {
+        _this.dragging = true;
+
+        _this.setState({
+          pressed: true
+        });
+      } else if (!_this.waitingForClick) {
+        _this.setState({
+          hovered: true
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
+      if (!_this.waitingForClick) {
+        _this.dragging = false;
+
+        _this.setState({
+          hovered: false,
+          pressed: false,
+          focused: false
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function () {
+      _this.setState({
+        pressed: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function (e) {
+      if (_this.dragging) {
+        _this.dragging = false;
+
+        _this.handleClick(e);
+      }
+
+      _this.setState({
+        pressed: false,
+        focused: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleDragStart", function (e) {
+      _this.dragging = true;
+      e.preventDefault();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTouchStart", function () {
+      _this.setState({
+        pressed: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTouchEnd", function () {
+      _this.setState({
+        pressed: false
+      });
+
+      _this.waitingForClick = true;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTouchCancel", function () {
+      _this.setState({
+        pressed: false
+      });
+
+      _this.waitingForClick = true;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
+      var _this$props2 = _this.props,
+          onKeyDown = _this$props2.onKeyDown,
+          role = _this$props2.role;
+
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+
+      var keyCode = e.which || e.keyCode;
+
+      var _getAppropriateTrigge = getAppropriateTriggersForRole(role),
+          triggerOnEnter = _getAppropriateTrigge.triggerOnEnter,
+          triggerOnSpace = _getAppropriateTrigge.triggerOnSpace;
+
+      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+        // This prevents space from scrolling down. It also prevents the
+        // space and enter keys from triggering click events. We manually
+        // call the supplied onClick and handle potential navigation in
+        // handleKeyUp instead.
+        e.preventDefault();
+
+        _this.setState({
+          pressed: true
+        });
+      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+        // If the component isn't supposed to trigger on enter, we have to
+        // keep track of the enter keydown to negate the onClick callback
+        _this.enterClick = true;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (e) {
+      var _this$props3 = _this.props,
+          onKeyUp = _this$props3.onKeyUp,
+          role = _this$props3.role;
+
+      if (onKeyUp) {
+        onKeyUp(e);
+      }
+
+      var keyCode = e.which || e.keyCode;
+
+      var _getAppropriateTrigge2 = getAppropriateTriggersForRole(role),
+          triggerOnEnter = _getAppropriateTrigge2.triggerOnEnter,
+          triggerOnSpace = _getAppropriateTrigge2.triggerOnSpace;
+
+      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+        _this.setState({
+          pressed: false,
+          focused: true
+        });
+
+        _this.runCallbackAndMaybeNavigate(e);
+      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+        _this.enterClick = false;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
+      _this.setState({
+        focused: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
+      _this.setState({
+        focused: false,
+        pressed: false
+      });
+    });
+
+    _this.state = startState;
+    _this.waitingForClick = false;
+    _this.enterClick = false;
+    _this.dragging = false;
+    return _this;
+  }
+
+  _createClass(ClickableBehavior, [{
+    key: "navigateOrReset",
+    value: function navigateOrReset(shouldNavigate) {
+      if (shouldNavigate) {
+        var _this$props4 = this.props,
+            history = _this$props4.history,
+            href = _this$props4.href,
+            skipClientNav = _this$props4.skipClientNav;
+
+        if (href) {
+          if (history && !skipClientNav) {
+            history.push(href);
+            this.setState({
+              waiting: false
+            });
+          } else {
+            window.location.assign(href); // We don't bother clearing the waiting state, the full page
+            // load navigation will do that for us by loading a new page.
+          }
+        }
+      } else {
+        this.setState({
+          waiting: false
+        });
+      }
+    }
+  }, {
+    key: "handleSafeWithNav",
+    value: function handleSafeWithNav(safeWithNav, shouldNavigate) {
+      var _this2 = this;
+
+      var _this$props5 = this.props,
+          skipClientNav = _this$props5.skipClientNav,
+          history = _this$props5.history;
+
+      if (history && !skipClientNav) {
+        // client-side nav
+        safeWithNav();
+        this.navigateOrReset(shouldNavigate);
+        return Promise.resolve();
+      } else {
+        if (!this.state.waiting) {
+          // We only show the spinner for safeWithNav when doing
+          // a full page load navigation since since the spinner is
+          // indicating that we're waiting for navigation to occur.
+          this.setState({
+            waiting: true
+          });
+        }
+
+        return safeWithNav().then(function () {
+          if (!_this2.state.waiting) {
+            // We only show the spinner for safeWithNav when doing
+            // a full page load navigation since since the spinner is
+            // indicating that we're waiting for navigation to occur.
+            _this2.setState({
+              waiting: true
+            });
+          }
+
+          return;
+        }).catch(function (error) {// We ignore the error here so that we always
+          // navigate when using safeWithNav regardless of
+          // whether we're doing a client-side nav or not.
+        }).finally(function () {
+          _this2.navigateOrReset(shouldNavigate);
+        });
+      }
+    }
+  }, {
+    key: "runCallbackAndMaybeNavigate",
+    value: function runCallbackAndMaybeNavigate(e) {
+      var _this3 = this;
+
+      var _this$props6 = this.props,
+          _this$props6$onClick = _this$props6.onClick,
+          onClick = _this$props6$onClick === void 0 ? undefined : _this$props6$onClick,
+          _this$props6$beforeNa = _this$props6.beforeNav,
+          beforeNav = _this$props6$beforeNa === void 0 ? undefined : _this$props6$beforeNa,
+          _this$props6$safeWith = _this$props6.safeWithNav,
+          safeWithNav = _this$props6$safeWith === void 0 ? undefined : _this$props6$safeWith,
+          href = _this$props6.href,
+          type = _this$props6.type;
+      var shouldNavigate = true;
+      var canSubmit = true;
+
+      if (onClick) {
+        onClick(e);
+      } // If onClick() has called e.preventDefault() then we shouldn't
+      // navigate.
+
+
+      if (e.defaultPrevented) {
+        shouldNavigate = false;
+        canSubmit = false;
+      }
+
+      e.preventDefault();
+
+      if (!href && type === "submit" && canSubmit) {
+        var target = e.currentTarget;
+
+        while (target) {
+          if (target instanceof window.HTMLFormElement) {
+            var event = new window.Event("submit");
+            target.dispatchEvent(event);
+            break;
+          } // All events should be typed as SyntheticEvent<HTMLElement>.
+          // Updating all of the places will take some time so I'll do
+          // this later - $FlowFixMe.
+
+
+          target = target.parentElement;
+        }
+      }
+
+      if (beforeNav) {
+        this.setState({
+          waiting: true
+        });
+        beforeNav().then(function () {
+          if (safeWithNav) {
+            return _this3.handleSafeWithNav(safeWithNav, shouldNavigate);
+          } else {
+            return _this3.navigateOrReset(shouldNavigate);
+          }
+        }).catch(function () {});
+      } else if (safeWithNav) {
+        return this.handleSafeWithNav(safeWithNav, shouldNavigate);
+      } else {
+        this.navigateOrReset(shouldNavigate);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var handlers = this.props.disabled ? disabledHandlers : {
+        onClick: this.handleClick,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave,
+        onMouseDown: this.handleMouseDown,
+        onMouseUp: this.handleMouseUp,
+        onDragStart: this.handleDragStart,
+        onTouchStart: this.handleTouchStart,
+        onTouchEnd: this.handleTouchEnd,
+        onTouchCancel: this.handleTouchCancel,
+        onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        // We set tabIndex to 0 so that users can tab to clickable
+        // things that aren't buttons or anchors.
+        tabIndex: 0
+      };
+      var children = this.props.children;
+      return children && children(this.state, handlers);
+    }
+  }]);
+
+  return ClickableBehavior;
+}(external_react_["Component"]);
+
+_defineProperty(es_ClickableBehavior, "defaultProps", {
+  disabled: false
+});
+/**
+ * Returns true for external url.
+ * Such as http://, https://, //
+ */
+
+
+function isExternalUrl(url) {
+  return /^(https?:)?\/\//i.test(url);
+}
+/**
+ * Returns either the default ClickableBehavior or a react-router aware version.
+ *
+ * The react-router aware version is returned if `router` is a react-router-dom
+ * router, `skipClientNav` is not `true`, and `href` is an internal URL.
+ *
+ * The `router` can be accessed via this.context.router from a component rendered
+ * as a descendant of a BrowserRouter.
+ * See https://reacttraining.com/react-router/web/guides/basic-components.
+ */
+
+
+var ClickableBehaviorWithRouter = Object(external_react_router_dom_["withRouter"])(es_ClickableBehavior);
+
+function getClickableBehavior(
+/**
+ * The URL to navigate to.
+ */
+href,
+/**
+ * Should we skip using the react router and go to the page directly.
+ */
+skipClientNav,
+/**
+ * router object added to the React context object by react-router-dom.
+ */
+router) {
+  if (router && skipClientNav !== true && href && !isExternalUrl(href)) {
+    return ClickableBehaviorWithRouter;
+  }
+
+  return es_ClickableBehavior;
+}
+
 var StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a");
+var StyledButton = Object(wonder_blocks_core_["addStyle"])("button");
 var StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]);
+/**
+ * A component to turn any custom component into a clickable one.
+ *
+ * Works by wrapping ClickableBehavior around the child element and styling the
+ * child appropriately and encapsulates routing logic which can be customized.
+ * Expects a function which returns an element as it's child.
+ *
+ * Example usage:
+ * ```jsx
+ * <Clickable onClick={() => alert("You clicked me!")}>
+ *     {({hovered, focused, pressed}) =>
+ *         <div
+ *             style={[
+ *                 hovered && styles.hovered,
+ *                 focused && styles.focused,
+ *                 pressed && styles.pressed,
+ *             ]}
+ *         >
+ *             Click Me!
+ *         </div>
+ *     }
+ * </Clickable>
+ * ```
+ */
 
+var es_Clickable = /*#__PURE__*/function (_React$Component) {
+  _inherits(Clickable, _React$Component);
+
+  var _super = _createSuper(Clickable);
+
+  function Clickable() {
+    var _this;
+
+    _classCallCheck(this, Clickable);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "getCorrectTag", function (clickableState, commonProps) {
+      var activeHref = _this.props.href && !_this.props.disabled;
+      var useClient = _this.context.router && !_this.props.skipClientNav; // NOTE: checking this.props.href here is redundant, but flow
+      // needs it to refine this.props.href to a string.
+
+      if (activeHref && useClient && _this.props.href) {
+        return /*#__PURE__*/Object(external_react_["createElement"])(StyledLink, _extends({}, commonProps, {
+          to: _this.props.href,
+          role: _this.props.role,
+          "aria-disabled": _this.props.disabled ? "true" : undefined
+        }), _this.props.children(clickableState));
+      } else if (activeHref && !useClient) {
+        return /*#__PURE__*/Object(external_react_["createElement"])(StyledAnchor, _extends({}, commonProps, {
+          href: _this.props.href,
+          role: _this.props.role,
+          "aria-disabled": _this.props.disabled ? "true" : undefined
+        }), _this.props.children(clickableState));
+      } else {
+        return /*#__PURE__*/Object(external_react_["createElement"])(StyledButton, _extends({}, commonProps, {
+          type: "button",
+          disabled: _this.props.disabled
+        }), _this.props.children(clickableState));
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(Clickable, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          href = _this$props.href,
+          onClick = _this$props.onClick,
+          skipClientNav = _this$props.skipClientNav,
+          _this$props$beforeNav = _this$props.beforeNav,
+          beforeNav = _this$props$beforeNav === void 0 ? undefined : _this$props$beforeNav,
+          _this$props$safeWithN = _this$props.safeWithNav,
+          safeWithNav = _this$props$safeWithN === void 0 ? undefined : _this$props$safeWithN,
+          style = _this$props.style,
+          testId = _this$props.testId,
+          onKeyDown = _this$props.onKeyDown,
+          onKeyUp = _this$props.onKeyUp,
+          restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "testId", "onKeyDown", "onKeyUp"]);
+
+      var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
+      return /*#__PURE__*/Object(external_react_["createElement"])(ClickableBehavior, {
+        href: href,
+        onClick: onClick,
+        beforeNav: beforeNav,
+        safeWithNav: safeWithNav,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
+      }, function (state, handlers) {
+        return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, {
+          "data-test-id": testId,
+          style: [styles.reset, style]
+        }, handlers));
+      });
+    }
+  }]);
+
+  return Clickable;
+}(external_react_["Component"]); // Source:  https://gist.github.com/MoOx/9137295
+
+
+_defineProperty(es_Clickable, "contextTypes", {
+  router: external_prop_types_default.a.any
+});
+
+_defineProperty(es_Clickable, "defaultProps", {
+  disabled: false,
+  "aria-label": ""
+});
+
+var styles = external_aphrodite_["StyleSheet"].create({
+  reset: {
+    border: "none",
+    margin: 0,
+    padding: 0,
+    width: "auto",
+    overflow: "visible",
+    background: "transparent",
+    textDecoration: "none",
+
+    /* inherit font & color from ancestor */
+    color: "inherit",
+    font: "inherit",
+    boxSizing: "border-box",
+    // This removes the 300ms click delay on mobile browsers by indicating that
+    // "double-tap to zoom" shouldn't be used on this element.
+    touchAction: "manipulation",
+    userSelect: "none",
+    // This is usual frowned upon b/c of accessibility.  We expect users of Clickable
+    // to define their own focus styles.
+    outline: "none",
+
+    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+    lineHeight: "normal",
+
+    /* Corrects font smoothing for webkit */
+    WebkitFontSmoothing: "inherit",
+    MozOsxFontSmoothing: "inherit"
+  }
+});
+/* harmony default export */ var es = (es_Clickable);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
+var wonder_blocks_color_ = __webpack_require__(1);
+var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-link/components/link-core.js
+function link_core_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { link_core_typeof = function _typeof(obj) { return typeof obj; }; } else { link_core_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return link_core_typeof(obj); }
+
+function link_core_extends() { link_core_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 link_core_extends.apply(this, arguments); }
+
+function link_core_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { link_core_ownKeys(Object(source), true).forEach(function (key) { link_core_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { link_core_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function link_core_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = link_core_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function link_core_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function link_core_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function link_core_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function link_core_createClass(Constructor, protoProps, staticProps) { if (protoProps) link_core_defineProperties(Constructor.prototype, protoProps); if (staticProps) link_core_defineProperties(Constructor, staticProps); return Constructor; }
+
+function link_core_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) link_core_setPrototypeOf(subClass, superClass); }
+
+function link_core_setPrototypeOf(o, p) { link_core_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return link_core_setPrototypeOf(o, p); }
+
+function link_core_createSuper(Derived) { var hasNativeReflectConstruct = link_core_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = link_core_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = link_core_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return link_core_possibleConstructorReturn(this, result); }; }
+
+function link_core_possibleConstructorReturn(self, call) { if (call && (link_core_typeof(call) === "object" || typeof call === "function")) { return call; } return link_core_assertThisInitialized(self); }
+
+function link_core_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function link_core_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function link_core_getPrototypeOf(o) { link_core_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return link_core_getPrototypeOf(o); }
+
+function link_core_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+
+
+
+
+
+var link_core_StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a");
+var link_core_StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]);
+
 var link_core_LinkCore = /*#__PURE__*/function (_React$Component) {
-  _inherits(LinkCore, _React$Component);
+  link_core_inherits(LinkCore, _React$Component);
 
-  var _super = _createSuper(LinkCore);
+  var _super = link_core_createSuper(LinkCore);
 
   function LinkCore() {
-    _classCallCheck(this, LinkCore);
+    link_core_classCallCheck(this, LinkCore);
 
@@ -215,3 +1154,3 @@ return _super.apply(this, arguments);
 
-  _createClass(LinkCore, [{
+  link_core_createClass(LinkCore, [{
     key: "render",
@@ -232,3 +1171,3 @@ value: function render() {
           _ = _this$props.waiting,
-          restProps = _objectWithoutProperties(_this$props, ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"]);
+          restProps = link_core_objectWithoutProperties(_this$props, ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"]);
 
@@ -246,5 +1185,5 @@ var router = this.context.router;
 
-      return router && !skipClientNav ? /*#__PURE__*/external_react_["createElement"](StyledLink, _extends({}, commonProps, {
+      return router && !skipClientNav ? /*#__PURE__*/external_react_["createElement"](link_core_StyledLink, link_core_extends({}, commonProps, {
         to: href
-      }), children) : /*#__PURE__*/external_react_["createElement"](StyledAnchor, _extends({}, commonProps, {
+      }), children) : /*#__PURE__*/external_react_["createElement"](link_core_StyledAnchor, link_core_extends({}, commonProps, {
         href: href
@@ -258,3 +1197,3 @@ }), children);
 
-_defineProperty(link_core_LinkCore, "contextTypes", {
+link_core_defineProperty(link_core_LinkCore, "contextTypes", {
   router: external_prop_types_default.a.any
@@ -264,3 +1203,3 @@ });
 
-var styles = {};
+var link_core_styles = {};
 var sharedStyles = external_aphrodite_["StyleSheet"].create({
@@ -277,4 +1216,4 @@ shared: {
 
-  if (styles[buttonType]) {
-    return styles[buttonType];
+  if (link_core_styles[buttonType]) {
+    return link_core_styles[buttonType];
   }
@@ -322,4 +1261,4 @@
   };
-  styles[buttonType] = external_aphrodite_["StyleSheet"].create(newStyles);
-  return styles[buttonType];
+  link_core_styles[buttonType] = external_aphrodite_["StyleSheet"].create(newStyles);
+  return link_core_styles[buttonType];
 };
@@ -403,5 +1342,6 @@ // CONCATENATED MODULE: ./packages/wonder-blocks-link/components/link.js
           onKeyUp = _this$props.onKeyUp,
-          sharedProps = link_objectWithoutProperties(_this$props, ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp"]);
+          target = _this$props.target,
+          sharedProps = link_objectWithoutProperties(_this$props, ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"]);
 
-      var ClickableBehavior = Object(wonder_blocks_core_["getClickableBehavior"])(href, skipClientNav, this.context.router);
+      var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
       return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
@@ -414,2 +1354,3 @@ disabled: false,
         safeWithNav: safeWithNav,
+        target: target,
         onKeyDown: onKeyDown,
@@ -416,0 +1357,0 @@ onKeyUp: onKeyUp

package.json

 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "design": "v1",
@@ -19,3 +19,3 @@ "publishConfig": {
     "@khanacademy/wonder-blocks-color": "^1.1.15",
-    "@khanacademy/wonder-blocks-core": "^2.7.1"
+    "@khanacademy/wonder-blocks-core": "^3.0.0"
   },
@@ -31,3 +31,3 @@ "peerDependencies": {
   },
-  "gitHead": "55971121a333453523295abfe7d582071588a44e"
+  "gitHead": "768de54e6082e80e2faee6ed6af75303d608c01c"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

117700

increased by32.75%

Lines of code

2347

increased by52.6%

Dependency changes

• + Added@khanacademy/wonder-blocks-core@3.2.0(transitive)

• + Added@khanacademy/wonder-blocks-spacing@3.0.7(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedmini-create-react-context@0.4.1(transitive)

• + Addedreact-router@5.2.1(transitive)

• + Addedreact-router-dom@5.3.0(transitive)

• - Removed@khanacademy/wonder-blocks-core@2.7.1(transitive)

• - Removed@khanacademy/wonder-blocks-spacing@2.1.16(transitive)

• Updated@khanacademy/wonder-blocks-core@^3.0.0