@khanacademy/wonder-blocks-link 4.2.8 → 4.3.0

package/dist/index.js

@@ -70,27 +70,26 @@ 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);
-class LinkCore extends React__namespace.Component {
-  renderInner(router) {
-    const _this$props = this.props,
-      {
+const LinkCore = React__namespace.forwardRef((props, ref) => {
+  const renderInner = router => {
+    const {
         children,
         skipClientNav,
         focused,
         hovered,
         href,
-        inline,
-        kind,
-        light,
-        visitable,
+        inline = false,
+        kind = "primary",
+        light = false,
+        visitable = false,
         pressed,
         style,
         testId,
         target,
         startIcon,
         endIcon
-      } = _this$props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+      } = props,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
     const linkStyles = _generateStyles(inline, kind, light, visitable);
     const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
     const defaultStyles = [sharedStyles.shared, restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
@@ -124,15 +123,15 @@ class LinkCore extends React__namespace.Component {
       "aria-hidden": "true"
     }) : isExternalLink && target === "_blank" && externalIcon);
     return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
-      to: href
+      to: href,
+      ref: ref
     }), linkContent) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
-      href: href
+      href: href,
+      ref: ref
     }), linkContent);
-  }
-  render() {
-    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderInner(router));
-  }
-}
+  };
+  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderInner(router));
+});
 const styles = {};
 const linkContentStyles = aphrodite.StyleSheet.create({
   startIcon: {
@@ -222,23 +221,26 @@ const _generateStyles = (inline, kind, light, visitable) => {
   return styles[buttonType];
 };
 
-const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"];
-class Link extends React__namespace.Component {
-  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);
+const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target", "inline", "kind", "light", "visitable"];
+const Link = React__namespace.forwardRef((props, ref) => {
+  const {
+      onClick,
+      beforeNav = undefined,
+      safeWithNav,
+      href,
+      skipClientNav,
+      children,
+      tabIndex,
+      onKeyDown,
+      onKeyUp,
+      target = undefined,
+      inline = false,
+      kind = "primary",
+      light = false,
+      visitable = false
+    } = props,
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const renderClickableBehavior = router => {
     const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
     if (beforeNav) {
       return React__namespace.createElement(ClickableBehavior, {
@@ -256,7 +258,12 @@ class Link extends React__namespace.Component {
           skipClientNav: skipClientNav,
           href: href,
           target: target,
-          tabIndex: tabIndex
+          tabIndex: tabIndex,
+          inline: inline,
+          kind: kind,
+          light: light,
+          visitable: visitable,
+          ref: ref
         }), children);
       });
     } else {
@@ -275,20 +282,17 @@ class Link extends React__namespace.Component {
           skipClientNav: skipClientNav,
           href: href,
           target: target,
-          tabIndex: tabIndex
+          tabIndex: tabIndex,
+          inline: inline,
+          kind: kind,
+          light: light,
+          visitable: visitable,
+          ref: ref
         }), children);
       });
     }
-  }
-  render() {
-    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-}
-Link.defaultProps = {
-  inline: false,
-  kind: "primary",
-  light: false,
-  visitable: false
-};
+  };
+  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+});
 
 module.exports = Link;

package/package.json

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

package/src/components/link-core.tsx

@@ -26,121 +26,135 @@ type Props = SharedProps &
 const StyledAnchor = addStyle("a");
 const StyledLink = addStyle(Link);
 
-export default class LinkCore extends React.Component<Props> {
-    renderInner(router: any): React.ReactNode {
-        const {
-            children,
-            skipClientNav,
-            focused,
-            hovered,
-            href,
-            inline,
-            kind,
-            light,
-            visitable,
-            pressed,
-            style,
-            testId,
-            waiting: _,
-            target,
-            startIcon,
-            endIcon,
-            ...restProps
-        } = this.props;
+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 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 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 commonProps = {
+                "data-test-id": testId,
+                style: [defaultStyles, style],
+                target,
+                ...restProps,
+            } as const;
 
-        const linkUrl = new URL(href, window.location.origin);
+            const linkUrl = new URL(href, window.location.origin);
 
-        const isExternalLink = linkUrl.origin !== 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 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 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
-                )}
-            </>
-        );
+            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}>
-                {linkContent}
-            </StyledLink>
-        ) : (
-            <StyledAnchor {...commonProps} href={href}>
-                {linkContent}
-            </StyledAnchor>
-        );
-    }
+            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>
+            );
+        };
 
-    render(): React.ReactNode {
         return (
             <__RouterContext.Consumer>
-                {(router) => this.renderInner(router)}
+                {(router) => renderInner(router)}
             </__RouterContext.Consumer>
         );
-    }
-}
+    },
+);
 
 const styles: Record<string, any> = {};
 
@@ -276,3 +290,5 @@ const _generateStyles = (
     styles[buttonType] = StyleSheet.create(newStyles);
     return styles[buttonType];
 };
+
+export default LinkCore;

package/src/components/link.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import {__RouterContext} from "react-router";
+import {Link as ReactRouterLink} from "react-router-dom";
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
@@ -26,20 +27,20 @@ export type SharedProps = AriaProps & {
      * This styles the link with an underline to distinguish it
      * from surrounding text.
      */
-    inline: boolean;
+    inline?: boolean;
     /**
      * Kind of Link. Note: Secondary light Links are not supported.
      */
-    kind: "primary" | "secondary";
+    kind?: "primary" | "secondary";
     /**
      * Whether the button is on a dark/colored background.
      */
-    light: boolean;
+    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;
+    visitable?: boolean;
     /**
      * Specifies the type of relationship between the current document and the
      * linked document. Should only be used when `href` is specified. This
@@ -153,13 +154,6 @@ export type SharedProps = AriaProps & {
     endIcon?: IconAsset;
 };
 
-type DefaultProps = {
-    inline: SharedProps["inline"];
-    kind: SharedProps["kind"];
-    light: SharedProps["light"];
-    visitable: SharedProps["visitable"];
-};
-
 /**
  * Reusable link component.
  *
@@ -178,15 +172,11 @@ type DefaultProps = {
  * </Link>
  * ```
  */
-export default class Link extends React.Component<SharedProps> {
-    static defaultProps: DefaultProps = {
-        inline: false,
-        kind: "primary",
-        light: false,
-        visitable: false,
-    };
-
-    renderClickableBehavior(router: any): React.ReactNode {
+const Link = React.forwardRef(
+    (
+        props: SharedProps,
+        ref: React.ForwardedRef<typeof ReactRouterLink | HTMLAnchorElement>,
+    ) => {
         const {
             onClick,
             beforeNav = undefined,
@@ -198,81 +188,97 @@ export default class Link extends React.Component<SharedProps> {
             onKeyDown,
             onKeyUp,
             target = undefined,
+            inline = false,
+            kind = "primary",
+            light = false,
+            visitable = false,
             ...sharedProps
-        } = this.props;
-
-        const ClickableBehavior = getClickableBehavior(
-            href,
-            skipClientNav,
-            router,
-        );
+        } = props;
 
-        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}
-                            >
-                                {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}
-                            >
-                                {children}
-                            </LinkCore>
-                        );
-                    }}
-                </ClickableBehavior>
+        const renderClickableBehavior = (router: any): React.ReactNode => {
+            const ClickableBehavior = getClickableBehavior(
+                href,
+                skipClientNav,
+                router,
             );
-        }
-    }
 
-    render(): React.ReactNode {
+            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) => this.renderClickableBehavior(router)}
+                {(router) => renderClickableBehavior(router)}
             </__RouterContext.Consumer>
         );
-    }
-}
+    },
+);
+
+export default Link;