@khanacademy/wonder-blocks-link 3.9.1 → 3.9.3

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @khanacademy/wonder-blocks-link
 
+## 3.9.3
+
+### Patch Changes
+
+-   2c0ad5ca: Going back to old link styles temporarily
+-   Updated dependencies [779b031d]
+    -   @khanacademy/wonder-blocks-core@4.9.0
+    -   @khanacademy/wonder-blocks-clickable@2.4.7
+
+## 3.9.2
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+-   Updated dependencies [d816af08]
+-   Updated dependencies [3891f544]
+-   Updated dependencies [0d28bb1c]
+-   Updated dependencies [873f4a14]
+-   Updated dependencies [3d05f764]
+-   Updated dependencies [c2ec4902]
+-   Updated dependencies [2983c05b]
+-   Updated dependencies [77ff6a66]
+-   Updated dependencies [ec8d4b7f]
+    -   @khanacademy/wonder-blocks-clickable@2.4.6
+    -   @khanacademy/wonder-blocks-color@1.2.2
+    -   @khanacademy/wonder-blocks-core@4.8.0
+
 ## 3.9.1
 
 ### Patch Changes

package/dist/components/link-core.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
+import type { SharedProps } from "./link";
+type Props = SharedProps & ChildrenProps & ClickableState & {
+    href: string;
+};
+export default class LinkCore extends React.Component<Props> {
+    renderInner(router: any): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/link-core.js.flow

@@ -0,0 +1,26 @@
+/**
+ * Flowtype definitions for link-core
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type {
+  ChildrenProps,
+  ClickableState,
+} from "@khanacademy/wonder-blocks-clickable";
+import type { SharedProps } from "./link";
+declare type Props = {
+  ...SharedProps,
+  ...ChildrenProps,
+  ...ClickableState,
+  ...{
+    href: string,
+    ...
+  },
+};
+declare export default class LinkCore extends React.Component<Props> {
+  renderInner(router: any): React.Node;
+  render(): React.Element<>;
+}

package/dist/components/link.d.ts

@@ -0,0 +1,148 @@
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import type { Typography } from "@khanacademy/wonder-blocks-typography";
+export type SharedProps = AriaProps & {
+    /**
+     * Text to appear on the link. It can be a plain text or a Typography element.
+     */
+    children: string | React.ReactElement<React.ComponentProps<Typography>>;
+    /**
+     * URL to navigate to.
+     */
+    href: string;
+    /**
+     * An optional id attribute.
+     */
+    id?: string;
+    /**
+     * Indicates that this link is used within a body of text.
+     * This styles the link with an underline to distinguish it
+     * from surrounding text.
+     */
+    inline: boolean;
+    /**
+     * Kind of Link. Note: Secondary light Links are not supported.
+     */
+    kind: "primary" | "secondary";
+    /**
+     * Whether the button is on a dark/colored background.
+     */
+    light: boolean;
+    /**
+     * Whether the link should change color once it's visited.
+     * secondary or primary (light) links are not allowed to be visitable.
+     */
+    visitable: boolean;
+    /**
+     * Specifies the type of relationship between the current document and the
+     * linked document. Should only be used when `href` is specified. This
+     * defaults to "noopener noreferrer" when `target="_blank"`, but can be
+     * overridden by setting this prop to something else.
+     */
+    rel?: string;
+    /**
+     * Set the tabindex attribute on the rendered element.
+     */
+    tabIndex?: number;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
+    /**
+     * Whether to avoid using client-side navigation.
+     *
+     * If the URL passed to href is local to the client-side, e.g.
+     * /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
+     * component which handles the client-side navigation. You can set
+     * `skipClientNav` to true avoid using client-side nav entirely.
+     *
+     * NOTE: All URLs containing a protocol are considered external, e.g.
+     * https://khanacademy.org/math/algebra/eval-exprs will trigger a full
+     * page reload.
+     */
+    skipClientNav?: boolean;
+    /**
+     * Custom styles.
+     */
+    style?: StyleType;
+    /**
+     * Adds CSS classes to the Link.
+     */
+    className?: string;
+    /**
+     * Function to call when button is clicked.
+     *
+     * This callback should be used for things like marking BigBingo
+     * conversions. It should NOT be used to redirect to a different URL or to
+     * prevent navigation via e.preventDefault(). The event passed to this
+     * handler will have its preventDefault() and stopPropagation() methods
+     * stubbed out.
+     */
+    onClick?: (e: React.SyntheticEvent) => unknown;
+    /**
+     * Run async code in the background while client-side navigating. If the
+     * browser does a full page load navigation, the callback promise must be
+     * settled before the navigation will occur. Errors are ignored so that
+     * navigation is guaranteed to succeed.
+     */
+    safeWithNav?: () => Promise<unknown>;
+    /**
+     * Respond to raw "keydown" event.
+     */
+    onKeyDown?: (e: React.KeyboardEvent) => unknown;
+    /**
+     * Respond to raw "keyup" event.
+     */
+    onKeyUp?: (e: React.KeyboardEvent) => unknown;
+    /**
+     * A target destination window for a link to open in.  We only support
+     * "_blank" which opens the URL in a new tab.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank";
+    /**
+     * Run async code before navigating to the URL passed to `href`. If the
+     * promise returned rejects then navigation will not occur.
+     *
+     * If both safeWithNav and beforeNav are provided, beforeNav will be run
+     * first and safeWithNav will only be run if beforeNav does not reject.
+     *
+     * WARNING: Using this with `target="_blank"` will trigger built-in popup
+     * blockers in Firefox and Safari.  This is because we do navigation
+     * programmatically and `beforeNav` causes a delay which means that the
+     * browser can't make a directly link between a user action and the
+     * navigation.
+     */
+    beforeNav?: () => Promise<unknown>;
+};
+type DefaultProps = {
+    inline: SharedProps["inline"];
+    kind: SharedProps["kind"];
+    light: SharedProps["light"];
+    visitable: SharedProps["visitable"];
+};
+/**
+ * Reusable link component.
+ *
+ * Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
+ * `LinkCore`. `ClickableBehavior` handles interactions and state changes.
+ * `LinkCore` is a stateless component which displays the different states
+ * the `Link` can take.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * <Link
+ *     href="https://khanacademy.org/"
+ * >
+ *     Label
+ * </Link>
+ * ```
+ */
+export default class Link extends React.Component<SharedProps> {
+    static defaultProps: DefaultProps;
+    renderClickableBehavior(router: any): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/link.js.flow

@@ -0,0 +1,177 @@
+/**
+ * Flowtype definitions for link
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import type { Typography } from "@khanacademy/wonder-blocks-typography";
+export type SharedProps = {
+  ...AriaProps,
+  ...{
+    /**
+     * Text to appear on the link. It can be a plain text or a Typography element.
+     */
+    children: string | React.Element<React.ComponentProps<Typography>>,
+
+    /**
+     * URL to navigate to.
+     */
+    href: string,
+
+    /**
+     * An optional id attribute.
+     */
+    id?: string,
+
+    /**
+     * Indicates that this link is used within a body of text.
+     * This styles the link with an underline to distinguish it
+     * from surrounding text.
+     */
+    inline: boolean,
+
+    /**
+     * Kind of Link. Note: Secondary light Links are not supported.
+     */
+    kind: "primary" | "secondary",
+
+    /**
+     * Whether the button is on a dark/colored background.
+     */
+    light: boolean,
+
+    /**
+     * Whether the link should change color once it's visited.
+     * secondary or primary (light) links are not allowed to be visitable.
+     */
+    visitable: boolean,
+
+    /**
+     * Specifies the type of relationship between the current document and the
+     * linked document. Should only be used when `href` is specified. This
+     * defaults to "noopener noreferrer" when `target="_blank"`, but can be
+     * overridden by setting this prop to something else.
+     */
+    rel?: string,
+
+    /**
+     * Set the tabindex attribute on the rendered element.
+     */
+    tabIndex?: number,
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+
+    /**
+     * Whether to avoid using client-side navigation.
+     *
+     * If the URL passed to href is local to the client-side, e.g.
+     * /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
+     * component which handles the client-side navigation. You can set
+     * `skipClientNav` to true avoid using client-side nav entirely.
+     *
+     * NOTE: All URLs containing a protocol are considered external, e.g.
+     * https://khanacademy.org/math/algebra/eval-exprs will trigger a full
+     * page reload.
+     */
+    skipClientNav?: boolean,
+
+    /**
+     * Custom styles.
+     */
+    style?: StyleType,
+
+    /**
+     * Adds CSS classes to the Link.
+     */
+    className?: string,
+
+    /**
+     * Function to call when button is clicked.
+     *
+     * This callback should be used for things like marking BigBingo
+     * conversions. It should NOT be used to redirect to a different URL or to
+     * prevent navigation via e.preventDefault(). The event passed to this
+     * handler will have its preventDefault() and stopPropagation() methods
+     * stubbed out.
+     */
+    onClick?: (e: React.SyntheticEvent<>) => mixed,
+
+    /**
+     * Run async code in the background while client-side navigating. If the
+     * browser does a full page load navigation, the callback promise must be
+     * settled before the navigation will occur. Errors are ignored so that
+     * navigation is guaranteed to succeed.
+     */
+    safeWithNav?: () => Promise<mixed>,
+
+    /**
+     * Respond to raw "keydown" event.
+     */
+    onKeyDown?: (e: React.KeyboardEvent<>) => mixed,
+
+    /**
+     * Respond to raw "keyup" event.
+     */
+    onKeyUp?: (e: React.KeyboardEvent<>) => mixed,
+
+    /**
+     * A target destination window for a link to open in.  We only support
+     * "_blank" which opens the URL in a new tab.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank",
+
+    /**
+     * Run async code before navigating to the URL passed to `href`. If the
+     * promise returned rejects then navigation will not occur.
+     *
+     * If both safeWithNav and beforeNav are provided, beforeNav will be run
+     * first and safeWithNav will only be run if beforeNav does not reject.
+     *
+     * WARNING: Using this with `target="_blank"` will trigger built-in popup
+     * blockers in Firefox and Safari.  This is because we do navigation
+     * programmatically and `beforeNav` causes a delay which means that the
+     * browser can't make a directly link between a user action and the
+     * navigation.
+     */
+    beforeNav?: () => Promise<mixed>,
+    ...
+  },
+};
+declare type DefaultProps = {
+  inline: $PropertyType<SharedProps, "inline">,
+  kind: $PropertyType<SharedProps, "kind">,
+  light: $PropertyType<SharedProps, "light">,
+  visitable: $PropertyType<SharedProps, "visitable">,
+  ...
+};
+/**
+ * Reusable link component.
+ *
+ * Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
+ * `LinkCore`. `ClickableBehavior` handles interactions and state changes.
+ * `LinkCore` is a stateless component which displays the different states
+ * the `Link` can take.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * <Link
+ *     href="https://khanacademy.org/"
+ * >
+ *     Label
+ * </Link>
+ * ```
+ */
+declare export default class Link extends React.Component<SharedProps> {
+  static defaultProps: DefaultProps;
+  renderClickableBehavior(router: any): React.Node;
+  render(): React.Element<>;
+}

