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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -40,7 +40,7 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "2.0.0-alpha.5",
+    "@mozaic-ds/styles": "2.0.0-alpha.6",
     "@mozaic-ds/web-fonts": "1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"
@@ -49,15 +49,12 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@mozaic-ds/css-dev-tools": "1.75.0",
-    "@mozaic-ds/icons-vue": "^0.0.1-beta.0",
+    "@mozaic-ds/icons-vue": "^0.1.0-beta.3",
     "@release-it/conventional-changelog": "^8.0.2",
-    "@storybook/addon-a11y": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-themes": "^8.6.7",
-    "@storybook/manager-api": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
-    "@storybook/vue3": "^8.4.6",
-    "@storybook/vue3-vite": "^8.6.7",
+    "@storybook/addon-a11y": "^9.0.18",
+    "@storybook/addon-themes": "^9.0.18",
+    "@storybook/vue3-vite": "^9.0.18",
+    "@storybook/addon-docs": "^9.0.18",
     "@types/jsdom": "^21.1.7",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vitest/coverage-v8": "^3.0.9",
@@ -78,7 +75,7 @@
     "prettier": "^3.5.3",
     "release-it": "^18.1.2",
     "sass": "^1.86.0",
-    "storybook": "^8.6.7",
+    "storybook": "^9.0.18",
     "typescript": "^5.7.2",
     "vite": "^6.2.2",
     "vite-plugin-dts": "^4.5.3",

package/src/components/Contributing.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { Mermaid } from 'mdx-mermaid/Mermaid';
 
 <Meta title="Contributing" />

package/src/components/GettingStarted.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="Getting Started" />
 
@@ -11,11 +10,7 @@ import { Source } from '@storybook/addon-docs';
 
 In order to use **Mozaic-Vue** in your **Vue.js** project, you must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/vue):
 
-<Source
-  language="bash"
-  dark
-  code="npm i @mozaic-ds/vue@beta"
-/>
+<Source language="bash" dark code="npm i @mozaic-ds/vue@beta" />
 
 Or with **Yarn**:
 

package/src/components/Introduction.mdx

@@ -1,45 +1,65 @@
-import { Meta } from '@storybook/blocks';
-import { Source } from '@storybook/addon-docs';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 import ads from '../../.storybook/assets/logo.svg';
 import vue from '../../.storybook/assets/vue.svg';
 
 <Meta title="Introduction" />
 
-
-<p style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
-  <img
-    src={ads}
-    alt="ADEO Design system logo"
-    style={{ height: '80px' }}
-  />
+<p
+  style={{
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '1rem',
+  }}
+>
+  <img src={ads} alt="ADEO Design system logo" style={{ height: '80px' }} />
   <span style={{ fontSize: '32px' }}>x</span>
-  <img
-    src={vue}
-    alt="Vue.js logo"
-    style={{ height: '80px' }}
-  />
+  <img src={vue} alt="Vue.js logo" style={{ height: '80px' }} />
 </p>
 
 <h1 align="center">ADEO Design system - Vue.js library</h1>
 
-<p align="center">A library of **Vue.js** components implementing **ADEO Design system** guidelines.</p>
+<p align="center">
+  A library of **Vue.js** components implementing **ADEO Design system**
+  guidelines.
+</p>
 
-<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem' }}>
+<div
+  style={{
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.5rem',
+  }}
+>
   <a href="https://www.npmjs.com/package/@mozaic-ds/vue/v/beta">
-    <img src="https://img.shields.io/npm/v/@mozaic-ds/vue/beta?label=NPM&logo=npm&color=yellow" alt="npm beta version"/>
+    <img
+      src="https://img.shields.io/npm/v/@mozaic-ds/vue/beta?label=NPM&logo=npm&color=yellow"
+      alt="npm beta version"
+    />
   </a>
   <a href="https://github.com/adeo/mozaic-vue/blob/master/CONTRIBUTING.md">
-    <img src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github" alt="PRs welcome" />
+    <img
+      src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github"
+      alt="PRs welcome"
+    />
   </a>
   <a href="https://app.slack.com/client/T4R6RCZFA/CN4K3A99R">
