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

package/src/components/drawer/MDrawer.stories.ts

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+import MDrawer from './MDrawer.vue';
+import MButton from '../button/MButton.vue';
+import { ref, watch } from 'vue';
+
+const meta: Meta<typeof MDrawer> = {
+  title: 'Overlay/Drawer',
+  component: MDrawer,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: { height: '600px' },
+      description: {
+        component:
+          'A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.',
+      },
+    },
+  },
+  args: {
+    open: true,
+    title: 'Drawer title (optionnal)',
+    contentTitle: 'Content title',
+    default: `
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
+        odit, eligendi non, minus soluta dicta, excepturi harum tempora
+        possimus dignissimos dolor rerum natus voluptatum quia. Architecto
+        temporibus repellendus sed.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
+        odit, eligendi non, minus soluta dicta, excepturi harum tempora
+        possimus dignissimos dolor rerum natus voluptatum quia. Architecto
+        temporibus repellendus sed.
+      </p>
+    `,
+    footer: `
+      <MButton>Button label</MButton>
+      <MButton ghost>Button label</MButton>
+    `,
+  },
+  render: (args) => ({
+    components: { MDrawer, MButton },
+    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: `
+      <MDrawer 
+        v-bind="args"
+        @update:open="onUpdateOpen"
+        v-model:open="openState"
+      >
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
+      </MDrawer>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MDrawer>;
+
+export const Default: Story = {
+  args: {
+    default: `
+      <!-- All the code below must be replaced by a form element. -->
+      <div class="content-slot content-slot-full">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
+  },
+};
+
+export const Left = {
+  args: {
+    position: 'left',
+  },
+};
+
+export const Back = {
+  args: {
+    back: true,
+  },
+};
+
+export const ValidationOnly = {
+  args: {
+    footer: `
+      <MButton>Button label</MButton>
+    `,
+  },
+};
+
+export const TwoOptions = {
+  args: {
+    footer: `
+      <MButton>Button label</MButton>
+      <MButton outlined>Button label</MButton>
+    `,
+  },
+};
+
+export const Cancel = {
+  args: {
+    extended: true,
+    footer: `
+      <MButton>Button label</MButton>
+      <MButton outlined>Button label</MButton>
+      <MButton ghost>Button label</MButton>
+    `,
+  },
+};

package/src/components/drawer/MDrawer.vue

