@khanacademy/wonder-blocks-link 4.0.8 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @khanacademy/wonder-blocks-link
 
+## 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
+
+-   ba1a0362: add title prop to link
+-   b1ea80f0: Adds external icon to link when `target='_blank'`
+
+### Patch Changes
+
+-   Updated dependencies [3c400719]
+-   Updated dependencies [a6164ed0]
+    -   @khanacademy/wonder-blocks-core@5.1.0
+    -   @khanacademy/wonder-blocks-clickable@3.0.9
+    -   @khanacademy/wonder-blocks-icon@2.0.9
+
 ## 4.0.8
 
 ### Patch 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.
@@ -115,6 +116,20 @@ export type SharedProps = AriaProps & {
      * navigation.
      */
     beforeNav?: () => Promise<unknown>;
+    /**
+     * 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,
   ...{|
@@ -141,6 +142,23 @@ export type SharedProps = {|
      * navigation.
      */
     beforeNav?: () => Promise<mixed>,
+
+    /**
+     * 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

@@ -5,6 +5,8 @@ import { StyleSheet } from 'aphrodite';
 import { Link as Link$1 } from 'react-router-dom';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
+import Icon from '@khanacademy/wonder-blocks-icon';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
 
 function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure " + obj);
@@ -38,7 +40,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
+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);
 class LinkCore extends React.Component {
@@ -56,33 +58,75 @@ class LinkCore extends React.Component {
         visitable,
         pressed,
         style,
-        testId
+        testId,
+        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]
+      style: [defaultStyles, style],
+      target
     }, restProps);
+    const externalIconPath = {
+      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 = React.createElement(Icon, {
+      icon: externalIconPath,
+      size: "small",
+      style: iconStyles.endIcon,
+      testId: "external-icon"
+    });
+    const linkContent = React.createElement(React.Fragment, null, startIcon && React.createElement(Icon, {
+      icon: startIcon,
+      size: "small",
+      style: iconStyles.startIcon,
+      testId: "start-icon",
+      "aria-hidden": "true"
+    }), React.createElement("span", {
+      style: {
+        verticalAlign: "middle"
+      }
+    }, children), endIcon ? React.createElement(Icon, {
+      icon: endIcon,
+      size: "small",
+      style: iconStyles.endIcon,
+      testId: "end-icon",
+      "aria-hidden": "true"
+    }) : target === "_blank" && externalIcon);
     return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
       to: href
-    }), children) : React.createElement(StyledAnchor, _extends({}, commonProps, {
+    }), linkContent) : React.createElement(StyledAnchor, _extends({}, commonProps, {
       href: href
-    }), children);
+    }), linkContent);
   }
   render() {
     return React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
   }
 }
 const styles = {};
+const iconStyles = StyleSheet.create({
+  startIcon: {
+    marginInlineEnd: Spacing.xxxSmall_4,
+    verticalAlign: "middle"
+  },
+  endIcon: {
+    marginInlineStart: Spacing.xxxSmall_4,
+    verticalAlign: "middle"
+  }
+});
 const sharedStyles = StyleSheet.create({
   shared: {
     cursor: "pointer",
     textDecoration: "none",
     outline: "none",
-    display: "inline-flex"
+    verticalAlign: "bottom",
+    textUnderlineOffset: "3px",
+    alignItems: "center"
   }
 });
 const _generateStyles = (inline, kind, light, visitable) => {
@@ -137,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

@@ -7,6 +7,8 @@ var aphrodite = require('aphrodite');
 var reactRouterDom = require('react-router-dom');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var Color = require('@khanacademy/wonder-blocks-color');
+var Icon = require('@khanacademy/wonder-blocks-icon');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,6 +32,8 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 
 function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure " + obj);
@@ -63,7 +67,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
+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 {
@@ -81,33 +85,75 @@ class LinkCore extends React__namespace.Component {
         visitable,
         pressed,
         style,
-        testId
+        testId,
+        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]
+      style: [defaultStyles, style],
+      target
     }, restProps);
+    const externalIconPath = {
+      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 = React__namespace.createElement(Icon__default["default"], {
+      icon: externalIconPath,
+      size: "small",
+      style: iconStyles.endIcon,
+      testId: "external-icon"
+    });
+    const linkContent = React__namespace.createElement(React__namespace.Fragment, null, startIcon && React__namespace.createElement(Icon__default["default"], {
+      icon: startIcon,
+      size: "small",
+      style: iconStyles.startIcon,
+      testId: "start-icon",
+      "aria-hidden": "true"
+    }), React__namespace.createElement("span", {
+      style: {
+        verticalAlign: "middle"
+      }
+    }, children), endIcon ? React__namespace.createElement(Icon__default["default"], {
+      icon: endIcon,
+      size: "small",
+      style: iconStyles.endIcon,
+      testId: "end-icon",
+      "aria-hidden": "true"
+    }) : target === "_blank" && externalIcon);
     return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
       to: href
-    }), children) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
+    }), linkContent) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
       href: href
-    }), children);
+    }), linkContent);
   }
   render() {
     return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderInner(router));
   }
 }
 const styles = {};
+const iconStyles = aphrodite.StyleSheet.create({
+  startIcon: {
+    marginInlineEnd: Spacing__default["default"].xxxSmall_4,
+    verticalAlign: "middle"
+  },
+  endIcon: {
+    marginInlineStart: Spacing__default["default"].xxxSmall_4,
+    verticalAlign: "middle"
+  }
+});
 const sharedStyles = aphrodite.StyleSheet.create({
   shared: {
     cursor: "pointer",
     textDecoration: "none",
     outline: "none",
-    display: "inline-flex"
+    verticalAlign: "bottom",
+    textUnderlineOffset: "3px",
+    alignItems: "center"
   }
 });
 const _generateStyles = (inline, kind, light, visitable) => {
@@ -162,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.0.8",
+  "version": "4.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,9 +16,11 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.0.8",
+    "@khanacademy/wonder-blocks-clickable": "^3.0.9",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.0.4"
+    "@khanacademy/wonder-blocks-core": "^5.1.0",
+    "@khanacademy/wonder-blocks-icon": "^2.0.9",
+    "@khanacademy/wonder-blocks-spacing": "^4.0.1"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",