@mozaic-ds/vue 1.0.0-rc.2 → 2.1.0

package/src/components/tabs/Mtabs.spec.ts

@@ -0,0 +1,149 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MTabs from './MTabs.vue';
+import { defineComponent, h } from 'vue';
+
+describe('MTabs.vue', () => {
+  const tabs = [{ label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' }];
+
+  it('renders tabs with correct labels', () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs,
+      },
+    });
+
+    const tabElements = wrapper.findAll('li.mc-tabs__item');
+    expect(tabElements.length).toBe(tabs.length);
+
+    tabs.forEach((tab, i) => {
+      expect(tabElements[i].text()).toContain(tab.label);
+    });
+  });
+
+  it('applies selected class and aria-selected attribute based on modelValue and updates on tab click', async () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs,
+        modelValue: 0,
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+
+    buttons.forEach((button, i) => {
+      if (i === 0) {
+        expect(button.classes()).toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('true');
+      } else {
+        expect(button.classes()).not.toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('false');
+      }
+    });
+
+    await buttons[1].trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([1]);
+
+    await wrapper.setProps({ modelValue: 1 });
+
+    const updatedButtons = wrapper.findAll('button.mc-tabs__tab');
+    updatedButtons.forEach((button, i) => {
+      if (i === 1) {
+        expect(button.classes()).toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('true');
+      } else {
+        expect(button.classes()).not.toContain('mc-tabs__tab--selected');
+        expect(button.attributes('aria-selected')).toBe('false');
+      }
+    });
+  });
+
+  it('adds divider and centered classes based on props', async () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs,
+        divider: true,
+        centered: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-tabs--centered');
+    expect(wrapper.findComponent({ name: 'MDivider' }).exists()).toBe(true);
+
+    await wrapper.setProps({ divider: false, centered: false });
+
+    expect(wrapper.classes()).not.toContain('mc-tabs--centered');
+    expect(wrapper.findComponent({ name: 'MDivider' }).exists()).toBe(false);
+  });
+
+  it('sets aria-label on tablist based on description prop', () => {
+    const description = 'Main tabs navigation';
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs,
+        description,
+      },
+    });
+
+    const ul = wrapper.find('ul[role="tablist"]');
+    expect(ul.attributes('aria-label')).toBe(description);
+  });
+
+  it('renders no tabs if tabs prop is empty', () => {
+    const wrapper = mount(MTabs, { props: { tabs: [] } });
+    expect(wrapper.findAll('li.mc-tabs__item').length).toBe(0);
+  });
+
+  it('emits update:modelValue on tab click if tab is not disabled', async () => {
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: [
+          { label: 'Tab 1' },
+          { label: 'Tab 2', disabled: true },
+          { label: 'Tab 3' },
+        ],
+        modelValue: 0,
+      },
+    });
+
+    const buttons = wrapper.findAll('button.mc-tabs__tab');
+
+    await buttons[2].trigger('click');
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([2]);
+
+    await buttons[1].trigger('click');
+    expect(wrapper.emitted('update:modelValue')!.length).toBe(1);
+  });
+
+  it('renders icon component when icon prop is provided', () => {
+    const DummyIcon = defineComponent({
+      name: 'DummyIcon',
+      render() {
+        return h('svg', { class: 'dummy-icon' }, [
+          h('circle', { cx: 10, cy: 10, r: 10 }),
+        ]);
+      },
+    });
+
+    const tabsWithIcon = [
+      { label: 'Tab 1', icon: DummyIcon },
+      { label: 'Tab 2' },
+    ];
+
+    const wrapper = mount(MTabs, {
+      props: {
+        tabs: tabsWithIcon,
+      },
+    });
+
+    const firstTabButton = wrapper.findAll('button.mc-tabs__tab')[0];
+    expect(firstTabButton.findComponent(DummyIcon).exists()).toBe(true);
+    expect(firstTabButton.find('svg.dummy-icon').exists()).toBe(true);
+
+    const secondTabButton = wrapper.findAll('button.mc-tabs__tab')[1];
+    expect(secondTabButton.findComponent(DummyIcon).exists()).toBe(false);
+  });
+});

package/src/components/tag/MTag.spec.ts

