@muenchen/muc-patternlab-vue 1.8.0-beta.4 → 1.8.0-beta.6

package/dist/components/Button/MucButton.stories.d.ts

@@ -12,6 +12,10 @@ declare const _default: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
+            iconAnimated: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClick?: (() => any) | undefined;
         }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -28,11 +32,16 @@ declare const _default: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
+            iconAnimated: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClick?: (() => any) | undefined;
         }, {
             variant: "primary" | "secondary" | "ghost";
             disabled: boolean;
+            iconAnimated: boolean;
         }, true, {}, {}, {
             P: {};
             B: {};
@@ -52,11 +61,16 @@ declare const _default: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
             };
+            iconAnimated: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClick?: (() => any) | undefined;
         }, {}, {}, {}, {}, {
             variant: "primary" | "secondary" | "ghost";
             disabled: boolean;
+            iconAnimated: boolean;
         }>;
         __isFragment?: undefined;
         __isTeleport?: undefined;
@@ -73,6 +87,10 @@ declare const _default: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        iconAnimated: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         onClick?: (() => any) | undefined;
     }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -80,6 +98,7 @@ declare const _default: {
     }, string, {
         variant: "primary" | "secondary" | "ghost";
         disabled: boolean;
+        iconAnimated: boolean;
     }, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: Readonly<{
             default(): any;
@@ -130,3 +149,10 @@ export declare const Icon: {
         icon: string;
     };
 };
+export declare const IconAnimated: {
+    args: {
+        default: string;
+        icon: string;
+        iconAnimated: boolean;
+    };
+};

package/dist/components/Button/MucButton.vue.d.ts

@@ -14,9 +14,16 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
      * Choose an icon to be appended behind the slot. No icon will be placed if the prop is left empty.
      */
     icon?: string | undefined;
