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

package/src/components/pincode/MPincode.spec.ts

@@ -0,0 +1,126 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MPincode from './MPincode.vue';
+
+describe('MPincode component', () => {
+  if (typeof ClipboardEvent === 'undefined') {
+    global.ClipboardEvent = class ClipboardEvent extends Event {
+      clipboardData: DataTransfer;
+      constructor(type: string, eventInitDict?: ClipboardEventInit) {
+        super(type, eventInitDict);
+        this.clipboardData =
+          (eventInitDict && eventInitDict.clipboardData) || new DataTransfer();
+      }
+      // eslint-disable-next-line
+    } as any;
+  }
+
+  it('renders correct number of input fields based on length', () => {
+    const wrapper = mount(MPincode, {
+      props: {
+        id: 'otp',
+        length: 6,
+        modelValue: '',
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    expect(inputs).toHaveLength(6);
+  });
+
+  it('updates modelValue as user types', async () => {
+    const wrapper = mount(MPincode, {
+      props: {
+        id: 'otp',
+        length: 4,
+        modelValue: '',
+        'onUpdate:modelValue': vi.fn(),
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    await inputs[0].setValue('1');
+    await inputs[1].setValue('2');
+    await inputs[2].setValue('3');
+    await inputs[3].setValue('4');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    const emitted = wrapper.emitted('update:modelValue');
+    const lastEmitted = emitted?.[emitted.length - 1][0];
+    expect(lastEmitted).toBe('1234');
+  });
+
+  it('moves focus to next input on input', async () => {
+    const wrapper = mount(MPincode, {
+      attachTo: document.body, // Needed for focus
+      props: {
+        id: 'otp',
+        length: 4,
+        modelValue: '',
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    await inputs[0].setValue('5');
+    expect(document.activeElement).toBe(inputs[1].element);
+  });
+
+  it('moves focus to previous input on backspace if current is empty', async () => {
+    const wrapper = mount(MPincode, {
+      attachTo: document.body,
+      props: {
+        id: 'otp',
+        length: 4,
+        modelValue: '',
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    await inputs[0].setValue('5');
+    await inputs[1].element.focus();
+    const event = new KeyboardEvent('keydown', { key: 'Backspace' });
+    inputs[1].element.dispatchEvent(event);
+    await wrapper.vm.$nextTick();
+
+    expect(document.activeElement).toBe(inputs[0].element);
+  });
+
+  it('renders invalid class when isInvalid is true', () => {
+    const wrapper = mount(MPincode, {
+      props: {
+        id: 'otp',
+        isInvalid: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('is-invalid');
+  });
+
+  it('disables inputs when disabled is true', () => {
+    const wrapper = mount(MPincode, {
+      props: {
+        id: 'otp',
+        disabled: true,
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    for (const input of inputs) {
+      expect(input.attributes('disabled')).toBeDefined();
+    }
+  });
+
+  it('makes inputs readonly when readonly is true', () => {
+    const wrapper = mount(MPincode, {
+      props: {
+        id: 'otp',
+        readonly: true,
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    for (const input of inputs) {
+      expect(input.attributes('readonly')).toBeDefined();
+    }
+  });
+});

package/src/components/pincode/MPincode.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MPincode from './MPincode.vue';
+
+const meta: Meta<typeof MPincode> = {
+  title: 'Form Elements/Pincode',
+  component: MPincode,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.',
+      },
+    },
+  },
+  args: {
+    id: 'pincodeId',
+    ariaLabel: 'enter your code',
+  },
+  render: (args) => ({
+    components: { MPincode },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MPincode 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MPincode>;
+
+export const WithValue: Story = {
+  args: {
+    id: 'valueId',
+    modelValue: '123098',
+  },
+};
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    id: 'disableId',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    modelValue: '123098',
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    id: 'invalidId',
+    isInvalid: true,
+  },
+};

package/src/components/pincode/MPincode.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="mc-pincode-input" :class="classObject" @paste="onPaste">
+    <input
+      v-for="(digit, index) in otp"
+      :key="index"
+      :id="`pincodeItem${index}`"
+      :ref="(el) => setInputRef(el, index)"
+      type="text"
+      inputmode="numeric"
+      maxlength="1"
+      pattern="\d*"
+      autocomplete="one-time-code"
+      :name="name || `pincode-${id}`"
+      class="mc-pincode-input__control"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="digit"
+      v-bind="$attrs"
+      @input="(e) => onInput(e, index)"
+      @keydown.backspace="(e) => onBackspace(e, index)"
+      @keydown="(e) => onKeyDown(e, index)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, type ComponentPublicInstance } from 'vue';
+/**
+ * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the pincode element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The number of input displayed in the pincode element.
+     */
+    length?: 4 | 5 | 6;
+    /**
+     * The name attribute for the pincode element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the pincode field.
+     */
+    modelValue?: string | number;
+    /**
+     * If `true`, applies an invalid state to the pincode.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the pincode, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the pincode is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+  }>(),
+  {
+    length: 6,
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    'is-invalid': props.isInvalid,
+  };
+});
+
+const emit = defineEmits<{
+  (on: 'update:modelValue', value: string): void;
+}>();
+
+const otp = ref<string[]>(Array(props.length).fill(''));
+const inputRefs = ref<(HTMLInputElement | null)[]>([]);
+
+const setInputRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+  inputRefs.value[index] = el as HTMLInputElement | null;
+};
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const str = String(value ?? '');
+    otp.value = Array.from({ length: props.length }, (_, i) => str[i] ?? '');
+  },
+  { immediate: true },
+);
+
+const focusInput = (index: number) => {
+  nextTick(() => inputRefs.value[index]?.focus());
+};
+
+const onInput = (e: Event, index: number) => {
+  const val = (e.target as HTMLInputElement).value.replace(/\D/g, '');
+  if (val) {
+    otp.value[index] = val[0];
+    emit('update:modelValue', otp.value.join(''));
+    if (index + 1 < props.length) focusInput(index + 1);
+  } else {
+    otp.value[index] = '';
+    emit('update:modelValue', otp.value.join(''));
+  }
+};
+
+const onKeyDown = (e: KeyboardEvent, index: number) => {
+  if (e.key === 'ArrowLeft' && index > 0) {
+    focusInput(index - 1);
+  } else if (e.key === 'ArrowRight' && index < props.length - 1) {
+    focusInput(index + 1);
+  } else if (e.key === 'Backspace') {
+    onBackspace(e, index);
+  }
+};
+
+const onBackspace = (e: KeyboardEvent, index: number) => {
+  if (otp.value[index] === '' && index > 0) {
+    otp.value[index - 1] = '';
+    emit('update:modelValue', otp.value.join(''));
+    focusInput(index - 1);
+  }
+};
+
+const onPaste = (e: ClipboardEvent) => {
+  e.preventDefault();
+  const pasted = e.clipboardData?.getData('text') ?? '';
+  const digits = pasted.replace(/\D/g, '').slice(0, props.length).split('');
+  otp.value = Array.from({ length: props.length }, (_, i) => digits[i] ?? '');
+  emit('update:modelValue', otp.value.join(''));
+  focusInput(Math.min(digits.length, props.length - 1));
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/pincode-input';
+</style>

package/src/components/quantityselector/MQuantitySelector.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 MQuantitySelector from './MQuantitySelector.vue';
 

package/src/components/radio/MRadio.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 MRadio from './MRadio.vue';
 

package/src/components/radiogroup/MRadioGroup.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 MRadioGroup from './MRadioGroup.vue';
 

package/src/components/select/MSelect.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 MSelect from './MSelect.vue';
 

package/src/components/statusbadge/MStatusBadge.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MStatusBadge from './MStatusBadge.vue';
 
 const meta: Meta<typeof MStatusBadge> = {

package/src/components/statusdot/MStatusDot.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MStatusDot from './MStatusDot.vue';
 
 const meta: Meta<typeof MStatusDot> = {

package/src/components/statusnotification/MStatusNotification.spec.ts

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MStatusNotification from './MStatusNotification.vue';
-import InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';
-import CheckCircle32 from '@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.vue';
-import WarningCircle32 from '@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue';
-import CrossCircle32 from '@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.vue';
+import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
+import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
+import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
+import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
 
 describe('MStatusNotification.vue', () => {
   it('should render correctly with the default props', () => {
@@ -17,7 +17,7 @@ describe('MStatusNotification.vue', () => {
 
     expect(wrapper.text()).toContain('Test Title');
     expect(wrapper.text()).toContain('Test Description');
-    expect(wrapper.findComponent(InfoCircle32).exists()).toBe(true); // Default icon is InfoCircle32
+    expect(wrapper.findComponent(InfoCircleFilled32).exists()).toBe(true); // Default icon is InfoCircle32
     expect(wrapper.classes()).toContain('mc-status-notification');
   });
 
@@ -29,7 +29,9 @@ describe('MStatusNotification.vue', () => {
         status: 'success',
       },
     });
-    expect(wrapperSuccess.findComponent(CheckCircle32).exists()).toBe(true);
+    expect(wrapperSuccess.findComponent(CheckCircleFilled32).exists()).toBe(
+      true,
+    );
 
     const wrapperWarning = mount(MStatusNotification, {
       props: {
@@ -38,7 +40,9 @@ describe('MStatusNotification.vue', () => {
         status: 'warning',
       },
     });
-    expect(wrapperWarning.findComponent(WarningCircle32).exists()).toBe(true);
+    expect(wrapperWarning.findComponent(WarningCircleFilled32).exists()).toBe(
+      true,
+    );
 
     const wrapperError = mount(MStatusNotification, {
       props: {
@@ -47,7 +51,7 @@ describe('MStatusNotification.vue', () => {
         status: 'error',
       },
     });
-    expect(wrapperError.findComponent(CrossCircle32).exists()).toBe(true);
+    expect(wrapperError.findComponent(CrossCircleFilled32).exists()).toBe(true);
   });
 
   it('should show the close button if closable prop is true', () => {

package/src/components/statusnotification/MStatusNotification.stories.ts

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MStatusNotification from './MStatusNotification.vue';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import MButton from '../button/MButton.vue';
 import MLink from '../link/MLink.vue';
 import ArrowNext20 from '@mozaic-ds/icons-vue/src/components/ArrowNext20/ArrowNext20.vue';
@@ -21,13 +21,6 @@ const meta: Meta<typeof MStatusNotification> = {
       'This is a title, be concise and use the description message to give details.',
     description: 'Description message.',
   },
-  argTypes: {
-    $slots: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   render: (args) => ({
     components: { MStatusNotification, MButton, MLink, ArrowNext20 },
     setup() {

package/src/components/statusnotification/MStatusNotification.vue

@@ -34,10 +34,10 @@
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
 import Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';
-import InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';
-import WarningCircle32 from '@mozaic-ds/icons-vue/src/components/WarningCircle32/WarningCircle32.vue';
-import CrossCircle32 from '@mozaic-ds/icons-vue/src/components/CrossCircle32/CrossCircle32.vue';
-import CheckCircle32 from '@mozaic-ds/icons-vue/src/components/CheckCircle32/CheckCircle32.vue';
+import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
+import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
+import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
+import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
 /**
  * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
  */
@@ -82,14 +82,14 @@ const classObject = computed(() => {
 const iconComponent = computed(() => {
   switch (props.status) {
     case 'success':
-      return CheckCircle32;
+      return CheckCircleFilled32;
     case 'warning':
-      return WarningCircle32;
+      return WarningCircleFilled32;
     case 'error':
-      return CrossCircle32;
+      return CrossCircleFilled32;
     case 'info':
     default:
-      return InfoCircle32;
+      return InfoCircleFilled32;
   }
 });
 

package/src/components/tabs/MTabs.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import Mtabs from './MTabs.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+
+const meta: Meta<typeof Mtabs> = {
+  title: 'Navigation/Tabs',
+  component: Mtabs,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.',
+      },
+    },
+  },
+  args: {
+    tabs: [
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { Mtabs, ChevronRight24 },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <Mtabs 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      ></Mtabs>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof Mtabs>;
+
+export const Default: Story = {};
+
+export const Icons: Story = {
+  args: {
+    tabs: [
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+      {
+        label: 'Label',
+        icon: ChevronRight24,
+      },
+    ],
+  },
+};
+
+export const Centered: Story = {
+  args: { centered: true },
+};
+
+export const NoDivider: Story = {
+  args: { divider: false },
+};
+
+export const Disabled: Story = {
+  args: {
+    tabs: [
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+        disabled: true,
+      },
+      {
+        label: 'Label',
+        disabled: true,
+      },
+    ],
+  },
+};