@khanacademy/wonder-blocks-link 4.3.0 → 4.4.0

package/src/components/link-core.tsx

@@ -26,135 +26,132 @@ type Props = SharedProps &
 const StyledAnchor = addStyle("a");
 const StyledLink = addStyle(Link);
 
-const LinkCore = React.forwardRef(
-    (
-        props: Props,
-        ref: React.ForwardedRef<typeof Link | HTMLAnchorElement>,
-    ) => {
-        const renderInner = (router: any): React.ReactNode => {
-            const {
-                children,
-                skipClientNav,
-                focused,
-                hovered,
-                href,
-                inline = false,
-                kind = "primary",
-                light = false,
-                visitable = false,
-                pressed,
-                style,
-                testId,
-                waiting: _,
-                target,
-                startIcon,
-                endIcon,
-                ...restProps
-            } = props;
-
-            const linkStyles = _generateStyles(inline, kind, light, visitable);
-            const restingStyles = inline
-                ? linkStyles.restingInline
-                : linkStyles.resting;
-
-            const defaultStyles = [
-                sharedStyles.shared,
-                restingStyles,
-                pressed && linkStyles.active,
-                // A11y: The focus ring should always be present when the
-                // the link has focus, even the link is being hovered over.
-                // TODO(WB-1498): Udpate ClickableBehavior so that focus doesn't
-                // stop on mouseleave. We want the focus ring to remain on a
-                // focused link even after hovering and un-hovering on it.
-                !pressed && hovered && linkStyles.hover,
-                !pressed && focused && linkStyles.focus,
-            ];
-
-            const commonProps = {
-                "data-test-id": testId,
-                style: [defaultStyles, style],
-                target,
-                ...restProps,
-            } as const;
-
-            const linkUrl = new URL(href, window.location.origin);
-
-            const isExternalLink = linkUrl.origin !== window.location.origin;
-
-            const externalIconPath: IconAsset = {
-                small: "M14 6.5C14 6.63261 13.9473 6.75979 13.8536 6.85355C13.7598 6.94732 13.6326 7 13.5 7C13.3674 7 13.2402 6.94732 13.1464 6.85355C13.0527 6.75979 13 6.63261 13 6.5V3.7075L8.85437 7.85375C8.76055 7.94757 8.63331 8.00028 8.50062 8.00028C8.36794 8.00028 8.2407 7.94757 8.14688 7.85375C8.05306 7.75993 8.00035 7.63268 8.00035 7.5C8.00035 7.36732 8.05306 7.24007 8.14688 7.14625L12.2925 3H9.5C9.36739 3 9.24021 2.94732 9.14645 2.85355C9.05268 2.75979 9 2.63261 9 2.5C9 2.36739 9.05268 2.24021 9.14645 2.14645C9.24021 2.05268 9.36739 2 9.5 2H13.5C13.6326 2 13.7598 2.05268 13.8536 2.14645C13.9473 2.24021 14 2.36739 14 2.5V6.5ZM11.5 8C11.3674 8 11.2402 8.05268 11.1464 8.14645C11.0527 8.24021 11 8.36739 11 8.5V13H3V5H7.5C7.63261 5 7.75979 4.94732 7.85355 4.85355C7.94732 4.75979 8 4.63261 8 4.5C8 4.36739 7.94732 4.24021 7.85355 4.14645C7.75979 4.05268 7.63261 4 7.5 4H3C2.73478 4 2.48043 4.10536 2.29289 4.29289C2.10536 4.48043 2 4.73478 2 5V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H11C11.2652 14 11.5196 13.8946 11.7071 13.7071C11.8946 13.5196 12 13.2652 12 13V8.5C12 8.36739 11.9473 8.24021 11.8536 8.14645C11.7598 8.05268 11.6326 8 11.5 8Z",
-            };
-
-            const externalIcon = (
-                <Icon
-                    icon={externalIconPath}
-                    size="small"
-                    style={[
-                        linkContentStyles.endIcon,
-                        linkContentStyles.centered,
-                    ]}
-                    testId="external-icon"
-                />
-            );
-
-            const linkContent = (
-                <>
-                    {startIcon && (
-                        <Icon
-                            icon={startIcon}
-                            size="small"
-                            style={[
-                                linkContentStyles.startIcon,
-                                linkContentStyles.centered,
-                            ]}
-                            testId="start-icon"
-                            aria-hidden="true"
-                        />
-                    )}
-                    {children}
-                    {endIcon ? (
-                        <Icon
-                            icon={endIcon}
-                            size="small"
-                            style={[
-                                linkContentStyles.endIcon,
-                                linkContentStyles.centered,
-                            ]}
-                            testId="end-icon"
-                            aria-hidden="true"
-                        />
-                    ) : (
-                        isExternalLink && target === "_blank" && externalIcon
-                    )}
-                </>
-            );
-
-            return router && !skipClientNav && isClientSideUrl(href) ? (
-                <StyledLink
-                    {...commonProps}
-                    to={href}
-                    ref={ref as React.ForwardedRef<typeof Link>}
-                >
-                    {linkContent}
-                </StyledLink>
-            ) : (
-                <StyledAnchor
-                    {...commonProps}
-                    href={href}
-                    ref={ref as React.ForwardedRef<HTMLAnchorElement>}
-                >
-                    {linkContent}
-                </StyledAnchor>
-            );
+const LinkCore = React.forwardRef(function LinkCore(
+    props: Props,
+    ref: React.ForwardedRef<typeof Link | HTMLAnchorElement>,
+) {
+    const renderInner = (router: any): React.ReactNode => {
+        const {
+            children,
+            skipClientNav,
+            focused,
+            hovered,
+            href,
+            inline = false,
+            kind = "primary",
+            light = false,
+            visitable = false,
+            pressed,
+            style,
+            testId,
+            waiting: _,
+            target,
+            startIcon,
+            endIcon,
+            ...restProps
+        } = props;
+
+        const linkStyles = _generateStyles(inline, kind, light, visitable);
+        const restingStyles = inline
+            ? linkStyles.restingInline
+            : linkStyles.resting;
+
+        const defaultStyles = [
+            sharedStyles.shared,
+            restingStyles,
+            pressed && linkStyles.active,
+            // A11y: The focus ring should always be present when the
+            // the link has focus, even the link is being hovered over.
+            // TODO(WB-1498): Udpate ClickableBehavior so that focus doesn't
+            // stop on mouseleave. We want the focus ring to remain on a
+            // focused link even after hovering and un-hovering on it.
+            !pressed && hovered && linkStyles.hover,
+            !pressed && focused && linkStyles.focus,
+        ];
+
+        const commonProps = {
+            "data-test-id": testId,
+            style: [defaultStyles, style],
+            target,
+            ...restProps,
+        } as const;
+
+        const linkUrl = new URL(href, window.location.origin);
+
+        const isExternalLink = linkUrl.origin !== window.location.origin;
+
+        const externalIconPath: IconAsset = {
+            small: "M14 6.5C14 6.63261 13.9473 6.75979 13.8536 6.85355C13.7598 6.94732 13.6326 7 13.5 7C13.3674 7 13.2402 6.94732 13.1464 6.85355C13.0527 6.75979 13 6.63261 13 6.5V3.7075L8.85437 7.85375C8.76055 7.94757 8.63331 8.00028 8.50062 8.00028C8.36794 8.00028 8.2407 7.94757 8.14688 7.85375C8.05306 7.75993 8.00035 7.63268 8.00035 7.5C8.00035 7.36732 8.05306 7.24007 8.14688 7.14625L12.2925 3H9.5C9.36739 3 9.24021 2.94732 9.14645 2.85355C9.05268 2.75979 9 2.63261 9 2.5C9 2.36739 9.05268 2.24021 9.14645 2.14645C9.24021 2.05268 9.36739 2 9.5 2H13.5C13.6326 2 13.7598 2.05268 13.8536 2.14645C13.9473 2.24021 14 2.36739 14 2.5V6.5ZM11.5 8C11.3674 8 11.2402 8.05268 11.1464 8.14645C11.0527 8.24021 11 8.36739 11 8.5V13H3V5H7.5C7.63261 5 7.75979 4.94732 7.85355 4.85355C7.94732 4.75979 8 4.63261 8 4.5C8 4.36739 7.94732 4.24021 7.85355 4.14645C7.75979 4.05268 7.63261 4 7.5 4H3C2.73478 4 2.48043 4.10536 2.29289 4.29289C2.10536 4.48043 2 4.73478 2 5V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H11C11.2652 14 11.5196 13.8946 11.7071 13.7071C11.8946 13.5196 12 13.2652 12 13V8.5C12 8.36739 11.9473 8.24021 11.8536 8.14645C11.7598 8.05268 11.6326 8 11.5 8Z",
         };
 
-        return (
-            <__RouterContext.Consumer>
-                {(router) => renderInner(router)}
-            </__RouterContext.Consumer>
+        const externalIcon = (
+            <Icon
+                icon={externalIconPath}
+                size="small"
+                style={[linkContentStyles.endIcon, linkContentStyles.centered]}
+                testId="external-icon"
+            />
         );
-    },
-);
+
+        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 && startIconElement}
+                {children}
+                {endIcon
+                    ? endIconElement
+                    : isExternalLink && target === "_blank" && externalIcon}
+            </>
+        );
+
+        return router && !skipClientNav && isClientSideUrl(href) ? (
+            <StyledLink
+                {...commonProps}
+                to={href}
+                ref={ref as React.ForwardedRef<typeof Link>}
+            >
+                {linkContent}
+            </StyledLink>
+        ) : (
+            <StyledAnchor
+                {...commonProps}
+                href={href}
+                ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+            >
+                {linkContent}
+            </StyledAnchor>
+        );
+    };
+
+    return (
+        <__RouterContext.Consumer>
+            {(router) => renderInner(router)}
+        </__RouterContext.Consumer>
+    );
+});
 
 const styles: Record<string, any> = {};
 

