@mozaic-ds/vue 2.4.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "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-beta.3",
+    "@mozaic-ds/styles": "2.0.0-beta.5",
     "@mozaic-ds/web-fonts": "1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"
@@ -50,11 +50,11 @@
     "@commitlint/config-conventional": "^19.8.0",
     "@mozaic-ds/css-dev-tools": "1.75.0",
     "@mozaic-ds/icons-vue": "^1.0.0",
-    "@release-it/conventional-changelog": "^8.0.2",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@storybook/addon-a11y": "^9.0.18",
+    "@storybook/addon-docs": "^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": "^6.0.1",
     "@vitest/coverage-v8": "^3.0.9",

package/src/components/avatar/MAvatar.spec.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MAvatar from './MAvatar.vue';
+
+describe('MAvatar.vue', () => {
+  it('renders the component with default size (s)', () => {
+    const wrapper = mount(MAvatar, {
+      slots: {
+        default: '<span>AB</span>',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-avatar');
+    expect(wrapper.classes().some((cls) => cls.startsWith('mc-avatar--'))).toBe(
+      false,
+    );
+    expect(wrapper.text()).toContain('AB');
+  });
+
+  it('applies the correct class for size "m"', () => {
+    const wrapper = mount(MAvatar, {
+      props: {
+        size: 'm',
+      },
+      slots: {
+        default: '<span>CD</span>',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-avatar');
+    expect(wrapper.classes()).toContain('mc-avatar--m');
+    expect(wrapper.text()).toContain('CD');
+  });
+
+  it('applies the correct class for size "l"', () => {
+    const wrapper = mount(MAvatar, {
+      props: {
+        size: 'l',
+      },
+      slots: {
+        default: '<span>EF</span>',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-avatar');
+    expect(wrapper.classes()).toContain('mc-avatar--l');
+    expect(wrapper.text()).toContain('EF');
+  });
+});

package/src/components/avatar/MAvatar.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import MAvatar from './MAvatar.vue';
+import Profile24 from '@mozaic-ds/icons-vue/src/components/Profile24/Profile24.vue';
+
+const meta: Meta<typeof MAvatar> = {
+  title: 'Content/Avatar',
+  component: MAvatar,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.',
+      },
+    },
+  },
+  args: {
+    default: `
+      <img src="/images/Avatar.png" alt="Dieter Rams" loading="lazy"/>
+    `,
+  },
+  render: (args) => ({
+    components: { MAvatar, Profile24 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MAvatar v-bind="args">
+        ${args.default}
+      </MAvatar>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MAvatar>;
+
+export const Default: Story = {};
+
+export const Initials: Story = {
+  args: {
+    default: `
+      DS
+    `,
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    default: `
+      <Profile24/>
+    `,
+  },
+};

package/src/components/avatar/MAvatar.vue

@@ -0,0 +1,47 @@
+<template>
+  <span class="mc-avatar" :class="classObject">
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+/**
+ * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Allows to define the avatar size
+     */
+    size?: 's' | 'm' | 'l';
+  }>(),
+  {
+    size: 's',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-avatar--${props.size}`]: props.size && props.size != 's',
+  };
+});
+
+defineSlots<{
+  /**
+   * Use this slot to insert the image, icon or intials of the avatar
+   */
+  default: VNode;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/avatar';
+
+::v-deep(img) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+</style>

package/src/components/callout/MCallout.spec.ts

@@ -0,0 +1,99 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MCallout from './MCallout.vue';
+
+vi.mock(
+  '@mozaic-ds/icons-vue/src/components/ImageAlt32/ImageAlt32.vue',
+  () => ({
+    default: {
+      name: 'ImageAlt32',
+      template: '<svg class="mock-icon" />',
+    },
+  }),
+);
+
+describe('MCallout.vue', () => {
+  it('renders title and description correctly', () => {
+    const wrapper = mount(MCallout, {
+      props: {
+        title: 'Callout Title',
+        description: 'This is a description',
+      },
+    });
+
+    expect(wrapper.find('.mc-callout__title').text()).toBe('Callout Title');
+    expect(wrapper.find('.mc-callout__message').text()).toBe(
+      'This is a description',
+    );
+  });
+
+  it('renders with default appearance (standard)', () => {
+    const wrapper = mount(MCallout, {
+      props: {
+        title: 'Title',
+        description: 'Description',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-callout');
+    // No modifier class for 'standard' appearance
+    expect(
+      wrapper.classes().some((cls) => cls.startsWith('mc-callout--')),
+    ).toBe(false);
+  });
+
+  it('applies the correct class for appearance "accent"', () => {
+    const wrapper = mount(MCallout, {
+      props: {
+        title: 'Title',
+        description: 'Description',
+        appearance: 'accent',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-callout--accent');
+  });
+
+  it('renders the icon slot content', () => {
+    const wrapper = mount(MCallout, {
+      props: {
+        title: 'Title',
+        description: 'Description',
+      },
+      slots: {
+        icon: '<svg class="test-icon" />',
+      },
+    });
+
+    const iconContainer = wrapper.find('.mc-callout__icon');
+    expect(iconContainer.exists()).toBe(true);
+    expect(iconContainer.find('svg.test-icon').exists()).toBe(true);
+  });
+
+  it('renders footer slot when provided', () => {
+    const wrapper = mount(MCallout, {
+      props: {
+        title: 'Title',
+        description: 'Description',
+      },
+      slots: {
+        footer: '<button class="footer-button">Click me</button>',
+      },
+    });
+
+    const footer = wrapper.find('.mc-callout__footer');
+    expect(footer.exists()).toBe(true);
+    expect(footer.find('button.footer-button').text()).toBe('Click me');
+  });
+
+  it('does not render footer section when slot is not provided', () => {
+    const wrapper = mount(MCallout, {
+      props: {
+        title: 'Title',
+        description: 'Description',
+      },
+    });
+
+    expect(wrapper.find('.mc-callout__footer').exists()).toBe(false);
+  });
+});

package/src/components/callout/MCallout.stories.ts

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MCallout from './MCallout.vue';
+import MButton from '../button/MButton.vue';
+import MLink from '../link/MLink.vue';
+import ArrowNext20 from '@mozaic-ds/icons-vue/src/components/ArrowNext20/ArrowNext20.vue';
+import ImageAlt32 from '@mozaic-ds/icons-vue/src/components/ImageAlt32/ImageAlt32.vue';
+
+const meta: Meta<typeof MCallout> = {
+  title: 'Content/Callout',
+  component: MCallout,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.',
+      },
+    },
+  },
+  args: {
+    icon: '<ImageAlt32 aria-hidden="true" />',
+    title:
+      'This is a title, be concise and use the description message to give details.',
+    description: 'Description message.',
+  },
+  render: (args) => ({
+    components: { MCallout, MButton, MLink, ArrowNext20, ImageAlt32 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MCallout 
+        v-bind="args"
+      >
+        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
+        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
+      </MCallout>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MCallout>;
+
+export const Standard: Story = {};
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+};
+
+export const Tips: Story = {
+  args: { appearance: 'tips' },
+};
+
+export const Inverse: Story = {
+  globals: {
+    backgrounds: { value: 'inverse' },
+  },
+  args: { appearance: 'inverse' },
+};
+
+export const WithButton = {
+  args: {
+    footer: `
+      <MButton outlined>Button Label</MButton>
+    `,
+  },
+};
+
+export const WithButtons = {
+  args: {
+    footer: `
+      <MButton>Button Label</MButton>
+      <MButton outlined>Button Label</MButton>
+    `,
+  },
+};
+
+export const WithLink = {
+  args: {
+    footer: `
+      <MLink href="#" iconPosition="right">
+        Stand-alone link
+
+        <template #icon><ArrowNext20 /></template>
+      </MLink>
+    `,
+  },
+};

package/src/components/callout/MCallout.vue

@@ -0,0 +1,66 @@
+<template>
+  <section class="mc-callout" role="status" :class="classObject">
+    <div class="mc-callout__icon">
+      <slot name="icon" />
+    </div>
+    <div class="mc-callout__content">
+      <h2 class="mc-callout__title">{{ title }}</h2>
+
+      <p class="mc-callout__message">
+        {{ description }}
+      </p>
+
+      <div v-if="$slots.footer" class="mc-callout__footer">
+        <slot name="footer" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+/**
+ * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Title of the callout
+     */
+    title: string;
+    /**
+     * Description of the callout
+     */
+    description: string;
+    /**
+     * Allows to define the callout style
+     */
+    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
+  }>(),
+  {
+    appearance: 'standard',
+  },
+);
+
+defineSlots<{
+  /**
+   * Use this slot to insert an icon
+   */
+  icon?: VNode;
+  /**
+   * Use this slot to insert a button or a link in the footer of the callout
+   */
+  footer?: VNode;
+}>();
+
+const classObject = computed(() => {
+  return {
+    [`mc-callout--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/callout';
+</style>

package/src/components/checkbox/MCheckbox.spec.ts

@@ -3,7 +3,7 @@ import MCheckbox from './MCheckbox.vue';
 import { describe, it, expect } from 'vitest';
 
 describe('MCheckbox', () => {
-  it('renders with label', () => {
+  it('renders with label when label prop is provided', () => {
     const wrapper = mount(MCheckbox, {
       props: {
         id: 'test-checkbox',
@@ -12,7 +12,20 @@ describe('MCheckbox', () => {
       },
     });
 
-    expect(wrapper.find('label').text()).toBe('Accept terms');
+    const label = wrapper.find('label');
+    expect(label.exists()).toBe(true);
+    expect(label.text()).toBe('Accept terms');
+    expect(label.attributes('for')).toBe('test-checkbox');
+  });
+
+  it('does not render label when label prop is not provided', () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+      },
+    });
+
+    expect(wrapper.find('label').exists()).toBe(false);
   });
 
   it('renders the checkbox as checked when modelValue is true', () => {
@@ -50,6 +63,7 @@ describe('MCheckbox', () => {
     const checkbox = wrapper.find('input');
     await checkbox.setChecked(true);
 
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
     expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
   });
 
@@ -91,7 +105,19 @@ describe('MCheckbox', () => {
     expect(checkbox.element.indeterminate).toBe(true);
   });
 
-  it('applies is-invalid class when isInvalid is true', () => {
+  it('applies "is-invalid" class when isInvalid is true', () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        isInvalid: true,
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    expect(checkbox.classes()).toContain('is-invalid');
+  });
+
+  it('adds "aria-invalid" attribute when isInvalid is true', () => {
     const wrapper = mount(MCheckbox, {
       props: {
         id: 'test-checkbox',
@@ -99,6 +125,30 @@ describe('MCheckbox', () => {
       },
     });
 
-    expect(wrapper.find('input').classes()).toContain('is-invalid');
+    const checkbox = wrapper.find('input');
+    expect(checkbox.attributes('aria-invalid')).toBe('true');
+  });
+
+  it('applies "mc-checkbox--indented" class when indented is true', () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        indented: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-checkbox--indented');
+  });
+
+  it('sets the name attribute when name prop is provided', () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        name: 'accept',
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    expect(checkbox.attributes('name')).toBe('accept');
   });
 });

package/src/components/checkbox/MCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mc-checkbox">
+  <div class="mc-checkbox" :class="classObjectCheckbox">
     <input
       :id="id"
       type="checkbox"
@@ -56,6 +56,10 @@ const props = defineProps<{
    * If `true`, disables the checkbox, making it non-interactive.
    */
   disabled?: boolean;
+  /**
+   * If `true`, indent the checkbox.
+   */
+  indented?: boolean;
 }>();
 
 const classObject = computed(() => {
@@ -64,6 +68,12 @@ const classObject = computed(() => {
   };
 });
 
+const classObjectCheckbox = computed(() => {
+  return {
+    'mc-checkbox--indented': props.indented,
+  };
+});
+
 const emit = defineEmits<{
   /**
    * Emits when the checkbox value changes, updating the modelValue prop.

package/src/components/checkboxgroup/MCheckboxGroup.vue

@@ -11,6 +11,7 @@
       :class="classObjectItem"
       :model-value="modelValue ? modelValue.includes(option.value) : undefined"
       :disabled="option.disabled"
+      :indented="option.indented"
       @update:model-value="(v: boolean) => onChange(v, option.value)"
     />
   </div>
@@ -42,6 +43,7 @@ const props = defineProps<{
     value: string;
     disabled?: boolean;
     isInvalid?: boolean;
+    indented?: boolean;
   }>;
   /**
    * If `true`, make the form element of the group inline.

package/src/components/container/MContainer.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type VNode } from 'vue';
 /**
  * A Divider serves as a visual divider to separate content, providing a clear distinction between sections.
  */
@@ -16,6 +16,13 @@ const props = defineProps<{
   fluid?: boolean;
 }>();
 
+defineSlots<{
+  /**
+   * Use this slot to insert the content of the container
+   */
+  default?: VNode;
+}>();
+
 const classObject = computed(() => {
   return {
     'ml-container--fluid': props.fluid,

package/src/components/divider/MDivider.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type VNode } from 'vue';
 /**
  * A Divider serves as a visual divider to separate content, providing a clear distinction between sections.
  */
@@ -32,6 +32,13 @@ const props = withDefaults(
   },
 );
 
+defineSlots<{
+  /**
+   * Use this slot to insert the content who need a vertical divider
+   */
+  default?: VNode;
+}>();
+
 const classObject = computed(() => {
   return {
     [`mc-divider-${props.orientation}`]: props.orientation,

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

@@ -40,6 +40,17 @@ const meta: Meta<typeof MDrawer> = {
       <MButton ghost>Button label</MButton>
     `,
   },
+  argTypes: {
+    '--drawer-z-index': {
+      description: 'Customise the z-index of the drawer',
+      control: false,
+      table: {
+        category: 'Custom Properties',
+        type: { summary: 'number' },
+        defaultValue: { summary: '3' },
+      },
+    },
+  },
   render: (args) => ({
     components: { MDrawer, MButton },
     setup() {

package/src/components/loadingoverlay/MLoadingOverlay.stories.ts

@@ -18,6 +18,17 @@ const meta: Meta<typeof MLoadingOverlay> = {
     isVisible: true,
     ariaLabel: 'Page loading',
   },
+  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: { MLoadingOverlay },
     setup() {

package/src/components/modal/MModal.stories.ts

@@ -29,6 +29,17 @@ const meta: Meta<typeof MModal> = {
       <MButton>Primary action</MButton>
     `,
   },
+  argTypes: {
+    '--modal-z-index': {
+      description: 'Customise the z-index of the modal',
+      control: false,
+      table: {
+        category: 'Custom Properties',
+        type: { summary: 'number' },
+        defaultValue: { summary: '3' },
+      },
+    },
+  },
   render: (args) => ({
     components: { MModal, MButton, MLink, InfoCircle32, ExternalLink24 },
     setup() {