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

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,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.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MTextArea from './MTextArea.vue';
 

package/src/components/textinput/MTextInput.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MTextInput from './MTextInput.vue';
 import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';
@@ -19,13 +19,6 @@ const meta: Meta<typeof MTextInput> = {
     id: 'textInputId',
     placeholder: 'Placeholder',
   },
-  argTypes: {
-    $slots: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   render: (args) => ({
     components: { MTextInput, Search24 },
     setup() {

package/src/components/toggle/MToggle.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MToggle from './MToggle.vue';
 

package/src/components/togglegroup/MToggleGroup.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MToggleGroup from './MToggleGroup.vue';
 

package/src/components/usingIcons.mdx

@@ -1,5 +1,4 @@
-import { Meta } from '@storybook/blocks';
-import { Source } from '@storybook/addon-docs';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 <Meta title="Using Icons" />
 
@@ -9,19 +8,11 @@ To use icons in Vue applications, you need to install a dedicated package.
 
 You must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/icons-vue):
 
-<Source
-  language="bash"
-  dark
-  code="npm install @mozaic-ds/icons-vue"
-/>
+<Source language="bash" dark code="npm install @mozaic-ds/icons-vue" />
 
 Or with **Yarn**:
 
-<Source
-  language="bash"
-  dark
-  code="yarn add @mozaic-ds/icons-vue"
-/>
+<Source language="bash" dark code="yarn add @mozaic-ds/icons-vue" />
 
 You can then start importing the icon of your choice into your Vue component:
 
@@ -36,8 +27,9 @@ You can then start importing the icon of your choice into your Vue component:
 </template>
 
 <script setup>
-import A11y20 from '@mozaic-ds/icons-vue/src/components/A11y20/A11y20.vue';
+  import A11y20 from '@mozaic-ds/icons-vue/src/components/A11y20/A11y20.vue';
 </script>
+
 `} />
 
 [The full list of icons is available here](https://github.com/adeo/mozaic-icons-vue/tree/main/src/components).