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

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

@@ -0,0 +1,154 @@
+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';
+import { action } from '@storybook/addon-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,154 @@
+<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/main.ts

@@ -2,6 +2,7 @@ export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue'
 export { default as MButton } from './components/button/MButton.vue';
 export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
+export { default as MDivider } from './components/divider/MDivider.vue';
 export { default as MField } from './components/field/MField.vue';
 export { default as MFieldGroup } from './components/fieldgroup/MFieldGroup.vue';
 export { default as MIconButton } from './components/iconbutton/MIconButton.vue';
@@ -9,6 +10,7 @@ export { default as MLink } from './components/link/MLink.vue';
 export { default as MLoader } from './components/loader/MLoader.vue';
 export { default as MNumberBadge } from './components/numberbadge/MNumberBadge.vue';
 export { default as MOverlay } from './components/overlay/MOverlay.vue';
+export { default as MPagination } from './components/pagination/MPagination.vue';
 export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
 export { default as MQuantitySelector } from './components/quantityselector/MQuantitySelector.vue';
 export { default as MRadio } from './components/radio/MRadio.vue';
@@ -16,6 +18,8 @@ export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue'
 export { default as MSelect } from './components/select/MSelect.vue';
 export { default as MStatusBadge } from './components/statusbadge/MStatusBadge.vue';
 export { default as MStatusNotification } from './components/statusnotification/MStatusNotification.vue';
+export { default as MTabs } from './components/tabs/MTabs.vue';
+export { default as MTag } from './components/tag/MTag.vue';
 export { default as MTextArea } from './components/textarea/MTextArea.vue';
 export { default as MTextInput } from './components/textinput/MTextInput.vue';
 export { default as MToggle } from './components/toggle/MToggle.vue';