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

package/src/components/pagination/MPagination.vue

@@ -0,0 +1,140 @@
+<template>
+  <nav class="mc-pagination" role="navigation" aria-label="pagination">
+    <MButton
+      v-if="!compact"
+      icon-position="only"
+      aria-label="Previous page"
+      :disabled="isFirstPage"
+      @click="previous"
+    >
+      <template #icon><ChevronLeft24 /></template>
+    </MButton>
+    <MIconButton
+      v-else
+      outlined
+      aria-label="Previous page"
+      :disabled="isFirstPage"
+      @click="previous"
+    >
+      <template #icon><ChevronLeft24 /></template>
+    </MIconButton>
+
+    <div v-if="!compact" class="mc-pagination__field">
+      <MSelect
+        class="mc-pagination__select"
+        :id="id"
+        v-model="currentValue"
+        :options="options"
+        @update:model-value="emit('update:modelValue', Number($event))"
+        :aria-label="selectLabel"
+      ></MSelect>
+    </div>
+
+    <span v-if="compact" class="mc-pagination__label" aria-current="page">
+      {{ options.find(option => option.value === currentValue)?.text }}
+    </span>
+
+    <MButton
+      v-if="!compact"
+      icon-position="only"
+      aria-label="Next page"
+      :disabled="isLastPage"
+      @click="next"
+    >
+      <template #icon><ChevronRight24 /></template>
+    </MButton>
+    <MIconButton
+      v-else
+      outlined
+      aria-label="Next page"
+      :disabled="isLastPage"
+      @click="next"
+    >
+      <template #icon><ChevronRight24 /></template>
+    </MIconButton>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import MButton from '../button/MButton.vue';
+import MSelect from '../select/MSelect.vue';
+import ChevronLeft24 from '@mozaic-ds/icons-vue/src/components/ChevronLeft24/ChevronLeft24.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+/**
+ * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
+ */
+const props = defineProps<{
+  /**
+   * A unique identifier for the pagination.
+   */
+  id: string;
+  /**
+   * The current value of the selected page.
+   */
+  modelValue: number;
+  /**
+   * If `true`, display a compact version without the select.
+   */
+  compact?: boolean;
+  /**
+   * Define the available choices for the pagination select element.
+   */
+  options: Array<{
+    id?: string;
+    text: string;
+    value: number;
+  }>;
+  /**
+   * Accessible label for the select of the pagination.
+   */
+  selectLabel?: string;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emits when the pagination value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
+
+const currentValue = ref(props.modelValue);
+
+watch(currentValue, (newVal) => {
+  if (newVal !== props.modelValue) {
+    emit('update:modelValue', newVal);
+  }
+});
+
+const currentIndex = computed(() =>
+  props.options.findIndex(opt => opt.value === currentValue.value)
+);
+
+const isFirstPage = computed(() => currentIndex.value === 0);
+const isLastPage = computed(() => currentIndex.value === props.options.length - 1);
+
+const previous = () => {
+  const currentIndex = props.options.findIndex(
+    (opt) => opt.value === currentValue.value,
+  );
+  if (currentIndex > 0) {
+    currentValue.value = props.options[currentIndex - 1].value;
+    emit('update:modelValue', props.options[currentIndex - 1].value);
+  }
+};
+
+const next = () => {
+  const currentIndex = props.options.findIndex(
+    (opt) => opt.value === currentValue.value,
+  );
+  if (currentIndex < props.options.length - 1) {
+    currentValue.value = props.options[currentIndex + 1].value;
+    emit('update:modelValue', props.options[currentIndex + 1].value);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/pagination';
+</style>

package/src/components/tabs/MTabs.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import Mtabs from './MTabs.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+
+const meta: Meta<typeof Mtabs> = {
+  title: 'Navigation/Tabs',
+  component: Mtabs,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.',
+      },
+    },
+  },
+  args: {
+    tabs: [
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { Mtabs, ChevronRight24 },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <Mtabs 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      ></Mtabs>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof Mtabs>;
+
+export const Default: Story = {};
+
+export const Icons: Story = {
+  args: {
+    tabs: [
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+    ],
+  },
+};
+
+export const Centered: Story = {
+  args: { centered: true },
+};
+
+export const NoDivider: Story = {
+  args: { divider: false },
+};
+
+export const Disabled: Story = {
+  args: { 
+    tabs: [
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+        disabled: true,
+      },
+      {
+        label: 'Label',
+        disabled: true,
+      },
+    ],
+   },
+};

package/src/components/tabs/MTabs.vue

@@ -0,0 +1,113 @@
+<template>
+  <nav class="mc-tabs" :class="classObject">
+    <ul role="tablist" class="mc-tabs__list" :aria-label="description">
+      <li
+        v-for="(tab, index) in tabs"
+        :key="`tab-${index}`"
+        role="presentation"
+        class="mc-tabs__item"
+      >
+        <button
+          ref="tab"
+          role="tab"
+          class="mc-tabs__tab"
+          :class="{
+            'mc-tabs__tab--selected': isTabSelected(index),
+            'mc-tabs__tab--disabled': tab.disabled,
+          }"
+          :aria-selected="isTabSelected(index)"
+          type="button"
+          @click="onClickTab(index)"
+        >
+          <span v-if="tab.icon" class="mc-tabs__icon">
+            <component :is="tab.icon" />
+          </span>
+          <div class="mc-tabs__label">
+            <span>{{ tab.label }}</span>
+          </div>
+        </button>
+      </li>
+    </ul>
+    <MDivider v-if="divider"></MDivider>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type Component } from 'vue';
+import MDivider from '../divider/MDivider.vue';
+/**
+ * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
+     */
+    description?: string;
+    /**
+     * If `true`, the divider will appear.
+     */
+    divider?: boolean;
+    /**
+     * If `true`, the tabs of the component will be centered.
+     */
+    centered?: boolean;
+    /**
+     * The selected tab index, bound via v-model.
+     */
+    modelValue?: number;
+    /**
+     * An array of objects that allows you to provide all the data needed to generate the content for each tab.
+     */
+    tabs: Array<{
+      /**
+       * The icon displayed for the tab from Mozaic-icon-vue.
+       */
+      icon?: Component;
+      /**
+       * The label displayed for the tab.
+       */
+      label: string;
+      /**
+       * If `true`, the tab will be disabled.
+       */
+      disabled?: boolean;
+    }>;
+  }>(),
+  {
+    modelValue: 0,
+    divider: true,
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    'mc-tabs--centered': props.centered,
+  };
+});
+
+const modelValue = ref(props.modelValue);
+
+const onClickTab = (index: number) => {
+  if (props.tabs[index].disabled) return;
+  if (index !== modelValue.value) {
+    modelValue.value = index;
+    emit('update:modelValue', index);
+  }
+}
+
+const isTabSelected = (index: number) => {
+  return modelValue.value === index;
+}
+
+const emit = defineEmits<{
+  /**
+   * Emits when the selected tab changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tabs';
+</style>

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,
+  },
+};