Migrate Link component to the next branch

vue-components/src/components/Link.vue

@@ -0,0 +1,91 @@
+<template>
+	<a
+		:class="[
+			'wikit',
+			'wikit-Link',
+			(underlined == true) ? `wikit-Link--underlined` : ''
+		]"
+		:href="href"
+		:target="target"
+	>
+		<Icon
+			v-if="icon === 'before'"
+			class="wikit-Link__icon wikit-Link__icon--before"
+			type="link"
+			color="progressive"
+			size="large"
+		/>
+		<span class="wikit-Link__content"><slot /></span>
+		<Icon
+			v-if="icon === 'after'"
+			class="wikit-Link__icon wikit-Link__icon--after"
+			type="newwindow"
+			color="progressive"
+			size="xsmall"
+		/>
+	</a>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Icon from './Icon.vue';
+
+/**
+ * Uses the following components internally: Icon
+ */
+export default defineComponent( {
+	name: 'WikitLink',
+	props: {
+		icon: {
+			type: String,
+			default: 'none',
+			validator( value: string ): boolean {
+				return [ 'before', 'after', 'none' ].includes( value );
+			},
+		},
+		underlined: {
+			type: Boolean,
+			default: false,
+		},
+		href: {
+			type: String,
+			default: '',
+		},
+		target: {
+			type: String,
+			default: '_self',
+		},
+	},
+	components: {
+		Icon,
+	},
+} );
+</script>
+
+<style lang="scss">
+.wikit-Link {
+	@include Link();
+
+	display: flex;
+	text-decoration: none;
+	align-items: center;
+	overflow-wrap: break-word;
+	hyphens: auto;
+
+	&--underlined {
+		text-decoration: underline;
+	}
+
+	&__icon {
+		color: $wikit-Link-icon-color;
+
+		&--before {
+			padding-inline-end: $wikit-Link-icon-spacing;
+		}
+
+		&--after {
+			padding-inline-start: $wikit-Link-icon-spacing;
+		}
+	}
+}
+</style>

vue-components/src/styles/main.scss

@@ -1,4 +1,5 @@
 @import '~ress';
 @import '~@wmde/wikit-tokens/dist/variables';
 @import './mixins/Label';
+@import './mixins/Link';
 @import './mixins/Typography';

vue-components/src/styles/mixins/Link.scss

@@ -0,0 +1,26 @@
+@mixin Link {
+  font-family: $wikit-Link-font-family;
+  font-size: $wikit-Link-font-size;
+  font-weight: $wikit-Link-font-weight;
+  color: $wikit-Link-font-color;
+  line-height: $wikit-Link-line-height;
+  transition-property: $wikit-Link-transition-property;
+  transition-duration: $wikit-Link-transition-duration;
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  &:active {
+    color: $wikit-Link-active-font-color;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  &:focus {
+    outline-color: $wikit-Link-focus-outline-color;
+  }
+  &:visited {
+    color: $wikit-Link-visited-font-color;
+    transition-property: color;
+    transition-duration: $wikit-Link-transition-duration;
+  }
+}

vue-components/stories/Link.stories.ts

@@ -0,0 +1,58 @@
+import WikitLink from '@/components/Link';
+import { Component } from 'vue';
+
+export default {
+	component: WikitLink,
+	// the `/` prefix in the title is needed for "Message" to appear as a folded navigation item, and not a headline
+	title: '/Link',
+};
+
+export function basic( args: { content: string; underlined: boolean } ): Component {
+	return {
+		data: () => args,
+		components: { WikitLink },
+		template: `
+			<div>
+			<p><WikitLink
+                :underlined="underlined"
+                :href="'#' + Math.random()"
+            ><span v-html="content" /></WikitLink></p>
+			</div>
+		`,
+	};
+}
+
+basic.args = {
+	underlined: false,
+	content: 'Controllable link',
+};
+
+basic.argTypes = {
+	underlined: {
+		control: {
+			type: 'boolean',
+		},
+	},
+	content: {
+		control: {
+			type: 'text',
+		},
+	},
+};
+
+export function all(): Component {
+	return {
+		components: { WikitLink },
+		template: `
+			<div>
+            <p><WikitLink :href="'#' + Math.random()">Click here</WikitLink></p>
+            <p><WikitLink :href="'#' + Math.random()" underlined>Click here</WikitLink></p>
+            <p><WikitLink :href="'#' + Math.random()" icon="before">About Wikidata</WikitLink></p>
+            <p><WikitLink :href="'#' + Math.random()" icon="after">About Wikidata</WikitLink></p>
+            </div>
+		`,
+	};
+}
+all.parameters = {
+	controls: { hideNoControlsWarning: true },
+};