@khanacademy/wonder-blocks-link 3.9.0 → 3.9.2

package/dist/index.js

@@ -1,7 +1,5 @@
 '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');
@@ -13,72 +11,116 @@ 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]; }
-                });
-            }
+  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);
+      }
+    });
+  }
+  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);
 
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure " + obj);
+}
+
+function _extends() {
+  _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;
+  };
+  return _extends.apply(this, arguments);
+}
+
+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 _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
 const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "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) {
+let LinkCore = function (_React$Component) {
+  _inheritsLoose(LinkCore, _React$Component);
+  function LinkCore() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = LinkCore.prototype;
+  _proto.renderInner = function renderInner(router) {
     const _this$props = this.props,
-          {
-      children,
-      skipClientNav,
-      focused,
-      hovered,
-      href,
-      inline,
-      kind,
-      light,
-      visitable,
-      pressed,
-      style,
-      testId
-    } = _this$props,
-          restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
-
+      {
+        children,
+        skipClientNav,
+        focused,
+        hovered,
+        href,
+        inline,
+        kind,
+        light,
+        visitable,
+        pressed,
+        style,
+        testId
+      } = _this$props,
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const linkStyles = _generateStyles(inline, kind, light, visitable);
-
     const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
     const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
-
-    const commonProps = _extends__default["default"]({
+    const commonProps = _extends({
       "data-test-id": testId,
       style: [defaultStyles, style]
     }, restProps);
-
-    return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
+    return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
       to: href
-    }), children) : React__namespace.createElement(StyledAnchor, _extends__default["default"]({}, commonProps, {
+    }), children) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
       href: href
     }), children);
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderInner(router));
-  }
-
-}
+  };
+  return LinkCore;
+}(React__namespace.Component);
 const styles = {};
 const sharedStyles = aphrodite.StyleSheet.create({
   shared: {
@@ -90,22 +132,17 @@ const sharedStyles = aphrodite.StyleSheet.create({
     lineHeight: "22px"
   }
 });
-
 const _generateStyles = (inline, kind, light, visitable) => {
   const buttonType = `${kind}-${inline.toString()}-${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") {
     throw new Error("Only primary link is visitable");
   }
-
   const {
     blue,
     pink,
@@ -136,25 +173,25 @@ const _generateStyles = (inline, kind, light, visitable) => {
     }
   } : Object.freeze({});
   const newStyles = {
-    resting: _extends__default["default"]({
+    resting: _extends({
       color: defaultTextColor
     }, defaultVisited),
-    restingInline: _extends__default["default"]({
+    restingInline: _extends({
       color: defaultTextColor,
       textDecoration: "underline currentcolor solid 1px",
       textUnderlineOffset: 4
     }, defaultVisited),
-    hover: _extends__default["default"]({
+    hover: _extends({
       textDecoration: "underline currentcolor dashed 2px",
       color: defaultTextColor,
       textUnderlineOffset: 4
     }, defaultVisited),
-    focus: _extends__default["default"]({
+    focus: _extends({
       color: defaultTextColor,
       outline: `1px solid ${light ? white : blue}`,
       borderRadius: 3
     }, defaultVisited),
-    active: _extends__default["default"]({
+    active: _extends({
       color: activeColor,
       textDecoration: "underline currentcolor solid 1px",
       textUnderlineOffset: 4
@@ -165,25 +202,28 @@ const _generateStyles = (inline, kind, light, visitable) => {
 };
 
 const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"];
-class Link extends React__namespace.Component {
-  renderClickableBehavior(router) {
+let Link = function (_React$Component) {
+  _inheritsLoose(Link, _React$Component);
+  function Link() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Link.prototype;
+  _proto.renderClickableBehavior = function 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);
-
+      {
+        onClick,
+        beforeNav = undefined,
+        safeWithNav,
+        href,
+        skipClientNav,
+        children,
+        tabIndex,
+        onKeyDown,
+        onKeyUp,
+        target = undefined
+      } = _this$props,
+      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
-
     if (beforeNav) {
       return React__namespace.createElement(ClickableBehavior, {
         disabled: false,
@@ -195,9 +235,8 @@ class Link extends React__namespace.Component {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp
       }, (state, _ref) => {
-        let childrenProps = _extends__default["default"]({}, _ref);
-
-        return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
+        let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+        return React__namespace.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
           skipClientNav: skipClientNav,
           href: href,
           target: target,
@@ -215,9 +254,8 @@ class Link extends React__namespace.Component {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp
       }, (state, _ref2) => {
-        let childrenProps = _extends__default["default"]({}, _ref2);
-
-        return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
+        let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+        return React__namespace.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
           skipClientNav: skipClientNav,
           href: href,
           target: target,
@@ -225,13 +263,12 @@ class Link extends React__namespace.Component {
         }), children);
       });
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-
-}
+  };
+  return Link;
+}(React__namespace.Component);
 Link.defaultProps = {
   inline: false,
   kind: "primary",

package/dist/index.js.flow

@@ -1,2 +1,9 @@
-// @flow
-export * from "../src/index.js";
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import Link from "./components/link";
+declare export { Link as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "3.9.0",
+  "version": "3.9.2",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,7 @@
   "description": "Link component for Wonder Blocks design system.",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
-  "source": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -16,9 +16,9 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.4",
-    "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.2"
+    "@khanacademy/wonder-blocks-clickable": "^2.4.6",
+    "@khanacademy/wonder-blocks-color": "^1.2.2",
+    "@khanacademy/wonder-blocks-core": "^4.8.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -27,6 +27,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.0"
+    "wb-dev-build-settings": "^0.7.2"
   }
 }

package/src/__tests__/{custom-snapshot.test.js → custom-snapshot.test.tsx}

@@ -1,9 +1,8 @@
-// @flow
-import React from "react";
-import renderer from "react-test-renderer";
+import * as React from "react";
+import * as renderer from "react-test-renderer";
 
-import LinkCore from "../components/link-core.js";
-import Link from "../components/link.js";
+import LinkCore from "../components/link-core";
+import Link from "../components/link";
 
 const defaultHandlers = {
     onClick: () => void 0,
@@ -19,7 +18,7 @@ const defaultHandlers = {
     onFocus: () => void 0,
     onBlur: () => void 0,
     tabIndex: 0,
-};
+} as const;
 
 describe("Link", () => {
     test.each`
@@ -27,7 +26,7 @@ describe("Link", () => {
         ${-1}
         ${0}
         ${1}
-    `("<Link tabIndex={$tabIndex}>", ({tabIndex}) => {
+    `("<Link tabIndex={$tabIndex}>", ({tabIndex}: any) => {
         const tree = renderer
             .create(
                 <Link href="#" tabIndex={tabIndex}>
@@ -53,7 +52,7 @@ describe("LinkCore", () => {
                                 hovered: state === "hovered",
                                 pressed: state === "pressed",
                                 waiting: false,
-                            };
+                            } as const;
                             test(`kind:${kind} href:${href} light:${String(
                                 light,
                             )} visitable:${String(visitable)} ${state}`, () => {
@@ -62,6 +61,7 @@ describe("LinkCore", () => {
                                         <LinkCore
                                             href="#"
                                             inline={inline}
+                                            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                                             kind={kind}
                                             light={light}
                                             visitable={visitable}

package/src/components/__tests__/{link.flowtest.js → link.flowtest.tsx}

@@ -1,14 +1,12 @@
-// @flow
-/* eslint-disable ft-flow/no-unused-expressions */
 import * as React from "react";
 
-import Link from "../link.js";
+import Link from "../link";
 
-// $FlowExpectedError[incompatible-type]: href must be used with beforeNav
-<Link beforeNav={() => Promise.resolve()}>Hello, world!</Link>;
+// TODO(FEI-5000): Re-enable test after updating props to be conditional.
+// <Link beforeNav={() => Promise.resolve()}>Hello, world!</Link>;
 
-// $FlowExpectedError[incompatible-type]: href must be used with safeWithNav
-<Link safeWithNav={() => Promise.resolve()}>Hello, world!</Link>;
+// TODO(FEI-5000): Re-enable test after updating props to be conditional.
+// <Link safeWithNav={() => Promise.resolve()}>Hello, world!</Link>;
 
 // It's okay to use onClick with href
 <Link href="/foo" onClick={() => {}}>

package/src/components/__tests__/{link.test.js → link.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {fireEvent, render, screen, waitFor} from "@testing-library/react";
@@ -6,17 +5,20 @@ import userEvent from "@testing-library/user-event";
 
 import Color from "@khanacademy/wonder-blocks-color";
 
-import Link from "../link.js";
+import Link from "../link";
 
 describe("Link", () => {
     beforeEach(() => {
         // Note: window.location.assign needs a mock function in the testing
         // environment.
+        // @ts-expect-error [FEI-5019] - TS2790 - The operand of a 'delete' operator must be optional.
         delete window.location;
+        // @ts-expect-error [FEI-5019] - TS2740 - Type '{ assign: Mock<any, any, any>; }' is missing the following properties from type 'Location': ancestorOrigins, hash, host, hostname, and 8 more.
         window.location = {assign: jest.fn()};
     });
 
     afterEach(() => {
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'mockClear' does not exist on type '(url: string | URL) => void'.
         window.location.assign.mockClear();
         jest.clearAllMocks();
     });
@@ -300,9 +302,9 @@ describe("Link", () => {
     describe("raw events", () => {
         test("onKeyDown", () => {
             // Arrange
-            let keyCode;
+            let keyCode: any;
             render(
-                <Link href="/" onKeyDown={(e) => (keyCode = e.keyCode)}>
+                <Link href="/" onKeyDown={(e: any) => (keyCode = e.keyCode)}>
                     Click me!
                 </Link>,
             );
@@ -318,9 +320,9 @@ describe("Link", () => {
 
         test("onKeyUp", () => {
             // Arrange
-            let keyCode;
+            let keyCode: any;
             render(
-                <Link href="/" onKeyUp={(e) => (keyCode = e.keyCode)}>
+                <Link href="/" onKeyUp={(e: any) => (keyCode = e.keyCode)}>
                     Click me!
                 </Link>,
             );

package/src/components/{link-core.js → link-core.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {Link} from "react-router-dom";
@@ -13,20 +12,19 @@ import type {
     ClickableState,
 } from "@khanacademy/wonder-blocks-clickable";
 import type {StyleDeclaration} from "aphrodite";
-import type {SharedProps} from "./link.js";
+import type {SharedProps} from "./link";
 
-type Props = {|
-    ...SharedProps,
-    ...ChildrenProps,
-    ...ClickableState,
-    href: string,
-|};
+type Props = SharedProps &
+    ChildrenProps &
+    ClickableState & {
+        href: string;
+    };
 
 const StyledAnchor = addStyle<"a">("a");
 const StyledLink = addStyle<typeof Link>(Link);
 
 export default class LinkCore extends React.Component<Props> {
-    renderInner(router: any): React.Node {
+    renderInner(router: any): React.ReactNode {
         const {
             children,
             skipClientNav,
@@ -66,7 +64,7 @@ export default class LinkCore extends React.Component<Props> {
             "data-test-id": testId,
             style: [defaultStyles, style],
             ...restProps,
-        };
+        } as const;
 
         return router && !skipClientNav && isClientSideUrl(href) ? (
             <StyledLink {...commonProps} to={href}>
@@ -79,7 +77,7 @@ export default class LinkCore extends React.Component<Props> {
         );
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         return (
             <__RouterContext.Consumer>
                 {(router) => this.renderInner(router)}
@@ -88,7 +86,7 @@ export default class LinkCore extends React.Component<Props> {
     }
 }
 
-const styles = {};
+const styles: Record<string, any> = {};
 
 const sharedStyles = StyleSheet.create({
     shared: {
@@ -101,7 +99,12 @@ const sharedStyles = StyleSheet.create({
     },
 });
 
-const _generateStyles = (inline, kind, light, visitable) => {
+const _generateStyles = (
+    inline: boolean,
+    kind: "primary" | "secondary",
+    light: boolean,
+    visitable: boolean,
+) => {
     const buttonType = `${kind}-${inline.toString()}-${light.toString()}-${visitable.toString()}`;
     if (styles[buttonType]) {
         return styles[buttonType];