@mozaic-ds/vue 2.10.0 → 2.11.0

package/src/components/steppercompact/MStepperCompact.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="mc-stepper-compact">
+    <div class="mc-circular-progressbar mc-stepper-compact__progress">
+      <MCircularProgressbar
+        aria-label="Progress bar"
+        type="content"
+        size="m"
+        :value="progressValue"
+        :content-value="contentValue"
+        class="mc-stepper-compact__indicator mc-stepper-compact__number"
+      />
+    </div>
+    <div class="mc-stepper-compact__label-container">
+      <p class="mc-stepper-compact__label">
+        {{ label }}
+      </p>
+      <p v-if="description" class="mc-stepper-compact__description">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import MCircularProgressbar from '../circularprogressbar/MCircularProgressbar.vue';
+/**
+ * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Current step of the stepper compact.
+     */
+    value?: number;
+    /**
+     * Maximum number of steps for the stepper compact.
+     */
+    maxSteps?: number;
+    /**
+     * Label of the stepper compact.
+     */
+    label: string;
+    /**
+     * Description displayed below the label of the stepper compact.
+     */
+    description?: string;
+  }>(),
+  {
+    value: 1,
+    maxSteps: 4,
+  },
+);
+
+const progressValue = computed(() => {
+  const value = props.value ?? 0;
+  const max = props.maxSteps ?? 1;
+  return Math.round((value / max) * 100);
+});
+
+const contentValue = computed(() => {
+  return `${props.value} / ${props.maxSteps}`;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/stepper-compact';
+@use '@mozaic-ds/styles/components/circular-progressbar/_t.circular-progressbar'
+  as *;
+
+.mc-stepper-compact__progress {
+  width: $spacing-600;
+  height: $spacing-600;
+
+  ::v-deep(.mc-circular-progressbar__content) {
+    display: block;
+    visibility: visible;
+  }
+
+  ::v-deep(.mc-circular-progressbar__number) {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  ::v-deep(.mc-circular-progressbar__number) {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  ::v-deep(.mc-circular-progressbar__indicator) {
+    @include calculate-border-width(4, 48, 100);
+    stroke: $stepper-color-progress-bar-indicator;
+    fill: none;
+    stroke-linecap: round;
+  }
+}
+</style>

package/src/components/steppercompact/README.md

@@ -0,0 +1,13 @@
+# MStepperCompact
+
+A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `value` | Current step of the stepper compact. | `number` | `1` |
+| `maxSteps` | Maximum number of steps for the stepper compact. | `number` | `4` |
+| `label*` | Label of the stepper compact. | `string` | - |
+| `description` | Description displayed below the label of the stepper compact. | `string` | - |

package/src/components/tag/MTag.vue

@@ -60,7 +60,7 @@
       @click="id && emit('remove-tag', id)"
     >
       <CrossCircleFilled24 class="mc-tag-removable__icon" aria-hidden="true" />
-      <span class="mc-tag-removable__text">removableLabel</span>
+      <span class="mc-tag-removable__text">{{ removableLabel }}</span>
     </button>
   </span>
 
@@ -124,6 +124,7 @@ const props = withDefaults(
   {
     type: 'informative',
     contextualisedNumber: 99,
+    removableLabel: 'Remove',
   },
 );
 

package/src/components/tag/README.md

@@ -15,7 +15,7 @@ A Tag is a UI element used to filter data, categorize, select or deselect an opt
 | `modelValue` | The tag's checked state, bound via v-model. Used only for type: 'selectable'. | `boolean` | - |
 | `disabled` | If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types. | `boolean` | - |
 | `contextualisedNumber` | A number displayed in the badge when the tag is contextualised. | `number` | `99` |
-| `removableLabel` | Accessible label text for the remove button in removable tags. | `string` | - |
+| `removableLabel` | Accessible label text for the remove button in removable tags. | `string` | `"Remove"` |
 
 ## Events
 

package/src/components/toaster/README.md

@@ -10,7 +10,7 @@ A toaster is a temporary notification that appears briefly on the screen to prov
 | `open` | If `true`, display the Toaster. | `boolean` | - |
 | `position` | Position of the toaster. | `"top"` `"bottom"` `"top-center"` `"bottom-center"` | - |
 | `description*` | Description of the toaster. | `string` | - |
-| `status` | Allows to define the toaster style. | `"info"` `"success"` `"warning"` `"error"` | `"info"` |
+| `status` | Allows to define the toaster style. | `"info"` `"warning"` `"error"` `"success"` | `"info"` |
 | `closable` | If `true`, display the close button. | `boolean` | `true` |
 | `progress` | If `true`, display the progress bar of the duration. | `boolean` | - |
 | `timeout` | Duration of the toaster | `number` | - |

package/src/main.ts

@@ -31,9 +31,12 @@ export { default as MRadio } from './components/radio/MRadio.vue';
 export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue';
 export { default as MSegmentedControl } from './components/segmentedcontrol/MSegmentedControl.vue';
 export { default as MSelect } from './components/select/MSelect.vue';
+export { default as MStarRating } from './components/starrating/MStarRating.vue';
 export { default as MStatusBadge } from './components/statusbadge/MStatusBadge.vue';
 export { default as MStatusDot } from './components/statusdot/MStatusDot.vue';
+export { default as MStatusMessage } from './components/statusmessage/MStatusMessage.vue';
 export { default as MStatusNotification } from './components/statusnotification/MStatusNotification.vue';
+export { default as MStepperCompact } from './components/steppercompact/MStepperCompact.vue';
 export { default as MTabs } from './components/tabs/MTabs.vue';
 export { default as MTag } from './components/tag/MTag.vue';
 export { default as MTextArea } from './components/textarea/MTextArea.vue';