@mozaic-ds/vue 1.0.0-beta.8 → 1.0.0-beta.9

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

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MStatusNotification from './MStatusNotification.vue';
-import InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';
-import CheckCircle32 from '@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.vue';
-import WarningCircle32 from '@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue';
-import CrossCircle32 from '@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.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';
 
 describe('MStatusNotification.vue', () => {
   it('should render correctly with the default props', () => {
@@ -17,7 +17,7 @@ describe('MStatusNotification.vue', () => {
 
     expect(wrapper.text()).toContain('Test Title');
     expect(wrapper.text()).toContain('Test Description');
-    expect(wrapper.findComponent(InfoCircle32).exists()).toBe(true); // Default icon is InfoCircle32
+    expect(wrapper.findComponent(InfoCircleFilled32).exists()).toBe(true); // Default icon is InfoCircle32
     expect(wrapper.classes()).toContain('mc-status-notification');
   });
 
@@ -29,7 +29,9 @@ describe('MStatusNotification.vue', () => {
         status: 'success',
       },
     });
-    expect(wrapperSuccess.findComponent(CheckCircle32).exists()).toBe(true);
+    expect(wrapperSuccess.findComponent(CheckCircleFilled32).exists()).toBe(
+      true,
+    );
 
     const wrapperWarning = mount(MStatusNotification, {
       props: {
@@ -38,7 +40,9 @@ describe('MStatusNotification.vue', () => {
         status: 'warning',
       },
     });
-    expect(wrapperWarning.findComponent(WarningCircle32).exists()).toBe(true);
+    expect(wrapperWarning.findComponent(WarningCircleFilled32).exists()).toBe(
+      true,
+    );
 
     const wrapperError = mount(MStatusNotification, {
       props: {
@@ -47,7 +51,7 @@ describe('MStatusNotification.vue', () => {
         status: 'error',
       },
     });
-    expect(wrapperError.findComponent(CrossCircle32).exists()).toBe(true);
+    expect(wrapperError.findComponent(CrossCircleFilled32).exists()).toBe(true);
   });
 
   it('should show the close button if closable prop is true', () => {

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

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MStatusNotification from './MStatusNotification.vue';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import MButton from '../button/MButton.vue';
 import MLink from '../link/MLink.vue';
 import ArrowNext20 from '@mozaic-ds/icons-vue/src/components/ArrowNext20/ArrowNext20.vue';
@@ -21,13 +21,6 @@ const meta: Meta<typeof MStatusNotification> = {
       'This is a title, be concise and use the description message to give details.',
     description: 'Description message.',
   },
-  argTypes: {
-    $slots: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   render: (args) => ({
     components: { MStatusNotification, MButton, MLink, ArrowNext20 },
     setup() {

package/src/components/statusnotification/MStatusNotification.vue

@@ -34,10 +34,10 @@
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
 import Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';
-import InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';
-import WarningCircle32 from '@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue';
-import CrossCircle32 from '@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.vue';
-import CheckCircle32 from '@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.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';
 /**
  * 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.
  */
@@ -82,14 +82,14 @@ const classObject = computed(() => {
 const iconComponent = computed(() => {
   switch (props.status) {
     case 'success':
-      return CheckCircle32;
+      return CheckCircleFilled32;
     case 'warning':
-      return WarningCircle32;
+      return WarningCircleFilled32;
     case 'error':
-      return CrossCircle32;
+      return CrossCircleFilled32;
     case 'info':
     default:
-      return InfoCircle32;
+      return InfoCircleFilled32;
   }
 });
 

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

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+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/src/components/ChevronRight24/ChevronRight24.vue';
@@ -83,7 +83,7 @@ export const NoDivider: Story = {
 };
 
 export const Disabled: Story = {
-  args: { 
+  args: {
     tabs: [
       {
         label: 'Label',
@@ -100,5 +100,5 @@ export const Disabled: Story = {
         disabled: true,
       },
     ],
-   },
+  },
 };

package/src/components/tabs/MTabs.vue

@@ -94,11 +94,11 @@ const onClickTab = (index: number) => {
     modelValue.value = index;
     emit('update:modelValue', index);
   }
-}
+};
 
 const isTabSelected = (index: number) => {
   return modelValue.value === index;
-}
+};
 
 const emit = defineEmits<{
   /**

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

@@ -4,11 +4,7 @@ import MTabs from './MTabs.vue';
 import { defineComponent, h } from 'vue';
 
 describe('MTabs.vue', () => {
-  const tabs = [
-    { label: 'Tab 1' },
-    { label: 'Tab 2' },
-    { label: 'Tab 3' },
-  ];
+  const tabs = [{ label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' }];
 
   it('renders tabs with correct labels', () => {
     const wrapper = mount(MTabs, {
@@ -26,44 +22,43 @@ describe('MTabs.vue', () => {
   });
 
   it('applies selected class and aria-selected attribute based on modelValue and updates on tab click', async () => {
-  const wrapper = mount(MTabs, {
-    props: {
-      tabs,
-      modelValue: 0,
-    },
-  });
-
-  const buttons = wrapper.findAll('button.mc-tabs__tab');
-
-  buttons.forEach((button, i) => {
-    if (i === 0) {
-      expect(button.classes()).toContain('mc-tabs__tab--selected');
-      expect(button.attributes('aria-selected')).toBe('true');
-    } else {
-      expect(button.classes()).not.toContain('mc-tabs__tab--selected');
-      expect(button.attributes('aria-selected')).toBe('false');
-    }
-  });
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs,
+        modelValue: 0,
+      },
+    });
 
-  await buttons[1].trigger('click');
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
 
-  expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-  expect(wrapper.emitted('update:modelValue')![0]).toEqual([1]);
+    buttons.forEach((button, i) => {
+      if (i === 0) {
+        expect(button.classes()).toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('true');
+      } else {
+        expect(button.classes()).not.toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('false');
+      }
+    });
 
-  await wrapper.setProps({ modelValue: 1 });
+    await buttons[1].trigger('click');
 
-  const updatedButtons = wrapper.findAll('button.mc-tabs__tab');
-  updatedButtons.forEach((button, i) => {
-    if (i === 1) {
-      expect(button.classes()).toContain('mc-tabs__tab--selected');
-      expect(button.attributes('aria-selected')).toBe('true');
-    } else {
-      expect(button.classes()).not.toContain('mc-tabs__tab--selected');
-      expect(button.attributes('aria-selected')).toBe('false');
-    }
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([1]);
+
+    await wrapper.setProps({ modelValue: 1 });
+
+    const updatedButtons = wrapper.findAll('button.mc-tabs__tab');
+    updatedButtons.forEach((button, i) => {
+      if (i === 1) {
+        expect(button.classes()).toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('true');
+      } else {
+        expect(button.classes()).not.toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('false');
+      }
+    });
   });
-});
-
 
   it('adds divider and centered classes based on props', async () => {
     const wrapper = mount(MTabs, {
@@ -124,31 +119,31 @@ describe('MTabs.vue', () => {
   });
 
   it('renders icon component when icon prop is provided', () => {
-  const DummyIcon = defineComponent({
-    name: 'DummyIcon',
-    render() {
-      return h('svg', { class: 'dummy-icon' }, [
-        h('circle', { cx: 10, cy: 10, r: 10 }),
-      ]);
-    },
-  });
+    const DummyIcon = defineComponent({
+      name: 'DummyIcon',
+      render() {
+        return h('svg', { class: 'dummy-icon' }, [
+          h('circle', { cx: 10, cy: 10, r: 10 }),
+        ]);
+      },
+    });
 
-  const tabsWithIcon = [
-    { label: 'Tab 1', icon: DummyIcon },
-    { label: 'Tab 2' },
-  ];
+    const tabsWithIcon = [
+      { label: 'Tab 1', icon: DummyIcon },
+      { label: 'Tab 2' },
+    ];
 
-  const wrapper = mount(MTabs, {
-    props: {
-      tabs: tabsWithIcon,
-    },
-  });
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: tabsWithIcon,
+      },
+    });
 
-  const firstTabButton = wrapper.findAll('button.mc-tabs__tab')[0];
-  expect(firstTabButton.findComponent(DummyIcon).exists()).toBe(true);
-  expect(firstTabButton.find('svg.dummy-icon').exists()).toBe(true);
+    const firstTabButton = wrapper.findAll('button.mc-tabs__tab')[0];
+    expect(firstTabButton.findComponent(DummyIcon).exists()).toBe(true);
+    expect(firstTabButton.find('svg.dummy-icon').exists()).toBe(true);
 
-  const secondTabButton = wrapper.findAll('button.mc-tabs__tab')[1];
-  expect(secondTabButton.findComponent(DummyIcon).exists()).toBe(false);
-});
+    const secondTabButton = wrapper.findAll('button.mc-tabs__tab')[1];
+    expect(secondTabButton.findComponent(DummyIcon).exists()).toBe(false);
+  });
 });

package/src/components/tag/MTag.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 import MTag from './MTag.vue';
 
 const meta: Meta<typeof MTag> = {

package/src/components/tag/MTag.vue

@@ -59,10 +59,7 @@
       type="button"
       @click="id && emit('remove-tag', id)"
     >
-      <CrossCircleFilled24
-        class="mc-tag-removable__icon"
-        aria-hidden="true"
-      />
+      <CrossCircleFilled24 class="mc-tag-removable__icon" aria-hidden="true" />
       <span class="mc-tag-removable__text">removableLabel</span>
     </button>
   </span>

package/src/components/textarea/MTextArea.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MTextArea from './MTextArea.vue';
 

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

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MTextInput from './MTextInput.vue';
 import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';
@@ -19,13 +19,6 @@ const meta: Meta<typeof MTextInput> = {
     id: 'textInputId',
     placeholder: 'Placeholder',
   },
-  argTypes: {
-    $slots: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   render: (args) => ({
     components: { MTextInput, Search24 },
     setup() {

package/src/components/toggle/MToggle.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MToggle from './MToggle.vue';
 

package/src/components/togglegroup/MToggleGroup.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MToggleGroup from './MToggleGroup.vue';
 

package/src/components/usingIcons.mdx

@@ -1,5 +1,4 @@
-import { Meta } from '@storybook/blocks';
-import { Source } from '@storybook/addon-docs';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 <Meta title="Using Icons" />
 
@@ -9,19 +8,11 @@ To use icons in Vue applications, you need to install a dedicated package.
 
 You must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/icons-vue):
 
-<Source
-  language="bash"
-  dark
-  code="npm install @mozaic-ds/icons-vue"
-/>
+<Source language="bash" dark code="npm install @mozaic-ds/icons-vue" />
 
 Or with **Yarn**:
 
-<Source
-  language="bash"
-  dark
-  code="yarn add @mozaic-ds/icons-vue"
-/>
+<Source language="bash" dark code="yarn add @mozaic-ds/icons-vue" />
 
 You can then start importing the icon of your choice into your Vue component:
 
@@ -36,8 +27,9 @@ You can then start importing the icon of your choice into your Vue component:
 </template>
 
 <script setup>
-import A11y20 from '@mozaic-ds/icons-vue/src/components/A11y20/A11y20.vue';
+  import A11y20 from '@mozaic-ds/icons-vue/src/components/A11y20/A11y20.vue';
 </script>
+
 `} />
 
 [The full list of icons is available here](https://github.com/adeo/mozaic-icons-vue/tree/main/src/components).

package/src/components/usingPresets.mdx

@@ -1,5 +1,4 @@
-import { Meta } from '@storybook/blocks';
-import { Source } from '@storybook/addon-docs';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 <Meta title="Using Presets" />
 
@@ -31,12 +30,13 @@ Once **Mozaic-Vue** is installed as shown, we can make the following changes:
 All it has to do is insert the following code into its main Sass file (entrypoint stylesheet):
 
 <Source
-  language='css'
+  language="css"
   dark
   code={`
 // Entrypoint stylesheet
 @use "@mozaic-ds/tokens/<presetName>" as *;
-`} />
+`}
+/>
 
 > [!NOTE]
 > The `<presetName>` string should be replaced by the name of the preset you want, one of the following values: `adeo | enki | mbrand`.
@@ -45,12 +45,13 @@ All it has to do is insert the following code into its main Sass file (entrypoin
 For example, for ADEO
 
 <Source
-  language='css'
+  language="css"
   dark
   code={`
 // Entrypoint stylesheet
 @use "@mozaic-ds/tokens/adeo" as *;
-`} />
+`}
+/>
 
 ### 2. Font by brand
 
@@ -65,7 +66,9 @@ The table below summarises which font to use depending on the brand.
   </tr>
   <tr>
     <td>Leroy Merlin</td>
-    <td>[LeroyMerlinSans](https://mozaic.adeo.cloud/foundations/typography/font-families/)</td>
+    <td>
+      [LeroyMerlinSans](https://mozaic.adeo.cloud/foundations/typography/font-families/)
+    </td>
   </tr>
   <tr>
     <td>Adeo</td>
@@ -86,7 +89,7 @@ From there, we can update the main style sheet of your project, in order to impo
 @use "@mozaic-ds/styles/tools/t.font" as *;
 
 body {
-  @include set-font-family();
+@include set-font-family();
 }
 `} />
 
@@ -109,7 +112,7 @@ You can do this as follows:
 <Source
   language="bash"
   dark
-  code='cp node_modules/@mozaic-ds/web-fonts/*.{woff,woff2} static/assets/fonts'
+  code="cp node_modules/@mozaic-ds/web-fonts/*.{woff,woff2} static/assets/fonts"
 />
 
 ### 3. Usage

package/src/main.ts

@@ -3,15 +3,19 @@ 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 MDivider } from './components/divider/MDivider.vue';
+export { default as MDrawer } from './components/drawer/MDrawer.vue';
 export { default as MField } from './components/field/MField.vue';
 export { default as MFieldGroup } from './components/fieldgroup/MFieldGroup.vue';
 export { default as MIconButton } from './components/iconbutton/MIconButton.vue';
 export { default as MLink } from './components/link/MLink.vue';
 export { default as MLoader } from './components/loader/MLoader.vue';
+export { default as MLoadingOverlay } from './components/loadingoverlay/MLoadingOverlay.vue';
+export { default as MModal } from './components/modal/MModal.vue';
 export { default as MNumberBadge } from './components/numberbadge/MNumberBadge.vue';
 export { default as MOverlay } from './components/overlay/MOverlay.vue';
 export { default as MPagination } from './components/pagination/MPagination.vue';
 export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
+export { default as MPincode } from './components/pincode/MPincode.vue';
 export { default as MQuantitySelector } from './components/quantityselector/MQuantitySelector.vue';
 export { default as MRadio } from './components/radio/MRadio.vue';
 export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue';