🐛 Merge pull request #197 from it-at-m/beta

Author: langehm

package-lock.json

@@ -24,7 +24,7 @@
     "./dist/style.css": "./dist/style.css",
     "./dist/assets/temporary/custom-style.css": "./dist/assets/temporary/custom-style.css",
     "./dist/assets/temporary/muenchende-style.css": "./dist/assets/temporary/muenchende-style.css",
-    "./dist/assets/temporary/muenchende-fontface.css": "./dist/assets/temporary/muenchende-fontface.css",
+    "./dist/assets/temporary/muenchende-fontfaces.css": "./dist/assets/temporary/muenchende-fontfaces.css",
     "./dist/assets/temporary/muc-icons.svg": "./dist/assets/temporary/muc-icons.svg",
     "./dist/assets/temporary/custom-icons.svg": "./dist/assets/temporary/custom-icons.svg"
   },

package.json

@@ -0,0 +1,19 @@
+import MucDivider from "./MucDivider.vue";
+
+export default {
+  component: MucDivider,
+  title: "MucDivider",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`muc-divider\` is a trivial divider.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-all)
+`,
+      },
+    },
+  },
+};
+
+export const Default = {};

src/components/Divider/MucDivider.stories.ts

@@ -0,0 +1,9 @@
+<template>
+  <hr class="divider-border" />
+</template>
+
+<style scoped>
+.divider-border {
+  border-bottom: 1px solid var(--color-neutrals-blue);
+}
+</style>

src/components/Divider/MucDivider.vue

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

src/components/Divider/index.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.stories.ts

@@ -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/MucLink.vue

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

src/components/Link/index.ts

@@ -3,6 +3,7 @@ import { MucButton } from "./Button";
 import { MucCallout } from "./Callout";
 import { MucCard, MucCardContainer } from "./Card";
 import { MucComment, MucCommentText } from "./Comment/";
+import { MucDivider } from "./Divider";
 import {
   MucCheckbox,
   MucCheckboxGroup,
@@ -15,6 +16,7 @@ import {
 } from "./Form";
 import { MucIcon } from "./Icon";
 import { MucIntro } from "./Intro";
+import { MucLink } from "./Link";
 
 export {
   MucButton,
@@ -34,4 +36,6 @@ export {
   MucSelect,
   MucErrorList,
   MucIcon,
+  MucDivider,
+  MucLink,
 };