@mozaic-ds/vue 2.16.0 → 2.18.0

package/src/components/starrating/MStarRating.spec.ts

@@ -4,20 +4,6 @@ import { nextTick } from 'vue';
 import MStarRating from './MStarRating.vue';
 import { StarFilled24, StarHalf24 } from '@mozaic-ds/icons-vue';
 
-function mockRect(el: Element, { left = 0, width = 100 } = {}) {
-  Object.defineProperty(el, 'getBoundingClientRect', {
-    value: () => ({
-      left,
-      width,
-      top: 0,
-      bottom: 0,
-      right: left + width,
-      height: 0,
-    }),
-    configurable: true,
-  });
-}
-
 describe('MStarRating', () => {
   it('renders 5 stars by default', () => {
     const wrapper = shallowMount(MStarRating, { props: { modelValue: 0 } });
@@ -39,8 +25,7 @@ describe('MStarRating', () => {
     });
     const stars = wrapper.findAll('.mc-star-rating__icon');
     const first = stars[0];
-    mockRect(first.element, { left: 0, width: 100 });
-    await first.trigger('mousemove', { clientX: 10 });
+    await first.trigger('pointermove', { pointerType: 'mouse' });
     expect(wrapper.findComponent(StarHalf24).exists()).toBe(false);
   });
 
@@ -60,8 +45,7 @@ describe('MStarRating', () => {
     });
     const stars = wrapper.findAll('.mc-star-rating__icon');
     const first = stars[0];
-    mockRect(first.element, { left: 0, width: 100 });
-    await first.trigger('click', { clientX: 10 });
+    await first.trigger('click');
     const emitted = wrapper.emitted('update:modelValue') || [];
     expect(emitted.length).toBe(1);
     expect(emitted[0][0]).toBe(1);
@@ -109,9 +93,8 @@ describe('MStarRating', () => {
 
     const stars = wrapper.findAll('.mc-star-rating__icon');
     const first = stars[0];
-    mockRect(first.element, { left: 0, width: 100 });
 
-    await first.trigger('mousemove', { clientX: 10 });
+    await first.trigger('pointermove', { pointerType: 'mouse' });
     await nextTick();
 
     // aria-label should reflect hovered value (0.5) not modelValue (2)
@@ -124,6 +107,21 @@ describe('MStarRating', () => {
     expect(root.attributes('aria-label')).toContain('2');
   });
 
+  it('ignores non-mouse pointermove events for hover state', async () => {
+    const wrapper = shallowMount(MStarRating, {
+      props: { modelValue: 3, size: 'm', readonly: false },
+    });
+
+    const stars = wrapper.findAll('.mc-star-rating__icon');
+    const first = stars[0];
+    const root = wrapper.find('[role="slider"]');
+
+    await first.trigger('pointermove', { pointerType: 'touch' });
+    await nextTick();
+
+    expect(root.attributes('aria-label')).toContain('3');
+  });
+
   it('resets hover to null on blur (aria-label falls back to modelValue)', async () => {
     const wrapper = shallowMount(MStarRating, {
       props: { modelValue: 3, size: 'm', readonly: false },
@@ -131,12 +129,11 @@ describe('MStarRating', () => {
 
     const stars = wrapper.findAll('.mc-star-rating__icon');
     const secondStar = stars[1];
-    mockRect(secondStar.element, { left: 0, width: 100 });
 
     const root = wrapper.find('[role="slider"]');
 
     await root.trigger('focus');
-    await secondStar.trigger('mousemove', { clientX: 10 });
+    await secondStar.trigger('pointermove', { pointerType: 'mouse' });
     await nextTick();
     expect(root.attributes('aria-label')).toContain('2');
 

package/src/components/starrating/MStarRating.vue

@@ -40,7 +40,7 @@
         v-on="
           !isReadonly
             ? {
-                mousemove: () => onHover(index),
+                pointermove: (event: PointerEvent) => onHover(event, index),
                 click: () => onClick(index),
               }
             : {}
@@ -152,7 +152,8 @@ function getStarComponent(index: number) {
   }
 }
 
-function onHover(index: number) {
+function onHover(event: PointerEvent, index: number) {
+  if (event.pointerType !== 'mouse') return;
   hover.value = index + 1;
 }
 

package/src/components/statusbadge/MStatusBadge.figma.ts

@@ -0,0 +1,27 @@
+/**
+ * Code Connect mapping for MStatusBadge
+ * Links Figma Status badge (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-21619',
+  {
+    props: {
+      label: figma.string('Label'),
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+        Neutral: 'neutral',
+      }),
+    },
+    example: ({ label, status }) =>
+      html`<script setup>
+        import { MStatusBadge } from '@mozaic-ds/vue';
+      </script>
+
+      <MStatusBadge label=${label} status=${status}></MStatusBadge>`,
+  },
+);

package/src/components/statusdot/MStatusDot.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MStatusDot
+ * Links Figma Status dot (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-21635',
+  {
+    props: {
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+        Neutral: 'neutral',
+      }),
+      size: figma.enum('Size', {
+        'S (4px)': 's',
+        'M (8px)': 'm',
+        'L (16px)': 'l',
+      }),
+    },
+    example: ({ status, size }) =>
+      html`<script setup>
+        import { MStatusDot } from '@mozaic-ds/vue';
+      </script>
+
+      <MStatusDot status=${status} size=${size}></MStatusDot>`,
+  },
+);

package/src/components/statusmessage/MStatusMessage.figma.ts

@@ -0,0 +1,28 @@
+/**
+ * Code Connect mapping for MStatusMessage
+ * Links Figma Status message to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=20807-13948',
+  {
+    props: {
+      label: figma.string('Status message'),
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+        Neutral: 'neutral',
+        'In progress': 'inprogress',
+      }),
+    },
+    example: ({ label, status }) =>
+      html`<script setup>
+        import { MStatusMessage } from '@mozaic-ds/vue';
+      </script>
+
+      <MStatusMessage label=${label} status=${status}></MStatusMessage>`,
+  },
+);

package/src/components/statusmessage/MStatusMessage.spec.ts

@@ -20,6 +20,21 @@ describe('MStatusMessage.vue', () => {
     );
   });
 
+  it('adds the accent modifier class when appearance is accent', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { label: 'Accent', appearance: 'accent' },
+    });
+    expect(wrapper.classes()).toContain('mc-status-message--accent');
+  });
+
+  it('does NOT add the accent modifier class when appearance is standard', () => {
+    const wrapper = mount(MStatusMessage, {
+      props: { label: 'Standard', appearance: 'standard' },
+    });
+    expect(wrapper.classes()).not.toContain('mc-status-message--accent');
+    expect(wrapper.classes()).not.toContain('mc-status-message--standard');
+  });
+
   it('uses the info icon by default', () => {
     const wrapper = mount(MStatusMessage, {
       props: { label: 'Info message' },

package/src/components/statusmessage/MStatusMessage.stories.ts

@@ -50,3 +50,7 @@ export const Neutral: Story = {
 export const InProgress: Story = {
   args: { status: 'inprogress' },
 };
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+};

package/src/components/statusmessage/MStatusMessage.vue

@@ -35,6 +35,11 @@ const props = withDefaults(
       | 'error'
       | 'neutral'
       | 'inprogress';
+    /**
+     * Allows to define the status message appearance.
+     * The accent status is used to highlight a specific message.
+     */
+    appearance?: 'standard' | 'accent';
     /**
      * Label of the status message.
      */
@@ -42,6 +47,7 @@ const props = withDefaults(
   }>(),
   {
     status: 'info',
+    appearance: 'standard',
   },
 );
 
@@ -49,6 +55,7 @@ const classObject = computed(() => {
   return {
     [`mc-status-message--${props.status}`]:
       props.status && props.status != 'info',
+    [`mc-status-message--${props.appearance}`]: props.appearance != 'standard',
   };
 });
 

package/src/components/statusmessage/README.md

@@ -8,6 +8,8 @@ A Status Message is a compact component that combines an icon and concise text t
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `status` | Allows to define the status message style. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` `"inprogress"` | `"info"` |
+| `appearance` | Allows to define the status message appearance.
+The accent status is used to highlight a specific message. | `"standard"` `"accent"` | `"standard"` |
 | `label*` | Label of the status message. | `string` | - |
 
 ## Dependencies

package/src/components/statusnotification/MStatusNotification.figma.ts

@@ -0,0 +1,29 @@
+/**
+ * Code Connect mapping for MStatusNotification
+ * Links Figma Status notification (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-21600',
+  {
+    props: {
+      status: figma.enum('Status', {
+        Information: 'info',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+      }),
+    },
+    example: ({ status }) =>
+      html`<script setup>
+        import { MStatusNotification } from '@mozaic-ds/vue';
+      </script>
+
+      <MStatusNotification
+        title="Notification title"
+        description="Notification description"
+        status=${status}
+      ></MStatusNotification>`,
+  },
+);

package/src/components/stepperbottombar/MStepperBottomBar.figma.ts

@@ -0,0 +1,20 @@
+/**
+ * Code Connect mapping for MStepperBottomBar
+ * Links Figma Stepper bottom bar (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=10726-18528',
+  {
+    props: {
+      cancel: figma.boolean('Has cancel action'),
+    },
+    example: ({ cancel }) =>
+      html`<script setup>
+        import { MStepperBottomBar } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperBottomBar cancel=${cancel} :steps="3" />`,
+  },
+);

package/src/components/steppercompact/MStepperCompact.figma.ts

@@ -0,0 +1,21 @@
+/**
+ * Code Connect mapping for MStepperCompact
+ * Links Figma Stepper (Compact) (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=13297-24864',
+  {
+    props: {
+      label: figma.string('Step label'),
+      description: figma.string('Next step label'),
+    },
+    example: ({ label, description }) =>
+      html`<script setup>
+        import { MStepperCompact } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperCompact label=${label} :description=${description} :value="1" :max-steps="4"></MStepperCompact>`,
+  },
+);

package/src/components/stepperinline/MStepperInline.figma.ts

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MStepperInline
+ * Links Figma Stepper (Inline) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=13050-10371',
+  {
+    props: {
+      showStep03: figma.boolean('Show Step 03'),
+      showStep04: figma.boolean('Show Step 04'),
+      showStep05: figma.boolean('Show Step 05'),
+      showStep06: figma.boolean('Show Step 06'),
+    },
+    example: () =>
+      html`<script setup>
+        import { MStepperInline } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperInline :current-step="1" :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"></MStepperInline>`,
+  },
+);

package/src/components/stepperstacked/MStepperStacked.figma.ts

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MStepperStacked
+ * Links Figma Stepper (Stacked) (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=13179-6447',
+  {
+    props: {
+      showStep03: figma.boolean('Show Step 03'),
+      showStep04: figma.boolean('Show Step 04'),
+      showStep05: figma.boolean('Show Step 05'),
+      showStep06: figma.boolean('Show Step 06'),
+    },
+    example: () =>
+      html`<script setup>
+        import { MStepperStacked } from '@mozaic-ds/vue';
+      </script>
+
+      <MStepperStacked :current-step="1" :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"></MStepperStacked>`,
+  },
+);

package/src/components/tabs/MTabs.figma.ts

@@ -0,0 +1,33 @@
+/**
+ * Code Connect mapping for MTabs
+ * Links Figma Tabs (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-11474',
+  {
+    props: {
+      divider: figma.boolean('Show divider'),
+      centered: figma.enum('Centered', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ divider, centered }) =>
+      html`<script setup>
+        import { MTabs } from '@mozaic-ds/vue';
+      </script>
+
+      <MTabs
+        :divider=${divider}
+        centered=${centered}
+        model-value="label1"
+        :tabs="[
+          { id: 'label1', label: 'Label' },
+          { id: 'label2', label: 'Label' },
+          { id: 'label3', label: 'Label' },
+        ]"
+      ></MTabs>`,
+  },
+);

package/src/components/tabs/MTabs.vue

@@ -16,11 +16,15 @@
             'mc-tabs__tab--disabled': tab.disabled,
           }"
           :aria-selected="isTabSelected(index, tab.id)"
+          :aria-disabled="tab.disabled || undefined"
+          :disabled="tab.disabled"
+          :tabindex="index === focusableTabIndex ? 0 : -1"
           type="button"
           @click="onClickTab(index, tab.id)"
+          @keydown="onKeydown($event, index)"
         >
           <span v-if="tab.icon" class="mc-tabs__icon">
-            <component :is="tab.icon" />
+            <component :is="tab.icon" aria-hidden="true" />
           </span>
           <div class="mc-tabs__label">
             <span>{{ tab.label }}</span>
@@ -36,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, type Component } from 'vue';
+import { computed, nextTick, useTemplateRef, type Component } from 'vue';
 import MDivider from '../divider/MDivider.vue';
 import MNumberBadge from '../numberbadge/MNumberBadge.vue';
 /**
@@ -101,7 +105,48 @@ const classObject = computed(() => {
   };
 });
 
-const modelValue = ref<string | number | undefined>(props.modelValue);
+const modelValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: string | number | undefined) {
+    emit('update:modelValue', value);
+  },
+});
+
+const enabledTabs = computed(() => {
+  return props.tabs.map((_, i) => i).filter((i) => !props.tabs[i].disabled);
+});
+
+const selectedTabIndex = computed(() => {
+  if (typeof modelValue.value === 'string') {
+    return props.tabs.findIndex((tab) => tab.id === modelValue.value);
+  }
+
+  if (
+    typeof modelValue.value === 'number' &&
+    modelValue.value >= 0 &&
+    modelValue.value < props.tabs.length
+  ) {
+    return modelValue.value;
+  }
+
+  return -1;
+});
+
+const focusableTabIndex = computed(() => {
+  if (enabledTabs.value.length === 0) {
+    return -1;
+  }
+
+  if (enabledTabs.value.includes(selectedTabIndex.value)) {
+    return selectedTabIndex.value;
+  }
+
+  return enabledTabs.value[0];
+});
+
+const tabRefs = useTemplateRef<HTMLButtonElement[]>('tab');
 
 const onClickTab = (index: number, id?: string) => {
   const tab =
@@ -114,7 +159,6 @@ const onClickTab = (index: number, id?: string) => {
   if (tab?.disabled) return;
   if (value !== modelValue.value) {
     modelValue.value = value;
-    emit('update:modelValue', value);
   }
 };
 
@@ -124,6 +168,48 @@ const isTabSelected = (index: number, id?: string) => {
   return modelValue.value === value;
 };
 
+function onKeydown(event: KeyboardEvent, index: number) {
+  if (
+    event.key !== 'ArrowRight' &&
+    event.key !== 'ArrowLeft' &&
+    event.key !== 'Home' &&
+    event.key !== 'End'
+  ) {
+    return;
+  }
+
+  if (enabledTabs.value.length === 0) {
+    return;
+  }
+
+  const pos = enabledTabs.value.indexOf(index);
+
+  let nextPos: number | null = null;
+  if (event.key === 'ArrowRight') {
+    event.preventDefault();
+    if (pos < 0) return;
+    nextPos = (pos + 1) % enabledTabs.value.length;
+  } else if (event.key === 'ArrowLeft') {
+    event.preventDefault();
+    if (pos < 0) return;
+    nextPos = (pos - 1 + enabledTabs.value.length) % enabledTabs.value.length;
+  } else if (event.key === 'Home') {
+    event.preventDefault();
+    nextPos = 0;
+  } else if (event.key === 'End') {
+    event.preventDefault();
+    nextPos = enabledTabs.value.length - 1;
+  }
+
+  if (nextPos !== null) {
+    const nextIndex = enabledTabs.value[nextPos];
+    onClickTab(nextIndex, props.tabs[nextIndex].id);
+    nextTick(() => {
+      tabRefs.value?.[nextIndex]?.focus();
+    });
+  }
+}
+
 const emit = defineEmits<{
   /**
    * Emits when the selected tab changes, updating the modelValue prop.