@khanacademy/wonder-blocks-link 4.3.0 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @khanacademy/wonder-blocks-link
 
+## 4.4.0
+
+### Minor Changes
+
+-   ec6a33a4: Forward refs in Icon
+    Use Icon type instead of IconAsset for startIcon and endIcon in Link
+
+### Patch Changes
+
+-   Updated dependencies [ec6a33a4]
+-   Updated dependencies [1344436f]
+    -   @khanacademy/wonder-blocks-icon@2.1.0
+    -   @khanacademy/wonder-blocks-core@5.4.0
+    -   @khanacademy/wonder-blocks-clickable@3.1.3
+
+## 4.3.1
+
+### Patch Changes
+
+-   9f3752d4: Used named functions in componenets with forwarded refs
+-   Updated dependencies [9f3752d4]
+    -   @khanacademy/wonder-blocks-core@5.3.1
+    -   @khanacademy/wonder-blocks-clickable@3.1.2
+    -   @khanacademy/wonder-blocks-icon@2.0.15
+
 ## 4.3.0
 
 ### Minor Changes

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

@@ -824,8 +824,26 @@ declare const LinkCore: React.ForwardRefExoticComponent<Readonly<import("../../.
     target?: "_blank" | undefined;
     beforeNav?: (() => Promise<unknown>) | undefined;
     title?: string | undefined;
-    startIcon?: IconAsset | undefined;
-    endIcon?: IconAsset | undefined;
+    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: IconAsset;
+        size?: keyof IconAsset | undefined;
+        style?: import("@khanacademy/wonder-blocks-core").StyleType;
+        className?: string | undefined;
+        testId?: string | undefined;
+    } & React.RefAttributes<SVGSVGElement>>, string | React.JSXElementConstructor<any>> | undefined;
+    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: IconAsset;
+        size?: keyof IconAsset | undefined;
+        style?: import("@khanacademy/wonder-blocks-core").StyleType;
+        className?: string | undefined;
+        testId?: string | undefined;
+    } & React.RefAttributes<SVGSVGElement>>, string | React.JSXElementConstructor<any>> | undefined;
 } & Readonly<{
     onClick: (e: React.SyntheticEvent<Element, Event>) => unknown;
     onMouseEnter: (e: React.MouseEvent<Element, MouseEvent>) => unknown;

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

@@ -2775,8 +2775,42 @@ declare var LinkCore: React.ForwardRefExoticComponent<{|
     target?: "_blank" | void,
     beforeNav?: (() => Promise<mixed>) | void,
     title?: string | void,
-    startIcon?: IconAsset | void,
-    endIcon?: IconAsset | void,
+    startIcon?: React.Element<
+      React.ForwardRefExoticComponent<{|
+        ...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
+        ...$ReadOnly<{|
+          role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
+        |}>,
+        ...{|
+          color?: string | void,
+          icon: IconAsset,
+          size?: $Keys<IconAsset> | void,
+          style?: $Flowgen$Import$_40_khanacademy_2f_wonder_2d_blocks_2d_core.StyleType,
+          className?: string | void,
+          testId?: string | void,
+        |},
+        ...React.RefAttributes<SVGSVGElement>,
+      |}>,
+      string | React.JSXElementConstructor<any>
+    > | void,
+    endIcon?: React.Element<
+      React.ForwardRefExoticComponent<{|
+        ...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
+        ...$ReadOnly<{|
+          role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
+        |}>,
+        ...{|
+          color?: string | void,
+          icon: IconAsset,
+          size?: $Keys<IconAsset> | void,
+          style?: $Flowgen$Import$_40_khanacademy_2f_wonder_2d_blocks_2d_core.StyleType,
+          className?: string | void,
+          testId?: string | void,
+        |},
+        ...React.RefAttributes<SVGSVGElement>,
+      |}>,
+      string | React.JSXElementConstructor<any>
+    > | void,
   |},
   ...$ReadOnly<{|
     onClick: (e: SyntheticEvent<Element>) => mixed,

package/dist/components/link.d.ts

@@ -1,8 +1,8 @@
 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 & {
     /**
      * Text to appear on the link. It can be a plain text or a Typography element.
@@ -124,13 +124,13 @@ 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>;
 };
 /**
  * Reusable link component.
@@ -273,12 +273,30 @@ declare const Link: React.ForwardRefExoticComponent<Readonly<import("../../../wo
     /**
      * An optional icon displayed before the link label.
      */
-    startIcon?: IconAsset | undefined;
+    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?: IconAsset | undefined;
+    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>>;
 export default Link;

package/dist/components/link.js.flow

@@ -5,11 +5,12 @@
  * @flow
  */
 import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types from "../../../wonder-blocks-core/src/util/aria-types";
+import * as $Flowgen$Import$_40_khanacademy_2f_wonder_2d_blocks_2d_icon from "@khanacademy/wonder-blocks-icon";
 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,
   ...{|
@@ -153,14 +154,14 @@ export type SharedProps = {|
     /**
      * An optional icon displayed before the link label.
      */
-    startIcon?: IconAsset,
+    startIcon?: React.Element<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.Element<typeof Icon>,
   |},
 |};
 /**
@@ -327,14 +328,48 @@ declare var Link: React.ForwardRefExoticComponent<{|
     /**
      * An optional icon displayed before the link label.
      */
-    startIcon?: IconAsset | void,
+    startIcon?: React.Element<
+      React.ForwardRefExoticComponent<{|
+        ...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
+        ...$ReadOnly<{|
+          role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
+        |}>,
+        ...{|
+          color?: string | void,
+          icon: $Flowgen$Import$_40_khanacademy_2f_wonder_2d_blocks_2d_icon.IconAsset,
+          size?: $Keys<$Flowgen$Import$_40_khanacademy_2f_wonder_2d_blocks_2d_icon.IconAsset> | void,
+          style?: StyleType,
+          className?: string | void,
+          testId?: string | void,
+        |},
+        ...React.RefAttributes<SVGSVGElement>,
+      |}>,
+      string | React.JSXElementConstructor<any>
+    > | void,
 
     /**
      * An optional icon displayed after the link label.
      * If `target="_blank"` and `endIcon` is passed in, `endIcon` will override
      * the default `externalIcon`.
      */
-    endIcon?: IconAsset | void,
+    endIcon?: React.Element<
+      React.ForwardRefExoticComponent<{|
+        ...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
+        ...$ReadOnly<{|
+          role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
+        |}>,
+        ...{|
+          color?: string | void,
+          icon: $Flowgen$Import$_40_khanacademy_2f_wonder_2d_blocks_2d_icon.IconAsset,
+          size?: $Keys<$Flowgen$Import$_40_khanacademy_2f_wonder_2d_blocks_2d_icon.IconAsset> | void,
+          style?: StyleType,
+          className?: string | void,
+          testId?: string | void,
+        |},
+        ...React.RefAttributes<SVGSVGElement>,
+      |}>,
+      string | React.JSXElementConstructor<any>
+    > | void,
   |},
   ...React.RefAttributes<HTMLAnchorElement | typeof ReactRouterLink>,
 |}>;

package/dist/es/index.js

@@ -43,7 +43,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting", "target", "startIcon", "endIcon"];
 const StyledAnchor = addStyle("a");
 const StyledLink = addStyle(Link$1);
-const LinkCore = React.forwardRef((props, ref) => {
+const LinkCore = React.forwardRef(function LinkCore(props, ref) {
   const renderInner = router => {
     const {
         children,
@@ -82,19 +82,23 @@ const LinkCore = React.forwardRef((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
@@ -195,7 +199,7 @@ const _generateStyles = (inline, kind, light, visitable) => {
 };
 
 const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target", "inline", "kind", "light", "visitable"];
-const Link = React.forwardRef((props, ref) => {
+const Link = React.forwardRef(function Link(props, ref) {
   const {
       onClick,
       beforeNav = undefined,

package/dist/index.js

@@ -70,7 +70,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting", "target", "startIcon", "endIcon"];
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
-const LinkCore = React__namespace.forwardRef((props, ref) => {
+const LinkCore = React__namespace.forwardRef(function LinkCore(props, ref) {
   const renderInner = router => {
     const {
         children,
@@ -109,19 +109,23 @@ const LinkCore = React__namespace.forwardRef((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
@@ -222,7 +226,7 @@ const _generateStyles = (inline, kind, light, visitable) => {
 };
 
 const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target", "inline", "kind", "light", "visitable"];
-const Link = React__namespace.forwardRef((props, ref) => {
+const Link = React__namespace.forwardRef(function Link(props, ref) {
   const {
       onClick,
       beforeNav = undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,10 +16,10 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.1.1",
+    "@khanacademy/wonder-blocks-clickable": "^3.1.3",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.3.0",
-    "@khanacademy/wonder-blocks-icon": "^2.0.14",
+    "@khanacademy/wonder-blocks-core": "^5.4.0",
+    "@khanacademy/wonder-blocks-icon": "^2.1.0",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1"
   },
   "peerDependencies": {

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>,
             );