✨ Merge pull request #187 from it-at-m/182-link-component

✨ 182 link component

Author: langehm

src/components/Link/MucLink.stories.ts

@@ -0,0 +1,36 @@
+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",
+    href: "https://www.youtube.com",
+    noUnderline: true,
+  },
+};

src/components/Link/MucLink.vue

@@ -0,0 +1,74 @@
+<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<{
+    /**
+     * 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;
+  }>(),
+  {
+    noUnderline: false,
+    href: "#",
+    target: "_blank",
+  }
+);
+
+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" : ""
+);
+</script>
+
+<style scoped></style>

src/components/Link/index.ts

@@ -0,0 +1,3 @@
+import MucLink from "./MucLink.vue";
+
+export { MucLink };

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,
 };