✨ 369 show icons on the left side of the button (#370)

* 369: add iconShownLeft to button

* 369: format code

* 369: pr feedback

Author: lehju

src/components/Button/MucButton.stories.ts

@@ -60,3 +60,11 @@ export const IconAnimated = {
     iconAnimated: true,
   },
 };
+
+export const IconShownLeft = {
+  args: {
+    default: "With Icon",
+    icon: "arrow-left",
+    iconShownLeft: true,
+  },
+};

src/components/Button/MucButton.vue

@@ -6,13 +6,14 @@
     :class="[buttonVariantClass, iconAnimatedClass, disabledClass]"
   >
     <span>
-      <slot />
+      <slot v-if="!iconShownLeft" />
       <muc-icon
         v-if="icon"
         :icon="icon"
         class="m-button__icon"
-        :class="{ 'no-left-margin': !slots.default }"
+        :class="iconPositionClass"
       />
+      <slot v-if="iconShownLeft" />
     </span>
   </button>
 </template>
@@ -30,6 +31,7 @@ const {
   variant = "primary",
   disabled = false,
   iconAnimated = false,
+  iconShownLeft = false,
 } = defineProps<{
   /**
    * The variant prop gives you easy access to several different button styles.
@@ -51,6 +53,12 @@ const {
    * Default is `false`
    */
   iconAnimated?: boolean;
+  /**
+   * Whether the Icon should be shown on the left side of the button (slide-right) or not.
+   *
+   * Default is `false`
+   */
+  iconShownLeft?: boolean;
 }>();
 
 defineSlots<{
@@ -79,9 +87,20 @@ const buttonVariantClass = computed(() => {
   }
 });
 
-const iconAnimatedClass = computed(() =>
-  iconAnimated ? "m-button--animated-right" : ""
-);
+const iconAnimatedClass = computed(() => {
+  if (iconAnimated && iconShownLeft) {
+    return "m-button--animated-left";
+  } else if (iconAnimated) {
+    return "m-button--animated-right";
+  } else {
+    return "";
+  }
+});
+
+const iconPositionClass = computed(() => ({
+  "set-right-margin": iconShownLeft,
+  "no-left-margin": !iconShownLeft ? !slots.default : !iconAnimated,
+}));
 
 /**
  * Emit a click event if not in disabled state.
@@ -101,6 +120,10 @@ const disabledClass = computed(() => (disabled ? "disabled" : ""));
   margin-left: 0;
 }
 
+.set-right-margin {
+  margin-right: 0.75rem;
+}
+
 [aria-disabled="true"] {
   pointer-events: none;
 }