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

package/src/components/modal/MModal.stories.ts

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref, watch } from 'vue';
+import { action } from 'storybook/actions';
+import MModal from './MModal.vue';
+import MButton from '../button/MButton.vue';
+import MLink from '../link/MLink.vue';
+import InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';
+import ExternalLink24 from '@mozaic-ds/icons-vue/src/components/ExternalLink24/ExternalLink24.vue';
+
+const meta: Meta<typeof MModal> = {
+  title: 'Overlay/Modal',
+  component: MModal,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: { height: '400px' },
+      description: {
+        component:
+          'A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.',
+      },
+    },
+  },
+  args: {
+    open: true,
+    title: 'Modal title',
+    description: `A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action. It must be used for single action only and must have a call to action button in the bottom.`,
+    footer: `
+      <MButton ghost>Cancel</MButton>
+      <MButton>Primary action</MButton>
+    `,
+  },
+  render: (args) => ({
+    components: { MModal, MButton, MLink, InfoCircle32, ExternalLink24 },
+    setup() {
+      const handleUpdate = action('update:open');
+      const openState = ref(args.open);
+
+      watch(
+        () => args.open,
+        (val) => {
+          openState.value = val;
+        },
+      );
+
+      const onUpdateOpen = (val: boolean) => {
+        openState.value = val;
+        handleUpdate(val);
+        args.open = val;
+      };
+
+      return { args, openState, onUpdateOpen };
+    },
+    template: `
+      <MModal 
+        v-bind="args"
+        @update:open="onUpdateOpen"
+        v-model:open="openState"
+      >
+        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+        <template v-if="${'link' in args}" v-slot:link>${args.link}</template>
+        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
+      </MModal>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MModal>;
+
+export const Default: Story = {};
+
+export const Icon = {
+  args: {
+    icon: '<InfoCircle32/>',
+  },
+};
+
+export const ValidationOnly = {
+  args: {
+    footer: `
+      <MButton>Primary action</MButton>
+    `,
+  },
+};
+
+export const TwoOptions = {
+  args: {
+    footer: `
+      <MButton outlined>Secondary action</MButton>
+      <MButton>Primary action</MButton>
+    `,
+  },
+};
+
+export const Cancel = {
+  args: {
+    footer: `
+      <MButton ghost>Cancel</MButton>
+      <MButton outlined>Secondary action</MButton>
+      <MButton>Primary action</MButton>
+    `,
+  },
+};
+
+export const Link = {
+  args: {
+    link: `
+      <MLink class="mc-modal__link" href="#" size="m" icon-position="right">
+        Learn more
+        <template #icon><ExternalLink24 /></template>
+      </MLink>
+    `,
+    footer: `
+      <MButton ghost>Cancel</MButton>
+      <MButton>Primary action</MButton>
+    `,
+  },
+};
+
+export const Danger = {
+  args: {
+    footer: `
+      <MButton ghost>Cancel</MButton>
+      <MButton appearance="danger">Primary action</MButton>
+    `,
+  },
+};

package/src/components/modal/MModal.vue

@@ -0,0 +1,131 @@
+<template>
+  <MOverlay :is-visible="open" dialogLabel="modalTitle">
+    <section
+      class="mc-modal"
+      :class="classObject"
+      role="dialog"
+      aria-labelledby="modalTitle"
+      :aria-modal="open ? 'true' : 'false'"
+      tabindex="-1"
+      :aria-hidden="!open"
+      v-bind="$attrs"
+      @keydown.esc="onClose"
+    >
+      <div class="mc-modal__dialog" role="document">
+        <header class="mc-modal__header">
+          <span v-if="$slots.icon" class="mc-modal__icon">
+            <slot name="icon" />
+          </span>
+          <h2 class="mc-modal__title" id="modalTitle">
+            {{ title }}
+          </h2>
+          <MIconButton
+            v-if="closable"
+            class="mc-modal__close"
+            aria-label="Close"
+            ghost
+            @click="onClose"
+          >
+            <template #icon>
+              <Cross24 aria-hidden="true" />
+            </template>
+          </MIconButton>
+        </header>
+        <main class="mc-modal__body">
+          <p>{{ description }}</p>
+          <slot />
+        </main>
+        <footer v-if="$slots.footer" class="mc-modal__footer">
+          <span class="mc-modal__link">
+            <slot name="link" />
+          </span>
+          <slot name="footer" />
+        </footer>
+      </div>
+    </section>
+  </MOverlay>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, type VNode } from 'vue';
+import Cross24 from '@mozaic-ds/icons-vue/src/components/Cross24/Cross24.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
+import MOverlay from '../overlay/MOverlay.vue';
+/**
+ * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * if `true`, display the modal.
+     */
+    open?: boolean;
+    /**
+     * Title of the modal
+     */
+    title: string;
+    /**
+     * Description of the modal
+     */
+    description?: string;
+    /**
+     * if `true`, display the close button.
+     */
+    closable?: boolean;
+  }>(),
+  {
+    closable: true,
+  },
+);
+
+defineSlots<{
+  /**
+   * Use this slot to insert an icon next to the title of the modal
+   */
+  icon?: VNode;
+  /**
+   * Use this slot to insert the content of the modal
+   */
+  default?: VNode;
+  /**
+   * Use this slot to insert a link in the footer
+   */
+  link?: VNode;
+  /**
+   * Use this slot to insert buttons in the footer
+   */
+  footer?: VNode;
+}>();
+
+const classObject = computed(() => {
+  return {
+    'is-open': props.open,
+  };
+});
+
+watch(
+  () => props.open,
+  (newValue) => {
+    emit('update:open', newValue);
+  },
+);
+
+const onClose = () => {
+  emit('update:open', false);
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the checkbox value changes, updating the modelValue prop.
+   */
+  (on: 'update:open', value: boolean): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/modal';
+
+.mc-overlay {
+  filter: none;
+}
+</style>

package/src/components/numberbadge/MNumberBadge.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MNumberBadge from './MNumberBadge.vue';
 
 const meta: Meta<typeof MNumberBadge> = {
@@ -37,10 +37,8 @@ export const Danger: Story = {
 };
 
 export const Inverse: Story = {
-  parameters: {
-    backgrounds: {
-      default: 'Inverse',
-    },
+  globals: {
+    backgrounds: { value: 'inverse' },
   },
   args: { appearance: 'inverse' },
 };

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

@@ -1,11 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+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.',
@@ -15,13 +17,6 @@ const meta: Meta<typeof MOverlay> = {
   args: {
     isVisible: true,
   },
-  argTypes: {
-    $slots: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   render: (args) => ({
     components: { MOverlay },
     setup() {

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

@@ -0,0 +1,142 @@
+<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/passwordinput/MPasswordInput.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 MPasswordInput from './MPasswordInput.vue';
 

package/src/components/passwordinput/MPasswordInput.vue

@@ -16,10 +16,7 @@
       "
     />
     <div v-if="isClearable && modelValue" class="mc-controls-options">
-      <button
-        class="mc-controls-options__button"
-        @click="clearValue"
-      >
+      <button class="mc-controls-options__button" @click="clearValue">
         <CrossCircleFilled24
           class="mc-controls-options__icon"
           aria-hidden="true"
@@ -33,7 +30,7 @@
       :aria-checked="ariaChecked"
       :disabled="disabled"
       @click="toggleVisibility"
-      size="s" 
+      size="s"
       ghost
     >
       {{ isVisible ? buttonLabel.hide : buttonLabel.show }}