From 460a4b5b1b601181a4e6f352fd50fe6609dcc034 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20Gro=C3=9Fe?= <michael.grosse@wikimedia.de>
Date: Wed, 15 Jun 2022 15:38:07 +0200
Subject: [PATCH 1/3] Migrate Link component to the next branch, i.e., Vue 3

Bug: T298146
---
 vue-components/src/components/Link.vue     | 91 ++++++++++++++++++++++
 vue-components/src/styles/main.scss        |  1 +
 vue-components/src/styles/mixins/Link.scss | 26 +++++++
 vue-components/stories/Link.stories.ts     | 61 +++++++++++++++
 4 files changed, 179 insertions(+)
 create mode 100644 vue-components/src/components/Link.vue
 create mode 100644 vue-components/src/styles/mixins/Link.scss
 create mode 100644 vue-components/stories/Link.stories.ts

diff --git a/vue-components/src/components/Link.vue b/vue-components/src/components/Link.vue
new file mode 100644
index 000000000..d8da92533
--- /dev/null
+++ b/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: 'Link',
+	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>
diff --git a/vue-components/src/styles/main.scss b/vue-components/src/styles/main.scss
index 381eec3fc..df2dea0cc 100644
--- a/vue-components/src/styles/main.scss
+++ b/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';
diff --git a/vue-components/src/styles/mixins/Link.scss b/vue-components/src/styles/mixins/Link.scss
new file mode 100644
index 000000000..7f9e7530b
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/vue-components/stories/Link.stories.ts b/vue-components/stories/Link.stories.ts
new file mode 100644
index 000000000..6c9744780
--- /dev/null
+++ b/vue-components/stories/Link.stories.ts
@@ -0,0 +1,61 @@
+import Link from '@/components/Link';
+import { Component } from 'vue';
+
+export default {
+	component: Link,
+	// 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(): object {
+			return { args };
+		},
+		components: { Link },
+		props: Object.keys( args ),
+		template: `
+			<div>
+			<p><Link
+                :underlined="underlined"
+                :href="'#' + Math.random()"
+            ><span v-html="content" /></Link></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: { Link },
+		template: `
+			<div>
+            <p><Link :href="'#' + Math.random()">Click here</Link></p>
+            <p><Link :href="'#' + Math.random()" underlined>Click here</Link></p>
+            <p><Link :href="'#' + Math.random()" icon="before">About Wikidata</Link></p>
+            <p><Link :href="'#' + Math.random()" icon="after">About Wikidata</Link></p>
+            </div>
+		`,
+	};
+}
+all.parameters = {
+	controls: { hideNoControlsWarning: true },
+};

From a2845a964f4da1c048521277bbe272511ac57c31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20Gro=C3=9Fe?= <michael.grosse@wikimedia.de>
Date: Thu, 16 Jun 2022 18:53:52 +0200
Subject: [PATCH 2/3] Rename component to WikitLink

This fixes the issue that "Link" is apparently a reserved word in HTML.
Renaming the filename seems unnecessary though.
---
 vue-components/src/components/Link.vue |  2 +-
 vue-components/stories/Link.stories.ts | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/vue-components/src/components/Link.vue b/vue-components/src/components/Link.vue
index d8da92533..d4496b461 100644
--- a/vue-components/src/components/Link.vue
+++ b/vue-components/src/components/Link.vue
@@ -34,7 +34,7 @@ import Icon from './Icon.vue';
  * Uses the following components internally: Icon
  */
 export default defineComponent( {
-	name: 'Link',
+	name: 'WikitLink',
 	props: {
 		icon: {
 			type: String,
diff --git a/vue-components/stories/Link.stories.ts b/vue-components/stories/Link.stories.ts
index 6c9744780..aaa25c171 100644
--- a/vue-components/stories/Link.stories.ts
+++ b/vue-components/stories/Link.stories.ts
@@ -1,8 +1,8 @@
-import Link from '@/components/Link';
+import WikitLink from '@/components/Link';
 import { Component } from 'vue';
 
 export default {
-	component: Link,
+	component: WikitLink,
 	// the `/` prefix in the title is needed for "Message" to appear as a folded navigation item, and not a headline
 	title: '/Link',
 };
@@ -12,14 +12,14 @@ export function basic( args: { content: string; underlined: boolean } ): Compone
 		data(): object {
 			return { args };
 		},
-		components: { Link },
+		components: { WikitLink },
 		props: Object.keys( args ),
 		template: `
 			<div>
-			<p><Link
+			<p><WikitLink
                 :underlined="underlined"
                 :href="'#' + Math.random()"
-            ><span v-html="content" /></Link></p>
+            ><span v-html="content" /></WikitLink></p>
 			</div>
 		`,
 	};
@@ -45,13 +45,13 @@ basic.argTypes = {
 
 export function all(): Component {
 	return {
-		components: { Link },
+		components: { WikitLink },
 		template: `
 			<div>
-            <p><Link :href="'#' + Math.random()">Click here</Link></p>
-            <p><Link :href="'#' + Math.random()" underlined>Click here</Link></p>
-            <p><Link :href="'#' + Math.random()" icon="before">About Wikidata</Link></p>
-            <p><Link :href="'#' + Math.random()" icon="after">About Wikidata</Link></p>
+            <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>
 		`,
 	};

From 9284683c00ef18ae98e41d222b47e53b58a93540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20Gro=C3=9Fe?= <mic.grosse@googlemail.com>
Date: Fri, 17 Jun 2022 11:13:49 +0200
Subject: [PATCH 3/3] Fix controllable story

---
 vue-components/stories/Link.stories.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/vue-components/stories/Link.stories.ts b/vue-components/stories/Link.stories.ts
index aaa25c171..7b7dd63b6 100644
--- a/vue-components/stories/Link.stories.ts
+++ b/vue-components/stories/Link.stories.ts
@@ -9,11 +9,8 @@ export default {
 
 export function basic( args: { content: string; underlined: boolean } ): Component {
 	return {
-		data(): object {
-			return { args };
-		},
+		data: () => args,
 		components: { WikitLink },
-		props: Object.keys( args ),
 		template: `
 			<div>
 			<p><WikitLink