✨ 347 add disable previous steps to stepper component

src/components/Stepper/MucStepper.stories.ts

@@ -43,3 +43,32 @@ export const Default = {
     activeItem: "2",
   },
 };
+
+export const DisablePerviousSteps = {
+  args: {
+    stepItems: [
+      {
+        id: "1",
+        label: "Order",
+        icon: "shopping-cart",
+      },
+      {
+        id: "2",
+        label: "Delivery",
+        icon: "calendar",
+      },
+      {
+        id: "3",
+        label: "Contact",
+        icon: "mail",
+      },
+      {
+        id: "4",
+        label: "Overview",
+        icon: "information",
+      },
+    ],
+    activeItem: "2",
+    disablePerviousSteps: true,
+  },
+};

src/components/Stepper/MucStepper.vue

@@ -12,6 +12,7 @@
                 :item="item"
                 :is-active="isActive(item.id)"
                 :is-done="isDone(item.id)"
+                :disabled="disabled(item.id)"
                 v-on:click="handleChange"
               />
             </template>
@@ -28,7 +29,11 @@ import { ref, watch } from "vue";
 import MucStepperItem from "./MucStepperItem.vue";
 import { StepperItem } from "./MucStepperTypes";
 
-const { stepItems, activeItem } = defineProps<{
+const {
+  stepItems,
+  activeItem,
+  disablePerviousSteps = false,
+} = defineProps<{
   /**
    * List of items displayed in the stepper
    */
@@ -38,6 +43,11 @@ const { stepItems, activeItem } = defineProps<{
    * Id of the current step item
    */
   activeItem: string;
+
+  /**
+   * Disables the previous steps
+   */
+  disablePerviousSteps?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -84,6 +94,14 @@ const isActive = (id: string) => id === activeItem;
  */
 const isDone = (id: string) => getIndexOfItem(id) < indexOfActivItem.value;
 
+/**
+ * Checks if an item is disabled
+ * @param id id of the item
+ * @return if item is disabled
+ */
+const disabled = (id: string) =>
+  disablePerviousSteps && !isActive(id) && isDone(id);
+
 /**
  * Handles a click on an item
  * @param id id of the item

src/components/Stepper/MucStepperItem.vue

@@ -4,13 +4,13 @@
     @click="handleClick"
   >
     <div
-      class="m-form-step__icon"
+      :class="'m-form-step__icon' + disabledStep"
       :tabindex="getTabindex"
       :aria-label="getAriaLabel"
     >
       <MucIcon :icon="getIcon" />
     </div>
-    <div class="m-form-step__title">
+    <div :class="'m-form-step__title' + disabledStep">
       <span aria-disabled="true"> {{ item.label }}</span>
     </div>
   </li>
@@ -22,7 +22,7 @@ import { computed } from "vue";
 import { MucIcon } from "../Icon";
 import { StepperItem } from "./MucStepperTypes";
 
-const { item, isActive, isDone } = defineProps<{
+const { item, isActive, isDone, disabled } = defineProps<{
   /**
    * Individual item to display inside the MucStepper component
    */
@@ -37,6 +37,11 @@ const { item, isActive, isDone } = defineProps<{
    * Show stepper as done
    */
   isDone: boolean;
+
+  /**
+   * Disabled stepper
+   */
+  disabled: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -60,7 +65,14 @@ const isActiveStep = computed(() =>
 /**
  * Computed property show courser on clickable step
  */
-const clickableStep = computed(() => (isDone ? " show-cursor" : ""));
+const clickableStep = computed(() =>
+  isDone && !disabled ? " show-cursor" : ""
+);
+
+/**
+ * Computed property set disabled state to step
+ */
+const disabledStep = computed(() => (disabled ? " disabled" : ""));
 
 /**
  * Computed property set icon of step
@@ -70,7 +82,9 @@ const getIcon = computed(() => (isDone ? "check" : item.icon));
 /**
  * Computed property set tabindex
  */
-const getTabindex = computed(() => (isActive || isDone ? 0 : -1));
+const getTabindex = computed(() =>
+  isActive || (isDone && !disabled) ? 0 : -1
+);
 
 /**
  * Computed property set aria-label
@@ -82,12 +96,17 @@ const getAriaLabel = computed(() =>
 );
 
 const handleClick = () => {
-  if (isDone) emit("click", item.id);
+  if (isDone && !disabled) emit("click", item.id);
 };
 </script>
 
 <style scoped>
 .show-cursor {
   cursor: pointer;
 }
+
+.disabled {
+  color: #9ca8b3;
+  border-color: #9ca8b3;
+}
 </style>