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

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

@@ -17,18 +17,22 @@ const meta: Meta<typeof MBreadcrumb> = {
       {
         label: 'Home',
         href: '#',
+        router: true
       },
       {
         label: 'level 01',
         href: '#',
+        router: true
       },
       {
         label: 'level 02',
         href: '#',
+        router: true
       },
       {
         label: 'Current Page',
         href: '#',
+        router: true
       },
     ],
   },
@@ -55,3 +59,26 @@ export const Inverse: Story = {
   },
   args: { appearance: 'inverse' },
 };
+
+export const WithoutRouter: Story = {
+  args: {
+    links: [
+      {
+        label: 'Home',
+        href: '#'
+      },
+      {
+        label: 'level 01',
+        href: '#'
+      },
+      {
+        label: 'level 02',
+        href: '#'
+      },
+      {
+        label: 'Current Page',
+        href: '#'
+      },
+    ],
+  },
+};

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';
+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/link/MLink.vue

@@ -53,7 +53,7 @@ const props = withDefaults(
     /**
      * Where to open the link
      */
-    target?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
     /**
      * Specify wether the link is inline
      */

package/src/components/numberbadge/MNumberBadge.spec.ts

@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MNumberBadge from './MNumberBadge.vue';
+
+describe('MNumberBadge component', () => {
+  it('renders the label correctly', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: { label: 42 },
+    });
+    expect(wrapper.text()).toBe('42');
+  });
+
+  it('applies no modifier class by default', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: { label: 1 },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).not.toContain('mc-number-badge--standard');
+    expect(wrapper.classes()).not.toContain('mc-number-badge--s');
+  });
+
+  it('applies appearance modifier class when set to danger', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: {
+        label: 5,
+        appearance: 'danger',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).toContain('mc-number-badge--danger');
+  });
+
+  it('applies size modifier class when size is m', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: {
+        label: 10,
+        size: 'm',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).toContain('mc-number-badge--m');
+  });
+
+  it('applies both appearance and size modifier classes when set', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: {
+        label: 3,
+        appearance: 'accent',
+        size: 'm',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).toContain('mc-number-badge--accent');
+    expect(wrapper.classes()).toContain('mc-number-badge--m');
+  });
+});

package/src/components/{badge/MBadge.stories.ts → numberbadge/MNumberBadge.stories.ts}

@@ -1,30 +1,30 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
-import MBadge from './MBadge.vue';
+import MNumberBadge from './MNumberBadge.vue';
 
