feat(Link): external links now have an icon

Author: logonoff

workspaces/core/scss/components/_link.scss

@@ -31,4 +31,19 @@
     pointer-events: none;
     text-decoration: line-through;
   }
+
+  &[target="_blank"]:not(&.#{$shale}-no-icon),
+  &.#{$shale}-external {
+    &::after {
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z'/%3E%3C/svg%3E")
+        no-repeat center;
+      background-color: currentColor;
+      color: currentColor;
+      content: "(opens in new tab)";
+      display: inline;
+      font-size: 0;
+      padding: var(--#{$shale}font--3) var(--#{$shale}font--2);
+      vertical-align: bottom;
+    }
+  }
 }

workspaces/react/reports/react.api.md

@@ -34,6 +34,7 @@ export interface BaseHeaderProps {
 
 // @alpha (undocumented)
 export interface BaseLinkProps {
+    isExternal?: boolean;
     state?: StateVariant;
 }
 

workspaces/react/src/components/Link.tsx

@@ -6,11 +6,16 @@ import { css } from "../utils/css";
 export interface BaseLinkProps {
   /** The initial state of the link (if you want to force a specific state) */
   state?: StateVariant;
+  /** Shows an external link icon */
+  isExternal?: boolean;
 }
 
 /**
  * A link component.
  *
+ * External links (links with `target="_blank"`) will automatically show an external link icon, but you can also
+ * explicitly set `isExternal` to `true` to show the icon, or set it to `false` to hide the icon.
+ *
  * @example Basic link
  *
  * ```tsx
@@ -20,23 +25,34 @@ export interface BaseLinkProps {
  * @example Link with forced state
  *
  * ```tsx
- * <Link href="/page" state="hover">
+ * <Link href="/" state="hover">
  *   Hovered Link
  * </Link>;
  * ```
  *
+ * @example External link
+ *
+ * ```tsx
+ * <Link href="https://example.com" state="hover" target="_blank" rel="noopener noreferrer">
+ *   Go to Example
+ * </Link>;
+ * ```
+ *
  * @alpha
  */
 export const Link: PolymorphicComponent<"a", BaseLinkProps> = ({
   Component = "a",
   state,
+  isExternal,
   ...props
 }) => (
   <Component
     {...props}
     className={css(
       "shale-v1-link",
       { [`shale-v1--${state}`]: state },
+      { "shale-v1--external": isExternal === true },
+      { "shale-v1--no-icon": isExternal === false },
       props?.className,
     )}
   />