@@ -0,0 +1,140 @@
+<template>
+  <MOverlay :is-visible="open" dialogLabel="drawerTitle">
+    <section
+      class="mc-drawer"
+      :class="classObject"
+      role="dialog"
+      aria-labelledby="drawerTitle"
+      :aria-modal="open ? 'true' : 'false'"
+      tabindex="-1"
+      :aria-hidden="!open"
+      v-bind="$attrs"
+      @keydown.esc="onClose"
+    >
+      <div class="mc-drawer__dialog" role="document">
+        <div class="mc-drawer__header">
+          <MIconButton
+            v-if="back"
+            class="mc-drawer__back"
+            aria-label="Back"
+            ghost
+            @click="emit('back')"
+          >
+            <template #icon>
+              <ArrowBack24 aria-hidden="true" />
+            </template>
+          </MIconButton>
+          <h2 class="mc-drawer__title" id="drawerTitle">{{ title }}</h2>
+          <MIconButton
+            class="mc-drawer__close"
+            aria-label="Close"
+            ghost
+            @click="onClose"
+          >
+            <template #icon>
+              <Cross24 aria-hidden="true" />
+            </template>
+          </MIconButton>
+        </div>
+        <div class="mc-drawer__body">
+          <div class="mc-drawer__content" tabindex="0">
+            <h2 v-if="contentTitle" class="mc-drawer__content__title">
+              {{ contentTitle }}
+            </h2>
+            <slot />
+          </div>
+        </div>
+        <div v-if="$slots.footer" class="mc-drawer__footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </section>
+  </MOverlay>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, type VNode } from 'vue';
+import ArrowBack24 from '@mozaic-ds/icons-vue/src/components/ArrowBack24/ArrowBack24.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 drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.
+ */
+const props = defineProps<{
+  /**
+   * If `true`, display the drawer.
+   */
+  open?: boolean;
+  /**
+   * Position of the drawer
+   */
+  position?: 'left' | 'right';
+  /**
+   * If `true`, the drawer have a bigger width.
+   */
+  extended?: boolean;
+  /**
+   * If `true`, display the back button.
+   */
+  back?: boolean;
+  /**
+   * Title of the drawer
+   */
+  title: string;
+  /**
+   * Title of the content of the drawer
+   */
+  contentTitle?: string;
+}>();
+
+defineSlots<{
+  /**
+   * Use this slot to insert the content of the drawer
+   */
+  default?: VNode;
+  /**
+   * Use this slot to insert buttons in the footer
+   */
+  footer?: VNode;
+}>();
+
+const classObject = computed(() => {
+  return {
+    'is-open': props.open,
+    'mc-drawer--extend': props.extended,
+    [`mc-drawer--${props.position}`]:
+      props.position && props.position != 'right',
+  };
+});
+
+watch(
+  () => props.open,
+  (newValue) => {
+    emit('update:open', newValue);
+  },
+);
+
+const onClose = () => {
+  emit('update:open', false);
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the drawer open state changes, updating the modelValue prop.
+   */
+  (on: 'update:open', value: boolean): void;
+  /**
+   * Emits when click back button of the drawer.
+   */
+  (on: 'back'): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/drawer';
+
+.mc-overlay {
+  filter: none;
+}
+</style>

package/src/components/field/MField.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 MField from './MField.vue';
 import MTextInput from '../textinput/MTextInput.vue';
@@ -27,13 +27,6 @@ const meta: Meta<typeof MField> = {
       </div>
     `,
   },
-  argTypes: {
-    $slots: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   render: (args) => ({
     components: { MField, MTextInput },
     setup() {

package/src/components/fieldgroup/MFieldGroup.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 MFieldGroup from './MFieldGroup.vue';
 import MCheckboxGroup from '../checkboxgroup/MCheckboxGroup.vue';
@@ -53,13 +53,6 @@ const meta: Meta<typeof MFieldGroup> = {
       />
     `,
   },
-  argTypes: {
-    $slots: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   render: (args) => ({
     components: { MFieldGroup, MCheckboxGroup, MRadioGroup, MToggleGroup },
     setup() {

package/src/components/iconbutton/MIconButton.stories.ts

@@ -1,7 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MIconButton from './MIconButton.vue';
+import ChevronRight20 from '@mozaic-ds/icons-vue/src/components/ChevronRight20/ChevronRight20.vue';
 import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import ChevronRight32 from '@mozaic-ds/icons-vue/src/components/ChevronRight32/ChevronRight32.vue';
 
 const meta: Meta<typeof MIconButton> = {
   title: 'Action/Icon Button',
@@ -31,7 +33,7 @@ const meta: Meta<typeof MIconButton> = {
     },
   },
   render: (args) => ({
-    components: { MIconButton, ChevronRight24 },
+    components: { MIconButton, ChevronRight20, ChevronRight24, ChevronRight32 },
     setup() {
       return { args };
     },
@@ -58,9 +60,15 @@ export const Ghost: Story = {
 };
 
 export const SizeS: Story = {
-  args: { size: 's' },
+  args: {
+    size: 's',
+    icon: '<ChevronRight20/>',
+  },
 };
 
 export const SizeL: Story = {
-  args: { size: 'l' },
+  args: {
+    size: 'l',
+    icon: '<ChevronRight32/>',
+  },
 };

package/src/components/link/MLink.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MLink from './MLink.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';
@@ -18,13 +18,6 @@ const meta: Meta<typeof MLink> = {
     default: 'Stand-alone link',
     href: '#',
   },
-  argTypes: {
-    $slots: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   render: (args) => ({
     components: { MLink, ChevronRight24, ChevronLeft24 },
     setup() {
@@ -67,10 +60,8 @@ export const Accent: Story = {
 };
 
 export const Inverse: Story = {
-  parameters: {
-    backgrounds: {
-      default: 'Inverse',
-    },
+  globals: {
+    backgrounds: { value: 'inverse' },
   },
   args: { appearance: 'inverse' },
 };

package/src/components/loader/MLoader.stories.ts

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

package/src/components/loader/MLoader.vue

@@ -52,6 +52,7 @@ const classObject = computed(() => {
     [`mc-loader--${props.size}`]: props.size && props.size !== 'm',
     [`mc-loader--${props.appearance}`]:
       props.appearance && props.appearance !== 'standard',
+    'mc-loader--text-visible': props.text,
   };
 });
 

package/src/components/loadingoverlay/MLoadingOverlay.spec.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MLoadingOverlay from './MLoadingOverlay.vue';
+
+describe('MLoadingOverlay component', () => {
+  it('renders and applies isVisible class based on prop', () => {
+    const wrapper = mount(MLoadingOverlay, {
+      props: { isVisible: true, text: 'Loading data...' },
+    });
+
+    expect(wrapper.classes()).toContain('is-visible');
+
+    const dialog = wrapper.find('[role="dialog"]');
+    expect(dialog.attributes('aria-label')).toBe('Loading data...');
+  });
+
+  it('does not have is-visible class when isVisible is false or undefined', () => {
+    const wrapper = mount(MLoadingOverlay, {
+      props: { isVisible: false },
+    });
+    expect(wrapper.classes()).not.toContain('is-visible');
+
+    const wrapperNoProp = mount(MLoadingOverlay);
+    expect(wrapperNoProp.classes()).not.toContain('is-visible');
+  });
+
+  it('passes down attributes via $attrs', () => {
+    const wrapper = mount(MLoadingOverlay, {
+      props: { isVisible: true, text: 'Loading...' },
+      attrs: { id: 'custom-id', 'data-test': 'loading-overlay' },
+    });
+
+    const dialog = wrapper.find('[role="dialog"]');
+    expect(dialog.attributes('id')).toBe('custom-id');
+    expect(dialog.attributes('data-test')).toBe('loading-overlay');
+  });
+});

package/src/components/loadingoverlay/MLoadingOverlay.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MLoadingOverlay from './MLoadingOverlay.vue';
+
+const meta: Meta<typeof MLoadingOverlay> = {
+  title: 'Overlay/Loading Overlay',
+  component: MLoadingOverlay,
+  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,
+    ariaLabel: 'Page loading',
+  },
+  render: (args) => ({
+    components: { MLoadingOverlay },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MLoadingOverlay v-bind="args"/>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MLoadingOverlay>;
+
+export const Default: Story = {};
+
+export const text: Story = {
+  args: {
+    text: 'Insert your text here',
+  },
+};

package/src/components/loadingoverlay/MLoadingOverlay.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="mc-loading-loader" :class="{ 'is-visible': isVisible }">
+    <div role="dialog" tabindex="-1" :aria-label="text" v-bind="$attrs">
+      <MLoader size="l" appearance="inverse" :text="text" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MLoader from '../loader/MLoader.vue';
+/**
+ * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
+ */
+defineProps<{
+  /**
+   * Controls the visibility of the loading overlay.
+   */
+  isVisible?: boolean;
+  /**
+   * Text of the loading overlay.
+   */
+  text?: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/loading-overlay';
+</style>

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

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MModal from './MModal.vue';
+
+const stubs = {
+  Cross24: { template: '<svg />' },
+  MIconButton: {
+    template: `<button @click="$emit('click')"><slot name="icon"/></button>`,
+  },
+  MOverlay: {
+    template: `<div class="overlay"><slot/></div>`,
+  },
+};
+
+describe('MModal component', () => {
+  it('renders title and description', () => {
+    const wrapper = mount(MModal, {
+      props: {
+        open: true,
+        title: 'Test Modal',
+        description: 'This is a description',
+      },
+      global: { stubs },
+    });
+
+    expect(wrapper.text()).toContain('Test Modal');
+    expect(wrapper.text()).toContain('This is a description');
+  });
+
+  it('renders close button if closable is true', () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title', closable: true },
+      global: { stubs },
+    });
+
+    expect(wrapper.find('button.mc-modal__close').exists()).toBe(true);
+  });
+
+  it('does not render close button if closable is false', () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title', closable: false },
+      global: { stubs },
+    });
+
+    expect(wrapper.find('button.mc-modal__close').exists()).toBe(false);
+  });
+
+  it('emits update:open with false when close button clicked', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title', closable: true },
+      global: { stubs },
+    });
+
+    await wrapper.find('button.mc-modal__close').trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+  });
+
+  it('renders slots content', () => {
+    const wrapper = mount(MModal, {
+      props: { open: true, title: 'Title' },
+      slots: {
+        default: '<div class="default-slot">Default Content</div>',
+        icon: '<span class="icon-slot">ICON</span>',
+        footer: '<div class="footer-slot">Footer Content</div>',
+        link: '<a href="#" class="link-slot">Link Content</a>',
+      },
+      global: { stubs },
+    });
+
+    expect(wrapper.find('.icon-slot').exists()).toBe(true);
+    expect(wrapper.find('.default-slot').exists()).toBe(true);
+    expect(wrapper.find('.footer-slot').exists()).toBe(true);
+    expect(wrapper.find('.link-slot').exists()).toBe(true);
+  });
+
+  it('has aria-hidden set correctly based on open prop', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: false, title: 'Title' },
+      global: { stubs },
+    });
+
+    expect(wrapper.find('.mc-modal').attributes('aria-hidden')).toBe('true');
+
+    await wrapper.setProps({ open: true });
+
+    expect(wrapper.find('.mc-modal').attributes('aria-hidden')).toBe('false');
+  });
+
+  it('adds "is-open" class when open is true', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: false, title: 'Title' },
+      global: { stubs },
+    });
+
+    expect(wrapper.find('.mc-modal').classes()).not.toContain('is-open');
+
+    await wrapper.setProps({ open: true });
+
+    expect(wrapper.find('.mc-modal').classes()).toContain('is-open');
+  });
+});