+    /**
+     * Wether the Icon should be animated on hover (slide-right) or not.
+     *
+     * Default is `false`
+     */
+    iconAnimated?: boolean | undefined;
 }>, {
     variant: string;
     disabled: boolean;
+    iconAnimated: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -34,14 +41,22 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
      * Choose an icon to be appended behind the slot. No icon will be placed if the prop is left empty.
      */
     icon?: string | undefined;
+    /**
+     * Wether the Icon should be animated on hover (slide-right) or not.
+     *
+     * Default is `false`
+     */
+    iconAnimated?: boolean | undefined;
 }>, {
     variant: string;
     disabled: boolean;
+    iconAnimated: boolean;
 }>>> & {
     onClick?: (() => any) | undefined;
 }, {
     variant: buttonType;
     disabled: boolean;
+    iconAnimated: boolean;
 }, {}>, Readonly<{
     /**
      * Display content inside the button.

package/dist/components/Comment/MucCommentText.stories.d.ts

@@ -0,0 +1,93 @@
+declare const _default: {
+    component: import('vue').DefineComponent<{
+        text: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        variant: {
+            type: import('vue').PropType<import('./CommentType').default>;
+            default: string;
+        };
+        rating: {
+            type: import('vue').PropType<number>;
+            required: true;
+        };
+        date: {
+            type: import('vue').PropType<string>;
+        };
+        initials: {
+            type: import('vue').PropType<string>;
+        };
+        author: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        datePrefix: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        headline: {
+            type: import('vue').PropType<string>;
+        };
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        text: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        variant: {
+            type: import('vue').PropType<import('./CommentType').default>;
+            default: string;
+        };
+        rating: {
+            type: import('vue').PropType<number>;
+            required: true;
+        };
+        date: {
+            type: import('vue').PropType<string>;
+        };
+        initials: {
+            type: import('vue').PropType<string>;
+        };
+        author: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        datePrefix: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        headline: {
+            type: import('vue').PropType<string>;
+        };
+    }>>, {
+        variant: import('./CommentType').default;
+        datePrefix: string;
+    }, {}>;
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        rating: number;
+        author: string;
+        headline: string;
+        text: string;
+    };
+};
+export declare const Slider: {
+    args: {
+        rating: number;
+        author: string;
+        headline: string;
+        variant: string;
+        text: string;
+    };
+};

package/dist/components/Comment/MucCommentText.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     headline?: string | undefined;
     text: string;
     rating: number;
-    variant: CommentType;
+    variant?: CommentType | undefined;
 }>, {
     datePrefix: string;
     variant: string;
@@ -20,7 +20,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     headline?: string | undefined;
     text: string;
     rating: number;
-    variant: CommentType;
+    variant?: CommentType | undefined;
 }>, {
     datePrefix: string;
     variant: string;

package/dist/muc-patternlab-vue.es.js

@@ -1,13 +1,13 @@
-import { defineComponent as p, computed as l, openBlock as o, createElementBlock as r, createElementVNode as t, normalizeClass as y, renderSlot as i, createCommentVNode as g, toDisplayString as m, pushScopeId as B, popScopeId as E, useSlots as L, createTextVNode as h, Fragment as M, renderList as S, createBlock as O, unref as P, createSlots as T, withCtx as f } from "vue";
-const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PURE__ */ t("svg", { class: "icon" }, [
+import { defineComponent as h, computed as d, openBlock as o, createElementBlock as i, createElementVNode as t, normalizeClass as b, renderSlot as c, createCommentVNode as g, toDisplayString as _, pushScopeId as I, popScopeId as B, useSlots as A, createTextVNode as m, Fragment as M, renderList as S, createBlock as O, unref as R, createSlots as T, withCtx as f } from "vue";
+const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PURE__ */ t("svg", { class: "icon" }, [
   /* @__PURE__ */ t("use", { href: "#icon-information" })
-], -1), H = /* @__PURE__ */ p({
+], -1), H = /* @__PURE__ */ h({
   __name: "MucBanner",
   props: {
     type: { default: "info" }
   },
   setup(a) {
-    const e = a, s = l(() => {
+    const e = a, s = d(() => {
       switch (e.type) {
         case "info":
           return "m-banner--info";
@@ -18,7 +18,7 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
         default:
           return "m-banner--info";
       }
-    }), n = l(() => {
+    }), n = d(() => {
       switch (e.type) {
         case "info":
           return "dialog";
@@ -29,7 +29,7 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
         default:
           return "dialog";
       }
-    }), c = l(() => {
+    }), l = d(() => {
       switch (e.type) {
         case "info":
           return "Information";
@@ -41,37 +41,38 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
           return "Information";
       }
     });
-    return (u, _) => (o(), r("div", null, [
+    return (u, p) => (o(), i("div", null, [
       t("div", null, [
         t("div", {
-          class: y(["m-banner", s.value]),
+          class: b(["m-banner", s.value]),
           role: n.value,
-          "aria-label": c.value
+          "aria-label": l.value
         }, [
-          t("div", R, [
-            A,
+          t("div", P, [
+            D,
             t("p", null, [
-              i(u.$slots, "default")
+              c(u.$slots, "default")
             ])
           ])
-        ], 10, D)
+        ], 10, L)
       ])
     ]));
   }
-}), W = ["disabled"], j = {
+}), j = ["disabled"], N = {
   key: 0,
   "aria-hidden": "true",
   class: "m-button__icon"
-}, F = ["xlink:href"], N = /* @__PURE__ */ p({
+}, V = ["xlink:href"], W = /* @__PURE__ */ h({
   __name: "MucButton",
   props: {
     variant: { default: "primary" },
     disabled: { type: Boolean, default: !1 },
-    icon: {}
+    icon: {},
+    iconAnimated: { type: Boolean, default: !1 }
   },
   emits: ["click"],
   setup(a, { emit: e }) {
-    const s = a, n = e, c = l(() => {
+    const s = a, n = e, l = d(() => {
       switch (s.variant) {
         case "secondary":
           return "m-button--secondary";
@@ -80,34 +81,34 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
         default:
           return "m-button--primary";
       }
-    }), u = () => {
+    }), u = d(() => s.iconAnimated ? "m-button--animated-right" : ""), p = () => {
       n("click");
     };
-    return (_, d) => (o(), r("button", {
-      onClick: u,
-      disabled: _.disabled,
-      class: y(["m-button m-button--animated-right", c.value])
+    return (r, $) => (o(), i("button", {
+      onClick: p,
+      disabled: r.disabled,
+      class: b(["m-button", [l.value, u.value]])
     }, [
       t("span", null, [
-        i(_.$slots, "default"),
-        _.icon ? (o(), r("svg", j, [
+        c(r.$slots, "default"),
+        r.icon ? (o(), i("svg", N, [
           t("use", {
-            "xlink:href": "#icon-" + _.icon
-          }, null, 8, F)
+            "xlink:href": "#icon-" + r.icon
+          }, null, 8, V)
         ])) : g("", !0)
       ])
-    ], 10, W));
+    ], 10, j));
   }
-}), V = ["aria-label"], x = { class: "m-callout__inner" }, z = { class: "m-callout__icon" }, U = {
+}), F = ["aria-label"], x = { class: "m-callout__inner" }, z = { class: "m-callout__icon" }, U = {
   "aria-hidden": "true",
   class: "icon"
-}, X = ["xlink:href"], q = { class: "m-callout__body" }, G = { class: "m-callout__body__inner" }, J = { class: "m-callout__headline" }, K = { class: "m-callout__content" }, Q = /* @__PURE__ */ p({
+}, X = ["xlink:href"], q = { class: "m-callout__body" }, G = { class: "m-callout__body__inner" }, J = { class: "m-callout__headline" }, K = { class: "m-callout__content" }, Q = /* @__PURE__ */ h({
   __name: "MucCallout",
   props: {
     type: { default: "info" }
   },
   setup(a) {
-    const e = a, s = l(() => {
+    const e = a, s = d(() => {
       switch (e.type) {
         case "error":
           return "warning";
@@ -116,7 +117,7 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
         default:
           return "information";
       }
-    }), n = l(() => {
+    }), n = d(() => {
       switch (e.type) {
         case "error":
           return "m-callout--error";
@@ -127,7 +128,7 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
         default:
           return "m-callout--default";
       }
-    }), c = l(() => {
+    }), l = d(() => {
       switch (e.type) {
         case "success":
           return "Erfolgreich";
@@ -139,14 +140,14 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
           return "Information";
       }
     });
-    return (u, _) => (o(), r("div", {
-      class: y(["m-callout", n.value]),
-      "aria-label": c.value
+    return (u, p) => (o(), i("div", {
+      class: b(["m-callout", n.value]),
+      "aria-label": l.value
     }, [
       t("div", x, [
         t("div", z, [
-          i(u.$slots, "icon", {}, () => [
-            (o(), r("svg", U, [
+          c(u.$slots, "icon", {}, () => [
+            (o(), i("svg", U, [
               t("use", {
                 "xlink:href": `#icon-${s.value}`
               }, null, 8, X)
@@ -156,27 +157,27 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
         t("div", q, [
           t("div", G, [
             t("div", J, [
-              i(u.$slots, "header", {}, void 0, !0)
+              c(u.$slots, "header", {}, void 0, !0)
             ]),
             t("div", K, [
               t("p", null, [
-                i(u.$slots, "content", { class: "m-callout__content" }, void 0, !0)
+                c(u.$slots, "content", { class: "m-callout__content" }, void 0, !0)
               ])
             ])
           ])
         ])
       ])
-    ], 10, V));
+    ], 10, F));
   }
-}), b = (a, e) => {
+}), k = (a, e) => {
   const s = a.__vccOpts || a;
-  for (const [n, c] of e)
-    s[n] = c;
+  for (const [n, l] of e)
+    s[n] = l;
   return s;
-}, Y = /* @__PURE__ */ b(Q, [["__scopeId", "data-v-efad4956"]]), Z = (a) => (B("data-v-acf0a1dd"), a = a(), E(), a), tt = { class: "card-content" }, et = { class: "card-header" }, nt = {
+}, Y = /* @__PURE__ */ k(Q, [["__scopeId", "data-v-efad4956"]]), Z = (a) => (I("data-v-acf0a1dd"), a = a(), B(), a), tt = { class: "card-content" }, et = { class: "card-header" }, nt = {
   key: 0,
   class: "card-tagline"
-}, st = /* @__PURE__ */ Z(() => /* @__PURE__ */ t("div", { class: "muc-divider" }, null, -1)), at = /* @__PURE__ */ p({
+}, st = /* @__PURE__ */ Z(() => /* @__PURE__ */ t("div", { class: "muc-divider" }, null, -1)), at = /* @__PURE__ */ h({
   __name: "MucCard",
   props: {
     title: {},
@@ -185,33 +186,33 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
   emits: ["click"],
   setup(a, { emit: e }) {
     const s = e;
-    return (n, c) => (o(), r("div", {
+    return (n, l) => (o(), i("div", {
       class: "card",
-      onClick: c[0] || (c[0] = (u) => s("click", u))
+      onClick: l[0] || (l[0] = (u) => s("click", u))
     }, [
       t("div", tt, [
         t("div", et, [
-          i(n.$slots, "headerPrefix", {}, void 0, !0),
+          c(n.$slots, "headerPrefix", {}, void 0, !0),
           t("div", null, [
-            n.tagline ? (o(), r("div", nt, m(n.tagline), 1)) : g("", !0),
+            n.tagline ? (o(), i("div", nt, _(n.tagline), 1)) : g("", !0),
             t("div", null, [
-              t("h3", null, m(n.title), 1)
+              t("h3", null, _(n.title), 1)
             ])
           ])
         ]),
         st,
-        i(n.$slots, "content", {}, void 0, !0)
+        c(n.$slots, "content", {}, void 0, !0)
       ])
     ]));
   }
-}), ot = /* @__PURE__ */ b(at, [["__scopeId", "data-v-acf0a1dd"]]), rt = { class: "container card-container" }, it = /* @__PURE__ */ p({
+}), ot = /* @__PURE__ */ k(at, [["__scopeId", "data-v-acf0a1dd"]]), it = { class: "container card-container" }, rt = /* @__PURE__ */ h({
   __name: "MucCardContainer",
   setup(a) {
-    return (e, s) => (o(), r("div", rt, [
-      i(e.$slots, "default", {}, void 0, !0)
+    return (e, s) => (o(), i("div", it, [
+      c(e.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), ct = /* @__PURE__ */ b(it, [["__scopeId", "data-v-256852e7"]]), lt = { class: "m-comment__head" }, ut = { class: "m-comment__initials" }, dt = { class: "m-comment__info" }, _t = { class: "m-comment__author" }, mt = { key: 0 }, ht = { class: "m-comment__author" }, pt = { class: "m-comment__date" }, vt = ["aria-label"], ft = /* @__PURE__ */ t("svg", {
+}), ct = /* @__PURE__ */ k(rt, [["__scopeId", "data-v-6740df8f"]]), lt = { class: "m-comment__head" }, dt = { class: "m-comment__initials" }, ut = { class: "m-comment__info" }, _t = { class: "m-comment__author" }, mt = { key: 0 }, ht = { class: "m-comment__author" }, pt = { class: "m-comment__date" }, vt = ["aria-label"], ft = /* @__PURE__ */ t("svg", {
   "aria-hidden": "true",
   class: "icon"
 }, [
@@ -235,74 +236,74 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
   /* @__PURE__ */ t("use", { "xlink:href": "#icon-solid-star" })
 ], -1), Ct = [
   kt
-], Mt = { class: "m-star-rating__numeric" }, St = { class: "m-comment__body" }, wt = { class: "m-comment__headline" }, It = { class: "m-comment__text" }, Bt = "de-DE", Et = 0.2, Lt = 0.8, $ = 5, I = /* @__PURE__ */ p({
+], Mt = { class: "m-star-rating__numeric" }, St = { class: "m-comment__body" }, wt = { class: "m-comment__headline" }, Et = { class: "m-comment__text" }, It = "de-DE", Bt = 0.2, At = 0.8, y = 5, E = /* @__PURE__ */ h({
   __name: "MucComment",
   props: {
     rating: {},
     variant: { default: "listing" }
   },
   setup(a) {
-    const e = L(), s = a, n = l(() => !!e.date), c = l(() => s.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), u = l(() => s.rating.toLocaleString(Bt.valueOf(), {
+    const e = A(), s = a, n = d(() => !!e.date), l = d(() => s.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), u = d(() => s.rating.toLocaleString(It.valueOf(), {
       minimumFractionDigits: 1
-    })), _ = l(() => {
-      const d = +(s.rating % 1).toFixed(1);
-      let k = Math.min(Math.floor(s.rating), $), v = Math.floor($ - s.rating), C = !1;
-      return s.rating !== 0 && s.rating !== $ && (d <= Et ? v++ : d >= Lt ? k++ : C = !0), {
-        fullStars: k,
+    })), p = d(() => {
+      const r = +(s.rating % 1).toFixed(1);
+      let $ = Math.min(Math.floor(s.rating), y), v = Math.floor(y - s.rating), C = !1;
+      return s.rating !== 0 && s.rating !== y && (r <= Bt ? v++ : r >= At ? $++ : C = !0), {
+        fullStars: $,
         emptyStars: v,
         isHalfStar: C
       };
     });
-    return (d, k) => (o(), r("div", {
-      class: y(["m-comment", c.value])
+    return (r, $) => (o(), i("div", {
+      class: b(["m-comment", l.value])
     }, [
       t("div", lt, [
-        t("div", ut, [
-          i(d.$slots, "initials")
-        ]),
         t("div", dt, [
+          c(r.$slots, "initials")
+        ]),
+        t("div", ut, [
           t("span", _t, [
-            i(d.$slots, "author")
+            c(r.$slots, "author")
           ]),
-          n.value ? (o(), r("span", mt, [
+          n.value ? (o(), i("span", mt, [
             t("span", ht, [
-              h(" "),
-              i(d.$slots, "datePrefix")
+              m(" "),
+              c(r.$slots, "datePrefix")
             ]),
             t("span", pt, [
-              h(" "),
-              i(d.$slots, "date")
+              m(" "),
+              c(r.$slots, "date")
             ])
           ])) : g("", !0),
           t("div", {
             class: "m-star-rating",
             role: "img",
-            "aria-label": `Bewertung: ${d.rating} von ${$} Sternen`
+            "aria-label": `Bewertung: ${r.rating} von ${y} Sternen`
           }, [
-            (o(!0), r(M, null, S(_.value.fullStars, (v) => (o(), r("div", {
+            (o(!0), i(M, null, S(p.value.fullStars, (v) => (o(), i("div", {
               key: v,
               class: "m-star-rating__item m-star-rating__item--full"
             }, gt))), 128)),
-            _.value.isHalfStar ? (o(), r("div", $t, bt)) : g("", !0),
-            (o(!0), r(M, null, S(_.value.emptyStars, (v) => (o(), r("div", {
+            p.value.isHalfStar ? (o(), i("div", $t, bt)) : g("", !0),
+            (o(!0), i(M, null, S(p.value.emptyStars, (v) => (o(), i("div", {
               key: v,
               class: "m-star-rating__item"
             }, Ct))), 128)),
-            t("div", Mt, m(u.value), 1)
+            t("div", Mt, _(u.value), 1)
           ], 8, vt)
         ])
       ]),
       t("div", St, [
         t("div", wt, [
-          i(d.$slots, "headline")
+          c(r.$slots, "headline")
         ]),
-        t("div", It, [
-          i(d.$slots, "text")
+        t("div", Et, [
+          c(r.$slots, "text")
         ])
       ])
     ], 2));
   }
-}), Ot = /* @__PURE__ */ p({
+}), Ot = " ", Rt = /* @__PURE__ */ h({
   __name: "MucCommentText",
   props: {
     datePrefix: { default: "am" },
@@ -315,47 +316,47 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
     variant: { default: "listing" }
   },
   setup(a) {
-    const e = a, s = l(() => e.initials ?? e.author.split(" ").map((n) => n.charAt(0)).join(""));
-    return (n, c) => (o(), O(P(I), {
+    const e = a, s = d(() => ((e.initials ?? e.author.split(Ot).map((n) => n.charAt(0)).join("")).match(/^.|.$/g) ?? [""]).join(""));
+    return (n, l) => (o(), O(R(E), {
       rating: n.rating,
       variant: n.variant
     }, T({
       initials: f(() => [
-        h(m(s.value), 1)
+        m(_(s.value), 1)
       ]),
       datePrefix: f(() => [
-        h("am")
+        m("am")
       ]),
       author: f(() => [
-        h(m(n.author), 1)
+        m(_(n.author), 1)
       ]),
       headline: f(() => [
-        h(m(n.headline), 1)
+        m(_(n.headline), 1)
       ]),
       text: f(() => [
-        h(m(n.text), 1)
+        m(_(n.text), 1)
       ]),
       _: 2
     }, [
       n.date ? {
         name: "date",
         fn: f(() => [
-          h(m(n.date), 1)
+          m(_(n.date), 1)
         ]),
         key: "0"
       } : void 0
     ]), 1032, ["rating", "variant"]));
   }
-}), Pt = {
+}), Tt = {
   class: "m-intro m-intro-static-image",
   style: { "background-color": "var(--color-neutrals-blue-xlight)" }
-}, Tt = { class: "container" }, Dt = { style: { width: "66.6%" } }, Rt = {
+}, Lt = { class: "container" }, Pt = { style: { width: "66.6%" } }, Dt = {
   key: 0,
   class: "m-intro-vertical__tagline"
-}, At = { class: "m-intro-vertical__title" }, Ht = {
+}, Ht = { class: "m-intro-vertical__title" }, jt = {
   key: 0,
   class: "muc-divider"
-}, Wt = { class: "m-intro-vertical__content" }, jt = { style: { "padding-bottom": "32px" } }, Ft = /* @__PURE__ */ p({
+}, Nt = { class: "m-intro-vertical__content" }, Vt = { style: { "padding-bottom": "32px" } }, Wt = /* @__PURE__ */ h({
   __name: "MucIntro",
   props: {
     title: {},
@@ -363,47 +364,47 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
     divider: { type: Boolean }
   },
   setup(a) {
-    return (e, s) => (o(), r("div", Pt, [
-      t("div", Tt, [
-        t("div", Dt, [
+    return (e, s) => (o(), i("div", Tt, [
+      t("div", Lt, [
+        t("div", Pt, [
           t("div", null, [
-            e.tagline ? (o(), r("p", Rt, m(e.tagline), 1)) : g("", !0),
-            t("h1", At, m(e.title), 1)
+            e.tagline ? (o(), i("p", Dt, _(e.tagline), 1)) : g("", !0),
+            t("h1", Ht, _(e.title), 1)
           ]),
-          e.divider ? (o(), r("div", Ht)) : g("", !0),
-          t("div", Wt, [
-            t("p", jt, [
-              i(e.$slots, "default", {}, void 0, !0)
+          e.divider ? (o(), i("div", jt)) : g("", !0),
+          t("div", Nt, [
+            t("p", Vt, [
+              c(e.$slots, "default", {}, void 0, !0)
             ])
           ])
         ])
       ])
     ]));
   }
-}), Nt = /* @__PURE__ */ b(Ft, [["__scopeId", "data-v-75c8321c"]]), w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Ft = /* @__PURE__ */ k(Wt, [["__scopeId", "data-v-3957c1bd"]]), w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   MucBanner: H,
-  MucButton: N,
+  MucButton: W,
   MucCallout: Y,
   MucCard: ot,
   MucCardContainer: ct,
-  MucComment: I,
-  MucCommentText: Ot,
-  MucIntro: Nt
+  MucComment: E,
+  MucCommentText: Rt,
+  MucIntro: Ft
 }, Symbol.toStringTag, { value: "Module" }));
-function Vt(a) {
+function xt(a) {
   for (const e in w)
     a.component(e, w[e]);
 }
-const zt = { install: Vt };
+const Ut = { install: xt };
 export {
   H as MucBanner,
-  N as MucButton,
+  W as MucButton,
   Y as MucCallout,
   ot as MucCard,
   ct as MucCardContainer,
-  I as MucComment,
-  Ot as MucCommentText,
-  Nt as MucIntro,
-  zt as default
+  E as MucComment,
+  Rt as MucCommentText,
+  Ft as MucIntro,
+  Ut as default
 };

package/dist/style.css

@@ -1 +1 @@
-.m-callout--success[data-v-efad4956]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-efad4956]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-efad4956]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-efad4956]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{font-size:16px;font-family:Open Sans,sans-serif;color:#005a9f;font-weight:700;line-height:24px;word-wrap:break-word;padding-bottom:4px}.muc-divider[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-256852e7]{padding-left:0;padding-right:0;display:grid;grid-template-columns:repeat(auto-fit,384px);grid-column-gap:32px;grid-row-gap:32px}}@media all and (max-width: 992px){.card-container[data-v-256852e7]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.muc-divider[data-v-75c8321c]{margin-top:8px;margin-bottom:16px}
+.m-callout--success[data-v-efad4956]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-efad4956]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-efad4956]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-efad4956]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{font-size:16px;font-family:Open Sans,sans-serif;color:#005a9f;font-weight:700;line-height:24px;word-wrap:break-word;padding-bottom:4px}.muc-divider[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:grid;grid-template-columns:repeat(auto-fit,384px);grid-column-gap:32px;grid-row-gap:32px}}@media all and (max-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.muc-divider[data-v-3957c1bd]{margin-top:8px;margin-bottom:16px}

package/dist/types/components/Button/MucButton.stories.d.ts

@@ -12,6 +12,10 @@ declare const _default: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            iconAnimated: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClick?: (() => any) | undefined;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -28,11 +32,16 @@ declare const _default: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            iconAnimated: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClick?: (() => any) | undefined;
         }, {
             variant: "primary" | "secondary" | "ghost";
             disabled: boolean;
+            iconAnimated: boolean;
         }, true, {}, {}, {
             P: {};
             B: {};
@@ -52,11 +61,16 @@ declare const _default: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            iconAnimated: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClick?: (() => any) | undefined;
         }, {}, {}, {}, {}, {
             variant: "primary" | "secondary" | "ghost";
             disabled: boolean;
+            iconAnimated: boolean;
         }>;
         __isFragment?: undefined;
         __isTeleport?: undefined;
@@ -73,6 +87,10 @@ declare const _default: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        iconAnimated: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         onClick?: (() => any) | undefined;
     }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -80,6 +98,7 @@ declare const _default: {
     }, string, {
         variant: "primary" | "secondary" | "ghost";
         disabled: boolean;
+        iconAnimated: boolean;
     }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: Readonly<{
             default(): any;
@@ -130,3 +149,10 @@ export declare const Icon: {
         icon: string;
     };
 };
+export declare const IconAnimated: {
+    args: {
+        default: string;
+        icon: string;
+        iconAnimated: boolean;
+    };
+};

package/dist/types/components/Button/MucButton.vue.d.ts

@@ -14,9 +14,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Choose an icon to be appended behind the slot. No icon will be placed if the prop is left empty.
      */
     icon?: string | undefined;
+    /**
+     * Wether the Icon should be animated on hover (slide-right) or not.
+     *
+     * Default is `false`
+     */
+    iconAnimated?: boolean | undefined;
 }>, {
     variant: string;
     disabled: boolean;
+    iconAnimated: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
@@ -34,14 +41,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Choose an icon to be appended behind the slot. No icon will be placed if the prop is left empty.
      */
     icon?: string | undefined;
+    /**
+     * Wether the Icon should be animated on hover (slide-right) or not.
+     *
+     * Default is `false`
+     */
+    iconAnimated?: boolean | undefined;
 }>, {
     variant: string;
     disabled: boolean;
+    iconAnimated: boolean;
 }>>> & {
     onClick?: (() => any) | undefined;
 }, {
     variant: buttonType;
     disabled: boolean;
+    iconAnimated: boolean;
 }, {}>, Readonly<{
     /**
      * Display content inside the button.

package/dist/types/components/Comment/MucCommentText.stories.d.ts

@@ -0,0 +1,93 @@
+declare const _default: {
+    component: import("vue").DefineComponent<{
+        text: {
+            type: import("vue").PropType<string>;
+            required: true;
+        };
+        variant: {
+            type: import("vue").PropType<import("./CommentType.js").default>;
+            default: string;
+        };
+        rating: {
+            type: import("vue").PropType<number>;
+            required: true;
+        };
+        date: {
+            type: import("vue").PropType<string>;
+        };
+        initials: {
+            type: import("vue").PropType<string>;
+        };
+        author: {
+            type: import("vue").PropType<string>;
+            required: true;
+        };
+        datePrefix: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        headline: {
+            type: import("vue").PropType<string>;
+        };
+    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        text: {
+            type: import("vue").PropType<string>;
+            required: true;
+        };
+        variant: {
+            type: import("vue").PropType<import("./CommentType.js").default>;
+            default: string;
+        };
+        rating: {
+            type: import("vue").PropType<number>;
+            required: true;
+        };
+        date: {
+            type: import("vue").PropType<string>;
+        };
+        initials: {
+            type: import("vue").PropType<string>;
+        };
+        author: {
+            type: import("vue").PropType<string>;
+            required: true;
+        };
+        datePrefix: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        headline: {
+            type: import("vue").PropType<string>;
+        };
+    }>>, {
+        variant: import("./CommentType.js").default;
+        datePrefix: string;
+    }, {}>;
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        rating: number;
+        author: string;
+        headline: string;
+        text: string;
+    };
+};
+export declare const Slider: {
+    args: {
+        rating: number;
+        author: string;
+        headline: string;
+        variant: string;
+        text: string;
+    };
+};

package/dist/types/components/Comment/MucCommentText.vue.d.ts

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     headline?: string | undefined;
     text: string;
     rating: number;
-    variant: CommentType;
+    variant?: CommentType | undefined;
 }>, {
     datePrefix: string;
     variant: string;
@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     headline?: string | undefined;
     text: string;
     rating: number;
-    variant: CommentType;
+    variant?: CommentType | undefined;
 }>, {
     datePrefix: string;
     variant: string;

package/package.json

@@ -3,7 +3,7 @@
   "author": "FabianWilms",
   "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
   "license": "MIT",
-  "version": "1.8.0-beta.4",
+  "version": "1.8.0-beta.6",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",

package/src/components/Button/MucButton.stories.ts

@@ -53,3 +53,11 @@ export const Icon = {
     icon: "arrow-right",
   },
 };
+
+export const IconAnimated = {
+  args: {
+    default: "With Icon",
+    icon: "arrow-right",
+    iconAnimated: true,
+  },
+};

package/src/components/Button/MucButton.vue

@@ -2,8 +2,8 @@
   <button
     @click="handleClick"
     :disabled="disabled"
-    class="m-button m-button--animated-right"
-    :class="buttonClass"
+    class="m-button"
+    :class="[buttonVariantClass, iconAnimatedClass]"
   >
     <span>
       <slot />
@@ -39,10 +39,17 @@ const props = withDefaults(
      * Choose an icon to be appended behind the slot. No icon will be placed if the prop is left empty.
      */
     icon?: string;
+    /**
+     * Wether the Icon should be animated on hover (slide-right) or not.
+     *
+     * Default is `false`
+     */
+    iconAnimated?: boolean;
   }>(),
   {
     variant: "primary",
     disabled: false,
+    iconAnimated: false,
   }
 );
 
@@ -61,7 +68,7 @@ const emit = defineEmits<{
   (e: "click"): void;
 }>();
 
-const buttonClass = computed(() => {
+const buttonVariantClass = computed(() => {
   switch (props.variant) {
     case "secondary":
       return "m-button--secondary";
@@ -72,6 +79,8 @@ const buttonClass = computed(() => {
   }
 });
 
+const iconAnimatedClass = computed(() => props.iconAnimated ? 'm-button--animated-right' : '');
+
 const handleClick = () => {
   emit("click");
 };

package/src/components/Card/MucCard.stories.ts

@@ -4,7 +4,7 @@ import MucCard from "./MucCard.vue";
 
 export default {
   component: MucCard,
-  title: "MucCard",
+  title: "Card/MucCard",
   tags: ["autodocs"],
   // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
   args: { onClick: fn() },

package/src/components/Card/MucCardContainer.stories.ts

@@ -6,7 +6,7 @@ import MucCardContainer from "./MucCardContainer.vue";
 export default {
   components: { MucCardContainer },
   component: MucCardContainer,
-  title: "MucCardContainer",
+  title: "Card/MucCardContainer",
   tags: ["autodocs"],
   // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
   args: { onClick: fn() },

package/src/components/Card/MucCardContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container card-container">
-    <slot/>
+    <slot />
   </div>
 </template>
 

package/src/components/Comment/MucComment.stories.ts

@@ -2,14 +2,13 @@ import MucComment from "./MucComment.vue";
 
 export default {
   component: MucComment,
-  title: "MucComment",
+  title: "Comment/MucComment",
   tags: ["autodocs"],
   parameters: {
     docs: {
       description: {
         component: `The muc-comment component can be used to display a comment in e.g. a chat.
-If you would like to display only text, we suggest using the more specific \`muc-comment-text\`. 
-For more general integration, we recommend the more general \`muc-comment\`.
+The \`muc-comment\`-component is designed to be as generic as possible.
 
 [🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-comment)
 `,

package/src/components/Comment/MucCommentText.stories.ts

@@ -0,0 +1,38 @@
+import MucCommentText from "./MucCommentText.vue";
+
+export default {
+  component: MucCommentText,
+  title: "Comment/MucCommentText",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The muc-comment component can be used to display a comment in e.g. a chat.
+If you would like to display only text, we suggest using this component instead of the more generic \`muc-comment\`.
+Furthermore this component does limit the number of charactesr for the initials to two.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-comment)
+`,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    rating: 4.2,
+    author: "Max Foo Bar Mustermann",
+    headline: "Initials shortend",
+    text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut",
+  },
+};
+
+export const Slider = {
+  args: {
+    ...Default.args,
+    rating: 2.3,
+    author: "",
+    headline: "Empty Author",
+    variant: "slider",
+  },
+};

package/src/components/Comment/MucCommentText.vue

@@ -22,6 +22,8 @@ import { computed } from "vue";
 import { MucComment } from "../index";
 import CommentType from "./CommentType";
 
+const AUTHOR_NAME_SEPERATOR = " ";
+
 const props = withDefaults(
   defineProps<{
     datePrefix?: string;
@@ -31,7 +33,7 @@ const props = withDefaults(
     headline?: string;
     text: string;
     rating: number;
-    variant: CommentType;
+    variant?: CommentType;
   }>(),
   {
     datePrefix: "am",
@@ -39,14 +41,20 @@ const props = withDefaults(
   }
 );
 
+/**
+ * Initials will be computed if none are given.
+ * In the case of an empty author field, an empty string is returned for the initials.
+ */
 const computedInitials = computed(() => {
   return (
-    props.initials ??
-    props.author
-      .split(" ")
-      .map((word) => word.charAt(0))
-      .join("")
-  );
+    (
+      props.initials ??
+      props.author
+        .split(AUTHOR_NAME_SEPERATOR)
+        .map((word) => word.charAt(0))
+        .join("")
+    ).match(/^.|.$/g) ?? [""]
+  ).join("");
 });
 </script>
 

package/src/components/Intro/MucIntro.vue

@@ -23,15 +23,16 @@ defineSlots<{
 </script>
 
 <template>
-  <div class="m-intro m-intro-static-image" style="background-color: var(--color-neutrals-blue-xlight);">
-    <div
-        class="container"
-    >
+  <div
+    class="m-intro m-intro-static-image"
+    style="background-color: var(--color-neutrals-blue-xlight)"
+  >
+    <div class="container">
       <div style="width: 66.6%">
         <div>
           <p
-              v-if="tagline"
-              class="m-intro-vertical__tagline"
+            v-if="tagline"
+            class="m-intro-vertical__tagline"
           >
             {{ tagline }}
           </p>
@@ -41,12 +42,12 @@ defineSlots<{
         </div>
 
         <div
-            v-if="divider"
-            class="muc-divider"
+          v-if="divider"
+          class="muc-divider"
         ></div>
 
         <div class="m-intro-vertical__content">
-          <p style="padding-bottom: 32px;">
+          <p style="padding-bottom: 32px">
             <slot></slot>
           </p>
         </div>