@khanacademy/wonder-blocks-link 4.4.0 → 5.0.0

package/dist/components/link.d.ts

@@ -3,7 +3,7 @@ import { Link as ReactRouterLink } from "react-router-dom";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import Icon from "@khanacademy/wonder-blocks-icon";
 import type { Typography } from "@khanacademy/wonder-blocks-typography";
-export type SharedProps = AriaProps & {
+type CommonProps = AriaProps & {
     /**
      * Text to appear on the link. It can be a plain text or a Typography element.
      */
@@ -96,6 +96,22 @@ export type SharedProps = AriaProps & {
      * Respond to raw "keyup" event.
      */
     onKeyUp?: (e: React.KeyboardEvent) => unknown;
+    /**
+     * An optional title attribute.
+     */
+    title?: string;
+    /**
+     * An optional icon displayed before the link label.
+     */
+    startIcon?: React.ReactElement<typeof Icon>;
+    /**
+     * An optional icon displayed after the link label.
+     * If `target="_blank"` and `endIcon` is passed in, `endIcon` will override
+     * the default `externalIcon`.
+     */
+    endIcon?: React.ReactElement<typeof Icon>;
+};
+export type SharedProps = (CommonProps & {
     /**
      * A target destination window for a link to open in.  We only support
      * "_blank" which opens the URL in a new tab.
@@ -103,6 +119,8 @@ export type SharedProps = AriaProps & {
      * TODO(WB-1262): only allow this prop when `href` is also set.t
      */
     target?: "_blank";
+    beforeNav?: never;
+}) | (CommonProps & {
     /**
      * Run async code before navigating to the URL passed to `href`. If the
      * promise returned rejects then navigation will not occur.
@@ -117,21 +135,8 @@ export type SharedProps = AriaProps & {
      * navigation.
      */
     beforeNav?: () => Promise<unknown>;
-    /**
-     * An optional title attribute.
-     */
-    title?: string;
-    /**
-     * An optional icon displayed before the link label.
-     */
-    startIcon?: React.ReactElement<typeof Icon>;
-    /**
-     * An optional icon displayed after the link label.
-     * If `target="_blank"` and `endIcon` is passed in, `endIcon` will override
-     * the default `externalIcon`.
-     */
-    endIcon?: React.ReactElement<typeof Icon>;
-};
+    target?: never;
+});
 /**
  * Reusable link component.
  *
@@ -150,153 +155,5 @@ export type SharedProps = AriaProps & {
  * </Link>
  * ```
  */
-declare const Link: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
-}> & {
-    /**
-     * 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 | undefined;
-    /**
-     * 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 | undefined;
-    /**
-     * Kind of Link. Note: Secondary light Links are not supported.
-     */
-    kind?: "primary" | "secondary" | undefined;
-    /**
-     * Whether the button is on a dark/colored background.
-     */
-    light?: boolean | undefined;
-    /**
-     * Whether the link should change color once it's visited.
-     * secondary or primary (light) links are not allowed to be visitable.
-     */
-    visitable?: boolean | undefined;
-    /**
-     * 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 | undefined;
-    /**
-     * Set the tabindex attribute on the rendered element.
-     */
-    tabIndex?: number | undefined;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string | undefined;
-    /**
-     * 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 | undefined;
-    /**
-     * Custom styles.
-     */
-    style?: StyleType;
-    /**
-     * Adds CSS classes to the Link.
-     */
-    className?: string | undefined;
-    /**
-     * 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) | undefined;
-    /**
-     * 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>) | undefined;
-    /**
-     * Respond to raw "keydown" event.
-     */
-    onKeyDown?: ((e: React.KeyboardEvent) => unknown) | undefined;
-    /**
-     * Respond to raw "keyup" event.
-     */
-    onKeyUp?: ((e: React.KeyboardEvent) => unknown) | undefined;
-    /**
-     * 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" | undefined;
-    /**
-     * 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>) | undefined;
-    /**
-     * An optional title attribute.
-     */
-    title?: string | undefined;
-    /**
-     * An optional icon displayed before the link label.
-     */
-    startIcon?: React.ReactElement<React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-        role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
-    }> & {
-        color?: string | undefined;
-        icon: import("@khanacademy/wonder-blocks-icon").IconAsset;
-        size?: keyof import("@khanacademy/wonder-blocks-icon").IconAsset | undefined;
-        style?: StyleType;
-        className?: string | undefined;
-        testId?: string | undefined;
-    } & React.RefAttributes<SVGSVGElement>>, string | React.JSXElementConstructor<any>> | undefined;
-    /**
-     * An optional icon displayed after the link label.
-     * If `target="_blank"` and `endIcon` is passed in, `endIcon` will override
-     * the default `externalIcon`.
-     */
-    endIcon?: React.ReactElement<React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-        role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
-    }> & {
-        color?: string | undefined;
-        icon: import("@khanacademy/wonder-blocks-icon").IconAsset;
-        size?: keyof import("@khanacademy/wonder-blocks-icon").IconAsset | undefined;
-        style?: StyleType;
-        className?: string | undefined;
-        testId?: string | undefined;
-    } & React.RefAttributes<SVGSVGElement>>, string | React.JSXElementConstructor<any>> | undefined;
-} & React.RefAttributes<HTMLAnchorElement | typeof ReactRouterLink>>;
+declare const Link: React.ForwardRefExoticComponent<SharedProps & React.RefAttributes<HTMLAnchorElement | typeof ReactRouterLink>>;
 export default Link;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "4.4.0",
