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

package/src/components/overlay/MOverlay.spec.ts

@@ -0,0 +1,51 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MOverlay from './MOverlay.vue';
+
+describe('MOverlay.vue', () => {
+  it('should be visible when isVisible is true', () => {
+    const wrapper = mount(MOverlay, {
+      props: {
+        isVisible: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('is-visible');
+  });
+
+  it('should not be visible when isVisible is false', () => {
+    const wrapper = mount(MOverlay, {
+      props: {
+        isVisible: false,
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('is-visible');
+  });
+
+  it('should apply the dialog label for accessibility', () => {
+    const label = 'Overlay Dialog';
+    const wrapper = mount(MOverlay, {
+      props: {
+        dialogLabel: label,
+      },
+    });
+
+    expect(
+      wrapper.find('div[role="dialog"]').attributes('aria-labelledby'),
+    ).toBe(label);
+  });
+
+  it('should render the content inside the overlay', () => {
+    const wrapper = mount(MOverlay, {
+      props: {
+        isVisible: true,
+      },
+      slots: {
+        default: 'Overlay Content',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Overlay Content');
+  });
+});

package/src/components/overlay/MOverlay.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MOverlay from './MOverlay.vue';
+
+const meta: Meta<typeof MOverlay> = {
+  title: 'Overlay/Overlay',
+  component: MOverlay,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: { height: '400px' },
+      description: {
+        component:
+          'An overlay component is a UI element that appears above the main content to display additional information or interactions, often blocking or dimming the background.',
+      },
+    },
+  },
+  args: {
+    isVisible: true,
+  },
+  render: (args) => ({
+    components: { MOverlay },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MOverlay v-bind="args">
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+      </MOverlay>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MOverlay>;
+
+export const Default: Story = {};

package/src/components/overlay/MOverlay.vue

@@ -1,28 +1,36 @@
 <template>
   <div class="mc-overlay" :class="{ 'is-visible': isVisible }">
-    <!-- @slot Use this slot to insert a centered content inside the overlay -->
-    <slot />
+    <div role="dialog" tabindex="-1" :aria-labelledby="dialogLabel">
+      <slot />
+    </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MOverlay',
+<script setup lang="ts">
+import type { VNode } from 'vue';
 
-  props: {
-    /**
-     * Define if the overlay is visible or not
-     * @values false, true
-     */
-    isVisible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
+/**
+ * An overlay component is a UI element that appears above the main content to display additional information or interactions, often blocking or dimming the background.
+ */
+defineProps<{
+  /**
+   * Controls the visibility of the overlay.
+   */
+  isVisible?: boolean;
+  /**
+   * Accessible label for the overlay dialog.
+   */
+  dialogLabel?: string;
+}>();
+
+defineSlots<{
+  /**
+   * Use this slot to insert a centered content inside the overlay
+   */
+  default?: VNode;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.overlay';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/overlay';
 </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-vite';
+import { action } from 'storybook/actions';
+
+import MPagination from './MPagination.vue';
+
+const meta: Meta<typeof MPagination> = {
+  title: 'Navigation/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

@@ -1,162 +1,142 @@
 <template>
-  <div class="mc-pagination" :class="{ 'mc-pagination--light': light }">
-    <component
-      :is="hrefPrev ? 'a' : 'button'"
-      v-if="value > 1"
-      :type="hrefPrev ? null : 'button'"
-      :href="hrefPrev"
-      class="mc-pagination__button"
-      aria-label="Previous Page"
-      :disabled="disabled"
-      @click="previousPage(currentPage - 1)"
+  <nav class="mc-pagination" role="navigation" aria-label="pagination">
+    <MButton
+      v-if="!compact"
+      icon-position="only"
+      aria-label="Previous page"
+      :disabled="isFirstPage"
+      @click="previous"
     >
-      <m-icon name="ArrowArrowLeft24" class="mc-pagination__button-icon" />
-    </component>
+      <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="!light" class="mc-pagination__field">
-      <m-select
-        :id="`selectpagination${selectId}`"
-        v-model="currentPage"
-        :options="formattedOptions"
-        :disabled="disabled"
+    <div v-if="!compact" class="mc-pagination__field">
+      <MSelect
         class="mc-pagination__select"
-        @change="changePage(Number($event))"
-      >
-        <template #text="{ option }">
-          <slot name="text" :option="{ ...option, length }">
-            {{ option.text }}
-          </slot>
-        </template>
-      </m-select>
+        :id="id"
+        v-model="currentValue"
+        :options="options"
+        @update:model-value="emit('update:modelValue', Number($event))"
+        :aria-label="selectLabel"
+      ></MSelect>
     </div>
 
-    <component
-      :is="hrefNext ? 'a' : 'button'"
-      v-if="value < length"
-      :type="hrefNext ? null : 'button'"
-      :href="hrefNext"
-      class="mc-pagination__button"
-      aria-label="Next Page"
-      :disabled="disabled"
-      @click="nextPage(currentPage + 1)"
+    <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"
     >
-      <m-icon name="ArrowArrowRight24" class="mc-pagination__button-icon" />
-    </component>
-  </div>
+      <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>
-import MIcon from '../icon/MIcon.vue';
+<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;
+}>();
 
-export default {
-  name: 'MPagination',
-
-  components: {
-    MIcon,
-    MSelect,
-  },
+const emit = defineEmits<{
+  /**
+   * Emits when the pagination value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
 
-  props: {
-    length: {
-      type: Number,
-      default: 0,
-    },
-    value: {
-      type: Number,
-      default: 0,
-    },
-    pageLabel: {
-      type: String,
-      default: 'sur',
-    },
-    light: {
-      type: Boolean,
-      default: false,
-    },
-    hrefPrev: {
-      type: String,
-      default: null,
-    },
-    hrefNext: {
-      type: String,
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const currentValue = ref(props.modelValue);
 
-  data: function () {
-    return {
-      selectId: null,
-      currentPage: Number(this.value),
-    };
-  },
+watch(currentValue, (newVal) => {
+  if (newVal !== props.modelValue) {
+    emit('update:modelValue', newVal);
+  }
+});
 
-  computed: {
-    formattedOptions() {
-      const pageOptions = [];
+const currentIndex = computed(() =>
+  props.options.findIndex((opt) => opt.value === currentValue.value),
+);
 
-      for (let i = 1; i <= this.length; i++) {
-        pageOptions.push({
-          text: `${i} ${this.pageLabel} ${this.length}`,
-          value: i,
-          index: i,
-        });
-      }
+const isFirstPage = computed(() => currentIndex.value === 0);
+const isLastPage = computed(
+  () => currentIndex.value === props.options.length - 1,
+);
 
-      if (this.currentPage > this.length) {
-        this.changePage(this.length);
-      }
-
-      return pageOptions;
-    },
-  },
-
-  watch: {
-    value: {
-      handler(newPage) {
-        this.currentPage = newPage;
-      },
-    },
-  },
-
-  created() {
-    this.selectId = this._uid;
-  },
+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);
+  }
+};
 
-  methods: {
-    hasPreviousPageListener() {
-      return this.$listeners && this.$listeners['on-previous-page'];
-    },
-    hasNextPageListener() {
-      return this.$listeners && this.$listeners['on-next-page'];
-    },
-    changePage(newPage) {
-      this.$emit('on-update-page', newPage);
-      this.$emit('update:value',newPage);
-    },
-    previousPage(newPage) {
-      if (this.hasPreviousPageListener()) {
-        this.$emit('on-previous-page', newPage);
-      } else {
-        this.changePage(newPage);
-      }
-    },
-    nextPage(newPage) {
-      if (this.hasNextPageListener()) {
-        this.$emit('on-next-page', newPage);
-      } else {
-        this.changePage(newPage);
-      }
-    },
-  },
+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>
-@import 'settings-tools/_all-settings';
-@import 'components/_c.pagination';
+@use '@mozaic-ds/styles/components/pagination';
 </style>