From 3ff0acc16ff572f983c201aec6e78dade73adcb5 Mon Sep 17 00:00:00 2001
From: "jannik.lange" <jannik.lange@muenchen.de>
Date: Tue, 13 Aug 2024 17:13:31 +0200
Subject: [PATCH 1/5] :sparkles: added muclink story #182

---
 src/components/Link/MucLink.stories.ts | 35 ++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/components/Link/MucLink.stories.ts

diff --git a/src/components/Link/MucLink.stories.ts b/src/components/Link/MucLink.stories.ts
new file mode 100644
index 00000000..ecb05e41
--- /dev/null
+++ b/src/components/Link/MucLink.stories.ts
@@ -0,0 +1,35 @@
+import { fn } from "@storybook/test";
+
+import MucLink from "./MucLink.vue";
+
+export default {
+  component: MucLink,
+  title: "MucLink",
+  tags: ["autodocs"],
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`muc-link\` component is a wrapper commponent for a standard html-a tag.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-links)
+`,
+      },
+    },
+  },
+};
+
+export const Weather = {
+  args: {
+    label: "Generic link label",
+  },
+};
+
+export const LinkWithIcon = {
+  args: {
+    icon: "youtube",
+    label: "youtube",
+    noUnderline: true,
+  },
+};

From b974ac7593222ddca5d6b6ed67166a8082a58848 Mon Sep 17 00:00:00 2001
From: "jannik.lange" <jannik.lange@muenchen.de>
Date: Tue, 13 Aug 2024 17:13:54 +0200
Subject: [PATCH 2/5] :sparkles: added muclink component #182

---
 src/components/Link/MucLink.vue | 44 +++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/components/Link/MucLink.vue

diff --git a/src/components/Link/MucLink.vue b/src/components/Link/MucLink.vue
new file mode 100644
index 00000000..0eb84353
--- /dev/null
+++ b/src/components/Link/MucLink.vue
@@ -0,0 +1,44 @@
+<template>
+  <a
+    :href="href"
+    :target="target"
+    class="m-link"
+    :class="reversedUnderlineClass"
+  >
+    {{ label }}
+    <slot name="icon">
+      <muc-icon
+        v-if="icon"
+        :icon="icon"
+        class="icon icon--after"
+      />
+    </slot>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { MucIcon } from "../Icon";
+
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    href?: string;
+    icon?: string;
+    target?: string;
+    noUnderline?: boolean;
+  }>(),
+  {
+    noUnderline: false,
+    href: "#",
+    target: "_blank",
+  }
+);
+
+const reversedUnderlineClass = computed(() =>
+  props.noUnderline ? "m-link--reversed-underline" : ""
+);
+</script>
+
+<style scoped></style>

From 902a4b19f89d8f2318a59643171397ae8acba360 Mon Sep 17 00:00:00 2001
From: "jannik.lange" <jannik.lange@muenchen.de>
Date: Tue, 13 Aug 2024 17:17:07 +0200
Subject: [PATCH 3/5] :sparkles: added documentation #182

---
 src/components/Link/MucLink.vue | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/Link/MucLink.vue b/src/components/Link/MucLink.vue
index 0eb84353..ea733250 100644
--- a/src/components/Link/MucLink.vue
+++ b/src/components/Link/MucLink.vue
@@ -23,10 +23,29 @@ import { MucIcon } from "../Icon";
 
 const props = withDefaults(
   defineProps<{
+    /**
+     * Text shown as the link
+     */
     label: string;
+
+    /**
+     * href to link to
+     */
     href?: string;
+
+    /**
+     * Optional icon displayed behind the text
+     */
     icon?: string;
+
+    /**
+     * Target on the link
+     */
     target?: string;
+
+    /**
+     * Removes the underline from the label text
+     */
     noUnderline?: boolean;
   }>(),
   {
@@ -36,6 +55,17 @@ const props = withDefaults(
   }
 );
 
+defineSlots<{
+  /**
+   * Icon slots overrides chosen prop icon.
+   * The icon can be displayed infront or behind the label with these classes: icon--after | icon--before
+   */
+  icon(): void;
+}>();
+
+/**
+ * Computed class to remove the underline if chosen.
+ */
 const reversedUnderlineClass = computed(() =>
   props.noUnderline ? "m-link--reversed-underline" : ""
 );

From 1eb4fa9cce9a89f27490c2b14d9156c5776961c0 Mon Sep 17 00:00:00 2001
From: "jannik.lange" <jannik.lange@muenchen.de>
Date: Tue, 13 Aug 2024 17:42:08 +0200
Subject: [PATCH 4/5] changed example #182

---
 src/components/Link/MucLink.stories.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Link/MucLink.stories.ts b/src/components/Link/MucLink.stories.ts
index ecb05e41..5d46d4f4 100644
--- a/src/components/Link/MucLink.stories.ts
+++ b/src/components/Link/MucLink.stories.ts
@@ -30,6 +30,7 @@ export const LinkWithIcon = {
   args: {
     icon: "youtube",
     label: "youtube",
+    href: "https://www.youtube.com",
     noUnderline: true,
   },
 };

From 810e881d6ecf8ee66619d1a0af87ff3960ebef5c Mon Sep 17 00:00:00 2001
From: "jannik.lange" <jannik.lange@muenchen.de>
Date: Wed, 14 Aug 2024 13:53:39 +0200
Subject: [PATCH 5/5] corrected exports #182

---
 src/components/Link/index.ts | 3 +++
 src/components/index.ts      | 2 ++
 2 files changed, 5 insertions(+)
 create mode 100644 src/components/Link/index.ts

diff --git a/src/components/Link/index.ts b/src/components/Link/index.ts
new file mode 100644
index 00000000..b64528d5
--- /dev/null
+++ b/src/components/Link/index.ts
@@ -0,0 +1,3 @@
+import MucLink from "./MucLink.vue";
+
+export { MucLink };
diff --git a/src/components/index.ts b/src/components/index.ts
index e8c81c4f..0b3d3c95 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -15,6 +15,7 @@ import {
 } from "./Form";
 import { MucIcon } from "./Icon";
 import { MucIntro } from "./Intro";
+import { MucLink } from "./Link";
 
 export {
   MucButton,
@@ -34,4 +35,5 @@ export {
   MucSelect,
   MucErrorList,
   MucIcon,
+  MucLink,
 };