-const meta: Meta<typeof MBadge> = {
-  title: 'Indicators/Badge (number)',
-  component: MBadge,
+const meta: Meta<typeof MNumberBadge> = {
+  title: 'Indicators/Number Badge',
+  component: MNumberBadge,
   parameters: {
     docs: {
       description: {
         component:
-          'A Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.',
+          'A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.',
       },
     },
   },
   args: { label: 99 },
   render: (args) => ({
-    components: { MBadge },
+    components: { MNumberBadge },
     setup() {
       return { args };
     },
     template: `
-      <MBadge v-bind="args"></MBadge>
+      <MNumberBadge v-bind="args"></MNumberBadge>
     `,
   }),
 };
 export default meta;
-type Story = StoryObj<typeof MBadge>;
+type Story = StoryObj<typeof MNumberBadge>;
 
 export const Standard: Story = {};
 

package/src/components/{badge/MBadge.vue → numberbadge/MNumberBadge.vue}

@@ -1,5 +1,5 @@
 <template>
-  <span class="mc-badge" :class="classObject">
+  <span class="mc-number-badge" :class="classObject">
     {{ label }}
   </span>
 </template>
@@ -33,13 +33,13 @@ const props = withDefaults(
 
 const classObject = computed(() => {
   return {
-    [`mc-badge--${props.appearance}`]:
+    [`mc-number-badge--${props.appearance}`]:
       props.appearance && props.appearance != 'standard',
-    [`mc-badge--${props.size}`]: props.size && props.size != 's',
+    [`mc-number-badge--${props.size}`]: props.size && props.size != 's',
   };
 });
 </script>
 
 <style lang="scss" scoped>
-@use '@mozaic-ds/styles/components/badge';
+@use '@mozaic-ds/styles/components/number-badge';
 </style>

package/src/components/pagination/MPagination.spec.ts

@@ -0,0 +1,123 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MPagination from './MPagination.vue';
+
+const options = [
+  { value: 1, text: 'Page 1' },
+  { value: 2, text: 'Page 2' },
+  { value: 3, text: 'Page 3' },
+];
+
+describe('MPagination component', () => {
+  it('renders correctly with select when compact is false', () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 2,
+        options,
+        compact: false,
+        selectLabel: 'Select page',
+      },
+    });
+
+    // Check buttons rendered as MButton (not MIconButton)
+    expect(wrapper.findAllComponents({ name: 'MButton' }).length).toBe(2);
+    expect(wrapper.findAllComponents({ name: 'MIconButton' }).length).toBe(0);
+
+    // Check select is present
+    expect(wrapper.find('select').exists()).toBe(true);
+  });
+
+  it('renders icon buttons only when compact is true', () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 2,
+        options,
+        compact: true,
+      },
+    });
+
+    // MIconButton rendered for previous and next
+    expect(wrapper.findAllComponents({ name: 'MIconButton' }).length).toBe(2);
+    // No MButton when compact
+    expect(wrapper.findAllComponents({ name: 'MButton' }).length).toBe(0);
+
+    // No select rendered
+    expect(wrapper.find('select').exists()).toBe(false);
+  });
+
+  it('disables previous button if on first page', async () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 1,
+        options,
+      },
+    });
+    const prevButton = wrapper.findAllComponents({ name: 'MButton' })[0];
+    expect(prevButton.attributes('disabled')).toBeDefined();
+  });
+
+  it('disables next button if on last page', async () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 3,
+        options,
+      },
+    });
+    const buttons = wrapper.findAllComponents({ name: 'MButton' });
+    const nextButton = buttons[buttons.length - 1];
+    expect(nextButton.attributes('disabled')).toBeDefined();
+  });
+
+  it('clicking previous button updates the modelValue', async () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 2,
+        options,
+      },
+    });
+
+    await wrapper.findAllComponents({ name: 'MButton' })[0].trigger('click');
+    // Should emit update:modelValue with value 1 (previous page)
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([1]);
+  });
+
+  it('clicking next button updates the modelValue', async () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 2,
+        options,
+      },
+    });
+
+    const buttons = wrapper.findAllComponents({ name: 'MButton' });
+    await buttons[buttons.length - 1].trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([3]);
+  });
+
+  it('emits update:modelValue when select value changes', async () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 1,
+        options,
+        compact: false,
+        selectLabel: 'Select page',
+      },
+    });
+
+    const select = wrapper.find('select');
+    await select.setValue('3');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([3]);
+  });
+});

package/src/components/pagination/MPagination.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MPagination from './MPagination.vue';
+
+const meta: Meta<typeof MPagination> = {
+  title: 'Navgation/Pagination',
+  component: MPagination,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.',
+      },
+    },
+  },
+  args: {
+    id: 'paginationId',
+    modelValue: 10,
+    options: [
+      {
+        text: 'Page 1 of 99',
+        value: 1,
+      },
+      {
+        text: 'Page 2 of 99',
+        value: 2,
+      },
+      {
+        text: 'Page 3 of 99',
+        value: 3,
+      },
+      {
+        text: 'Page 10 of 99',
+        value: 10,
+      },
+      {
+        text: 'Page 99 of 99',
+        value: 99,
+      },
+    ],
+    selectLabel: 'Select page',
+  },
+  render: (args) => ({
+    components: { MPagination },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MPagination 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MPagination>;
+
+export const Default: Story = {};
+
+export const First: Story = {
+  args: {
+    id: 'firstId',
+    modelValue: 1,
+  },
+};
+
+export const Last: Story = {
+  args: {
+    id: 'lastId',
+    modelValue: 99,
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    id: 'compactId',
+    compact: true,
+  },
+};