@khanacademy/wonder-blocks-link 4.3.1 → 5.0.0

package/dist/components/link.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
 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";
-import type { IconAsset } from "@khanacademy/wonder-blocks-icon";
-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?: IconAsset;
-    /**
-     * An optional icon displayed after the link label.
-     * If `target="_blank"` and `endIcon` is passed in, `endIcon` will override
-     * the default `externalIcon`.
-     */
-    endIcon?: IconAsset;
-};
+    target?: never;
+});
 /**
  * Reusable link component.
  *
@@ -150,135 +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?: IconAsset | undefined;
-    /**
-     * An optional icon displayed after the link label.
-     * If `target="_blank"` and `endIcon` is passed in, `endIcon` will override
-     * the default `externalIcon`.
-     */
-    endIcon?: IconAsset | undefined;
-} & React.RefAttributes<HTMLAnchorElement | typeof ReactRouterLink>>;
+declare const Link: React.ForwardRefExoticComponent<SharedProps & React.RefAttributes<HTMLAnchorElement | typeof ReactRouterLink>>;
 export default Link;

package/dist/es/index.js

@@ -82,19 +82,23 @@ const LinkCore = React.forwardRef(function LinkCore(props, ref) {
       style: [linkContentStyles.endIcon, linkContentStyles.centered],
       testId: "external-icon"
     });
-    const linkContent = React.createElement(React.Fragment, null, startIcon && React.createElement(Icon, {
-      icon: startIcon,
-      size: "small",
-      style: [linkContentStyles.startIcon, linkContentStyles.centered],
-      testId: "start-icon",
-      "aria-hidden": "true"
-    }), children, endIcon ? React.createElement(Icon, {
-      icon: endIcon,
-      size: "small",
-      style: [linkContentStyles.endIcon, linkContentStyles.centered],
-      testId: "end-icon",
-      "aria-hidden": "true"
-    }) : isExternalLink && target === "_blank" && externalIcon);
+    let startIconElement;
+    let endIconElement;
+    if (startIcon) {
+      startIconElement = React.cloneElement(startIcon, _extends({
+        style: [linkContentStyles.startIcon, linkContentStyles.centered],
+        testId: "start-icon",
+        "aria-hidden": "true"
+      }, startIcon.props));
+    }
+    if (endIcon) {
+      endIconElement = React.cloneElement(endIcon, _extends({
+        style: [linkContentStyles.endIcon, linkContentStyles.centered],
+        testId: "end-icon",
+        "aria-hidden": "true"
+      }, endIcon.props));
+    }
+    const linkContent = React.createElement(React.Fragment, null, startIcon && startIconElement, children, endIcon ? endIconElement : isExternalLink && target === "_blank" && externalIcon);
     return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
       to: href,
       ref: ref

package/dist/index.js

@@ -109,19 +109,23 @@ const LinkCore = React__namespace.forwardRef(function LinkCore(props, ref) {
       style: [linkContentStyles.endIcon, linkContentStyles.centered],
       testId: "external-icon"
     });
-    const linkContent = React__namespace.createElement(React__namespace.Fragment, null, startIcon && React__namespace.createElement(Icon__default["default"], {
-      icon: startIcon,
-      size: "small",
-      style: [linkContentStyles.startIcon, linkContentStyles.centered],
-      testId: "start-icon",
-      "aria-hidden": "true"
-    }), children, endIcon ? React__namespace.createElement(Icon__default["default"], {
-      icon: endIcon,
-      size: "small",
-      style: [linkContentStyles.endIcon, linkContentStyles.centered],
-      testId: "end-icon",
-      "aria-hidden": "true"
-    }) : isExternalLink && target === "_blank" && externalIcon);
+    let startIconElement;
+    let endIconElement;
+    if (startIcon) {
+      startIconElement = React__namespace.cloneElement(startIcon, _extends({
+        style: [linkContentStyles.startIcon, linkContentStyles.centered],
+        testId: "start-icon",
+        "aria-hidden": "true"
+      }, startIcon.props));
+    }
+    if (endIcon) {
+      endIconElement = React__namespace.cloneElement(endIcon, _extends({
+        style: [linkContentStyles.endIcon, linkContentStyles.centered],
+        testId: "end-icon",
+        "aria-hidden": "true"
+      }, endIcon.props));
+    }
+    const linkContent = React__namespace.createElement(React__namespace.Fragment, null, startIcon && startIconElement, children, endIcon ? endIconElement : isExternalLink && target === "_blank" && externalIcon);
     return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
       to: href,
       ref: ref

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "4.3.1",
+  "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.2",
+    "@khanacademy/wonder-blocks-clickable": "^4.0.0",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.3.1",
-    "@khanacademy/wonder-blocks-icon": "^2.0.15",
+    "@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.test.tsx