package/dist/es/index.js

@@ -1,5 +1,3 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
 import { __RouterContext } from 'react-router';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
@@ -8,77 +6,116 @@ 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 _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 = addStyle("a");
 const StyledLink = addStyle(Link$1);
-class LinkCore extends React.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(_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({
       "data-test-id": testId,
       style: [defaultStyles, style]
     }, restProps);
-
     return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
       to: href
     }), children) : React.createElement(StyledAnchor, _extends({}, commonProps, {
       href: href
     }), children);
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
-  }
-
-}
+  };
+  return LinkCore;
+}(React.Component);
 const styles = {};
 const sharedStyles = StyleSheet.create({
   shared: {
     cursor: "pointer",
     textDecoration: "none",
     outline: "none",
-    display: "inline-flex",
-    fontSize: 16,
-    lineHeight: "22px"
+    display: "inline-flex"
   }
 });
-
 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,
@@ -114,13 +151,11 @@ const _generateStyles = (inline, kind, light, visitable) => {
     }, defaultVisited),
     restingInline: _extends({
       color: defaultTextColor,
-      textDecoration: "underline currentcolor solid 1px",
-      textUnderlineOffset: 4
+      textDecoration: "underline currentcolor solid"
     }, defaultVisited),
     hover: _extends({
-      textDecoration: "underline currentcolor dashed 2px",
-      color: defaultTextColor,
-      textUnderlineOffset: 4
+      textDecoration: "underline currentcolor solid",
+      color: defaultTextColor
     }, defaultVisited),
     focus: _extends({
       color: defaultTextColor,
@@ -129,8 +164,7 @@ const _generateStyles = (inline, kind, light, visitable) => {
     }, defaultVisited),
     active: _extends({
       color: activeColor,
-      textDecoration: "underline currentcolor solid 1px",
-      textUnderlineOffset: 4
+      textDecoration: "underline currentcolor solid"
     }, activeVisited)
   };
   styles[buttonType] = StyleSheet.create(newStyles);