+  "version": "5.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,10 +16,10 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.1.3",
+    "@khanacademy/wonder-blocks-clickable": "^4.0.0",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.4.0",
-    "@khanacademy/wonder-blocks-icon": "^2.1.0",
+    "@khanacademy/wonder-blocks-core": "^6.0.0",
+    "@khanacademy/wonder-blocks-icon": "^2.1.1",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1"
   },
   "peerDependencies": {
@@ -29,6 +29,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.7"
+    "@khanacademy/wb-dev-build-settings": "^1.0.0"
   }
-}
+}

package/src/components/__tests__/link.typestest.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 
 import Link from "../link";
 
-// TODO(FEI-5000): Re-enable test after updating props to be conditional.
-// <Link beforeNav={() => Promise.resolve()}>Hello, world!</Link>;
+// @ts-expect-error - href must be used with safeWithNav
+<Link beforeNav={() => Promise.resolve()}>Hello, world!</Link>;
 
-// TODO(FEI-5000): Re-enable test after updating props to be conditional.
-// <Link safeWithNav={() => Promise.resolve()}>Hello, world!</Link>;
+// @ts-expect-error - href must be used with safeWithNav
+<Link safeWithNav={() => Promise.resolve()}>Hello, world!</Link>;
 
 // It's okay to use onClick with href
 <Link href="/foo" onClick={() => {}}>
@@ -21,6 +21,11 @@ import Link from "../link";
     Hello, world!
 </Link>;
 
+// @ts-expect-error - `target="_blank"` cannot beused with `beforeNav`
+<Link href="/foo" target="_blank" beforeNav={() => Promise.resolve()}>
+    Hello, world!
+</Link>;
+
 // All three of these props can be used together
 <Link
     href="/foo"

package/src/components/link.tsx

@@ -8,8 +8,7 @@ import Icon from "@khanacademy/wonder-blocks-icon";
 import type {Typography} from "@khanacademy/wonder-blocks-typography";
 import LinkCore from "./link-core";
 
-// TODO(FEI-5000): Convert back to conditional props after TS migration is complete.
-export type SharedProps = AriaProps & {
+type CommonProps = AriaProps & {
     /**
      * Text to appear on the link. It can be a plain text or a Typography element.
      */
@@ -117,27 +116,6 @@ export type SharedProps = AriaProps & {
      * 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>;
     /**
      * An optional title attribute.
      */
@@ -154,6 +132,37 @@ export type SharedProps = AriaProps & {
     endIcon?: React.ReactElement<typeof Icon>;
 };
 
+export type SharedProps =
+    | (CommonProps & {
+          /**
+           * 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";
+
+          beforeNav?: never; // disallow beforeNav when target="_blank"
+      })
+    | (CommonProps & {
+          /**
+           * 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>;
+
+          target?: never; // disallow target="_blank" when using beforeNav
+      });
+
 /**
  * Reusable link component.
  *