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

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');
+  });
+});

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>
+    `,
+  },
+};