add OutboundLink (#504)

* feat(link): add OutboundLink

* fix(outbound-link): forward Link events

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 155 components exported from carbon-components-svelte@0.27.0.
+> 156 components exported from carbon-components-svelte@0.27.0.
 
 ## Components
 
@@ -84,6 +84,7 @@
 - [`NumberInput`](#numberinput)
 - [`NumberInputSkeleton`](#numberinputskeleton)
 - [`OrderedList`](#orderedlist)
+- [`OutboundLink`](#outboundlink)
 - [`OverflowMenu`](#overflowmenu)
 - [`OverflowMenuItem`](#overflowmenuitem)
 - [`Pagination`](#pagination)
@@ -2361,6 +2362,27 @@ None.
 | mouseenter | forwarded | --     |
 | mouseleave | forwarded | --     |
 
+## `OutboundLink`
+
+### Props
+
+None.
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+| Event name | Type      | Detail |
+| :--------- | :-------- | :----- |
+| click      | forwarded | --     |
+| mouseover  | forwarded | --     |
+| mouseenter | forwarded | --     |
+| mouseleave | forwarded | --     |
+
 ## `OverflowMenu`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 155,
+  "total": 156,
   "components": [
     {
       "moduleName": "SkeletonText",
@@ -5083,6 +5083,21 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "OutboundLink",
+      "filePath": "/src/Link/OutboundLink.svelte",
+      "props": [],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [
+        { "type": "forwarded", "name": "click", "element": "Link" },
+        { "type": "forwarded", "name": "mouseover", "element": "Link" },
+        { "type": "forwarded", "name": "mouseenter", "element": "Link" },
+        { "type": "forwarded", "name": "mouseleave", "element": "Link" }
+      ],
+      "typedefs": [],
+      "rest_props": { "type": "InlineComponent", "name": "Link" },
+      "extends": { "interface": "LinkProps", "import": "\"./Link\"" }
+    },
     {
       "moduleName": "ListItem",
       "filePath": "/src/ListItem/ListItem.svelte",

docs/src/pages/components/Link.svx

@@ -1,5 +1,5 @@
 <script>
-  import { Link } from "carbon-components-svelte";
+  import { Link, OutboundLink } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -9,14 +9,18 @@
 
 ### Target _blank
 
-Setting `target` to `"_blank"` opens the link in a new tab.
+If setting `target` to `"_blank"`, the `Link` component will automatically set `rel="noopener noreferrer"` to guard against [potential cross-origin security exploits](https://web.dev/external-anchors-use-rel-noopener/).
-
-If `target="_blank"`, the `Link` component will automatically set `rel="noopener noreferrer"` to guard against [potential cross-origin security exploits](https://web.dev/external-anchors-use-rel-noopener/).
 
 You can override the `rel` attribute with a custom value.
 
 <Link href="https://www.carbondesignsystem.com/" target="_blank">Carbon Design System</Link>
 
+### Outbound link
+
+An alternative to manually setting `target` to `"_blank"` is to use the `OutboundLink`.
+
+<OutboundLink href="https://www.carbondesignsystem.com/">Carbon Design System</OutboundLink>
+
 ### Inline variant
 
 <div>

src/Link/OutboundLink.svelte

@@ -0,0 +1,18 @@
+<script>
+  /** @extends {"./Link"} LinkProps */
+
+  import Link from "./Link.svelte";
+  import Launch16 from "carbon-icons-svelte/lib/Launch16/Launch16.svelte";
+</script>
+
+<Link
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  target="_blank"
+>
+  <slot />
+  <Launch16 />
+</Link>

src/Link/index.js

@@ -1 +1,2 @@
 export { default as Link } from "./Link.svelte";
+export { default as OutboundLink } from "./OutboundLink.svelte";

src/index.js

@@ -49,7 +49,7 @@ export { FormLabel } from "./FormLabel";
 export { Grid, Row, Column } from "./Grid";
 export { Icon, IconSkeleton } from "./Icon";
 export { InlineLoading } from "./InlineLoading";
-export { Link } from "./Link";
+export { Link, OutboundLink } from "./Link";
 export {
   ListBox,
   ListBoxField,

types/Link/OutboundLink.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+import { LinkProps } from "./Link";
+
+export interface OutboundLinkProps extends LinkProps {}
+
+export default class OutboundLink {
+  $$prop_def: OutboundLinkProps;
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/index.d.ts

@@ -73,6 +73,7 @@ export { default as Column } from "./Grid/Column";
 export { default as IconSkeleton } from "./Icon/IconSkeleton";
 export { default as Icon } from "./Icon/Icon";
 export { default as InlineLoading } from "./InlineLoading/InlineLoading";
+export { default as OutboundLink } from "./Link/OutboundLink";
 export { default as ListItem } from "./ListItem/ListItem";
 export { default as MultiSelect } from "./MultiSelect/MultiSelect";
 export { default as Modal } from "./Modal/Modal";