@mozaic-ds/vue 1.0.0-beta.3 → 1.0.0-beta.4

package/src/components/loader/MLoader.vue

@@ -1,84 +1,94 @@
 <template>
-  <div class="mc-loader" :class="setClasses">
+  <div class="mc-loader" :class="classObject">
     <span class="mc-loader__spinner">
       <svg
         class="mc-loader__icon"
         xmlns="http://www.w3.org/2000/svg"
-        :viewBox="viewBox"
+        :viewBox="setViewBox"
+        aria-hidden="true"
       >
-        <circle class="mc-loader__path" cx="50%" cy="50%" :r="pathR" />
+        <circle
+          class="mc-loader__path"
+          cx="50%"
+          cy="50%"
+          :r="setCircleRadius"
+        ></circle>
       </svg>
     </span>
-
-    <span v-if="text" class="mc-loader__text">{{ text }}</span>
+    <p v-if="text" class="mc-loader__text" role="status">{{ text }}</p>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MLoader',
-
-  props: {
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.
+ */
+const props = withDefaults(
+  defineProps<{
     /**
-     * Loader size
-     * @values s, m , l
+     * Specifies the visual appearance of the loader.
      */
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => ['s', 'm', 'l'].includes(value),
-    },
+    appearance?: 'standard' | 'accent' | 'inverse';
 
     /**
-     * Loader theme
-     * @values dark, light, primary
+     * Defines the size of the loader.
      */
-    theme: {
-      type: String,
-      default: 'primary',
-      validator: (value) => ['dark', 'light', 'primary'].includes(value),
-    },
+    size?: 's' | 'm' | 'l';
 
     /**
-     * Loader text - when using the loader inside an overlay
+     * Text to display alongside the loader when using the loader inside an `Overlay`.
      */
-    text: {
-      type: String,
-      default: undefined,
-    },
+    text?: string;
+  }>(),
+  {
+    appearance: 'standard',
+    size: 'm',
   },
+);
 
-  computed: {
-    setClasses() {
-      const classes = [];
+const classObject = computed(() => {
+  return {
+    [`mc-loader--${props.size}`]: props.size && props.size !== 'm',
+    [`mc-loader--${props.appearance}`]:
+      props.appearance && props.appearance !== 'standard',
+  };
+});
 
-      if (this.size && this.size !== 'm') {
-        classes.push(`mc-loader--${this.size}`);
-      }
+const setViewBox = computed(() => {
+  let viewBox: string;
 
-      if (this.theme && this.theme !== 'primary') {
-        classes.push(`mc-loader--${this.theme}`);
-      }
+  switch (props.size) {
+    case 's':
+      viewBox = '0 0 24 24';
+      break;
+    case 'l':
+      viewBox = '0 0 64 64';
+      break;
+    default:
+      viewBox = '0 0 32 32';
+  }
+  return viewBox;
+});
 
-      return classes;
-    },
+const setCircleRadius = computed(() => {
+  let circleRadius: number;
 
-    viewBox() {
-      return this.size === 'm'
-        ? '0 0 32 32'
-        : this.size === 's'
-        ? '0 0 24 24'
-        : '0 0 64 64';
-    },
+  switch (props.size) {
+    case 's':
+      circleRadius = 6;
+      break;
+    case 'l':
+      circleRadius = 19;
+      break;
+    default:
+      circleRadius = 9;
+  }
 
-    pathR() {
-      return this.size === 'm' ? 9 : this.size === 's' ? 6 : 19;
-    },
-  },
-};
+  return circleRadius;
+});
 </script>
 
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.loader';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/loader';
 </style>

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

