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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "1.0.0-beta.7",
+  "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.4",
+    "@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.spec.ts

@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MDivider from './MDivider.vue';
+
+describe('MDivider component', () => {
+  it('renders correctly with default props', () => {
+    const wrapper = mount(MDivider);
+    expect(wrapper.classes()).toContain('mc-divider');
+
+    const innerDiv = wrapper.find('.mc-divider > div');
+    expect(innerDiv.classes()).toContain('mc-divider-horizontal');
+  });
+
+  it('renders with vertical orientation', () => {
+    const wrapper = mount(MDivider, {
+      props: { orientation: 'vertical' },
+    });
+    const innerDiv = wrapper.find('.mc-divider > div');
+    expect(innerDiv.classes()).toContain('mc-divider-vertical');
+  });
+
+  it('applies the correct style class', () => {
+    const wrapper = mount(MDivider, {
+      props: { style: 'secondary' },
+    });
+    const innerDiv = wrapper.find('.mc-divider > div');
+    expect(innerDiv.classes()).toContain('mc-divider-horizontal--secondary');
+  });
+
+  it('applies the correct size class', () => {
+    const wrapper = mount(MDivider, {
+      props: { size: 'm' },
+    });
+    const innerDiv = wrapper.find('.mc-divider > div');
+    expect(innerDiv.classes()).toContain('mc-divider-horizontal--m');
+  });
+
+  it('uses default props when none are provided', () => {
+    const wrapper = mount(MDivider);
+    expect(wrapper.props().orientation).toBe('horizontal');
+    expect(wrapper.props().style).toBe('primary');
+    expect(wrapper.props().size).toBe('s');
+  });
+
+  it('handles custom props correctly', () => {
+    const wrapper = mount(MDivider, {
+      props: {
+        orientation: 'vertical',
+        style: 'tertiary',
+        size: 'l',
+      },
+    });
+    expect(wrapper.props().orientation).toBe('vertical');
+    expect(wrapper.props().style).toBe('tertiary');
+    expect(wrapper.props().size).toBe('l');
+  });
+});

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MDivider from './MDivider.vue';
+
+const meta: Meta<typeof MDivider> = {
+  title: 'Structure/Divider',
+  component: MDivider,
+  argTypes: {
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+    },
+    style: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary', 'inverse'],
+    },
+    size: {
+      control: 'radio',
+      options: ['s', 'm', 'l'],
+    },
+  },
+  render: (args) => ({
+    components: { MDivider },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <MDivider v-bind="args"></MDivider>
+        <p style="padding: 1rem">Horizontal Divider</p>
+      </div>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MDivider>;
+
+export const Standard: Story = {};
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+  },
+  render: (args) => ({
+    components: { MDivider },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <MDivider v-bind="args">
+          <p style="padding: 1rem">Vertical Divider</p>
+        </MDivider>
+      </div>
+    `,
+  }),
+};
+
+export const Size: Story = {
+  args: { size: 'm' },
+};
+
+export const Secondary: Story = {
+  args: { style: 'secondary' },
+};

package/src/components/divider/MDivider.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="mc-divider">
+    <div :class="classObject"></div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A Divider serves as a visual divider to separate content, providing a clear distinction between sections.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Determines the orientation of the divider
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Determines the style of the divider
+     */
+    style?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
+    /**
+     * Determines the size of the divider
+     */
+    size?: 's' | 'm' | 'l';
+  }>(),
+  {
+    orientation: 'horizontal',
+    style: 'primary',
+    size: 's',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-divider-${props.orientation}`]: props.orientation,
+    [`mc-divider-horizontal--${props.style}`]:
+      props.style && props.style != 'primary',
+    [`mc-divider-horizontal--${props.size}`]: props.size && props.size != 's',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/divider';
+
+.mc-divider-vertical {
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>

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);
+  });
+});