@mozaic-ds/vue 2.4.0 → 2.5.0

package/src/components/overlay/MOverlay.stories.ts

@@ -17,6 +17,17 @@ const meta: Meta<typeof MOverlay> = {
   args: {
     isVisible: true,
   },
+  argTypes: {
+    '--overlay-z-index': {
+      description: 'Customise the z-index of the overlay',
+      control: false,
+      table: {
+        category: 'Custom Properties',
+        type: { summary: 'number' },
+        defaultValue: { summary: '2' },
+      },
+    },
+  },
   render: (args) => ({
     components: { MOverlay },
     setup() {

package/src/components/textinput/MTextInput.spec.ts

@@ -79,8 +79,8 @@ describe('MTextInput component', () => {
     const clearButton = wrapper.find('.mc-controls-options__button');
     await clearButton.trigger('click');
 
-    expect(wrapper.vm.modelValue).toBe('');
-    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['']);
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+    expect(wrapper.emitted()['update:modelValue'].slice(-1)[0]).toEqual(['']);
   });
 
   it('should not render the clear button if isClearable is false', () => {

package/src/components/textinput/MTextInput.stories.ts

@@ -3,6 +3,7 @@ import { action } from 'storybook/actions';
 
 import MTextInput from './MTextInput.vue';
 import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';
+import { ref } from 'vue';
 
 const meta: Meta<typeof MTextInput> = {
   title: 'Form Elements/TextInput',
@@ -22,13 +23,18 @@ const meta: Meta<typeof MTextInput> = {
   render: (args) => ({
     components: { MTextInput, Search24 },
     setup() {
-      const handleUpdate = action('update:modelValue');
+      const modelValue = ref(args.modelValue);
 
-      return { args, handleUpdate };
+      const handleUpdate = (val: string | number) => {
+        modelValue.value = val;
+        action('update:modelValue')(val);
+      };
+
+      return { args, modelValue, handleUpdate };
     },
     template: `
       <MTextInput 
-        v-bind="args"
+        v-bind="{ ...args, modelValue }"
         @update:modelValue="handleUpdate"
       />
     `,

package/src/components/textinput/MTextInput.vue

@@ -7,7 +7,7 @@
     <input
       :id="id"
       class="mc-text-input__control"
-      v-model="modelValue"
+      :value="modelValue"
       :type="inputType"
       :name="name"
       :placeholder="placeholder"
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, type VNode } from 'vue';
+import { computed, type VNode } from 'vue';
 import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
 
 /**
@@ -118,9 +118,7 @@ const classObject = computed(() => {
   };
 });
 
-const modelValue = ref(props.modelValue);
 const clearValue = () => {
-  modelValue.value = '';
   emit('update:modelValue', '');
 };
 
@@ -135,4 +133,4 @@ const emit = defineEmits<{
 <style lang="scss" scoped>
 @use '@mozaic-ds/styles/components/controls-options';
 @use '@mozaic-ds/styles/components/text-input';
-</style>
+</style>

package/src/components/toaster/MToaster.spec.ts

@@ -0,0 +1,122 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MToaster from './MToaster.vue';
+import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
+import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
+import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
+
+describe('MToaster.vue', () => {
+  it('renders description text', () => {
+    const wrapper = mount(MToaster, {
+      props: { description: 'Test message' },
+    });
+    expect(wrapper.text()).toContain('Test message');
+  });
+
+  it('renders correct icon for each status', () => {
+    const statuses = {
+      success: CheckCircleFilled32,
+      warning: WarningCircleFilled32,
+      error: CrossCircleFilled32,
+      info: InfoCircleFilled32,
+    };
+
+    for (const [status, component] of Object.entries(statuses)) {
+      const wrapper = mount(MToaster, {
+        props: { description: 'Test', status },
+      });
+      expect(wrapper.findComponent(component).exists()).toBe(true);
+    }
+  });
+
+  it('applies the correct classes for status and position', () => {
+    const wrapper = mount(MToaster, {
+      props: {
+        description: 'Toast',
+        status: 'error',
+        position: 'bottom-center',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-toaster--error');
+    expect(wrapper.classes()).toContain('mc-toaster--bottom-center');
+  });
+
+  it('renders close button when closable is true', () => {
+    const wrapper = mount(MToaster, {
+      props: { description: 'Closable toast', closable: true },
+    });
+
+    expect(wrapper.find('.mc-toaster__close').exists()).toBe(true);
+  });
+
+  it('does not render close button when closable is false', () => {
+    const wrapper = mount(MToaster, {
+      props: { description: 'Non-closable toast', closable: false },
+    });
+
+    expect(wrapper.find('.mc-toaster__close').exists()).toBe(false);
+  });
+
+  it('emits update:open event with false when close button is clicked', async () => {
+    const wrapper = mount(MToaster, {
+      props: { description: 'Closable toast', closable: true },
+    });
+
+    await wrapper.find('.mc-toaster__close').trigger('click');
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+  });
+
+  it('renders action slot when provided', () => {
+    const wrapper = mount(MToaster, {
+      props: { description: 'With action' },
+      slots: {
+        action: '<button class="custom-action">Retry</button>',
+      },
+    });
+
+    const action = wrapper.find('.mc-toaster__action');
+    expect(action.exists()).toBe(true);
+    expect(action.text()).toContain('Retry');
+  });
+
+  it('does not render action slot wrapper if slot is not provided', () => {
+    const wrapper = mount(MToaster, {
+      props: { description: 'No action' },
+    });
+
+    expect(wrapper.find('.mc-toaster__action').exists()).toBe(false);
+  });
+
+  it('renders progress bar when progress is true', () => {
+    const wrapper = mount(MToaster, {
+      props: { description: 'Progress toast', progress: true, timeout: 1000 },
+    });
+    expect(
+      wrapper.findComponent({ name: 'MLinearProgressbarBuffer' }).exists(),
+    ).toBe(true);
+  });
+
+  it('auto-closes after timeout and updates progress bar', async () => {
+    vi.useFakeTimers();
+
+    const wrapper = mount(MToaster, {
+      props: { description: 'Auto close toast', progress: true, timeout: 500 },
+    });
+
+    expect(
+      wrapper.findComponent({ name: 'MLinearProgressbarBuffer' }).exists(),
+    ).toBe(true);
+
+    expect(wrapper.vm.progressValue).toBe(0);
+
+    vi.advanceTimersByTime(600);
+
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')!.pop()).toEqual([false]);
+
+    vi.useRealTimers();
+  });
+});

package/src/components/toaster/MToaster.stories.ts

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MToaster from './MToaster.vue';
+import { action } from 'storybook/actions';
+import MButton from '../button/MButton.vue';
+import MLink from '../link/MLink.vue';
+import { ref, watch } from 'vue';
+
+const meta: Meta<typeof MToaster> = {
+  title: 'Overlay/Toaster',
+  component: MToaster,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: { height: '300px' },
+      description: {
+        component:
+          'A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.',
+      },
+    },
+  },
+  args: {
+    open: true,
+    description: 'This message must be short, be concise.',
+  },
+  argTypes: {
+    '--toaster-z-index': {
+      description: 'Customise the z-index of the toaster',
+      control: false,
+      table: {
+        category: 'Custom Properties',
+        type: { summary: 'number' },
+        defaultValue: { summary: '4' },
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MToaster, MButton, MLink },
+    setup() {
+      const handleUpdate = action('update:open');
+      const openState = ref(args.open);
+
+      watch(
+        () => args.open,
+        (val) => {
+          openState.value = val;
+        },
+      );
+
+      const onUpdateOpen = (val: boolean) => {
+        openState.value = val;
+        handleUpdate(val);
+        args.open = val;
+      };
+
+      return { args, openState, onUpdateOpen };
+    },
+    template: `
+      <MToaster 
+        v-bind="args"
+        @update:open="onUpdateOpen"
+        v-model:open="openState"
+      >
+        <template v-if="${'action' in args}" v-slot:action>${args.action}</template>
+      </MToaster>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MToaster>;
+
+export const Info: Story = {};
+
+export const Success: Story = {
+  args: { status: 'success' },
+};
+
+export const Warning: Story = {
+  args: { status: 'warning' },
+};
+
+export const Error: Story = {
+  args: { status: 'error' },
+};
+
+export const Timeout: Story = {
+  args: { timeout: 5000 },
+};
+
+export const WithButton = {
+  args: {
+    action: `
+      <MButton size="s" appearance="inverse" outlined>Undo</MButton>
+    `,
+  },
+};
+
+export const WithLink = {
+  args: {
+    action: `
+      <MLink href="#" appearance="inverse">
+        Learn more
+      </MLink>
+    `,
+  },
+};

package/src/components/toaster/MToaster.vue

@@ -0,0 +1,181 @@
+<template>
+  <section class="mc-toaster" :class="classObject" role="status">
+    <component
+      :is="iconComponent"
+      class="mc-toaster__icon"
+      aria-hidden="true"
+    />
+    <div class="mc-toaster__content">
+      <p class="mc-toaster__message">
+        {{ description }}
+      </p>
+
+      <div v-if="$slots.action" class="mc-toaster__action">
+        <slot name="action" />
+      </div>
+    </div>
+    <MIconButton
+      v-if="closable"
+      class="mc-toaster__close"
+      appearance="inverse"
+      size="s"
+      ghost
+      aria-label="Close"
+      @click="onClose"
+    >
+      <template #icon>
+        <Cross20 class="mc-button__icon" aria-hidden="true" />
+      </template>
+    </MIconButton>
+
+    <MLinearProgressbarBuffer
+      v-if="progress"
+      class="mc-toaster__indicator"
+      :value="progressValue"
+    ></MLinearProgressbarBuffer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  type VNode,
+} from 'vue';
+import Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';
+import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
+import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
+import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
+import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import MLinearProgressbarBuffer from '../linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
+/**
+ * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * if `true`, display the Toaster.
+     */
+    open?: boolean;
+    /**
+     * Position of the toaster
+     */
+    position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';
+    /**
+     * Description of the toaster.
+     */
+    description: string;
+    /**
+     * Allows to define the toaster style.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * if `true`, display the close button.
+     */
+    closable?: boolean;
+    /**
+     * if `true`, display the progress bar of the duration.
+     */
+    progress?: boolean;
+    /**
+     * Duration of the toaster
+     */
+    timeout?: number;
+  }>(),
+  {
+    status: 'info',
+    closable: true,
+  },
+);
+
+defineSlots<{
+  /**
+   * Use this slot to insert a button or a link in the toaster
+   */
+  action?: VNode;
+}>();
+
+const classObject = computed(() => {
+  return {
+    'is-open': props.open,
+    [`mc-toaster--${props.status}`]: props.status && props.status != 'info',
+    [`mc-toaster--${props.position}`]:
+      props.position && props.position != 'top',
+  };
+});
+
+const iconComponent = computed(() => {
+  switch (props.status) {
+    case 'success':
+      return CheckCircleFilled32;
+    case 'warning':
+      return WarningCircleFilled32;
+    case 'error':
+      return CrossCircleFilled32;
+    case 'info':
+    default:
+      return InfoCircleFilled32;
+  }
+});
+
+watch(
+  () => props.open,
+  (newValue) => {
+    emit('update:open', newValue);
+  },
+);
+
+const onClose = () => {
+  emit('update:open', false);
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the checkbox value changes, updating the modelValue prop.
+   */
+  (on: 'update:open', value: boolean): void;
+}>();
+
+const progressValue = ref(0);
+let intervalId: ReturnType<typeof setInterval> | null = null;
+let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+onMounted(() => {
+  if (props.timeout) {
+    if (props.progress) {
+      const intervalDuration = 100; // ms
+      const steps = props.timeout / intervalDuration;
+      const increment = 100 / steps;
+
+      intervalId = setInterval(() => {
+        progressValue.value += increment;
+
+        if (progressValue.value >= 100) {
+          progressValue.value = 100;
+          onClose();
+          clearInterval(intervalId!);
+        }
+      }, intervalDuration);
+    } else {
+      timeoutId = setTimeout(() => {
+        onClose();
+      }, props.timeout);
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  if (props.timeout) {
+    if (intervalId) clearInterval(intervalId);
+    if (timeoutId) clearTimeout(timeoutId);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/toaster';
+</style>

package/src/components/tooltip/MTooltip.stories.ts

@@ -17,6 +17,17 @@ const meta: Meta<typeof MTooltip> = {
     text: 'Keep the tooltip text concise.',
     default: 'Tooltip on the top',
   },
+  argTypes: {
+    '--tooltip-z-index': {
+      description: 'Customise the z-index of the tooltip',
+      control: false,
+      table: {
+        category: 'Custom Properties',
+        type: { summary: 'number' },
+        defaultValue: { summary: '1' },
+      },
+    },
+  },
   render: (args) => ({
     components: { MTooltip },
     setup() {

package/src/main.ts

@@ -1,8 +1,10 @@
+export { default as MAvatar } from './components/avatar/MAvatar.vue';
 export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue';
 export { default as MButton } from './components/button/MButton.vue';
 export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
 export { default as MCircularProgressbar } from './components/circularprogressbar/MCircularProgressbar.vue';
+export { default as MCallout } from './components/callout/MCallout.vue';
 export { default as MContainer } from './components/container/MContainer.vue';
 export { default as MDatepicker } from './components/datepicker/MDatepicker.vue';
 export { default as MDivider } from './components/divider/MDivider.vue';
@@ -32,6 +34,7 @@ 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';
 export { default as MTextInput } from './components/textinput/MTextInput.vue';
+export { default as MToaster } from './components/toaster/MToaster.vue';
 export { default as MToggle } from './components/toggle/MToggle.vue';
 export { default as MTooltip } from './components/tooltip/MTooltip.vue';
 export { default as MToggleGroup } from './components/togglegroup/MToggleGroup.vue';