@@ -0,0 +1,107 @@
+import { mount } from '@vue/test-utils';
+import MTag from './MTag.vue';
+import { describe, it, expect, vi } from 'vitest';
+
+describe('MTag.vue', () => {
+  it('renders a selectable tag with a checkbox and label', async () => {
+    const wrapper = mount(MTag, {
+      props: {
+        type: 'selectable',
+        label: 'Test Tag',
+        modelValue: false,
+        id: 'test-tag-id',
+        name: 'test-tag',
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    const label = wrapper.find('.mc-tag__label');
+
+    expect(checkbox.exists()).toBe(true);
+    expect(label.text()).toBe('Test Tag');
+    expect(checkbox.element.checked).toBe(false);
+
+    await checkbox.setChecked();
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+  });
+
+  it('renders an interactive tag as a button with label', () => {
+    const wrapper = mount(MTag, {
+      props: {
+        type: 'interactive',
+        label: 'Interactive Tag',
+      },
+    });
+
+    const button = wrapper.find('button');
+    const label = wrapper.find('.mc-tag__label');
+
+    expect(button.exists()).toBe(true);
+    expect(label.text()).toBe('Interactive Tag');
+  });
+
+  it('renders a contextualised tag with badge number', () => {
+    const wrapper = mount(MTag, {
+      props: {
+        type: 'contextualised',
+        label: 'Contextualised Tag',
+        contextualisedNumber: 42,
+      },
+    });
+
+    const badge = wrapper.findComponent({ name: 'MNumberBadge' });
+    const label = wrapper.find('.mc-tag__label');
+
+    expect(badge.exists()).toBe(true);
+    expect(badge.props('label')).toBe(42);
+    expect(label.text()).toBe('Contextualised Tag');
+  });
+
+  it('renders a removable tag with a delete button and emits remove event', async () => {
+    const removeTag = vi.fn();
+    const wrapper = mount(MTag, {
+      props: {
+        type: 'removable',
+        label: 'Removable Tag',
+        id: 'removable-tag-id',
+      },
+      global: {
+        mocks: {
+          emit: removeTag,
+        },
+      },
+    });
+
+    const removeButton = wrapper.find('button.mc-tag-removable__remove');
+    expect(removeButton.exists()).toBe(true);
+
+    await removeButton.trigger('click');
+    expect(removeTag).toHaveBeenCalledWith('remove-tag', 'removable-tag-id');
+  });
+
+  it('renders with the correct size classes based on the size prop', () => {
+    const wrapper = mount(MTag, {
+      props: {
+        type: 'informative',
+        label: 'Informative Tag',
+        size: 'l',
+      },
+    });
+
+    const element = wrapper.find('span.mc-tag');
+    expect(element.classes()).toContain('mc-tag--l');
+  });
+
+  it('should disable the tag when the disabled prop is true', () => {
+    const wrapper = mount(MTag, {
+      props: {
+        type: 'selectable',
+        label: 'Disabled Tag',
+        disabled: true,
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    expect(checkbox.element.disabled).toBe(true);
+  });
+});

package/src/components/tag/MTag.stories.ts

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+import MTag from './MTag.vue';
+
+const meta: Meta<typeof MTag> = {
+  title: 'Indicators/Tag',
+  component: MTag,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.',
+      },
+    },
+  },
+  args: {
+    label: 'Tag label',
+  },
+  render: (args) => ({
+    components: { MTag },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+      const handleRemoveTag = action('remove-tag');
+
+      return { args, handleUpdate, handleRemoveTag };
+    },
+    template: `
+      <MTag 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+        @remove-tag="handleRemoveTag"
+      ></MTag>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MTag>;
+
+export const Default: Story = {};
+
+export const Size: Story = {
+  args: { size: 's' },
+};
+
+export const Interactive: Story = {
+  args: { type: 'interactive' },
+};
+
+export const Disabled: Story = {
+  args: {
+    type: 'interactive',
+    disabled: true,
+  },
+};
+
+export const Contextualised: Story = {
+  args: {
+    type: 'contextualised',
+    contextualisedNumber: 99,
+  },
+};
+
+export const Removable: Story = {
+  args: {
+    type: 'removable',
+    id: 'tagId',
+  },
+};
+
+export const Selectable: Story = {
+  args: {
+    type: 'selectable',
+    modelValue: true,
+  },
+};

package/src/components/tag/MTag.vue

@@ -0,0 +1,151 @@
+<template>
+  <label
+    v-if="type === 'selectable'"
+    :for="id"
+    class="mc-tag"
+    :class="classObject"
+  >
+    <input
+      type="checkbox"
+      class="mc-tag__input"
+      :id="id"
+      :name="name"
+      :checked="modelValue"
+      :disabled="disabled"
+      @change="
+        emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+      "
+      v-bind="$attrs"
+    />
+    <span class="mc-tag__label">{{ label }}</span>
+  </label>
+
+  <button
+    v-else-if="type === 'interactive'"
+    class="mc-tag"
+    type="button"
+    :class="classObject"
+    :disabled="disabled"
+    v-bind="$attrs"
+  >
+    <span class="mc-tag__label">{{ label }}</span>
+  </button>
+
+  <button
+    v-else-if="type === 'contextualised'"
+    class="mc-tag"
+    type="button"
+    :class="classObject"
+    :disabled="disabled"
+    v-bind="$attrs"
+  >
+    <MNumberBadge
+      appearance="inverse"
+      :label="contextualisedNumber"
+      :size="size === 'l' ? 'm' : undefined"
+    />
+    <span class="mc-tag__label">{{ label }}</span>
+  </button>
+
+  <span
+    v-else-if="type === 'removable'"
+    class="mc-tag"
+    :class="classObject"
+    v-bind="$attrs"
+  >
+    <span class="mc-tag__label">{{ label }}</span>
+    <button
+      class="mc-tag-removable__remove"
+      type="button"
+      @click="id && emit('remove-tag', id)"
+    >
+      <CrossCircleFilled24 class="mc-tag-removable__icon" aria-hidden="true" />
+      <span class="mc-tag-removable__text">removableLabel</span>
+    </button>
+  </span>
+
+  <!-- informative -->
+  <span v-else class="mc-tag" :class="classObject" v-bind="$attrs">
+    <span class="mc-tag__label">{{ label }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import MNumberBadge from '../numberbadge/MNumberBadge.vue';
+/**
+ * A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Defines the behavior and layout of the tag.
+     */
+    type?:
+      | 'informative'
+      | 'interactive'
+      | 'contextualised'
+      | 'removable'
+      | 'selectable';
+    /**
+     * Determines the size of the tag.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'.
+     */
+    id?: string;
+    /**
+     * The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable').
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the tag.
+     */
+    label: string;
+    /**
+     * The tag's checked state, bound via v-model. Used only for type: 'selectable'.
+     */
+    modelValue?: boolean;
+    /**
+     * If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types.
+     */
+    disabled?: boolean;
+    /**
+     * A number displayed in the badge when the tag is contextualised.
+     */
+    contextualisedNumber?: number;
+    /**
+     * Accessible label text for the remove button in removable tags.
+     */
+    removableLabel?: string;
+  }>(),
+  {
+    type: 'informative',
+    contextualisedNumber: 99,
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-tag-${props.type}`]: props.type && props.type != 'informative',
+    [`mc-tag--${props.size}`]: props.size && props.size != 'm',
+  };
+});
+
+const emit = defineEmits<{
+  /**
+   * Emits when the tag value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: boolean): void;
+  /**
+   * Emits when the remove button of a tag is clicked, passing the tag's ID.
+   */
+  (on: 'remove-tag', id: string): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tag';
+</style>

package/src/components/textarea/MTextArea.spec.ts

@@ -0,0 +1,112 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MTextArea from './MTextArea.vue';
+
+describe('MTextArea component', () => {
+  it('should render correctly with the given props', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+        placeholder: 'Enter text here...',
+        rows: 5,
+        maxLength: 200,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+
+    expect(textarea.attributes('id')).toBe('textarea-id');
+    expect(textarea.attributes('placeholder')).toBe('Enter text here...');
+    expect(textarea.attributes('rows')).toBe('5');
+    expect(textarea.attributes('maxlength')).toBe('200');
+  });
+
+  it('should apply is-invalid class when isInvalid prop is true', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+        isInvalid: true,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.classes()).toContain('is-invalid');
+  });
+
+  it('should update modelValue when the textarea value changes', async () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Initial value',
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    await textarea.setValue('Updated value');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+      'Updated value',
+    ]);
+  });
+
+  it('should not allow changes if the textarea is disabled', async () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Initial value',
+        disabled: true,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.attributes('disabled')).toBeDefined();
+
+    await textarea.setValue('Updated value');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeFalsy();
+  });
+
+  it('should be read-only if the readonly prop is true', async () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Initial value',
+        readonly: true,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.attributes('readonly')).toBeDefined();
+
+    await textarea.setValue('Updated value');
+
+    expect(textarea.attributes('value')).toBe('Initial value');
+  });
+
+  it('should apply a default classObject computed class', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-textarea');
+  });
+
+  it('should correctly bind rows attribute', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+        rows: 4,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.attributes('rows')).toBe('4');
+  });
+});

package/src/components/textarea/MTextArea.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MTextArea from './MTextArea.vue';
+
+const meta: Meta<typeof MTextArea> = {
+  title: 'Form Elements/Textarea',
+  component: MTextArea,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.<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#textarea).',
+      },
+    },
+  },
+  args: {
+    id: 'textareaId',
+    placeholder: 'Placeholder',
+  },
+  render: (args) => ({
+    components: { MTextArea },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MTextArea 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MTextArea>;
+
+export const WithValue: Story = {
+  args: {
+    id: 'withValueId',
+    modelValue: 'Value of the textarea component',
+  },
+};
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    id: 'disabledId',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    id: 'invalidId',
+    isInvalid: true,
+  },
+};