@khanacademy/wonder-blocks-link 4.2.7 → 4.3.0

package/dist/index.js

@@ -70,32 +70,29 @@ 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 StyledSpan = wonderBlocksCore.addStyle("span");
-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);
-    const withIcon = startIcon || endIcon || target === "_blank";
+      } = 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, withIcon && sharedStyles.withIcon];
+    const defaultStyles = [sharedStyles.shared, restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
     const commonProps = _extends({
       "data-test-id": testId,
       style: [defaultStyles, style],
@@ -118,9 +115,7 @@ class LinkCore extends React__namespace.Component {
       style: [linkContentStyles.startIcon, linkContentStyles.centered],
       testId: "start-icon",
       "aria-hidden": "true"
-    }), withIcon ? React__namespace.createElement(StyledSpan, {
-      style: linkContentStyles.centered
-    }, children) : children, endIcon ? React__namespace.createElement(Icon__default["default"], {
+    }), children, endIcon ? React__namespace.createElement(Icon__default["default"], {
       icon: endIcon,
       size: "small",
       style: [linkContentStyles.endIcon, linkContentStyles.centered],
@@ -128,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: {
@@ -146,7 +141,7 @@ const linkContentStyles = aphrodite.StyleSheet.create({
     marginInlineStart: Spacing__default["default"].xxxSmall_4
   },
   centered: {
-    verticalAlign: "middle"
+    verticalAlign: "-10%"
   }
 });
 const sharedStyles = aphrodite.StyleSheet.create({
@@ -155,10 +150,6 @@ const sharedStyles = aphrodite.StyleSheet.create({
     textDecoration: "none",
     outline: "none",
     alignItems: "center"
-  },
-  withIcon: {
-    verticalAlign: "bottom",
-    textUnderlineOffset: 4
   }
 });
 const _generateStyles = (inline, kind, light, visitable) => {
@@ -230,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, {
@@ -264,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 {
@@ -283,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.7",
+  "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.0.13",
+    "@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

@@ -25,135 +25,136 @@ type Props = SharedProps &
 
 const StyledAnchor = addStyle("a");
 const StyledLink = addStyle(Link);
-const StyledSpan = addStyle("span");
 
-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;
 
-        // If icon props are present, link `children` will render inside a
-        // `StyledSpan` element to vertically align text with icons and add
-        // `textUnderlineOffset`
-        const withIcon = startIcon || endIcon || target === "_blank";
+            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,
-            withIcon && sharedStyles.withIcon,
-        ];
+            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"
-                    />
-                )}
-                {withIcon ? (
-                    <StyledSpan style={linkContentStyles.centered}>
-                        {children}
-                    </StyledSpan>
-                ) : (
-                    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> = {};
 
@@ -165,7 +166,8 @@ const linkContentStyles = StyleSheet.create({
         marginInlineStart: Spacing.xxxSmall_4,
     },
     centered: {
-        verticalAlign: "middle",
+        // Manually align the bottom of start/end icons with the text baseline.
+        verticalAlign: "-10%",
     },
 });
 
@@ -176,10 +178,6 @@ const sharedStyles = StyleSheet.create({
         outline: "none",
         alignItems: "center",
     },
-    withIcon: {
-        verticalAlign: "bottom",
-        textUnderlineOffset: 4,
-    },
 });
 
 const _generateStyles = (
@@ -292,3 +290,5 @@ const _generateStyles = (
     styles[buttonType] = StyleSheet.create(newStyles);
     return styles[buttonType];
 };
+
+export default LinkCore;