@khanacademy/wonder-blocks-link 3.8.16 → 3.8.17

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @khanacademy/wonder-blocks-link
 
+## 3.8.17
+
+### Patch Changes
+
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-clickable@2.4.4
+    -   @khanacademy/wonder-blocks-core@4.6.2
+
 ## 3.8.16
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,216 @@
+'use strict';
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var React = require('react');
+var reactRouter = require('react-router');
+var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
+var aphrodite = require('aphrodite');
+var reactRouterDom = require('react-router-dom');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var Color = require('@khanacademy/wonder-blocks-color');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+
+const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
+const StyledAnchor = wonderBlocksCore.addStyle("a");
+const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
+class LinkCore extends React__namespace.Component {
+  renderInner(router) {
+    const _this$props = this.props,
+          {
+      children,
+      skipClientNav,
+      focused,
+      hovered,
+      href,
+      kind,
+      light,
+      visitable,
+      pressed,
+      style,
+      testId
+    } = _this$props,
+          restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
+
+    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__default["default"]({
+      "data-test-id": testId,
+      style: [defaultStyles, style]
+    }, restProps);
+
+    return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
+      to: href
+    }), children) : React__namespace.createElement(StyledAnchor, _extends__default["default"]({}, commonProps, {
+      href: href
+    }), children);
+  }
+
+  render() {
+    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderInner(router));
+  }
+
+}
+const styles = {};
+const sharedStyles = aphrodite.StyleSheet.create({
+  shared: {
+    cursor: "pointer",
+    textDecoration: "none",
+    outline: "none"
+  }
+});
+
+const _generateStyles = (kind, light, visitable) => {
+  const buttonType = kind + light.toString() + visitable.toString();
+
+  if (styles[buttonType]) {
+    return styles[buttonType];
+  }
+
+  if (kind === "secondary" && light) {
+    throw new Error("Secondary Light links are not supported");
+  }
+
+  if (visitable && (kind !== "primary" || kind === "primary" && light)) {
+    throw new Error("Only primary (not light) link is visitable");
+  }
+
+  const {
+    blue,
+    purple,
+    white,
+    offBlack,
+    offBlack32
+  } = Color__default["default"];
+  const linkPurple = Color.mix(Color.fade(offBlack, 0.08), purple);
+  const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
+  const focusColor = light ? white : blue;
+  const activeColor = light ? Color.mix(Color.fade(blue, 0.32), white) : Color.mix(offBlack32, blue);
+  const defaultVisited = visitable ? {
+    ":visited": {
+      color: linkPurple
+    }
+  } : Object.freeze({});
+  const activeVisited = visitable ? {
+    ":visited": {
+      color: Color.mix(offBlack32, linkPurple)
+    }
+  } : Object.freeze({});
+  const newStyles = {
+    default: _extends__default["default"]({
+      color: defaultTextColor
+    }, defaultVisited),
+    focus: _extends__default["default"]({
+      textDecoration: "underline currentcolor solid",
+      color: focusColor
+    }, defaultVisited),
+    active: _extends__default["default"]({
+      color: activeColor,
+      textDecoration: "underline currentcolor solid"
+    }, activeVisited)
+  };
+  styles[buttonType] = aphrodite.StyleSheet.create(newStyles);
+  return styles[buttonType];
+};
+
+const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"];
+class Link extends React__namespace.Component {
+  renderClickableBehavior(router) {
+    const _this$props = this.props,
+          {
+      onClick,
+      beforeNav = undefined,
+      safeWithNav,
+      href,
+      skipClientNav,
+      children,
+      tabIndex,
+      onKeyDown,
+      onKeyUp,
+      target = undefined
+    } = _this$props,
+          sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
+
+    const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
+
+    if (beforeNav) {
+      return React__namespace.createElement(ClickableBehavior, {
+        disabled: false,
+        href: href,
+        role: "link",
+        onClick: onClick,
+        beforeNav: beforeNav,
+        safeWithNav: safeWithNav,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
+      }, (state, _ref) => {
+        let childrenProps = _extends__default["default"]({}, _ref);
+
+        return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
+          skipClientNav: skipClientNav,
+          href: href,
+          target: target,
+          tabIndex: tabIndex
+        }), children);
+      });
+    } else {
+      return React__namespace.createElement(ClickableBehavior, {
+        disabled: false,
+        href: href,
+        role: "link",
+        onClick: onClick,
+        safeWithNav: safeWithNav,
+        target: target,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
+      }, (state, _ref2) => {
+        let childrenProps = _extends__default["default"]({}, _ref2);
+
+        return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
+          skipClientNav: skipClientNav,
+          href: href,
+          target: target,
+          tabIndex: tabIndex
+        }), children);
+      });
+    }
+  }
+
+  render() {
+    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
+}
+Link.defaultProps = {
+  kind: "primary",
+  light: false,
+  visitable: false
+};
+
+module.exports = Link;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "3.8.16",
+  "version": "3.8.17",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,9 +16,9 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.4.4",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.1"
+    "@khanacademy/wonder-blocks-core": "^4.6.2"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -27,6 +27,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.6.0"
+    "wb-dev-build-settings": "^0.7.0"
   }
 }