From 251f9863040d5d19d0b36ac354453d8c7905171e Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Wed, 3 Feb 2021 05:27:24 -0800 Subject: [PATCH] add OutboundLink (#504) * feat(link): add OutboundLink * fix(outbound-link): forward Link events --- COMPONENT_INDEX.md | 24 +++++++++++++++++++++++- docs/src/COMPONENT_API.json | 17 ++++++++++++++++- docs/src/pages/components/Link.svx | 12 ++++++++---- src/Link/OutboundLink.svelte | 18 ++++++++++++++++++ src/Link/index.js | 1 + src/index.js | 2 +- types/Link/OutboundLink.d.ts | 17 +++++++++++++++++ types/index.d.ts | 1 + 8 files changed, 85 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..85875a50 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,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 diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 4ece589c..f04a99cf 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,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", 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 @@ @@ -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. Carbon Design System +### Outbound link + +An alternative to manually setting `target` to `"_blank"` is to use the `OutboundLink`. + +Carbon Design System + ### Inline variant
diff --git a/src/Link/OutboundLink.svelte b/src/Link/OutboundLink.svelte new file mode 100644 index 00000000..be2307e7 --- /dev/null +++ b/src/Link/OutboundLink.svelte @@ -0,0 +1,18 @@ + + + + + + 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..2a40d87f --- /dev/null +++ b/types/Link/OutboundLink.d.ts @@ -0,0 +1,17 @@ +/// +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; +} 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";