From 422e991b71562ba1a52116bb46fb699aa8c33c03 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 3 Feb 2021 05:16:43 -0800
Subject: [PATCH] feat(link): add OutboundLink

---
 COMPONENT_INDEX.md                 | 19 ++++++++++++++++++-
 docs/src/COMPONENT_API.json        | 12 +++++++++++-
 docs/src/pages/components/Link.svx | 12 ++++++++----
 src/Link/OutboundLink.svelte       | 11 +++++++++++
 src/Link/index.js                  |  1 +
 src/index.js                       |  2 +-
 types/Link/OutboundLink.d.ts       | 13 +++++++++++++
 types/index.d.ts                   |  1 +
 8 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 src/Link/OutboundLink.svelte
 create mode 100644 types/Link/OutboundLink.d.ts

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index f1bfdfd9..eed71a04 100644
--- a/COMPONENT_INDEX.md
+++ b/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,22 @@ None.
 | mouseenter | forwarded | --     |
 | mouseleave | forwarded | --     |
 
+## `OutboundLink`
+
+### Props
+
+None.
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `OverflowMenu`
 
 ### Props
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 4ece589c..51308224 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1,5 +1,5 @@
 {
-  "total": 155,
+  "total": 156,
   "components": [
     {
       "moduleName": "SkeletonText",
@@ -5083,6 +5083,16 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "OutboundLink",
+      "filePath": "/src/Link/OutboundLink.svelte",
+      "props": [],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "InlineComponent", "name": "Link" },
+      "extends": { "interface": "LinkProps", "import": "\"./Link\"" }
+    },
     {
       "moduleName": "ListItem",
       "filePath": "/src/ListItem/ListItem.svelte",
diff --git a/docs/src/pages/components/Link.svx b/docs/src/pages/components/Link.svx
index 8d25d605..de56bdf4 100644
--- a/docs/src/pages/components/Link.svx
+++ b/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 `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/).
+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/).
 
 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>
diff --git a/src/Link/OutboundLink.svelte b/src/Link/OutboundLink.svelte
new file mode 100644
index 00000000..f6f65ea0
--- /dev/null
+++ b/src/Link/OutboundLink.svelte
@@ -0,0 +1,11 @@
+<script>
+  /** @extends {"./Link"} LinkProps */
+
+  import Link from "./Link.svelte";
+  import Launch16 from "carbon-icons-svelte/lib/Launch16/Launch16.svelte";
+</script>
+
+<Link {...$$restProps} target="_blank">
+  <slot />
+  <Launch16 />
+</Link>
diff --git a/src/Link/index.js b/src/Link/index.js
index 759d5a75..ddda654e 100644
--- a/src/Link/index.js
+++ b/src/Link/index.js
@@ -1 +1,2 @@
 export { default as Link } from "./Link.svelte";
+export { default as OutboundLink } from "./OutboundLink.svelte";
diff --git a/src/index.js b/src/index.js
index 5ce9120d..07fa85c4 100644
--- a/src/index.js
+++ b/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,
diff --git a/types/Link/OutboundLink.d.ts b/types/Link/OutboundLink.d.ts
new file mode 100644
index 00000000..eb2e53cc
--- /dev/null
+++ b/types/Link/OutboundLink.d.ts
@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+import { LinkProps } from "./Link";
+
+export interface OutboundLinkProps extends LinkProps {}
+
+export default class OutboundLink {
+  $$prop_def: OutboundLinkProps;
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/index.d.ts b/types/index.d.ts
index 00b2e127..77bb8a1c 100644
--- a/types/index.d.ts
+++ b/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";