@mozaic-ds/vue 2.19.1 → 2.20.0

package/src/components/sidebarshortcuts/README.md

@@ -17,6 +17,18 @@ SidebarShortcuts is a component that displays a list of sidebar shortcut items.
 
 ## Dependencies
 
+### Depends on
+
+- [MDivider](../divider)
+
+### Graph
+
+```mermaid
+graph TD;
+  MSidebarShortcuts --> MDivider
+style MSidebarShortcuts fill:#008240,stroke:#333,stroke-width:4px
+```
+
 ### Used By
 
 - [DefaultCase.stories](../sidebar/stories)

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

@@ -12,7 +12,7 @@ const meta: Meta<typeof MStatusBadge> = {
       },
     },
   },
-  args: { label: 'Badge label' },
+  args: { label: 'Badge label', size: 'm' },
   render: (args) => ({
     components: { MStatusBadge },
     setup() {
@@ -28,6 +28,10 @@ type Story = StoryObj<typeof MStatusBadge>;
 
 export const Info: Story = {};
 
+export const Small: Story = {
+  args: { size: 's' },
+};
+
 export const Success: Story = {
   args: { status: 'success' },
 };

package/src/components/statusbadge/MStatusBadge.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mc-status-badge" :class="classObject">
-    <MStatusDot :status="status" />
+    <MStatusDot :status="status" :size="size" />
     <span class="mc-status-badge__label">{{ label }}</span>
   </div>
 </template>
@@ -17,12 +17,17 @@ const props = withDefaults(
      * Content of the status badge
      */
     label: string;
+    /**
+     * Allows to define the status badge size
+     */
+    size?: 's' | 'm';
     /**
      * Allows to define the status badge type
      */
     status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
   }>(),
   {
+    size: 'm',
     status: 'info',
   },
 );
@@ -31,6 +36,7 @@ const classObject = computed(() => {
   return {
     [`mc-status-badge--${props.status}`]:
       props.status && props.status != 'info',
+    [`mc-status-badge--${props.size}`]: props.size && props.size != 'm',
   };
 });
 </script>

package/src/components/statusbadge/MstatusBadge.spec.ts

@@ -13,4 +13,35 @@ describe('MStatusBadge component', () => {
 
     expect(wrapper.text()).toContain('Badge Label');
   });
+
+  describe('size', () => {
+    it('does not add a size modifier class when size is "m" (default)', () => {
+      const wrapper = mount(MStatusBadge, { props: { label: 'Badge' } });
+      expect(wrapper.classes()).not.toContain('mc-status-badge--m');
+    });
+
+    it('adds the "mc-status-badge--s" class when size is "s"', () => {
+      const wrapper = mount(MStatusBadge, {
+        props: { label: 'Badge', size: 's' },
+      });
+      expect(wrapper.classes()).toContain('mc-status-badge--s');
+    });
+  });
+
+  describe('status', () => {
+    it('does not add a status modifier class when status is "info" (default)', () => {
+      const wrapper = mount(MStatusBadge, { props: { label: 'Badge' } });
+      expect(wrapper.classes()).not.toContain('mc-status-badge--info');
+    });
+
+    it.each(['success', 'warning', 'error', 'neutral'] as const)(
+      'adds the "mc-status-badge--%s" class when status is "%s"',
+      (status) => {
+        const wrapper = mount(MStatusBadge, {
+          props: { label: 'Badge', status },
+        });
+        expect(wrapper.classes()).toContain(`mc-status-badge--${status}`);
+      },
+    );
+  });
 });

package/src/components/statusbadge/README.md

@@ -8,6 +8,7 @@ A Status Badge is used to indicate the current status of an element, providing a
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `label*` | Content of the status badge | `string` | - |
+| `size` | Allows to define the status badge size | `"s"` `"m"` | `"m"` |
 | `status` | Allows to define the status badge type | `"info"` `"warning"` `"error"` `"success"` `"neutral"` | `"info"` |
 
 ## Dependencies

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

@@ -4,8 +4,8 @@ import MStatusMessage from './MStatusMessage.vue';
 
 import {
   InfoCircleFilled24,
-  WarningCircleFilled24,
-  CrossCircleFilled24,
+  WarningTriangleFilled24,
+  ErrorFilled24,
   CheckCircleFilled24,
 } from '@mozaic-ds/icons-vue';
 
@@ -56,7 +56,7 @@ describe('MStatusMessage.vue', () => {
       props: { status: 'warning', label: 'Warning' },
     });
 