-    <img src="https://img.shields.io/badge/Slack-mozaic_vue-611f69.svg?logo=slack" alt="Slack mozaic-vue" />
+    <img
+      src="https://img.shields.io/badge/Slack-mozaic_vue-611f69.svg?logo=slack"
+      alt="Slack mozaic-vue"
+    />
   </a>
   <a href="https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system">
-    <img src="https://img.shields.io/badge/KEYS-Adeo_Design_System-4526ce.svg" alt="KEYS ADEO Design system" />
+    <img
+      src="https://img.shields.io/badge/KEYS-Adeo_Design_System-4526ce.svg"
+      alt="KEYS ADEO Design system"
+    />
   </a>
 </div>
 
-<br/><br/>
+<br />
+<br />
 
 ## 🪄 Introduction
 

package/src/components/Support.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Support" />
 

package/src/components/breadcrumb/MBreadcrumb.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MBreadcrumb from './MBreadcrumb.vue';
 
 const meta: Meta<typeof MBreadcrumb> = {
@@ -17,22 +17,22 @@ const meta: Meta<typeof MBreadcrumb> = {
       {
         label: 'Home',
         href: '#',
-        router: true
+        router: true,
       },
       {
         label: 'level 01',
         href: '#',
-        router: true
+        router: true,
       },
       {
         label: 'level 02',
         href: '#',
-        router: true
+        router: true,
       },
       {
         label: 'Current Page',
         href: '#',
-        router: true
+        router: true,
       },
     ],
   },
@@ -52,10 +52,8 @@ type Story = StoryObj<typeof MBreadcrumb>;
 export const Default: Story = {};
 
 export const Inverse: Story = {
-  parameters: {
-    backgrounds: {
-      default: 'Inverse',
-    },
+  globals: {
+    backgrounds: { value: 'inverse' },
   },
   args: { appearance: 'inverse' },
 };
@@ -65,19 +63,19 @@ export const WithoutRouter: Story = {
     links: [
       {
         label: 'Home',
-        href: '#'
+        href: '#',
       },
       {
         label: 'level 01',
-        href: '#'
+        href: '#',
       },
       {
         label: 'level 02',
-        href: '#'
+        href: '#',
       },
       {
         label: 'Current Page',
-        href: '#'
+        href: '#',
       },
     ],
   },

package/src/components/breadcrumb/MBreadcrumb.vue

@@ -37,7 +37,7 @@ const props = defineProps<{
   /**
    * Links of the breadcrumb
    */
-  links?: Array<{
+  links: Array<{
     /**
      * The label displayed for the link.
      */

package/src/components/button/MButton.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MButton from './MButton.vue';
 import Download24 from '@mozaic-ds/icons-vue/src/components/Download24/Download24.vue';
@@ -16,13 +16,6 @@ const meta: Meta<typeof MButton> = {
     },
   },
   args: { default: 'Button Label' },
-  argTypes: {
-    $slots: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   render: (args) => ({
     components: { MButton, Download24, ChevronRight24 },
     setup() {

package/src/components/checkbox/MCheckbox.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 MCheckbox from './MCheckbox.vue';
 

package/src/components/checkboxgroup/MCheckboxGroup.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 MCheckboxGroup from './MCheckboxGroup.vue';
 

package/src/components/divider/MDivider.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MDivider from './MDivider.vue';
 
 const meta: Meta<typeof MDivider> = {
@@ -38,7 +38,7 @@ export const Standard: Story = {};
 
 export const Vertical: Story = {
   args: {
-    orientation: 'vertical'
+    orientation: 'vertical',
   },
   render: (args) => ({
     components: { MDivider },

package/src/components/divider/MDivider.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mc-divider">
     <div :class="classObject"></div>
-    <slot/>
+    <slot />
   </div>
 </template>
 
@@ -46,7 +46,7 @@ const classObject = computed(() => {
 @use '@mozaic-ds/styles/components/divider';
 
 .mc-divider-vertical {
-  content: "";
+  content: '';
   display: block;
   height: 100%;
   position: absolute;

package/src/components/drawer/MDrawer.spec.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MDrawer from '@/components/drawer/MDrawer.vue';
+
+describe('MDrawer component', () => {
+  it('renders title and contentTitle when provided', () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Main Drawer Title',
+        contentTitle: 'Drawer Content Title',
+      },
+      slots: {
+        default: '<p>Drawer content</p>',
+      },
+    });
+
+    expect(wrapper.find('.mc-drawer__title').text()).toBe('Main Drawer Title');
+    expect(wrapper.find('.mc-drawer__content__title').text()).toBe(
+      'Drawer Content Title',
+    );
+    expect(wrapper.find('.mc-drawer__content').text()).toContain(
+      'Drawer content',
+    );
+  });
+
+  it('emits update:open false when close button is clicked', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+    });
+
+    const closeButton = wrapper.find('.mc-drawer__close');
+    await closeButton.trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+  });
+
+  it('emits back event when back button is clicked', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+        back: true,
+      },
+    });
+
+    const backButton = wrapper.find('.mc-drawer__back');
+    await backButton.trigger('click');
+
+    expect(wrapper.emitted('back')).toBeTruthy();
+  });
+
+  it('renders footer slot when provided', () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+      slots: {
+        footer: '<button>Footer Button</button>',
+      },
+    });
+
+    expect(wrapper.find('.mc-drawer__footer').exists()).toBe(true);
+    expect(wrapper.find('.mc-drawer__footer button').text()).toBe(
+      'Footer Button',
+    );
+  });
+
+  it('applies correct class when extended and position is left', () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+        extended: true,
+        position: 'left',
+      },
+    });
+
+    const section = wrapper.find('section.mc-drawer');
+    expect(section.classes()).toContain('mc-drawer--extend');
+    expect(section.classes()).toContain('mc-drawer--left');
+    expect(section.classes()).toContain('is-open');
+  });
+
+  it('does not render back button if prop `back` is false', () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+    });
+
+    expect(wrapper.find('.mc-drawer__back').exists()).toBe(false);
+  });
+});

