✨ new flag for MucButton: Spinning Icon on click (for e.g. copy-link actions)

Author: FabianWilms

src/components/Button/MucButton.stories.ts

@@ -54,6 +54,15 @@ export const IconOnly = {
   },
 };
 
+export const CopyButton = {
+  args: {
+    default: "Copy",
+    icon: "copy-link",
+    variant: "secondary",
+    spinIconOnClick: true,
+  },
+};
+
 export const IconAnimated = {
   args: {
     default: "With Icon",

src/components/Button/MucButton.vue

@@ -3,7 +3,15 @@
     @click="handleClick"
     :aria-disabled="disabled"
     class="m-button"
-    :class="[buttonVariantClass, iconAnimatedClass, disabledClass]"
+    :class="{
+      'm-button--secondary': variant === 'secondary',
+      'm-button--ghost': variant === 'ghost',
+      'm-button--primary': variant !== 'secondary' && variant !== 'ghost',
+      'm-button--animated-right': iconAnimated,
+      'm-button--animated-left': iconAnimated && iconShownLeft,
+      disabled: disabled,
+      copied: spinIconOnClick && animateIconSpin,
+    }"
   >
     <span>
       <slot v-if="!iconShownLeft" />
@@ -22,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref } from "vue";
 
 import { MucIcon } from "../Icon";
 
@@ -33,6 +41,7 @@ const {
   disabled = false,
   iconAnimated = false,
   iconShownLeft = false,
+  spinIconOnClick = false,
 } = defineProps<{
   /**
    * The variant prop gives you easy access to several different button styles.
@@ -54,6 +63,12 @@ const {
    * Default is `false`
    */
   iconAnimated?: boolean;
+  /**
+   * Wether the Icon should spin when the button is clicked (used e.g. when building a "copy"-Button)
+   *
+   * Default is 'false';
+   */
+  spinIconOnClick?: boolean;
   /**
    * Whether the Icon should be shown on the left side of the button (slide-right) or not.
    *
@@ -77,38 +92,20 @@ const emit = defineEmits<
   (e: "click") => void
 >();
 
-const buttonVariantClass = computed(() => {
-  switch (variant) {
-    case "secondary":
-      return "m-button--secondary";
-    case "ghost":
-      return "m-button--ghost";
-    default:
-      return "m-button--primary";
-  }
-});
-
-const iconAnimatedClass = computed(() => {
-  if (iconAnimated && iconShownLeft) {
-    return "m-button--animated-left";
-  } else if (iconAnimated) {
-    return "m-button--animated-right";
-  } else {
-    return "";
-  }
-});
+const animateIconSpin = ref(false);
 
 /**
  * Emit a click event if not in disabled state.
  */
 const handleClick = () => {
+  animateIconSpin.value = true;
+
   if (!disabled) emit("click");
-};
 
-/**
- * Ensure that the disabled button style is applied when it is in the 'disabled' state.
- */
-const disabledClass = computed(() => (disabled ? "disabled" : ""));
+  setTimeout(() => {
+    animateIconSpin.value = false;
+  }, 1000);
+};
 </script>
 
 <style scoped>
@@ -124,6 +121,10 @@ const disabledClass = computed(() => (disabled ? "disabled" : ""));
   margin-left: 0.75rem;
 }
 
+.copied .m-button__icon {
+  animation: rotate 1s ease-in-out;
+}
+
 .m-button--ghost {
   padding-right: 0;
 }