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

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

package/src/components/modal/MModal.vue

@@ -1,179 +1,131 @@
 <template>
-  <div>
-    <div
-      ref="modal"
+  <MOverlay :is-visible="open" dialogLabel="modalTitle">
+    <section
       class="mc-modal"
-      tabindex="-1"
+      :class="classObject"
       role="dialog"
-      aria-labelledby="modal_title"
+      aria-labelledby="modalTitle"
+      :aria-modal="open ? 'true' : 'false'"
+      tabindex="-1"
       :aria-hidden="!open"
-      @keyup.esc="closeModal()"
+      v-bind="$attrs"
+      @keydown.esc="onClose"
     >
-      <div
-        class="mc-modal__dialog"
-        :class="{ 'is-open': open }"
-        role="document"
-      >
-        <div class="mc-modal__header">
-          <component
-            :is="modalTitleTag"
-            id="modal_title"
-            class="mc-modal__title"
-          >
-            {{ modalTitle }}
-          </component>
-          <button
-            v-if="displayCloseButton"
-            ref="close"
+      <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"
-            type="button"
-            @click="closeModal()"
+            aria-label="Close"
+            ghost
+            @click="onClose"
           >
-            <span class="mc-modal__close-text">
-              {{ closeButtonText }}
-            </span>
-          </button>
-        </div>
-        <div ref="body" class="mc-modal__body">
-          <article ref="content" class="mc-modal__content">
-            <component :is="titleTag" v-if="title" class="mc-modal__heading">
-              {{ title }}
-            </component>
-            <div class="mt-body-m">
-              <slot />
-            </div>
-          </article>
-        </div>
-        <div v-if="$slots.footer" class="mc-modal__footer">
+            <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" />
-        </div>
+        </footer>
       </div>
-    </div>
-    <keep-alive>
-      <div
-        class="mc-modal-overlay"
-        :class="{ 'is-visible': open }"
-        tabindex="-1"
-        role="dialog"
-      />
-    </keep-alive>
-  </div>
+    </section>
+  </MOverlay>
 </template>
 
-<script>
-export default {
-  name: 'MModal',
-
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    modalTitle: {
-      type: String,
-      required: true,
-    },
-    modalTitleTag: {
-      type: String,
-      default: 'h2',
-    },
-    title: {
-      type: String,
-      default: null,
-    },
-    titleTag: {
-      type: String,
-      default: 'h3',
-    },
-    closeButtonText: {
-      type: String,
-      default: 'Close',
-      validator: (value) => value !== '',
-    },
-    displayCloseButton: {
-      type: Boolean,
-      default: true,
-    },
+<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,
   },
+);
 
-  watch: {
-    open: {
-      immediate: true,
-      handler: function (isOpen) {
-        this.$nextTick(() => {
-          if (isOpen) {
-            this.trapFocus();
-            this.setFocusOnModal();
-            this.setOverflow();
-            this.$emit('modal-opened');
-          } else {
-            this.$emit('modal-closed');
-          }
-        });
-      },
-    },
-  },
-
-  methods: {
-    trapFocus: function () {
-      const modal = document.querySelector('.mc-modal');
-      const focusableElements = modal.querySelectorAll(
-        'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-
-      const firstFocusableElement = focusableElements[0]; // get first element to be focused inside modal
-      const lastFocusableElement =
-        focusableElements[focusableElements.length - 1];
-
-      document.addEventListener('keydown', function (e) {
-        const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+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;
+}>();
 
-        if (!isTabPressed) {
-          return;
-        }
+const classObject = computed(() => {
+  return {
+    'is-open': props.open,
+  };
+});
 
-        if (e.shiftKey) {
-          // if shift key pressed for shift + tab combination
-          if (document.activeElement === firstFocusableElement) {
-            lastFocusableElement.focus(); // add focus for the last focusable element
-            e.preventDefault();
-          }
-        } else {
-          // if tab key is pressed
-          if (document.activeElement === lastFocusableElement) {
-            // if focused has reached to last focusable element then focus first focusable element after pressing tab
-            firstFocusableElement.focus(); // add focus for the first focusable element
-            e.preventDefault();
-          }
-        }
-      });
-    },
-
-    closeModal() {
-      this.$emit('update:open', false);
-    },
-
-    setOverflow: function () {
-      const modal = this.$refs.modal;
-      const bodyHeight = this.$refs.body.clientHeight;
-      const contentHeight = this.$refs.content.clientHeight;
-
-      if (contentHeight > bodyHeight) {
-        modal.classList.add('mc-modal--overflow');
-      }
-    },
-
-    setFocusOnModal() {
-      const modal = this.$refs.modal;
-
-      modal.focus();
-    },
+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">
-@import 'settings-tools/all-settings';
-@import 'typography/_t.bodys';
-@import 'components/_c.modal';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/modal';
+
+.mc-overlay {
+  filter: none;
+}
 </style>

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

@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MNumberBadge from './MNumberBadge.vue';
+
+describe('MNumberBadge component', () => {
+  it('renders the label correctly', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: { label: 42 },
+    });
+    expect(wrapper.text()).toBe('42');
+  });
+
+  it('applies no modifier class by default', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: { label: 1 },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).not.toContain('mc-number-badge--standard');
+    expect(wrapper.classes()).not.toContain('mc-number-badge--s');
+  });
+
+  it('applies appearance modifier class when set to danger', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: {
+        label: 5,
+        appearance: 'danger',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).toContain('mc-number-badge--danger');
+  });
+
+  it('applies size modifier class when size is m', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: {
+        label: 10,
+        size: 'm',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).toContain('mc-number-badge--m');
+  });
+
+  it('applies both appearance and size modifier classes when set', () => {
+    const wrapper = mount(MNumberBadge, {
+      props: {
+        label: 3,
+        appearance: 'accent',
+        size: 'm',
+      },
+    });
+    expect(wrapper.classes()).toContain('mc-number-badge');
+    expect(wrapper.classes()).toContain('mc-number-badge--accent');
+    expect(wrapper.classes()).toContain('mc-number-badge--m');
+  });
+});

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MNumberBadge from './MNumberBadge.vue';
+
+const meta: Meta<typeof MNumberBadge> = {
+  title: 'Indicators/Number Badge',
+  component: MNumberBadge,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.',
+      },
+    },
+  },
+  args: { label: 99 },
+  render: (args) => ({
+    components: { MNumberBadge },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MNumberBadge v-bind="args"></MNumberBadge>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MNumberBadge>;
+
+export const Standard: Story = {};
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+};
+
+export const Danger: Story = {
+  args: { appearance: 'danger' },
+};
+
+export const Inverse: Story = {
+  globals: {
+    backgrounds: { value: 'inverse' },
+  },
+  args: { appearance: 'inverse' },
+};
+
+export const Size: Story = {
+  args: { size: 'm' },
+};

package/src/components/numberbadge/MNumberBadge.vue

@@ -0,0 +1,45 @@
+<template>
+  <span class="mc-number-badge" :class="classObject">
+    {{ label }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A badge indicates the status of an entity and can evolve at any time.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Content of the badge
+     */
+    label: number;
+    /**
+     * Allows to define the Badge style
+     */
+    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
+
+    /**
+     * Allows to define the Badge size
+     */
+    size?: 's' | 'm';
+  }>(),
+  {
+    appearance: 'standard',
+    size: 's',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-number-badge--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+    [`mc-number-badge--${props.size}`]: props.size && props.size != 's',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/number-badge';
+</style>