@@ -0,0 +1,51 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MOverlay from './MOverlay.vue';
+
+describe('MOverlay.vue', () => {
+  it('should be visible when isVisible is true', () => {
+    const wrapper = mount(MOverlay, {
+      props: {
+        isVisible: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('is-visible');
+  });
+
+  it('should not be visible when isVisible is false', () => {
+    const wrapper = mount(MOverlay, {
+      props: {
+        isVisible: false,
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('is-visible');
+  });
+
+  it('should apply the dialog label for accessibility', () => {
+    const label = 'Overlay Dialog';
+    const wrapper = mount(MOverlay, {
+      props: {
+        dialogLabel: label,
+      },
+    });
+
+    expect(
+      wrapper.find('div[role="dialog"]').attributes('aria-labelledby'),
+    ).toBe(label);
+  });
+
+  it('should render the content inside the overlay', () => {
+    const wrapper = mount(MOverlay, {
+      props: {
+        isVisible: true,
+      },
+      slots: {
+        default: 'Overlay Content',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Overlay Content');
+  });
+});

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MOverlay from './MOverlay.vue';
+
+const meta: Meta<typeof MOverlay> = {
+  title: 'Overlay/Overlay',
+  component: MOverlay,
+  parameters: {
+    docs: {
+      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,
+  },
+  argTypes: {
+    $slots: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MOverlay },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MOverlay v-bind="args">
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+      </MOverlay>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MOverlay>;
+
+export const Default: Story = {};

package/src/components/overlay/MOverlay.vue

@@ -1,28 +1,36 @@
 <template>
   <div class="mc-overlay" :class="{ 'is-visible': isVisible }">
-    <!-- @slot Use this slot to insert a centered content inside the overlay -->
-    <slot />
+    <div role="dialog" tabindex="-1" :aria-labelledby="dialogLabel">
+      <slot />
+    </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MOverlay',
+<script setup lang="ts">
+import type { VNode } from 'vue';
 
-  props: {
-    /**
-     * Define if the overlay is visible or not
-     * @values false, true
-     */
-    isVisible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
+/**
+ * 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.
+ */
+defineProps<{
+  /**
+   * Controls the visibility of the overlay.
+   */
+  isVisible?: boolean;
+  /**
+   * Accessible label for the overlay dialog.
+   */
+  dialogLabel?: string;
+}>();
+
+defineSlots<{
+  /**
+   * Use this slot to insert a centered content inside the overlay
+   */
+  default?: VNode;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.overlay';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/overlay';
 </style>

package/src/components/quantityselector/MQuantitySelector.spec.ts

@@ -0,0 +1,262 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MQuantitySelector from './MQuantitySelector.vue';
+
+describe('MQuantitySelector component', () => {
+  it('renders the component with default values', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+      },
+    });
+
+    const input = wrapper.find('input');
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+
+    expect(input.exists()).toBe(true);
+    expect(input.element.value).toBe('1');
+    expect(input.attributes('min')).toBe('1');
+    expect(input.attributes('max')).toBe('100');
+    expect(input.attributes('step')).toBe('1');
+
+    expect(increaseButton.exists()).toBe(true);
+    expect(decreaseButton.exists()).toBe(true);
+    expect(increaseButton.attributes('disabled')).toBeUndefined();
+    expect(decreaseButton.attributes('disabled')).toBeDefined();
+  });
+
+  it('emits an update when value changes via input', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 5,
+      },
+    });
+
+    const input = wrapper.find('input');
+    await input.setValue(10);
+
+    const emittedValue = wrapper.emitted('update:modelValue');
+    expect(emittedValue).toBeTruthy();
+    expect(emittedValue?.[0]).toEqual([10]);
+  });
+
+  it('increments value when increase button is clicked', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 5,
+        max: 10,
+        step: 1,
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    await increaseButton.trigger('click');
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('6');
+  });
+
+  it('decrements value when decrease button is clicked', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 5,
+        min: 1,
+        step: 1,
+      },
+    });
+
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+    await decreaseButton.trigger('click');
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('4');
+  });
+
+  it('does not increment beyond max value', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 10,
+        max: 10,
+        step: 1,
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    await increaseButton.trigger('click');
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('10');
+  });
+
+  it('does not decrement below min value', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 1,
+        min: 1,
+        step: 1,
+      },
+    });
+
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+    await decreaseButton.trigger('click');
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('1');
+  });
+
+  it('disables input and buttons when disabled prop is true', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        disabled: true,
+      },
+    });
+
+    const input = wrapper.find('input');
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+
+    expect(input.attributes('disabled')).toBeDefined();
+    expect(increaseButton.attributes('disabled')).toBeDefined();
+    expect(decreaseButton.attributes('disabled')).toBeDefined();
+  });
+
+  it('renders with custom size class', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        size: 's',
+      },
+    });
+
+    const div = wrapper.find('.mc-quantity-selector');
+    expect(div.classes()).toContain('mc-quantity-selector--s');
+  });
+
+  it('hides increase and decrease buttons when readonly is true', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        readonly: true,
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+
+    expect(increaseButton.exists()).toBe(false);
+    expect(decreaseButton.exists()).toBe(false);
+  });
+
+  it('renders and tests aria-label and aria-invalid for accessibility', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        isInvalid: true,
+        ariaLabel: 'Select quantity',
+      },
+    });
+
+    const input = wrapper.find('input');
+    expect(input.attributes('aria-label')).toBe('Select quantity');
+    expect(input.attributes('aria-invalid')).toBe('true');
+  });
+
+  it('does not allow invalid input values (non-numeric)', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+      },
+    });
+
+    const input = wrapper.find('input');
+    await input.setValue('abc');
+    expect(input.element.value).toBe('1');
+  });
+
+  it('supports custom step values', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 10,
+        step: 5,
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    await increaseButton.trigger('click');
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('15');
+  });
+
+  it('renders custom increment and decrement labels', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        incrementlabel: 'Increase Quantity',
+        decrementLabel: 'Decrease Quantity',
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+
+    expect(increaseButton.text()).toBe('Increase Quantity');
+    expect(decreaseButton.text()).toBe('Decrease Quantity');
+  });
+
+  it('correctly sets aria-controls', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+
+    expect(increaseButton.attributes('aria-controls')).toBe(
+      'quantity-selector-1',
+    );
+    expect(decreaseButton.attributes('aria-controls')).toBe(
+      'quantity-selector-1',
+    );
+  });
+});

package/src/components/quantityselector/MQuantitySelector.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MQuantitySelector from './MQuantitySelector.vue';
+
+const meta: Meta<typeof MQuantitySelector> = {
+  title: 'Form Elements/Quantity Selector',
+  component: MQuantitySelector,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example.',
+      },
+    },
+  },
+  args: {
+    id: 'quantitySelectorId',
+    modelValue: 10,
+    min: 5,
+    max: 20,
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['s', 'm'],
+    },
+  },
+  render: (args) => ({
+    components: { MQuantitySelector },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MQuantitySelector 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MQuantitySelector>;
+
+export const Default: Story = {};
+
+export const Step: Story = {
+  args: {
+    id: 'stepId',
+    step: 5,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    id: 'smallId',
+    size: 's',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    id: 'disableId',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    id: 'invalidId',
+    isInvalid: true,
+  },
+};
+
+export const readOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    readonly: true,
+  },
+};