@@ -138,25 +172,28 @@ const _generateStyles = (inline, kind, light, visitable) => {
 };
 
 const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"];
-class Link extends React.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(_this$props, _excluded);
-
+      {
+        onClick,
+        beforeNav = undefined,
+        safeWithNav,
+        href,
+        skipClientNav,
+        children,
+        tabIndex,
+        onKeyDown,
+        onKeyUp,
+        target = undefined
+      } = _this$props,
+      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-
     if (beforeNav) {
       return React.createElement(ClickableBehavior, {
         disabled: false,
@@ -168,8 +205,7 @@ class Link extends React.Component {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp
       }, (state, _ref) => {
-        let childrenProps = _extends({}, _ref);
-
+        let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
         return React.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
           skipClientNav: skipClientNav,
           href: href,
@@ -188,8 +224,7 @@ class Link extends React.Component {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp
       }, (state, _ref2) => {
-        let childrenProps = _extends({}, _ref2);
-
+        let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
         return React.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
           skipClientNav: skipClientNav,
           href: href,
@@ -198,13 +233,12 @@ class Link extends React.Component {
         }), children);
       });
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-
-}
+  };
+  return Link;
+}(React.Component);
 Link.defaultProps = {
   inline: false,
   kind: "primary",

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import Link from "./components/link";
+export { Link as default };