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

package/src/components/divider/MDivider.spec.ts

@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MDivider from './MDivider.vue';
+
+describe('MDivider component', () => {
+  it('renders correctly with default props', () => {
+    const wrapper = mount(MDivider);
+    expect(wrapper.classes()).toContain('mc-divider');
+
+    const innerDiv = wrapper.find('.mc-divider > div');
+    expect(innerDiv.classes()).toContain('mc-divider-horizontal');
+  });
+
+  it('renders with vertical orientation', () => {
+    const wrapper = mount(MDivider, {
+      props: { orientation: 'vertical' },
+    });
+    const innerDiv = wrapper.find('.mc-divider > div');
+    expect(innerDiv.classes()).toContain('mc-divider-vertical');
+  });
+
+  it('applies the correct style class', () => {
+    const wrapper = mount(MDivider, {
+      props: { style: 'secondary' },
+    });
+    const innerDiv = wrapper.find('.mc-divider > div');
+    expect(innerDiv.classes()).toContain('mc-divider-horizontal--secondary');
+  });
+
+  it('applies the correct size class', () => {
+    const wrapper = mount(MDivider, {
+      props: { size: 'm' },
+    });
+    const innerDiv = wrapper.find('.mc-divider > div');
+    expect(innerDiv.classes()).toContain('mc-divider-horizontal--m');
+  });
+
+  it('uses default props when none are provided', () => {
+    const wrapper = mount(MDivider);
+    expect(wrapper.props().orientation).toBe('horizontal');
+    expect(wrapper.props().style).toBe('primary');
+    expect(wrapper.props().size).toBe('s');
+  });
+
+  it('handles custom props correctly', () => {
+    const wrapper = mount(MDivider, {
+      props: {
+        orientation: 'vertical',
+        style: 'tertiary',
+        size: 'l',
+      },
+    });
+    expect(wrapper.props().orientation).toBe('vertical');
+    expect(wrapper.props().style).toBe('tertiary');
+    expect(wrapper.props().size).toBe('l');
+  });
+});

package/src/components/divider/MDivider.stories.ts

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MDivider from './MDivider.vue';
+
+const meta: Meta<typeof MDivider> = {
+  title: 'Structure/Divider',
+  component: MDivider,
+  argTypes: {
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+    },
+    style: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary', 'inverse'],
+    },
+    size: {
+      control: 'radio',
+      options: ['s', 'm', 'l'],
+    },
+  },
+  render: (args) => ({
+    components: { MDivider },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <MDivider v-bind="args"></MDivider>
+        <p style="padding: 1rem">Horizontal Divider</p>
+      </div>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MDivider>;
+
+export const Standard: Story = {};
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+  },
+  render: (args) => ({
+    components: { MDivider },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <MDivider v-bind="args">
+          <p style="padding: 1rem">Vertical Divider</p>
+        </MDivider>
+      </div>
+    `,
+  }),
+};
+
+export const Size: Story = {
+  args: { size: 'm' },
+};
+
+export const Secondary: Story = {
+  args: { style: 'secondary' },
+};

package/src/components/divider/MDivider.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="mc-divider">
+    <div :class="classObject"></div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A Divider serves as a visual divider to separate content, providing a clear distinction between sections.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Determines the orientation of the divider
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Determines the style of the divider
+     */
+    style?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
+    /**
+     * Determines the size of the divider
+     */
+    size?: 's' | 'm' | 'l';
+  }>(),
+  {
+    orientation: 'horizontal',
+    style: 'primary',
+    size: 's',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-divider-${props.orientation}`]: props.orientation,
+    [`mc-divider-horizontal--${props.style}`]:
+      props.style && props.style != 'primary',
+    [`mc-divider-horizontal--${props.size}`]: props.size && props.size != 's',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/divider';
+
+.mc-divider-vertical {
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>

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

@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MDrawer from '@/components/drawer/MDrawer.vue';
+
+describe('MDrawer component', () => {
+  it('renders title and contentTitle when provided', () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Main Drawer Title',
+        contentTitle: 'Drawer Content Title',
+      },
+      slots: {
+        default: '<p>Drawer content</p>',
+      },
+    });
+
+    expect(wrapper.find('.mc-drawer__title').text()).toBe('Main Drawer Title');
+    expect(wrapper.find('.mc-drawer__content__title').text()).toBe(
+      'Drawer Content Title',
+    );
+    expect(wrapper.find('.mc-drawer__content').text()).toContain(
+      'Drawer content',
+    );
+  });
+
+  it('emits update:open false when close button is clicked', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+    });
+
+    const closeButton = wrapper.find('.mc-drawer__close');
+    await closeButton.trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+  });
+
+  it('emits back event when back button is clicked', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+        back: true,
+      },
+    });
+
+    const backButton = wrapper.find('.mc-drawer__back');
+    await backButton.trigger('click');
+
+    expect(wrapper.emitted('back')).toBeTruthy();
+  });
+
+  it('renders footer slot when provided', () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+      slots: {
+        footer: '<button>Footer Button</button>',
+      },
+    });
+
+    expect(wrapper.find('.mc-drawer__footer').exists()).toBe(true);
+    expect(wrapper.find('.mc-drawer__footer button').text()).toBe(
+      'Footer Button',
+    );
+  });
+
+  it('applies correct class when extended and position is left', () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+        extended: true,
+        position: 'left',
+      },
+    });
+
+    const section = wrapper.find('section.mc-drawer');
+    expect(section.classes()).toContain('mc-drawer--extend');
+    expect(section.classes()).toContain('mc-drawer--left');
+    expect(section.classes()).toContain('is-open');
+  });
+
+  it('does not render back button if prop `back` is false', () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+    });
+
+    expect(wrapper.find('.mc-drawer__back').exists()).toBe(false);
+  });
+});

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>