@khanacademy/wonder-blocks-link 4.1.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-link
 
+## 4.2.1
+
+### Patch Changes
+
+-   6a026e35: Fix link style
+
+## 4.2.0
+
+### Minor Changes
+
+-   ef08a547: Adds start and end icon props to link
+
+### Patch Changes
+
+-   3686db61: Stop showing a focus outline on the first link when revisiting a tab
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/components/link.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 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.
@@ -119,6 +120,16 @@ export type SharedProps = AriaProps & {
      * 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;
 };
 type DefaultProps = {
     inline: SharedProps["inline"];

package/dist/components/link.js.flow

@@ -7,6 +7,7 @@
 import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import type { Typography } from "@khanacademy/wonder-blocks-typography";
+import type { IconAsset } from "@khanacademy/wonder-blocks-icon";
 export type SharedProps = {|
   ...AriaProps,
   ...{|
@@ -146,6 +147,18 @@ export type SharedProps = {|
      * 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,
   |},
 |};
 declare type DefaultProps = {|

package/dist/es/index.js

@@ -40,9 +40,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting", "target"];
+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 StyledSpan = addStyle("span");
 class LinkCore extends React.Component {
   renderInner(router) {
     const _this$props = this.props,
@@ -59,12 +60,14 @@ class LinkCore extends React.Component {
         pressed,
         style,
         testId,
-        target
+        target,
+        startIcon,
+        endIcon
       } = _this$props,
       restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const linkStyles = _generateStyles(inline, kind, light, visitable);
     const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
-    const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
+    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],
@@ -76,10 +79,24 @@ class LinkCore extends React.Component {
     const externalIcon = React.createElement(Icon, {
       icon: externalIconPath,
       size: "small",
-      style: iconStyles.icon,
+      style: [linkContentStyles.endIcon, linkContentStyles.centered],
       testId: "external-icon"
     });
-    const linkContent = React.createElement(React.Fragment, null, children, target === "_blank" && externalIcon);
+    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"
+    }), React.createElement(StyledSpan, {
+      style: linkContentStyles.centered
+    }, children), endIcon ? React.createElement(Icon, {
+      icon: endIcon,
+      size: "small",
+      style: [linkContentStyles.endIcon, linkContentStyles.centered],
+      testId: "end-icon",
+      "aria-hidden": "true"
+    }) : target === "_blank" && externalIcon);
     return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
       to: href
     }), linkContent) : React.createElement(StyledAnchor, _extends({}, commonProps, {
@@ -91,9 +108,15 @@ class LinkCore extends React.Component {
   }
 }
 const styles = {};
-const iconStyles = StyleSheet.create({
-  icon: {
-    marginLeft: Spacing.xxxSmall_4
+const linkContentStyles = StyleSheet.create({
+  startIcon: {
+    marginInlineEnd: Spacing.xxxSmall_4
+  },
+  endIcon: {
+    marginInlineStart: Spacing.xxxSmall_4
+  },
+  centered: {
+    verticalAlign: "middle"
   }
 });
 const sharedStyles = StyleSheet.create({
@@ -101,7 +124,8 @@ const sharedStyles = StyleSheet.create({
     cursor: "pointer",
     textDecoration: "none",
     outline: "none",
-    display: "inline-flex",
+    verticalAlign: "bottom",
+    textUnderlineOffset: "3px",
     alignItems: "center"
   }
 });
@@ -157,11 +181,13 @@ const _generateStyles = (inline, kind, light, visitable) => {
       textDecoration: "underline currentcolor solid",
       color: defaultTextColor
     }, defaultVisited),
-    focus: _extends({
-      color: defaultTextColor,
-      outline: `1px solid ${light ? white : blue}`,
-      borderRadius: 3
-    }, defaultVisited),
+    focus: {
+      ":focus-visible": _extends({
+        color: defaultTextColor,
+        outline: `1px solid ${light ? white : blue}`,
+        borderRadius: 3
+      }, defaultVisited)
+    },
     active: _extends({
       color: activeColor,
       textDecoration: "underline currentcolor solid"

package/dist/index.js

@@ -67,9 +67,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting", "target"];
+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,
@@ -86,12 +87,14 @@ class LinkCore extends React__namespace.Component {
         pressed,
         style,
         testId,
-        target
+        target,
+        startIcon,
+        endIcon
       } = _this$props,
       restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const linkStyles = _generateStyles(inline, kind, light, visitable);
     const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
-    const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
+    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],
@@ -103,10 +106,24 @@ class LinkCore extends React__namespace.Component {
     const externalIcon = React__namespace.createElement(Icon__default["default"], {
       icon: externalIconPath,
       size: "small",
-      style: iconStyles.icon,
+      style: [linkContentStyles.endIcon, linkContentStyles.centered],
       testId: "external-icon"
     });
-    const linkContent = React__namespace.createElement(React__namespace.Fragment, null, children, target === "_blank" && externalIcon);
+    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"
+    }), React__namespace.createElement(StyledSpan, {
+      style: linkContentStyles.centered
+    }, children), endIcon ? React__namespace.createElement(Icon__default["default"], {
+      icon: endIcon,
+      size: "small",
+      style: [linkContentStyles.endIcon, linkContentStyles.centered],
+      testId: "end-icon",
+      "aria-hidden": "true"
+    }) : target === "_blank" && externalIcon);
     return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
       to: href
     }), linkContent) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
@@ -118,9 +135,15 @@ class LinkCore extends React__namespace.Component {
   }
 }
 const styles = {};
-const iconStyles = aphrodite.StyleSheet.create({
-  icon: {
-    marginLeft: Spacing__default["default"].xxxSmall_4
+const linkContentStyles = aphrodite.StyleSheet.create({
+  startIcon: {
+    marginInlineEnd: Spacing__default["default"].xxxSmall_4
+  },
+  endIcon: {
+    marginInlineStart: Spacing__default["default"].xxxSmall_4
+  },
+  centered: {
+    verticalAlign: "middle"
   }
 });
 const sharedStyles = aphrodite.StyleSheet.create({
@@ -128,7 +151,8 @@ const sharedStyles = aphrodite.StyleSheet.create({
     cursor: "pointer",
     textDecoration: "none",
     outline: "none",
-    display: "inline-flex",
+    verticalAlign: "bottom",
+    textUnderlineOffset: "3px",
     alignItems: "center"
   }
 });
@@ -184,11 +208,13 @@ const _generateStyles = (inline, kind, light, visitable) => {
       textDecoration: "underline currentcolor solid",
       color: defaultTextColor
     }, defaultVisited),
-    focus: _extends({
-      color: defaultTextColor,
-      outline: `1px solid ${light ? white : blue}`,
-      borderRadius: 3
-    }, defaultVisited),
+    focus: {
+      ":focus-visible": _extends({
+        color: defaultTextColor,
+        outline: `1px solid ${light ? white : blue}`,
+        borderRadius: 3
+      }, defaultVisited)
+    },
     active: _extends({
       color: activeColor,
       textDecoration: "underline currentcolor solid"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -19,8 +19,8 @@
     "@khanacademy/wonder-blocks-clickable": "^3.0.9",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
     "@khanacademy/wonder-blocks-core": "^5.1.0",
-    "@khanacademy/wonder-blocks-icon": "2.0.9",
-    "@khanacademy/wonder-blocks-spacing": "4.0.1"
+    "@khanacademy/wonder-blocks-icon": "^2.0.9",
+    "@khanacademy/wonder-blocks-spacing": "^4.0.1"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",