@mozaic-ds/vue 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -56,7 +56,7 @@
     "@storybook/vue3-vite": "^9.0.18",
     "@storybook/addon-docs": "^9.0.18",
     "@types/jsdom": "^21.1.7",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/coverage-v8": "^3.0.9",
     "@vitest/eslint-plugin": "^1.1.38",
     "@vue/eslint-config-prettier": "^10.2.0",
@@ -68,16 +68,16 @@
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "husky": "^9.1.7",
     "jsdom": "^26.0.0",
-    "lint-staged": "^15.5.0",
+    "lint-staged": "^16.1.5",
     "mdx-mermaid": "^2.0.3",
     "mermaid": "^11.5.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.5.3",
-    "release-it": "^18.1.2",
+    "release-it": "^19.0.4",
     "sass": "^1.86.0",
     "storybook": "^9.0.18",
     "typescript": "^5.7.2",
-    "vite": "^6.2.2",
+    "vite": "^7.1.1",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.9",
     "vue-eslint-parser": "^10.1.1"

package/src/components/circularprogressbar/MCircularProgressbar.spec.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MCircularProgressbar from './MCircularProgressbar.vue';
+
+describe('MCircularProgressbar component', () => {
+  it('renders percentage type with correct value and aria attributes', () => {
+    const wrapper = mount(MCircularProgressbar, {
+      props: {
+        value: 75,
+        type: 'percentage',
+      },
+    });
+
+    expect(wrapper.find('.mc-circular-progressbar__value').text()).toBe('75');
+    expect(wrapper.find('.mc-circular-progressbar__unit').text()).toBe('%');
+
+    const root = wrapper.find('.mc-circular-progressbar');
+    expect(root.attributes('aria-valuemin')).toBe('0');
+    expect(root.attributes('aria-valuemax')).toBe('100');
+    expect(root.attributes('aria-valuenow')).toBe('75');
+
+    expect(root.attributes('style')).toContain('--progress-value: 75');
+  });
+
+  it('renders content type with contentValue and additionalInfo', () => {
+    const wrapper = mount(MCircularProgressbar, {
+      props: {
+        type: 'content',
+        contentValue: '999 999 €',
+        additionalInfo: 'additional info',
+      },
+    });
+
+    expect(wrapper.find('.mc-circular-progressbar__number').text()).toBe(
+      '999 999 €',
+    );
+    expect(wrapper.find('.mc-circular-progressbar__text').text()).toBe(
+      'additional info',
+    );
+  });
+
+  it('renders content type without additionalInfo when not provided', () => {
+    const wrapper = mount(MCircularProgressbar, {
+      props: {
+        type: 'content',
+        contentValue: '123',
+      },
+    });
+
+    expect(wrapper.find('.mc-circular-progressbar__number').text()).toBe('123');
+    expect(wrapper.find('.mc-circular-progressbar__text').exists()).toBe(false);
+  });
+
+  it('applies size modifier class when size is not "l"', () => {
+    const wrapper = mount(MCircularProgressbar, {
+      props: {
+        size: 's',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-circular-progressbar--s');
+  });
+
+  it('does not apply size modifier class when size is "l" or not provided', () => {
+    const wrapperDefault = mount(MCircularProgressbar);
+    expect(wrapperDefault.classes()).not.toContain(
+      'mc-circular-progressbar--l',
+    );
+
+    const wrapperL = mount(MCircularProgressbar, {
+      props: {
+        size: 'l',
+      },
+    });
+    expect(wrapperL.classes()).not.toContain('mc-circular-progressbar--l');
+  });
+});

package/src/components/circularprogressbar/MCircularProgressbar.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MCircularProgressbar from './MCircularProgressbar.vue';
+
+const meta: Meta<typeof MCircularProgressbar> = {
+  title: 'Indicators/Circular Progress Bar',
+  component: MCircularProgressbar,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.',
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100 },
+    },
+  },
+  args: {
+    value: 40,
+    ariaLabel: 'Progress bar',
+  },
+  render: (args) => ({
+    components: { MCircularProgressbar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MCircularProgressbar v-bind="args"></MCircularProgressbar>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MCircularProgressbar>;
+
+export const Standard: Story = {};
+
+export const SizeS: Story = {
+  args: { size: 'm' },
+};
+
+export const SizeM: Story = {
+  args: { size: 's' },
+};
+
+export const Content: Story = {
+  args: {
+    type: 'content',
+    contentValue: '999 999€',
+    additionalInfo: 'additional Info',
+  },
+};

package/src/components/circularprogressbar/MCircularProgressbar.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="mc-circular-progressbar"
+    :class="classObject"
+    role="progressbar"
+    :style="`--progress-value: ${value};`"
+    :aria-valuenow="value"
+    :aria-valuemin="0"
+    :aria-valuemax="100"
+  >
+    <svg
+      class="mc-circular-progressbar__line"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      viewBox="0 0 100 100"
+    >
+      <circle
+        class="mc-circular-progressbar__track"
+        cx="50"
+        cy="50"
+        r="46"
+      ></circle>
+      <circle
+        class="mc-circular-progressbar__indicator"
+        cx="50"
+        cy="50"
+        r="46"
+      ></circle>
+    </svg>
+    <div
+      v-if="type === 'percentage'"
+      class="mc-circular-progressbar__percentage"
+    >
+      <p class="mc-circular-progressbar__value">{{ value }}</p>
+      <p class="mc-circular-progressbar__unit">%</p>
+    </div>
+    <div v-if="type === 'content'" class="mc-circular-progressbar__content">
+      <p class="mc-circular-progressbar__number">{{ contentValue }}</p>
+      <p v-if="additionalInfo" class="mc-circular-progressbar__text">
+        {{ additionalInfo }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Allows to define the progress bar size
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * The current value of the progress bar.
+     */
+    value?: number;
+    /**
+     * Display type: `'percentage'` or `'content'`.
+     */
+    type?: 'percentage' | 'content';
+    /**
+     * Main content shown when `type` is `'content'`.
+     */
+    contentValue?: string;
+    /**
+     * Additional text shown to define the `contentValue`.
+     */
+    additionalInfo?: string;
+  }>(),
+  {
+    value: 0,
+    type: 'percentage',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-circular-progressbar--${props.size}`]: props.size && props.size != 'l',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/circular-progressbar';
+</style>

package/src/components/linearprogressbarbuffer/MLinearProgressbarBuffer.spec.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MLinearProgressbarBuffer from './MLinearProgressbarBuffer.vue';
+
+describe('MLinearProgressbarBuffer component', () => {
+  it('renders correctly with default props', () => {
+    const wrapper = mount(MLinearProgressbarBuffer);
+    const indicator = wrapper.get('.mc-linear-progressbar-buffer__indicator');
+
+    expect(indicator.attributes('aria-valuenow')).toBe('0');
+    expect(indicator.attributes('aria-valuemin')).toBe('0');
+    expect(indicator.attributes('aria-valuemax')).toBe('100');
+    expect(indicator.attributes('role')).toBe('progressbar');
+    expect(indicator.attributes('style')).toContain('--progress-value: 0;');
+  });
+
+  it('applies the correct style based on value prop', () => {
+    const wrapper = mount(MLinearProgressbarBuffer, {
+      props: { value: 45 },
+    });
+    const indicator = wrapper.get('.mc-linear-progressbar-buffer__indicator');
+    expect(indicator.attributes('style')).toContain('--progress-value: 45;');
+  });
+
+  it('applies the correct size class for size "s"', () => {
+    const wrapper = mount(MLinearProgressbarBuffer, {
+      props: {
+        size: 's',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-linear-progressbar-buffer--s');
+  });
+
+  it('does not apply size class when size is "m"', () => {
+    const wrapper = mount(MLinearProgressbarBuffer, {
+      props: {
+        size: 'm',
+      },
+    });
+    expect(wrapper.classes()).not.toContain('mc-linear-progressbar-buffer--m');
+  });
+
+  it('applies the correct size class for size "l"', () => {
+    const wrapper = mount(MLinearProgressbarBuffer, {
+      props: {
+        size: 'l',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-linear-progressbar-buffer--l');
+  });
+});

package/src/components/linearprogressbarbuffer/MLinearProgressbarBuffer.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MLinearProgressbarBuffer from './MLinearProgressbarBuffer.vue';
+
+const meta: Meta<typeof MLinearProgressbarBuffer> = {
+  title: 'Indicators/Linear Progress Bar (Buffer)',
+  component: MLinearProgressbarBuffer,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.',
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100 },
+    },
+  },
+  args: {
+    value: 40,
+    ariaLabel: 'Progress bar',
+  },
+  render: (args) => ({
+    components: { MLinearProgressbarBuffer },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MLinearProgressbarBuffer v-bind="args"></MLinearProgressbarBuffer>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MLinearProgressbarBuffer>;
+
+export const Standard: Story = {};
+
+export const Size: Story = {
+  args: { size: 's' },
+};

package/src/components/linearprogressbarbuffer/MLinearProgressbarBuffer.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="mc-linear-progressbar-buffer" :class="classObject">
+    <div
+      class="mc-linear-progressbar-buffer__indicator"
+      role="progressbar"
+      :style="`--progress-value: ${value};`"
+      :aria-valuenow="value"
+      :aria-valuemin="0"
+      :aria-valuemax="100"
+      v-bind="$attrs"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Allows to define the progress bar size
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * The current value of the progress bar.
+     */
+    value?: number;
+  }>(),
+  {
+    value: 0,
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-linear-progressbar-buffer--${props.size}`]:
+      props.size && props.size != 'm',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/linear-progressbar-buffer';
+</style>

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.spec.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MLinearProgressbarPercentage from './MLinearProgressbarPercentage.vue';
+
+describe('MLinearProgressbarPercentage component', () => {
+  it('renders correctly with default props', () => {
+    const wrapper = mount(MLinearProgressbarPercentage);
+    const indicator = wrapper.get(
+      '.mc-linear-progressbar-percentage__indicator',
+    );
+    const label = wrapper.get('.mc-linear-progressbar-percentage__value');
+
+    expect(indicator.attributes('aria-valuenow')).toBe('0');
+    expect(indicator.attributes('aria-valuemin')).toBe('0');
+    expect(indicator.attributes('aria-valuemax')).toBe('100');
+    expect(indicator.attributes('role')).toBe('progressbar');
+
+    expect(indicator.attributes('style')).toContain('--progress-value: 0;');
+
+    expect(label.text()).toBe('0%');
+  });
+
+  it('renders with custom value', () => {
+    const wrapper = mount(MLinearProgressbarPercentage, {
+      props: {
+        value: 65,
+      },
+    });
+
+    const indicator = wrapper.get(
+      '.mc-linear-progressbar-percentage__indicator',
+    );
+    const label = wrapper.get('.mc-linear-progressbar-percentage__value');
+
+    expect(indicator.attributes('aria-valuenow')).toBe('65');
+    expect(indicator.attributes('style')).toContain('--progress-value: 65;');
+    expect(label.text()).toBe('65%');
+  });
+
+  it('passes extra attributes using v-bind="$attrs"', () => {
+    const wrapper = mount(MLinearProgressbarPercentage, {
+      attrs: {
+        'data-testid': 'progress-indicator',
+        title: 'Progress',
+      },
+    });
+
+    const indicator = wrapper.get('[data-testid="progress-indicator"]');
+    expect(indicator.attributes('title')).toBe('Progress');
+  });
+
+  it('renders percentage with decimal values correctly', () => {
+    const wrapper = mount(MLinearProgressbarPercentage, {
+      props: {
+        value: 42.5,
+      },
+    });
+
+    const label = wrapper.get('.mc-linear-progressbar-percentage__value');
+    expect(label.text()).toBe('42.5%');
+  });
+});

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MLinearProgressbarPercentage from './MLinearProgressbarPercentage.vue';
+
+const meta: Meta<typeof MLinearProgressbarPercentage> = {
+  title: 'Indicators/Linear Progress Bar (Percentage)',
+  component: MLinearProgressbarPercentage,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.',
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100 },
+    },
+  },
+  args: {
+    value: 40,
+    ariaLabel: 'Progress bar',
+  },
+  render: (args) => ({
+    components: { MLinearProgressbarPercentage },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MLinearProgressbarPercentage v-bind="args"></MLinearProgressbarPercentage>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MLinearProgressbarPercentage>;
+
+export const Standard: Story = {};

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="mc-linear-progressbar-percentage">
+    <div
+      class="mc-linear-progressbar-percentage__indicator"
+      role="progressbar"
+      :style="`--progress-value: ${value};`"
+      :aria-valuenow="value"
+      :aria-valuemin="0"
+      :aria-valuemax="100"
+      v-bind="$attrs"
+    >
+      <div class="mc-linear-progressbar-percentage__label">
+        <p class="mc-linear-progressbar-percentage__value">
+          {{ value
+          }}<span class="mc-linear-progressbar-percentage__unit">%</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
+ */
+withDefaults(
+  defineProps<{
+    /**
+     * The current value of the progress bar.
+     */
+    value?: number;
+  }>(),
+  {
+    value: 0,
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/linear-progressbar-percentage';
+</style>

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

@@ -11,14 +11,14 @@ describe('MTooltip.vue', () => {
   it('renders tooltip text', () => {
     const wrapper = mount(MTooltip, {
       props: { ...defaultProps },
-      slots: { default: 'Hover me' }
+      slots: { default: 'Hover me' },
     });
     expect(wrapper.text()).toContain(defaultProps.text);
   });
 
   it('sets aria-describedby attribute correctly', () => {
     const wrapper = mount(MTooltip, {
-      props: { ...defaultProps }
+      props: { ...defaultProps },
     });
     const tooltipDiv = wrapper.find('.mc-tooltip');
     expect(tooltipDiv.attributes('aria-describedby')).toBe(defaultProps.id);
@@ -26,22 +26,28 @@ describe('MTooltip.vue', () => {
 
   it('applies position class based on prop', () => {
     const wrapper = mount(MTooltip, {
-      props: { ...defaultProps, position: 'bottom' }
+      props: { ...defaultProps, position: 'bottom' },
     });
-    expect(wrapper.find('.mc-tooltip').classes()).toContain('mc-tooltip--bottom');
+    expect(wrapper.find('.mc-tooltip').classes()).toContain(
+      'mc-tooltip--bottom',
+    );
   });
 
   it('applies no-pointer class when pointer is false', () => {
     const wrapper = mount(MTooltip, {
-      props: { ...defaultProps, pointer: false }
+      props: { ...defaultProps, pointer: false },
     });
-    expect(wrapper.find('.mc-tooltip').classes()).toContain('mc-tooltip--no-pointer');
+    expect(wrapper.find('.mc-tooltip').classes()).toContain(
+      'mc-tooltip--no-pointer',
+    );
   });
 
   it('does not apply no-pointer class when pointer is true', () => {
     const wrapper = mount(MTooltip, {
-      props: { ...defaultProps, pointer: true }
+      props: { ...defaultProps, pointer: true },
     });
-    expect(wrapper.find('.mc-tooltip').classes()).not.toContain('mc-tooltip--no-pointer');
+    expect(wrapper.find('.mc-tooltip').classes()).not.toContain(
+      'mc-tooltip--no-pointer',
+    );
   });
 });

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

@@ -36,24 +36,24 @@ export const Default: Story = {};
 
 export const Pointer: Story = {
   args: {
-    pointer: false
-  }
+    pointer: false,
+  },
 };
 
 export const Right: Story = {
   args: {
-    position: 'right'
-  }
+    position: 'right',
+  },
 };
 
 export const Left: Story = {
   args: {
-    position: 'left'
-  }
+    position: 'left',
+  },
 };
 
 export const Bottom: Story = {
   args: {
-    position: 'bottom'
-  }
+    position: 'bottom',
+  },
 };

package/src/components/tooltip/MTooltip.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="tooltip-story-wrapper">
     <div class="mc-tooltip" :class="classObject" :aria-describedby="id">
-      <slot/>
+      <slot />
       <span :id="id" class="mc-tooltip__content" role="tooltip">
-      {{ text }}
+        {{ text }}
       </span>
     </div>
   </div>
@@ -35,7 +35,7 @@ const props = withDefaults(
   }>(),
   {
     position: 'top',
-    pointer: true
+    pointer: true,
   },
 );
 

package/src/main.ts

@@ -2,6 +2,7 @@ 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 MDatepicker } from './components/datepicker/MDatepicker.vue';
 export { default as MDivider } from './components/divider/MDivider.vue';
 export { default as MDrawer } from './components/drawer/MDrawer.vue';
@@ -18,6 +19,8 @@ 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 MLinearProgressbarBuffer } from './components/linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
+export { default as MLinearProgressbarPercentage } from './components/linearprogressbarpercentage/MLinearProgressbarPercentage.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';