@@ -3,7 +3,7 @@ import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {fireEvent, render, screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import {icons} from "@khanacademy/wonder-blocks-icon";
+import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
 
 import Link from "../link";
 
@@ -412,7 +412,10 @@ describe("Link", () => {
         test("render icon with link when startIcon prop is passed in", () => {
             // Arrange
             render(
-                <Link href="https://www.khanacademy.org/" startIcon={icons.add}>
+                <Link
+                    href="https://www.khanacademy.org/"
+                    startIcon={<Icon icon={icons.add} />}
+                >
                     Add new item
                 </Link>,
             );
@@ -440,7 +443,10 @@ describe("Link", () => {
         test("startIcon prop passed down correctly", () => {
             // Arrange
             render(
-                <Link href="https://www.khanacademy.org/" startIcon={icons.add}>
+                <Link
+                    href="https://www.khanacademy.org/"
+                    startIcon={<Icon icon={icons.add} />}
+                >
                     Add new item
                 </Link>,
             );
@@ -461,7 +467,7 @@ describe("Link", () => {
             render(
                 <Link
                     href="https://www.khanacademy.org/"
-                    endIcon={icons.caretRight}
+                    endIcon={<Icon icon={icons.caretRight} />}
                 >
                     Click to go back
                 </Link>,
@@ -492,7 +498,7 @@ describe("Link", () => {
             render(
                 <Link
                     href="https://www.google.com/"
-                    endIcon={icons.caretRight}
+                    endIcon={<Icon icon={icons.caretRight} />}
                     target="_blank"
                 >
                     Open a new tab
@@ -511,7 +517,7 @@ describe("Link", () => {
             render(
                 <Link
                     href="https://www.google.com/"
-                    endIcon={icons.caretRight}
+                    endIcon={<Icon icon={icons.caretRight} />}
                     target="_blank"
                 >
                     Open a new tab
@@ -530,7 +536,7 @@ describe("Link", () => {
         test("endIcon prop passed down correctly", () => {
             // Arrange
             render(
-                <Link href="/" endIcon={icons.caretRight}>
+                <Link href="/" endIcon={<Icon icon={icons.caretRight} />}>
                     Click to go back
                 </Link>,
             );

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-core.tsx

@@ -93,35 +93,37 @@ const LinkCore = React.forwardRef(function LinkCore(
             />
         );
 
+        let startIconElement;
+        let endIconElement;
+
+        if (startIcon) {
+            startIconElement = React.cloneElement(startIcon, {
+                style: [
+                    linkContentStyles.startIcon,
+                    linkContentStyles.centered,
+                ],
+                testId: "start-icon",
+                "aria-hidden": "true",
+                ...startIcon.props,
+            } as Partial<React.ComponentProps<typeof Icon>>);
+        }
+
+        if (endIcon) {
+            endIconElement = React.cloneElement(endIcon, {
+                style: [linkContentStyles.endIcon, linkContentStyles.centered],
+                testId: "end-icon",
+                "aria-hidden": "true",
+                ...endIcon.props,
+            } as Partial<React.ComponentProps<typeof Icon>>);
+        }
+
         const linkContent = (
             <>
-                {startIcon && (
-                    <Icon
-                        icon={startIcon}
-                        size="small"
-                        style={[
-                            linkContentStyles.startIcon,
-                            linkContentStyles.centered,
-                        ]}
-                        testId="start-icon"
-                        aria-hidden="true"
-                    />
-                )}
+                {startIcon && startIconElement}
                 {children}
-                {endIcon ? (
-                    <Icon
-                        icon={endIcon}
-                        size="small"
-                        style={[
-                            linkContentStyles.endIcon,
-                            linkContentStyles.centered,
-                        ]}
-                        testId="end-icon"
-                        aria-hidden="true"
-                    />
-                ) : (
-                    isExternalLink && target === "_blank" && externalIcon
-                )}
+                {endIcon
+                    ? endIconElement
+                    : isExternalLink && target === "_blank" && externalIcon}
             </>
         );
 

package/src/components/link.tsx

@@ -4,12 +4,11 @@ import {Link as ReactRouterLink} from "react-router-dom";
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+import Icon from "@khanacademy/wonder-blocks-icon";
 import type {Typography} from "@khanacademy/wonder-blocks-typography";
-import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 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.
      */
@@ -145,15 +123,46 @@ export type SharedProps = AriaProps & {
     /**
      * An optional icon displayed before the link label.
      */
-    startIcon?: IconAsset;
+    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?: IconAsset;
+    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.
  *