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

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MBreadcrumb from './MBreadcrumb.vue';
+
+const meta: Meta<typeof MBreadcrumb> = {
+  title: 'Navigation/Breadcrumb',
+  component: MBreadcrumb,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.',
+      },
+    },
+  },
+  args: {
+    links: [
+      {
+        label: 'Home',
+        href: '#',
+        router: true
+      },
+      {
+        label: 'level 01',
+        href: '#',
+        router: true
+      },
+      {
+        label: 'level 02',
+        href: '#',
+        router: true
+      },
+      {
+        label: 'Current Page',
+        href: '#',
+        router: true
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MBreadcrumb },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MBreadcrumb v-bind="args"></MBreadcrumb>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MBreadcrumb>;
+
+export const Default: Story = {};
+
+export const Inverse: Story = {
+  parameters: {
+    backgrounds: {
+      default: 'Inverse',
+    },
+  },
+  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/breadcrumb/MBreadcrumb.vue

@@ -0,0 +1,70 @@
+<template>
+  <nav class="mc-breadcrumb" :class="classObject" aria-label="Breadcrumb">
+    <ul class="mc-breadcrumb__container">
+      <li
+        class="mc-breadcrumb__item"
+        v-for="(link, index) in links"
+        :key="`breadcrumb-${index}`"
+      >
+        <MLink
+          :href="link.href"
+          :router="link.router"
+          :appearance="appearance"
+          inline
+          :class="{
+            'mc-breadcrumb__current': isLastLink(index),
+          }"
+          :aria-current="isLastLink(index) ? 'page' : undefined"
+        >
+          {{ link.label }}
+        </MLink>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import MLink from '../link/MLink.vue';
+/**
+ * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.
+ */
+const props = defineProps<{
+  /**
+   * Allows to define the breadcrumb style
+   */
+  appearance?: 'standard' | 'inverse';
+  /**
+   * Links of the breadcrumb
+   */
+  links?: Array<{
+    /**
+     * The label displayed for the link.
+     */
+    label: string;
+    /**
+     * URL for the link (for external links or the `to` prop for `router-link`).
+     */
+    href: string;
+    /**
+     * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).
+     */
+    router?: boolean;
+  }>;
+}>();
+
+const classObject = computed(() => {
+  return {
+    [`mc-breadcrumb--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+  };
+});
+
+const isLastLink = (index: number) => {
+  return index === (props.links?.length ?? 0) - 1;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/breadcrumb';
+</style>

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

@@ -11,7 +11,7 @@ const meta: Meta<typeof MButton> = {
     docs: {
       description: {
         component:
-          'Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.',
+          'Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.',
       },
     },
   },

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

@@ -10,7 +10,7 @@ const meta: Meta<typeof MCheckbox> = {
     docs: {
       description: {
         component:
-          'Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.',
+          'A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.',
       },
     },
   },

package/src/components/checkboxgroup/MCheckboxGroup.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MCheckboxGroup> = {
     docs: {
       description: {
         component:
-          'Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#checkbox%20group).',
+          'A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#checkbox-group).',
       },
     },
   },

package/src/components/checkboxgroup/MCheckboxGroup.vue

@@ -25,7 +25,7 @@ import MCheckbox from '../checkbox/MCheckbox.vue';
  */
 const props = defineProps<{
   /**
-   * The name attribute for the radio element, typically used for form submission.
+   * The name attribute for the checkbox element, typically used for form submission.
    */
   name: string;
   /**
@@ -34,7 +34,7 @@ const props = defineProps<{
    */
   modelValue?: Array<string>;
   /**
-   * list of properties of each radio button of the radio group
+   * list of properties of each checkbox button of the checkbox group
    */
   options: Array<{
     id: string;

package/src/components/field/MField.stories.ts

@@ -13,7 +13,7 @@ const meta: Meta<typeof MField> = {
     docs: {
       description: {
         component:
-          'The Field component creates a structured form field with a label, optional help text, error and validation message handling.',
+          'A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.',
       },
     },
   },

package/src/components/fieldgroup/MFieldGroup.stories.ts

@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
 import MFieldGroup from './MFieldGroup.vue';
 import MCheckboxGroup from '../checkboxgroup/MCheckboxGroup.vue';
 import MRadioGroup from '../radiogroup/MRadioGroup.vue';
+import MToggleGroup from '../togglegroup/MToggleGroup.vue';
 
 const meta: Meta<typeof MFieldGroup> = {
   title: 'Form Elements/Field Group',
@@ -12,7 +13,7 @@ const meta: Meta<typeof MFieldGroup> = {
     docs: {
       description: {
         component:
-          'the Field Group component creates a structured form field for group field such as Radio Group, Checkbox Group or Toggle Group with a label, optional help text, error and validation message handling.',
+          'A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.',
       },
     },
   },
@@ -60,7 +61,7 @@ const meta: Meta<typeof MFieldGroup> = {
     },
   },
   render: (args) => ({
-    components: { MFieldGroup, MCheckboxGroup, MRadioGroup },
+    components: { MFieldGroup, MCheckboxGroup, MRadioGroup, MToggleGroup },
     setup() {
       const handleUpdate = action('update:modelValue');
 
@@ -111,6 +112,36 @@ export const CheckboxGroupValid: Story = {
     requirementText: 'required',
     isValid: true,
     message: 'Validation message (Be concise and use comprehensive words).',
+    default: `
+      <MCheckboxGroup
+        name="checkboxGroupName"
+        :options="
+          [
+            {
+              id: 'checkbox-05',
+              label: 'checkbox Label',
+              value: 'checkbox5',
+            },
+            {
+              id: 'checkbox-06',
+              label: 'checkbox Label',
+              value: 'checkbox6',
+            },
+            {
+              id: 'checkbox-07',
+              label: 'checkbox Label',
+              value: 'checkbox7',
+            },
+            {
+              id: 'checkbox-08',
+              label: 'checkbox Label',
+              value: 'checkbox8',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
   },
 };
 
@@ -128,24 +159,24 @@ export const CheckboxGroupInvalid: Story = {
         :options="
           [
             {
-              id: 'checkbox-01',
+              id: 'checkbox-09',
               label: 'checkbox Label',
-              value: 'checkbox1',
+              value: 'checkbox9',
             },
             {
-              id: 'checkbox-02',
+              id: 'checkbox-10',
               label: 'checkbox Label',
-              value: 'checkbox2',
+              value: 'checkbox10',
             },
             {
-              id: 'checkbox-03',
+              id: 'checkbox-11',
               label: 'checkbox Label',
-              value: 'checkbox3',
+              value: 'checkbox11',
             },
             {
-              id: 'checkbox-04',
+              id: 'checkbox-12',
               label: 'checkbox Label',
-              value: 'checkbox4',
+              value: 'checkbox12',
             },
           ]
         "
@@ -205,24 +236,24 @@ export const RadioGroupValid: Story = {
         :options="
           [
             {
-              id: 'radio01',
+              id: 'radio05',
               label: 'Radio button Label',
-              value: 'radio1'
+              value: 'radio5'
             },
             {
-              id: 'radio02',
+              id: 'radio06',
               label: 'Radio button Label',
-              value: 'radio2'
+              value: 'radio6'
             },
             {
-              id: 'radio03',
+              id: 'radio07',
               label: 'Radio button Label',
-              value: 'radio3'
+              value: 'radio7'
             },
             {
-              id: 'radio04',
+              id: 'radio08',
               label: 'Radio button Label',
-              value: 'radio4'
+              value: 'radio8'
             }
           ]
         "
@@ -246,24 +277,24 @@ export const RadioGroupInvalid: Story = {
         :options="
           [
             {
-              id: 'radio-1',
+              id: 'radio-9',
               label: 'Radio button Label',
-              value: 'radio1'
+              value: 'radio9'
             },
             {
-              id: 'radio-2',
+              id: 'radio-10',
               label: 'Radio button Label',
-              value: 'radio2'
+              value: 'radio10'
             },
             {
-              id: 'radio-3',
+              id: 'radio-11',
               label: 'Radio button Label',
-              value: 'radio3'
+              value: 'radio11'
             },
             {
-              id: 'radio-4',
+              id: 'radio-12',
               label: 'Radio button Label',
-              value: 'radio4'
+              value: 'radio12'
             }
           ]
         "
@@ -272,3 +303,121 @@ export const RadioGroupInvalid: Story = {
     `,
   },
 };
+
+export const ToggleGroup: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ToggleGroupId',
+    requirementText: 'required',
+    default: `
+      <MToggleGroup
+        name="ToggleGroupName"
+        :options="
+          [
+            {
+              id: 'toggle-01',
+              label: 'Toggle Label',
+              value: 'toggle1',
+            },
+            {
+              id: 'toggle-02',
+              label: 'Toggle Label',
+              value: 'toggle2',
+            },
+            {
+              id: 'toggle-03',
+              label: 'Toggle Label',
+              value: 'toggle3',
+            },
+            {
+              id: 'toggle-04',
+              label: 'Toggle Label',
+              value: 'toggle4',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const ToggleGroupValid: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ToggleGroupId',
+    requirementText: 'required',
+    isValid: true,
+    message: 'Validation message (Be concise and use comprehensive words).',
+    default: `
+      <MToggleGroup
+        name="ToggleGroupName"
+        :options="
+          [
+            {
+              id: 'toggle-05',
+              label: 'Toggle Label',
+              value: 'toggle5',
+            },
+            {
+              id: 'toggle-06',
+              label: 'Toggle Label',
+              value: 'toggle6',
+            },
+            {
+              id: 'toggle-07',
+              label: 'Toggle Label',
+              value: 'toggle7',
+            },
+            {
+              id: 'toggle-08',
+              label: 'Toggle Label',
+              value: 'toggle8',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const ToggleGroupInvalid: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ToggleGroupId',
+    requirementText: 'required',
+    isInvalid: true,
+    message: 'Error message (Be concise and use comprehensive words)',
+    default: `
+      <MToggleGroup
+        name="ToggleGroupName"
+        :options="
+          [
+            {
+              id: 'toggle-09',
+              label: 'Toggle Label',
+              value: 'toggle9',
+            },
+            {
+              id: 'toggle-10',
+              label: 'Toggle Label',
+              value: 'toggle10',
+            },
+            {
+              id: 'toggle-11',
+              label: 'Toggle Label',
+              value: 'toggle11',
+            },
+            {
+              id: 'toggle-12',
+              label: 'Toggle Label',
+              value: 'toggle12',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};

package/src/components/iconbutton/MIconButton.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MIconButton> = {
     docs: {
       description: {
         component:
-          'Icon Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.',
+          'Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.',
       },
     },
   },

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/loader/MLoader.stories.ts

@@ -8,7 +8,7 @@ const meta: Meta<typeof MLoader> = {
     docs: {
       description: {
         component:
-          'A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.',
+          'A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.',
       },
     },
   },

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 indicates the status of an entity and can evolve at any time.',
+          '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>