package/src/components/drawer/MDrawer.stories.ts

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+import MDrawer from './MDrawer.vue';
+import MButton from '../button/MButton.vue';
+import { ref, watch } from 'vue';
+
+const meta: Meta<typeof MDrawer> = {
+  title: 'Overlay/Drawer',
+  component: MDrawer,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: { height: '600px' },
+      description: {
+        component:
+          'A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.',
+      },
+    },
+  },
+  args: {
+    open: true,
+    title: 'Drawer title (optionnal)',
+    contentTitle: 'Content title',
+    default: `
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
+        odit, eligendi non, minus soluta dicta, excepturi harum tempora
+        possimus dignissimos dolor rerum natus voluptatum quia. Architecto
+        temporibus repellendus sed.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
+        odit, eligendi non, minus soluta dicta, excepturi harum tempora
+        possimus dignissimos dolor rerum natus voluptatum quia. Architecto
+        temporibus repellendus sed.
+      </p>
+    `,
+    footer: `
+      <MButton>Button label</MButton>
+      <MButton ghost>Button label</MButton>
+    `,
+  },
+  render: (args) => ({
+    components: { MDrawer, MButton },
+    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: `
+      <MDrawer 
+        v-bind="args"
+        @update:open="onUpdateOpen"
+        v-model:open="openState"
+      >
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
+      </MDrawer>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MDrawer>;
+
+export const Default: Story = {
+  args: {
+    default: `
+      <!-- All the code below must be replaced by a form element. -->
+      <div class="content-slot content-slot-full">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
+  },
+};
+
+export const Left = {
+  args: {
+    position: 'left',
+  },
+};
+
+export const Back = {
+  args: {
+    back: true,
+  },
+};
+
+export const ValidationOnly = {
+  args: {
+    footer: `
+      <MButton>Button label</MButton>
+    `,
+  },
+};
+
+export const TwoOptions = {
+  args: {
+    footer: `
+      <MButton>Button label</MButton>
+      <MButton outlined>Button label</MButton>
+    `,
+  },
+};
+
+export const Cancel = {
+  args: {
+    extended: true,
+    footer: `
+      <MButton>Button label</MButton>
+      <MButton outlined>Button label</MButton>
+      <MButton ghost>Button label</MButton>
+    `,
+  },
+};