package/src/components/link.tsx

@@ -4,8 +4,8 @@ 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.
@@ -145,13 +145,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>;
 };
 
 /**
@@ -172,113 +172,111 @@ export type SharedProps = AriaProps & {
  * </Link>
  * ```
  */
-const Link = React.forwardRef(
-    (
-        props: SharedProps,
-        ref: React.ForwardedRef<typeof ReactRouterLink | HTMLAnchorElement>,
-    ) => {
-        const {
-            onClick,
-            beforeNav = undefined,
-            safeWithNav,
+const Link = React.forwardRef(function Link(
+    props: SharedProps,
+    ref: React.ForwardedRef<typeof ReactRouterLink | HTMLAnchorElement>,
+) {
+    const {
+        onClick,
+        beforeNav = undefined,
+        safeWithNav,
+        href,
+        skipClientNav,
+        children,
+        tabIndex,
+        onKeyDown,
+        onKeyUp,
+        target = undefined,
+        inline = false,
+        kind = "primary",
+        light = false,
+        visitable = false,
+        ...sharedProps
+    } = props;
+
+    const renderClickableBehavior = (router: any): React.ReactNode => {
+        const ClickableBehavior = getClickableBehavior(
             href,
             skipClientNav,
-            children,
-            tabIndex,
-            onKeyDown,
-            onKeyUp,
-            target = undefined,
-            inline = false,
-            kind = "primary",
-            light = false,
-            visitable = false,
-            ...sharedProps
-        } = props;
+            router,
+        );
 
-        const renderClickableBehavior = (router: any): React.ReactNode => {
-            const ClickableBehavior = getClickableBehavior(
-                href,
-                skipClientNav,
-                router,
+        if (beforeNav) {
+            return (
+                <ClickableBehavior
+                    disabled={false}
+                    href={href}
+                    role="link"
+                    onClick={onClick}
+                    beforeNav={beforeNav}
+                    safeWithNav={safeWithNav}
+                    onKeyDown={onKeyDown}
+                    onKeyUp={onKeyUp}
+                >
+                    {(state, {...childrenProps}) => {
+                        return (
+                            <LinkCore
+                                {...sharedProps}
+                                {...state}
+                                {...childrenProps}
+                                skipClientNav={skipClientNav}
+                                href={href}
+                                target={target}
+                                tabIndex={tabIndex}
+                                inline={inline}
+                                kind={kind}
+                                light={light}
+                                visitable={visitable}
+                                ref={ref}
+                            >
+                                {children}
+                            </LinkCore>
+                        );
+                    }}
+                </ClickableBehavior>
             );
+        } else {
+            return (
+                <ClickableBehavior
+                    disabled={false}
+                    href={href}
+                    role="link"
+                    onClick={onClick}
+                    safeWithNav={safeWithNav}
+                    target={target}
+                    onKeyDown={onKeyDown}
+                    onKeyUp={onKeyUp}
+                >
+                    {(state, {...childrenProps}) => {
+                        return (
+                            <LinkCore
+                                {...sharedProps}
+                                {...state}
+                                {...childrenProps}
+                                skipClientNav={skipClientNav}
+                                href={href}
+                                target={target}
+                                tabIndex={tabIndex}
+                                inline={inline}
+                                kind={kind}
+                                light={light}
+                                visitable={visitable}
+                                ref={ref}
+                            >
+                                {children}
+                            </LinkCore>
+                        );
+                    }}
+                </ClickableBehavior>
+            );
+        }
+    };
 
-            if (beforeNav) {
-                return (
-                    <ClickableBehavior
-                        disabled={false}
-                        href={href}
-                        role="link"
-                        onClick={onClick}
-                        beforeNav={beforeNav}
-                        safeWithNav={safeWithNav}
-                        onKeyDown={onKeyDown}
-                        onKeyUp={onKeyUp}
-                    >
-                        {(state, {...childrenProps}) => {
-                            return (
-                                <LinkCore
-                                    {...sharedProps}
-                                    {...state}
-                                    {...childrenProps}
-                                    skipClientNav={skipClientNav}
-                                    href={href}
-                                    target={target}
-                                    tabIndex={tabIndex}
-                                    inline={inline}
-                                    kind={kind}
-                                    light={light}
-                                    visitable={visitable}
-                                    ref={ref}
-                                >
-                                    {children}
-                                </LinkCore>
-                            );
-                        }}
-                    </ClickableBehavior>
-                );
-            } else {
-                return (
-                    <ClickableBehavior
-                        disabled={false}
-                        href={href}
-                        role="link"
-                        onClick={onClick}
-                        safeWithNav={safeWithNav}
-                        target={target}
-                        onKeyDown={onKeyDown}
-                        onKeyUp={onKeyUp}
-                    >
-                        {(state, {...childrenProps}) => {
-                            return (
-                                <LinkCore
-                                    {...sharedProps}
-                                    {...state}
-                                    {...childrenProps}
-                                    skipClientNav={skipClientNav}
-                                    href={href}
-                                    target={target}
-                                    tabIndex={tabIndex}
-                                    inline={inline}
-                                    kind={kind}
-                                    light={light}
-                                    visitable={visitable}
-                                    ref={ref}
-                                >
-                                    {children}
-                                </LinkCore>
-                            );
-                        }}
-                    </ClickableBehavior>
-                );
-            }
-        };
-
-        return (
-            <__RouterContext.Consumer>
-                {(router) => renderClickableBehavior(router)}
-            </__RouterContext.Consumer>
-        );
-    },
-);
+    return (
+        <__RouterContext.Consumer>
+            {(router) => renderClickableBehavior(router)}
+        </__RouterContext.Consumer>
+    );
+});
 
 export default Link;