@khanacademy/wonder-blocks-link 3.7.12 → 3.8.1

package/dist/es/index.js

@@ -1,274 +1,57 @@
-import { createElement, Component } from 'react';
-import { any } from 'prop-types';
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import { Component, createElement } from 'react';
+import { __RouterContext } from 'react-router';
 import { isClientSideUrl, 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';
 
-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 _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-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 _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 _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 StyledAnchor = addStyle("a");
-var StyledLink = addStyle(Link$1);
-
-var LinkCore = /*#__PURE__*/function (_React$Component) {
-  _inherits(LinkCore, _React$Component);
-
-  var _super = _createSuper(LinkCore);
-
-  function LinkCore() {
-    _classCallCheck(this, LinkCore);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(LinkCore, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          skipClientNav = _this$props.skipClientNav,
-          focused = _this$props.focused,
-          hovered = _this$props.hovered,
-          href = _this$props.href,
-          kind = _this$props.kind,
-          light = _this$props.light,
-          visitable = _this$props.visitable,
-          pressed = _this$props.pressed,
-          style = _this$props.style,
-          testId = _this$props.testId,
-          _ = _this$props.waiting,
-          restProps = _objectWithoutProperties(_this$props, ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"]);
-
-      var router = this.context.router;
-
-      var linkStyles = _generateStyles(kind, light, visitable);
-
-      var defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && linkStyles.default, pressed ? linkStyles.active : (hovered || focused) && linkStyles.focus];
-
-      var commonProps = _objectSpread2({
-        "data-test-id": testId,
-        style: [defaultStyles, style]
-      }, restProps);
-
-      return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
-        to: href
-      }), children) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
-        href: href
-      }), children);
-    }
-  }]);
-
-  return LinkCore;
-}(Component);
-
-_defineProperty(LinkCore, "contextTypes", {
-  router: any
-});
-var styles = {};
-var sharedStyles = StyleSheet.create({
+const _excluded = ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
+const StyledAnchor = addStyle("a");
+const StyledLink = addStyle(Link$1);
+class LinkCore extends Component {
+  renderInner(router) {
+    const _this$props = this.props,
+          {
+      children,
+      skipClientNav,
+      focused,
+      hovered,
+      href,
+      kind,
+      light,
+      visitable,
+      pressed,
+      style,
+      testId
+    } = _this$props,
+          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+
+    const linkStyles = _generateStyles(kind, light, visitable);
+
+    const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && linkStyles.default, pressed ? linkStyles.active : (hovered || focused) && linkStyles.focus];
+
+    const commonProps = _extends({
+      "data-test-id": testId,
+      style: [defaultStyles, style]
+    }, restProps);
+
+    return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
+      to: href
+    }), children) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
+      href: href
+    }), children);
+  }
+
+  render() {
+    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
+  }
+
+}
+const styles = {};
+const sharedStyles = StyleSheet.create({
   shared: {
     cursor: "pointer",
     textDecoration: "none",
@@ -276,8 +59,8 @@ var sharedStyles = StyleSheet.create({
   }
 });
 
-var _generateStyles = function _generateStyles(kind, light, visitable) {
-  var buttonType = kind + light.toString() + visitable.toString();
+const _generateStyles = (kind, light, visitable) => {
+  const buttonType = kind + light.toString() + visitable.toString();
 
   if (styles[buttonType]) {
     return styles[buttonType];
@@ -291,34 +74,36 @@ var _generateStyles = function _generateStyles(kind, light, visitable) {
     throw new Error("Only primary (not light) link is visitable");
   }
 
-  var blue = Color.blue,
-      purple = Color.purple,
-      white = Color.white,
-      offBlack = Color.offBlack,
-      offBlack32 = Color.offBlack32;
-  var linkPurple = mix(fade(offBlack, 0.08), purple);
-  var defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
-  var focusColor = light ? white : blue;
-  var activeColor = light ? mix(fade(blue, 0.32), white) : mix(offBlack32, blue);
-  var defaultVisited = visitable ? {
+  const {
+    blue,
+    purple,
+    white,
+    offBlack,
+    offBlack32
+  } = Color;
+  const linkPurple = mix(fade(offBlack, 0.08), purple);
+  const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
+  const focusColor = light ? white : blue;
+  const activeColor = light ? mix(fade(blue, 0.32), white) : mix(offBlack32, blue);
+  const defaultVisited = visitable ? {
     ":visited": {
       color: linkPurple
     }
   } : Object.freeze({});
-  var activeVisited = visitable ? {
+  const activeVisited = visitable ? {
     ":visited": {
       color: mix(offBlack32, linkPurple)
     }
   } : Object.freeze({});
-  var newStyles = {
-    default: _objectSpread2({
+  const newStyles = {
+    default: _extends({
       color: defaultTextColor
     }, defaultVisited),
-    focus: _objectSpread2({
+    focus: _extends({
       textDecoration: "underline currentcolor solid",
       color: focusColor
     }, defaultVisited),
-    active: _objectSpread2({
+    active: _extends({
       color: activeColor,
       textDecoration: "underline currentcolor solid"
     }, activeVisited)
@@ -327,6 +112,10 @@ var _generateStyles = function _generateStyles(kind, light, visitable) {
   return styles[buttonType];
 };
 
+const _excluded$1 = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"],
+      _excluded2 = ["tabIndex"],
+      _excluded3 = ["tabIndex"];
+
 /**
  * Reusable link component.
  *
@@ -344,100 +133,89 @@ var _generateStyles = function _generateStyles(kind, light, visitable) {
  * </Link>
  * ```
  */
-var Link = /*#__PURE__*/function (_React$Component) {
-  _inherits(Link, _React$Component);
-
-  var _super = _createSuper(Link);
-
-  function Link() {
-    _classCallCheck(this, Link);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Link, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          onClick = _this$props.onClick,
-          _this$props$beforeNav = _this$props.beforeNav,
-          beforeNav = _this$props$beforeNav === void 0 ? undefined : _this$props$beforeNav,
-          safeWithNav = _this$props.safeWithNav,
-          href = _this$props.href,
-          skipClientNav = _this$props.skipClientNav,
-          children = _this$props.children,
-          tabIndex = _this$props.tabIndex,
-          onKeyDown = _this$props.onKeyDown,
-          onKeyUp = _this$props.onKeyUp,
-          _this$props$target = _this$props.target,
-          target = _this$props$target === void 0 ? undefined : _this$props$target,
-          sharedProps = _objectWithoutProperties(_this$props, ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"]);
-
-      var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
-
-      if (beforeNav) {
-        return /*#__PURE__*/createElement(ClickableBehavior, {
-          disabled: false,
+class Link extends Component {
+  renderClickableBehavior(router) {
+    const _this$props = this.props,
+          {
+      onClick,
+      beforeNav = undefined,
+      safeWithNav,
+      href,
+      skipClientNav,
+      children,
+      tabIndex,
+      onKeyDown,
+      onKeyUp,
+      target = undefined
+    } = _this$props,
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
+
+    if (beforeNav) {
+      return /*#__PURE__*/createElement(ClickableBehavior, {
+        disabled: false,
+        href: href,
+        role: "link",
+        onClick: onClick,
+        beforeNav: beforeNav,
+        safeWithNav: safeWithNav,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
+      }, (state, _ref) => {
+        let {
+          tabIndex: clickableTabIndex
+        } = _ref,
+            childrenProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
+
+        return /*#__PURE__*/createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
+          skipClientNav: skipClientNav,
           href: href,
-          role: "link",
-          onClick: onClick,
-          beforeNav: beforeNav,
-          safeWithNav: safeWithNav,
-          onKeyDown: onKeyDown,
-          onKeyUp: onKeyUp
-        }, function (state, _ref) {
-          var clickableTabIndex = _ref.tabIndex,
-              childrenProps = _objectWithoutProperties(_ref, ["tabIndex"]);
-
-          return /*#__PURE__*/createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
-            skipClientNav: skipClientNav,
-            href: href,
-            target: target // If tabIndex is provide to the component we allow
-            // it to override the tabIndex provide to use by
-            // ClickableBehavior.
-            ,
-            tabIndex: tabIndex || clickableTabIndex
-          }), children);
-        });
-      } else {
-        return /*#__PURE__*/createElement(ClickableBehavior, {
-          disabled: false,
+          target: target // If tabIndex is provide to the component we allow
+          // it to override the tabIndex provide to use by
+          // ClickableBehavior.
+          ,
+          tabIndex: tabIndex || clickableTabIndex
+        }), children);
+      });
+    } else {
+      return /*#__PURE__*/createElement(ClickableBehavior, {
+        disabled: false,
+        href: href,
+        role: "link",
+        onClick: onClick,
+        safeWithNav: safeWithNav,
+        target: target,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
+      }, (state, _ref2) => {
+        let {
+          tabIndex: clickableTabIndex
+        } = _ref2,
+            childrenProps = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+
+        return /*#__PURE__*/createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
+          skipClientNav: skipClientNav,
           href: href,
-          role: "link",
-          onClick: onClick,
-          safeWithNav: safeWithNav,
-          target: target,
-          onKeyDown: onKeyDown,
-          onKeyUp: onKeyUp
-        }, function (state, _ref2) {
-          var clickableTabIndex = _ref2.tabIndex,
-              childrenProps = _objectWithoutProperties(_ref2, ["tabIndex"]);
-
-          return /*#__PURE__*/createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
-            skipClientNav: skipClientNav,
-            href: href,
-            target: target // If tabIndex is provide to the component we allow
-            // it to override the tabIndex provide to use by
-            // ClickableBehavior.
-            ,
-            tabIndex: tabIndex || clickableTabIndex
-          }), children);
-        });
-      }
+          target: target // If tabIndex is provide to the component we allow
+          // it to override the tabIndex provide to use by
+          // ClickableBehavior.
+          ,
+          tabIndex: tabIndex || clickableTabIndex
+        }), children);
+      });
     }
-  }]);
-
-  return Link;
-}(Component);
+  }
 
-_defineProperty(Link, "contextTypes", {
-  router: any
-});
+  render() {
+    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
 
-_defineProperty(Link, "defaultProps", {
+}
+Link.defaultProps = {
   kind: "primary",
   light: false,
   visitable: false
-});
+};
 
 export default Link;