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

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/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/passwordinput/MPasswordInput.spec.ts

@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MPasswordInput from './MPasswordInput.vue';
+
+describe('MPasswordInput.vue', () => {
+  it('renders correctly with default props', () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+      },
+    });
+
+    const input = wrapper.find('input');
+    const toggleButton = wrapper.find('button[role="switch"]');
+
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('type')).toBe('password');
+
+    expect(toggleButton.exists()).toBe(true);
+    expect(toggleButton.text()).toBe('Show');
+  });
+
+  it('toggles password visibility on button click', async () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+      },
+    });
+
+    const toggleButton = wrapper.find('button[role="switch"]');
+    const input = wrapper.find('input');
+
+    expect(input.attributes('type')).toBe('password');
+
+    await toggleButton.trigger('click');
+
+    expect(input.attributes('type')).toBe('text');
+    expect(toggleButton.text()).toBe('Hide');
+
+    await toggleButton.trigger('click');
+
+    expect(input.attributes('type')).toBe('password');
+    expect(toggleButton.text()).toBe('Show');
+  });
+
+  it('should update modelValue when input value changes', async () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+        modelValue: '',
+      },
+    });
+
+    const input = wrapper.find('input');
+    await input.setValue('newPassword123');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+      'newPassword123',
+    ]);
+  });
+
+  it('clears the input when the clear button is clicked', async () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+        modelValue: 'somePassword',
+        isClearable: true,
+        clearLabel: 'Clear content',
+      },
+    });
+
+    const clearButton = wrapper.find('.mc-controls-options__button');
+
+    await clearButton.trigger('click');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['']);
+  });
+
+  it('disables the input when disabled prop is passed', () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+        disabled: true,
+      },
+    });
+
+    const input = wrapper.find('input');
+
+    expect(input.attributes('disabled')).toBeDefined();
+  });
+
+  it('applies invalid state when isInvalid prop is true', () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+        isInvalid: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('is-invalid');
+  });
+});

package/src/components/passwordinput/MPasswordInput.stories.ts

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MPasswordInput from './MPasswordInput.vue';
+
+const meta: Meta<typeof MPasswordInput> = {
+  title: 'Form Elements/PasswordInput',
+  component: MPasswordInput,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.<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 section](/docs/form-elements-field--docs#input).',
+      },
+    },
+  },
+  args: {
+    id: 'passwordInputId',
+    placeholder: 'Enter your password',
+  },
+  render: (args) => ({
+    components: { MPasswordInput },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MPasswordInput 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MPasswordInput>;
+
+export const WithValue: Story = {
+  args: {
+    id: 'withValueId',
+    modelValue: 'Magic-word-123',
+  },
+};
+
+export const Default: Story = {};
+
+export const Clearable: Story = {
+  args: {
+    id: 'clearableId',
+    modelValue: 'Magic-word-123',
+    isClearable: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    id: 'disableId',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    id: 'invalidId',
+    isInvalid: true,
+  },
+};