-    expect(wrapper.findComponent(WarningCircleFilled24).exists()).toBe(true);
+    expect(wrapper.findComponent(WarningTriangleFilled24).exists()).toBe(true);
   });
 
   it('renders the error icon when status is error', () => {
@@ -64,7 +64,7 @@ describe('MStatusMessage.vue', () => {
       props: { status: 'error', label: 'Error' },
     });
 
-    expect(wrapper.findComponent(CrossCircleFilled24).exists()).toBe(true);
+    expect(wrapper.findComponent(ErrorFilled24).exists()).toBe(true);
   });
 
   it('adds correct modifier class for non-info statuses', () => {

package/src/components/statusmessage/MStatusMessage.vue

@@ -15,8 +15,8 @@
 import { computed } from 'vue';
 import {
   InfoCircleFilled24,
-  WarningCircleFilled24,
-  CrossCircleFilled24,
+  WarningTriangleFilled24,
+  ErrorFilled24,
   CheckCircleFilled24,
 } from '@mozaic-ds/icons-vue';
 import MLoader from '../loader/MLoader.vue';
@@ -29,12 +29,7 @@ const props = withDefaults(
      * Allows to define the status message style.
      */
     status?:
-      | 'info'
-      | 'success'
-      | 'warning'
-      | 'error'
-      | 'neutral'
-      | 'inprogress';
+      'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';
     /**
      * Allows to define the status message appearance.
      * The accent status is used to highlight a specific message.
@@ -64,9 +59,9 @@ const iconComponent = computed(() => {
     case 'success':
       return CheckCircleFilled24;
     case 'warning':
-      return WarningCircleFilled24;
+      return WarningTriangleFilled24;
     case 'error':
-      return CrossCircleFilled24;
+      return ErrorFilled24;
     case 'info':
     default:
       return InfoCircleFilled24;

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

@@ -1,11 +1,11 @@
 import { mount } from '@vue/test-utils';
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import MStatusNotification from './MStatusNotification.vue';
 import {
-  InfoCircleFilled32,
-  WarningCircleFilled32,
-  CrossCircleFilled32,
-  CheckCircleFilled32,
+  InfoCircleFilled24,
+  WarningTriangleFilled24,
+  ErrorFilled24,
+  CheckCircleFilled24,
 } from '@mozaic-ds/icons-vue';
 
 describe('MStatusNotification.vue', () => {
@@ -19,7 +19,7 @@ describe('MStatusNotification.vue', () => {
 
     expect(wrapper.text()).toContain('Test Title');
     expect(wrapper.text()).toContain('Test Description');
-    expect(wrapper.findComponent(InfoCircleFilled32).exists()).toBe(true); // Default icon is InfoCircle32
+    expect(wrapper.findComponent(InfoCircleFilled24).exists()).toBe(true);
     expect(wrapper.classes()).toContain('mc-status-notification');
   });
 
@@ -31,7 +31,7 @@ describe('MStatusNotification.vue', () => {
         status: 'success',
       },
     });
-    expect(wrapperSuccess.findComponent(CheckCircleFilled32).exists()).toBe(
+    expect(wrapperSuccess.findComponent(CheckCircleFilled24).exists()).toBe(
       true,
     );
 
@@ -42,7 +42,7 @@ describe('MStatusNotification.vue', () => {
         status: 'warning',
       },
     });
-    expect(wrapperWarning.findComponent(WarningCircleFilled32).exists()).toBe(
+    expect(wrapperWarning.findComponent(WarningTriangleFilled24).exists()).toBe(
       true,
     );
 
@@ -53,7 +53,7 @@ describe('MStatusNotification.vue', () => {
         status: 'error',
       },
     });
-    expect(wrapperError.findComponent(CrossCircleFilled32).exists()).toBe(true);
+    expect(wrapperError.findComponent(ErrorFilled24).exists()).toBe(true);
   });
 
   it('should show the close button if closable prop is true', () => {

package/src/components/statusnotification/MStatusNotification.vue

@@ -36,12 +36,13 @@
 import { computed, type VNode } from 'vue';
 import {
   Cross20,
-  InfoCircleFilled32,
-  WarningCircleFilled32,
-  CrossCircleFilled32,
-  CheckCircleFilled32,
+  InfoCircleFilled24,
+  WarningTriangleFilled24,
+  ErrorFilled24,
+  CheckCircleFilled24,
 } from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
+
 /**
  * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
  */
@@ -86,14 +87,14 @@ const classObject = computed(() => {
 const iconComponent = computed(() => {
   switch (props.status) {
     case 'success':
-      return CheckCircleFilled32;
+      return CheckCircleFilled24;
     case 'warning':
-      return WarningCircleFilled32;
+      return WarningTriangleFilled24;
     case 'error':
-      return CrossCircleFilled32;
+      return ErrorFilled24;
     case 'info':
     default:
-      return InfoCircleFilled32;
+      return InfoCircleFilled24;
   }
 });
 

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { action } from 'storybook/actions';
 
 import Mtabs from './MTabs.vue';
-import { ChevronRight24 } from '@mozaic-ds/icons-vue';
+import { ChevronRight20, ChevronRight24 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof Mtabs> = {
   title: 'Navigation/Tabs',
@@ -17,6 +17,7 @@ const meta: Meta<typeof Mtabs> = {
   },
   args: {
     modelValue: 'label1',
+    size: 'm',
     tabs: [
       {
         id: 'label1',
@@ -57,6 +58,34 @@ type Story = StoryObj<typeof Mtabs>;
 
 export const Default: Story = {};
 
+export const Small: Story = {
+  args: {
+    size: 's',
+    tabs: [
+      {
+        id: 'label1',
+        label: 'Label',
+        icon: ChevronRight20,
+      },
+      {
+        id: 'label2',
+        label: 'Label',
+        icon: ChevronRight20,
+      },
+      {
+        id: 'label3',
+        label: 'Label',
+        icon: ChevronRight20,
+      },
+      {
+        id: 'label4',
+        label: 'Label',
+        icon: ChevronRight20,
+      },
+    ],
+  },
+};
+
 export const Icons: Story = {
   args: {
     tabs: [

package/src/components/tabs/MTabs.vue

@@ -23,9 +23,12 @@
           @click="onClickTab(index, tab.id)"
           @keydown="onKeydown($event, index)"
         >
-          <span v-if="tab.icon" class="mc-tabs__icon">
-            <component :is="tab.icon" aria-hidden="true" />
-          </span>
+          <component
+            v-if="tab.icon"
+            :is="tab.icon"
+            class="mc-tabs__icon"
+            aria-hidden="true"
+          />
           <div class="mc-tabs__label">
             <span>{{ tab.label }}</span>
           </div>
@@ -52,6 +55,10 @@ const props = withDefaults(
      * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
      */
     description?: string;
+    /**
+     * Defines the size of the tab.
+     */
+    size?: 's' | 'm';
     /**
      * If `true`, the divider will appear.
      */
@@ -95,6 +102,7 @@ const props = withDefaults(
   }>(),
   {
     modelValue: 0,
+    size: 'm',
     divider: true,
   },
 );
@@ -102,6 +110,7 @@ const props = withDefaults(
 const classObject = computed(() => {
   return {
     'mc-tabs--centered': props.centered,
+    [`mc-tabs--${props.size}`]: props.size !== 'm',
   };
 });
 

package/src/components/tabs/Mtabs.spec.ts

@@ -103,6 +103,25 @@ describe('MTabs.vue', () => {
     });
   });
 
+  it('does not add size class when size is "m" (default)', () => {
+    const wrapper = mount(MTabs, { props: { tabs } });
+    expect(wrapper.classes()).not.toContain('mc-tabs--m');
+    expect(wrapper.classes()).not.toContain('mc-tabs--s');
+  });
+
+  it('adds mc-tabs--s class when size is "s" and removes it when changed to "m"', async () => {
+    const wrapper = mount(MTabs, {
+      props: { tabs, size: 's' },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tabs--s');
+
+    await wrapper.setProps({ size: 'm' });
+
+    expect(wrapper.classes()).not.toContain('mc-tabs--s');
+    expect(wrapper.classes()).not.toContain('mc-tabs--m');
+  });
+
   it('adds divider and centered classes based on props', async () => {
     const wrapper = mount(MTabs, {
       props: {

package/src/components/tabs/README.md

@@ -8,6 +8,7 @@ Tabs are a navigation component that allows users to switch between different se
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `description` | A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component. | `string` | - |
+| `size` | Defines the size of the tab. | `"s"` `"m"` | `"m"` |
 | `divider` | If `true`, the divider will appear. | `boolean` | `true` |
 | `centered` | If `true`, the tabs of the component will be centered. | `boolean` | - |
 | `modelValue` | Defines the currently active tab.

package/src/components/tileselectable/MTileSelectable.spec.ts

@@ -174,4 +174,73 @@ describe('MTileSelectable', () => {
 
     expect(wrapper.find('.mc-tile__content').exists()).toBe(false);
   });
+
+  it('emits update:modelValue when card is clicked and clickable is true', async () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+        trigger: 'container',
+      },
+    });
+
+    await wrapper.find('.mc-tile').trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([true]);
+  });
+
+  it('does not emit update:modelValue when card is clicked but clickable is false', async () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+      },
+    });
+
+    await wrapper.find('.mc-tile').trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+  });
+
+  it('toggles off when card is clicked and already selected with clickable and checkbox', async () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: true,
+        trigger: 'container',
+        inputType: 'checkbox',
+      },
+    });
+
+    await wrapper.find('.mc-tile').trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([false]);
+  });
+
+  it('always sets true when card is clicked with clickable and radio', async () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+        trigger: 'container',
+        inputType: 'radio',
+      },
+    });
+
+    await wrapper.find('.mc-tile').trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([true]);
+  });
+
+  it('does not double-toggle when the input itself is clicked with clickable enabled', async () => {
+    const wrapper = mount(MTileSelectable, {
+      props: {
+        modelValue: false,
+        trigger: 'container',
+        inputType: 'checkbox',
+      },
+    });
+
+    const input = wrapper.find('input[type="checkbox"]');
+    await input.trigger('click');
+    // Clicking the input itself should not invoke the card click handler
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+  });
 });

package/src/components/tileselectable/MTileSelectable.stories.ts

@@ -42,14 +42,20 @@ type Story = StoryObj<typeof MTileSelectable>;
 
 export const Default: Story = {};
 
-export const RadioButton: Story = {
+export const Radio: Story = {
   args: {
     inputType: 'radio',
   },
 };
 
-export const LeftPositionInput: Story = {
+export const Left: Story = {
   args: {
     inputPosition: 'left',
   },
 };
+
+export const ClickableContainer: Story = {
+  args: {
+    trigger: 'container',
+  },
+};

package/src/components/tileselectable/MTileSelectable.vue

@@ -8,7 +8,11 @@
       'mc-tile--input-center': props.centered,
       'mc-tile--no-input': props.hideInput,
     }"
-    v-bind="props.hideInput && { onClick: () => (checked = !checked) }"
+    v-bind="
+      (props.hideInput || props.trigger === 'container') && {
+        onClick: handleCardClick,
+      }
+    "
   >
     <div v-if="$slots.details" class="mc-tile__header">
       <div class="mc-tile__body">
@@ -22,6 +26,7 @@
           :id="`checkbox-${id}`"
           name="tile-select-group"
           aria-label="Tile checkbox"
+          @click.stop
         />
 
         <MRadio
@@ -30,6 +35,7 @@
           :id="`radio-${id}`"
           name="tile-select-group"
           aria-label="Tile radio button"
+          @click.stop
         />
       </div>
     </div>
@@ -46,6 +52,7 @@
           :id="`checkbox-${id}`"
           name="tile-select-group"
           aria-label="Tile checkbox"
+          @click.stop
         />
 
         <MRadio
@@ -54,6 +61,7 @@
           :id="`radio-${id}`"
           name="tile-select-group"
           aria-label="Tile radio button"
+          @click.stop
         />
       </div>
     </template>
@@ -99,6 +107,10 @@ const props = withDefaults(
      * If `true`, hides the input and makes the whole tile selectable.
      */
     hideInput?: boolean;
+    /**
+     * Determines how the tile expansion is triggered.
+     */
+    trigger?: 'container' | 'input';
   }>(),
   {
     inputType: 'checkbox',
@@ -135,6 +147,11 @@ const checked = computed({
     emit('update:modelValue', value);
   },
 });
+
+function handleCardClick() {
+  if (props.inputType === 'radio' && checked.value) return;
+  checked.value = !checked.value;
+}
 </script>
 
 <style lang="scss" scoped>

package/src/components/tileselectable/README.md

@@ -13,6 +13,7 @@ A tile is a container component used to group related content and actions within
 | `inputPosition` | Position of the input relative to the tile content. | `"left"` `"right"` | `"right"` |
 | `centered` | Vertical alignment of the input. | `boolean` | - |
 | `hideInput` | If `true`, hides the input and makes the whole tile selectable. | `boolean` | - |
+| `trigger` | Determines how the tile expansion is triggered. | `"input"` `"container"` | - |
 
 ## Slots
 

package/src/main.ts

@@ -32,8 +32,11 @@ export { default as MLoadingOverlay } from './components/loadingoverlay/MLoading
 export { default as MModal } from './components/modal/MModal.vue';
 export { default as MNavigationIndicator } from './components/navigationindicator/MNavigationIndicator.vue';
 export { default as MNumberBadge } from './components/numberbadge/MNumberBadge.vue';
+export { default as MOptionListbox } from './components/optionListbox/MOptionListbox.vue';
 export { default as MOverlay } from './components/overlay/MOverlay.vue';
 export { default as MPageHeader } from './components/pageheader/MPageHeader.vue';
+export { default as MPageHeaderContext } from './components/pageheadercontext/MPageHeaderContext.vue';
+export { default as MPageHeaderFeature } from './components/pageheaderfeature/MPageHeaderFeature.vue';
 export { default as MPagination } from './components/pagination/MPagination.vue';
 export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
 export { default as MPhoneNumber } from './components/phonenumber/MPhoneNumber.vue';

package/src/utils/debounce.ts

@@ -0,0 +1,15 @@
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return function (this: unknown, ...args: Parameters<T>) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn.apply(this, args);
+    }, wait);
+  };
+}