Merge pull request #86 from it-at-m/85-option-to-disable-animated-ico…

…n-in-button

85 option to disable animated icon in button

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

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");
 };

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() },

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() },