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

package/src/components/divider/MDivider.stories.ts

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MDivider from './MDivider.vue';
+
+const meta: Meta<typeof MDivider> = {
+  title: 'Structure/Divider',
+  component: MDivider,
+  argTypes: {
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+    },
+    style: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary', 'inverse'],
+    },
+    size: {
+      control: 'radio',
+      options: ['s', 'm', 'l'],
+    },
+  },
+  render: (args) => ({
+    components: { MDivider },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <MDivider v-bind="args"></MDivider>
+        <p style="padding: 1rem">Horizontal Divider</p>
+      </div>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MDivider>;
+
+export const Standard: Story = {};
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical'
+  },
+  render: (args) => ({
+    components: { MDivider },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <MDivider v-bind="args">
+          <p style="padding: 1rem">Vertical Divider</p>
+        </MDivider>
+      </div>
+    `,
+  }),
+};
+
+export const Size: Story = {
+  args: { size: 'm' },
+};
+
+export const Secondary: Story = {
+  args: { style: 'secondary' },
+};

package/src/components/divider/MDivider.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="mc-divider">
+    <div :class="classObject"></div>
+    <slot/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A Divider serves as a visual divider to separate content, providing a clear distinction between sections.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Determines the orientation of the divider
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Determines the style of the divider
+     */
+    style?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
+    /**
+     * Determines the size of the divider
+     */
+    size?: 's' | 'm' | 'l';
+  }>(),
+  {
+    orientation: 'horizontal',
+    style: 'primary',
+    size: 's',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-divider-${props.orientation}`]: props.orientation,
+    [`mc-divider-horizontal--${props.style}`]:
+      props.style && props.style != 'primary',
+    [`mc-divider-horizontal--${props.size}`]: props.size && props.size != 's',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/divider';
+
+.mc-divider-vertical {
+  content: "";
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>

package/src/components/pagination/MPagination.spec.ts

@@ -0,0 +1,123 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MPagination from './MPagination.vue';
+
+const options = [
+  { value: 1, text: 'Page 1' },
+  { value: 2, text: 'Page 2' },
+  { value: 3, text: 'Page 3' },
+];
+
+describe('MPagination component', () => {
+  it('renders correctly with select when compact is false', () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 2,
+        options,
+        compact: false,
+        selectLabel: 'Select page',
+      },
+    });
+
+    // Check buttons rendered as MButton (not MIconButton)
+    expect(wrapper.findAllComponents({ name: 'MButton' }).length).toBe(2);
+    expect(wrapper.findAllComponents({ name: 'MIconButton' }).length).toBe(0);
+
+    // Check select is present
+    expect(wrapper.find('select').exists()).toBe(true);
+  });
+
+  it('renders icon buttons only when compact is true', () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 2,
+        options,
+        compact: true,
+      },
+    });
+
+    // MIconButton rendered for previous and next
+    expect(wrapper.findAllComponents({ name: 'MIconButton' }).length).toBe(2);
+    // No MButton when compact
+    expect(wrapper.findAllComponents({ name: 'MButton' }).length).toBe(0);
+
+    // No select rendered
+    expect(wrapper.find('select').exists()).toBe(false);
+  });
+
+  it('disables previous button if on first page', async () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 1,
+        options,
+      },
+    });
+    const prevButton = wrapper.findAllComponents({ name: 'MButton' })[0];
+    expect(prevButton.attributes('disabled')).toBeDefined();
+  });
+
+  it('disables next button if on last page', async () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 3,
+        options,
+      },
+    });
+    const buttons = wrapper.findAllComponents({ name: 'MButton' });
+    const nextButton = buttons[buttons.length - 1];
+    expect(nextButton.attributes('disabled')).toBeDefined();
+  });
+
+  it('clicking previous button updates the modelValue', async () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 2,
+        options,
+      },
+    });
+
+    await wrapper.findAllComponents({ name: 'MButton' })[0].trigger('click');
+    // Should emit update:modelValue with value 1 (previous page)
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([1]);
+  });
+
+  it('clicking next button updates the modelValue', async () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 2,
+        options,
+      },
+    });
+
+    const buttons = wrapper.findAllComponents({ name: 'MButton' });
+    await buttons[buttons.length - 1].trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([3]);
+  });
+
+  it('emits update:modelValue when select value changes', async () => {
+    const wrapper = mount(MPagination, {
+      props: {
+        id: 'test-pagination',
+        modelValue: 1,
+        options,
+        compact: false,
+        selectLabel: 'Select page',
+      },
+    });
+
+    const select = wrapper.find('select');
+    await select.setValue('3');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([3]);
+  });
+});

package/src/components/pagination/MPagination.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MPagination from './MPagination.vue';
+
+const meta: Meta<typeof MPagination> = {
+  title: 'Navgation/Pagination',
+  component: MPagination,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '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.',
+      },
+    },
+  },
+  args: {
+    id: 'paginationId',
+    modelValue: 10,
+    options: [
+      {
+        text: 'Page 1 of 99',
+        value: 1,
+      },
+      {
+        text: 'Page 2 of 99',
+        value: 2,
+      },
+      {
+        text: 'Page 3 of 99',
+        value: 3,
+      },
+      {
+        text: 'Page 10 of 99',
+        value: 10,
+      },
+      {
+        text: 'Page 99 of 99',
+        value: 99,
+      },
+    ],
+    selectLabel: 'Select page',
+  },
+  render: (args) => ({
+    components: { MPagination },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MPagination 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MPagination>;
+
+export const Default: Story = {};
+
+export const First: Story = {
+  args: {
+    id: 'firstId',
+    modelValue: 1,
+  },
+};
+
+export const Last: Story = {
+  args: {
+    id: 'lastId',
+    modelValue: 99,
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    id: 'compactId',
+    compact: true,
+  },
+};

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>