@mozaic-ds/vue 2.15.0 → 2.17.0

package/src/components/carousel/MCarousel.figma.ts

@@ -0,0 +1,32 @@
+/**
+ * Code Connect mapping for MCarousel
+ * Links Figma Carousel (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-6454',
+  {
+    props: {
+      hasScrollbar: figma.boolean('Has scrollbar'),
+      hasPagination: figma.boolean('Has pagination'),
+      breakpoint: figma.enum('Breakpoint', {
+        'S to M (320 to 1023px)': 's',
+        'L to XXL (1024 and up)': 'l',
+      }),
+    },
+    example: () =>
+      html`<script setup>
+        import { MCarousel } from '@mozaic-ds/vue';
+      </script>
+
+      <MCarousel>
+        <template #header>
+          <h2>Carousel title</h2>
+        </template>
+        <div>Slide 1</div>
+        <div>Slide 2</div>
+        <div>Slide 3</div>
+      </MCarousel>`,
+  },
+);

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

@@ -0,0 +1,45 @@
+/**
+ * Code Connect mapping for MCheckbox
+ * Links Figma Checkbox (stand-alone) (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-29180',
+  {
+    props: {
+      modelValue: figma.enum('Is checked', {
+        True: true,
+        False: false,
+      }),
+      indeterminate: figma.enum('is Indeterminate', {
+        True: true,
+        False: false,
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        'Read-only': false,
+      }),
+      isInvalid: figma.enum('is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ modelValue, indeterminate, disabled, isInvalid }) =>
+      html`<script setup>
+        import { MCheckbox } from '@mozaic-ds/vue';
+      </script>
+
+      <MCheckbox
+        id="checkbox-id"
+        label="Checkbox Label"
+        :model-value=${modelValue}
+        :indeterminate=${indeterminate}
+        disabled=${disabled}
+        :is-invalid=${isInvalid}
+      ></MCheckbox>`,
+  },
+);

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

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MCheckboxGroup
+ * Links Figma Checkbox group (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-29096',
+  {
+    props: {
+      inline: figma.enum('Layout', {
+        'Stacked (default)': false,
+        Inline: true,
+      }),
+    },
+    example: ({ inline }) =>
+      html`<script setup>
+        import { MCheckboxGroup } from '@mozaic-ds/vue';
+      </script>
+
+      <MCheckboxGroup
+        name="group"
+        :options="[
+          { id: '1', label: 'Option 1', value: '1' },
+          { id: '2', label: 'Option 2', value: '2' },
+        ]"
+        inline=${inline}
+      />`,
+  },
+);

package/src/components/checklistmenu/MCheckListMenu.figma.ts

@@ -0,0 +1,29 @@
+/**
+ * Code Connect mapping for MCheckListMenu
+ * Links Figma Check-list menu (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=72-30681',
+  {
+    props: {
+      outlined: figma.enum('is outlined', {
+        'true': true,
+        'false': false,
+      }),
+    },
+    example: ({ outlined }) =>
+      html`<script setup>
+        import { MCheckListMenu } from '@mozaic-ds/vue';
+      </script>
+
+      <MCheckListMenu
+        :items="[
+          { label: 'Label', checked: true },
+          { label: 'Label', checked: false },
+        ]"
+        outlined=${outlined}
+      />`,
+  },
+);

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

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MCircularProgressbar
+ * Links Figma Circular progress bar (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=61-2204',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        M: 'm',
+        L: 'l',
+      }),
+      value: figma.enum('Completion', {
+        '0%': 0,
+        '25%': 25,
+        '50%': 50,
+        '75%': 75,
+        '100%': 100,
+      }),
+    },
+    example: ({ size, value }) =>
+      html`<script setup>
+        import { MCircularProgressbar } from '@mozaic-ds/vue';
+      </script>
+
+      <MCircularProgressbar size=${size} :value=${value} aria-label="Progress bar"></MCircularProgressbar>`,
+  },
+);

package/src/components/combobox/MCombobox.figma.ts

@@ -0,0 +1,48 @@
+/**
+ * Code Connect mapping for MCombobox
+ * Links Figma _combobox / base to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=19683-17907',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        'M (default)': 'm',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        'Read-only': false,
+      }),
+      readonly: figma.enum('State', {
+        'Read-only': true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        Disabled: false,
+      }),
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ size, disabled, readonly, isInvalid }) =>
+      html`<script setup>
+        import { MCombobox } from '@mozaic-ds/vue';
+      </script>
+
+      <MCombobox
+        id="combobox-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        :options="[{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }]"
+      ></MCombobox>`,
+  },
+);

package/src/components/combobox/MCombobox.spec.ts

@@ -0,0 +1,246 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent, ref, nextTick } from 'vue';
+import MCombobox from './MCombobox.vue';
+
+const MOptionListboxStub = defineComponent({
+  name: 'MOptionListbox',
+  props: [
+    'modelValue',
+    'open',
+    'multiple',
+    'search',
+    'actions',
+    'checkableSections',
+    'searchPlaceholder',
+    'selectLabel',
+    'clearLabel',
+    'options',
+    'id',
+  ],
+  emits: ['update:modelValue', 'open', 'close'],
+  setup() {
+    const activeIndex = ref(-1);
+    const listboxEl = ref(document.createElement('div'));
+
+    // On crée une fonction mock que l’on expose
+    const toggleValue = vi.fn();
+
+    return {
+      activeIndex,
+      listboxEl,
+      handleKeydown: () => {},
+      toggleValue, // <- expose ici
+    };
+  },
+  template: `<div />`,
+});
+
+const MTagStub = defineComponent({
+  name: 'MTag',
+  props: ['id', 'label', 'type', 'size'],
+  emits: ['remove-tag'],
+  template: `<div class="m-tag-stub">{{ label }}</div>`,
+});
+
+const MButtonStub = defineComponent({
+  name: 'MButton',
+  props: ['outlined', 'size'],
+  emits: ['click'],
+  template: `<button @click="$emit('click')"><slot/></button>`,
+});
+
+const CrossCircleFilled24 = defineComponent({
+  name: 'CrossCircleFilled24',
+  template: `<svg/>`,
+});
+const ChevronDown24 = defineComponent({
+  name: 'ChevronDown24',
+  template: `<svg/>`,
+});
+
+describe('MCombobox', () => {
+  const options = [
+    { label: 'One', value: 1 },
+    { label: 'Two', value: 2 },
+    { label: 'Three', value: 3 },
+  ];
+
+  it('renders placeholder when no selection', () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const control = wrapper.find('.mc-combobox__control');
+    expect(control.exists()).toBe(true);
+    expect(control.text()).toBe('Select an option');
+  });
+
+  it('renders selected label for single value', () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: 1, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const control = wrapper.find('.mc-combobox__control');
+    expect(control.text()).toBe('One');
+  });
+
+  it('multiple selection shows joins values', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: [1, 2], multiple: true, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    expect(wrapper.find('.mc-combobox__control').text()).toBe('One, Two');
+  });
+
+  it('toggles listbox open/close on control click', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const root = wrapper.find('.mc-combobox');
+    const control = wrapper.find('.mc-combobox__control');
+
+    await control.trigger('click');
+    expect(root.classes()).toContain('mc-combobox--open');
+
+    await control.trigger('click');
+    expect(root.classes()).not.toContain('mc-combobox--open');
+  });
+
+  it('clear button clears selection and emits update:modelValue', async () => {
+    const wrapperSingle = mount(MCombobox, {
+      props: { modelValue: 1, clearable: true, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const clearBtnSingle = wrapperSingle.find('.mc-combobox__clear');
+    expect(clearBtnSingle.exists()).toBe(true);
+    await clearBtnSingle.trigger('click');
+    const emittedSingle = wrapperSingle.emitted('update:modelValue') || [];
+    expect(emittedSingle.length).toBeGreaterThan(0);
+    expect(emittedSingle[emittedSingle.length - 1][0]).toBeNull();
+
+    const wrapperMulti = mount(MCombobox, {
+      props: { modelValue: [1], multiple: true, clearable: true, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const clearBtnMulti = wrapperMulti.find('.mc-combobox__clear');
+    expect(clearBtnMulti.exists()).toBe(true);
+    await clearBtnMulti.trigger('click');
+    const emittedMulti = wrapperMulti.emitted('update:modelValue') || [];
+    expect(emittedMulti.length).toBeGreaterThan(0);
+
+    const last = emittedMulti[emittedMulti.length - 1][0];
+    expect(Array.isArray(last)).toBe(true);
+    expect(last).toEqual([]);
+  });
+
+  it('activeDescendant reflects child listbox activeIndex', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const listboxRef = (wrapper.vm as InstanceType<typeof MCombobox>).$refs
+      .listbox as { activeIndex: number };
+    expect(listboxRef).toBeTruthy();
+
+    listboxRef.activeIndex = 2;
+    await nextTick();
+
+    const control = wrapper.find('.mc-combobox__control');
+    const attr = control.attributes()['aria-activedescendant'];
+    expect(attr).toBeTruthy();
+
+    expect(attr.includes('-2')).toBe(true);
+  });
+
+  it('clicking outside closes the listbox', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+      attachTo: document.body,
+    });
+
+    const root = wrapper.find('.mc-combobox');
+    const control = wrapper.find('.mc-combobox__control');
+
+    await control.trigger('click');
+    expect(root.classes()).toContain('mc-combobox--open');
+
+    document.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    await nextTick();
+    expect(root.classes()).not.toContain('mc-combobox--open');
+  });
+});

package/src/components/combobox/MCombobox.stories.ts

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MCombobox from './MCombobox.vue';
+import { computed, ref } from 'vue';
+import type { ListboxOption } from '../optionListbox/MOptionListbox.vue';
+import MTag from '../tag/MTag.vue';
+import MButton from '../button/MButton.vue';
+
+const defaultOptions = Array.from({ length: 12 }).map((_el, index) => {
+  return {
+    label: `Option ${index + 1}`,
+    value: `option${index + 1}`,
+  };
+});
+
+let optionCount = 0;
+
+const optionsWithSections: ListboxOption[] = Array.from({ length: 12 }).map(
+  (_el, index) => {
+    const isSection = index % 3 === 0;
+
+    if (!isSection) {
+      optionCount++;
+    }
+
+    return {
+      label: `${isSection ? 'Section' : 'Option'} ${isSection ? index / 3 + 1 : optionCount}`,
+      value: !isSection ? `option${optionCount}` : undefined,
+      type: isSection ? 'section' : 'option',
+    };
+  },
+);
+
+const meta: Meta<typeof MCombobox> = {
+  title: 'Form elements/Combobox',
+  component: MCombobox,
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.',
+      },
+      story: {
+        height: '300px',
+      },
+    },
+  },
+  args: {
+    modelValue: null,
+    checkableSections: true,
+    options: defaultOptions,
+  },
+  render: (args) => ({
+    components: { MCombobox },
+    setup() {
+      const counterLabel = computed(
+        () => `${(args.modelValue as Array<unknown>)?.length} selected`,
+      );
+      return { args, counterLabel };
+    },
+    template: `
+      <MCombobox v-bind="args" v-model="args.modelValue" :counter-label="counterLabel"></MCombobox>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MCombobox>;
+
+export const Default: Story = {};
+
+export const Multiple: Story = {
+  args: {
+    multiple: true,
+    modelValue: [],
+  },
+};
+
+export const SearchInput: Story = {
+  args: {
+    search: true,
+    modelValue: [],
+    multiple: true,
+  },
+};
+
+export const ActionButtons: Story = {
+  args: {
+    modelValue: [],
+    multiple: true,
+    actions: true,
+  },
+};
+
+export const WithSections: Story = {
+  args: {
+    options: optionsWithSections,
+  },
+};
+
+export const SelectableSections: Story = {
+  args: {
+    modelValue: [],
+    multiple: true,
+    options: optionsWithSections,
+    checkableSections: true,
+  },
+};
+
+export const Clearable = {
+  args: {
+    clearable: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Readonly: Story = {
+  args: {
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+  },
+};
+
+export const AdditionalInformation: Story = {
+  args: {
+    options: defaultOptions.map((option) => ({
+      ...option,
+      content: 'Additional information',
+    })),
+  },
+};
+
+export const RemovableTags: Story = {
+  args: {
+    modelValue: [],
+    options: defaultOptions,
+    multiple: true,
+  },
+  render: (args) => ({
+    components: { MCombobox, MTag, MButton },
+    setup() {
+      function findByValue(value: string | number) {
+        return args.options.find((option) => option.value === value);
+      }
+
+      const open = ref(false);
+      const maxResultsDisplayed = ref(9);
+      const counterLabel = computed(
+        () => `${(args.modelValue as Array<unknown>)?.length} selected`,
+      );
+      return { args, counterLabel, maxResultsDisplayed, findByValue, open };
+    },
+    template: `
+      <MCombobox v-bind="args" v-model="args.modelValue" :counter-label="counterLabel" @update:open="open = $event"></MCombobox>
+
+      <template
+        v-if="!open"
+      >
+        <div style="width: 300px; display: flex;align-items: center;gap: 10px;flex-wrap: wrap;margin: 16px 0;">
+          <MTag
+            v-for="(item, index) in args.modelValue?.slice(0, maxResultsDisplayed)"
+            :key="index"
+            id="tag"
+            :label="findByValue(item)?.label || ''"
+            type="removable"
+            size="s"
+          />
+        </div>
+
+        <MButton
+          v-if="args.modelValue?.length > maxResultsDisplayed"
+          outlined
+          size="s"
+          @click="maxResultsDisplayed = args.modelValue?.length"
+        >
+          Show more
+        </MButton>
+      </template>
+    `,
+  }),
+};