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

package/src/components/passwordinput/MPasswordInput.spec.ts

@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MPasswordInput from './MPasswordInput.vue';
+
+describe('MPasswordInput.vue', () => {
+  it('renders correctly with default props', () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+      },
+    });
+
+    const input = wrapper.find('input');
+    const toggleButton = wrapper.find('button[role="switch"]');
+
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('type')).toBe('password');
+
+    expect(toggleButton.exists()).toBe(true);
+    expect(toggleButton.text()).toBe('Show');
+  });
+
+  it('toggles password visibility on button click', async () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+      },
+    });
+
+    const toggleButton = wrapper.find('button[role="switch"]');
+    const input = wrapper.find('input');
+
+    expect(input.attributes('type')).toBe('password');
+
+    await toggleButton.trigger('click');
+
+    expect(input.attributes('type')).toBe('text');
+    expect(toggleButton.text()).toBe('Hide');
+
+    await toggleButton.trigger('click');
+
+    expect(input.attributes('type')).toBe('password');
+    expect(toggleButton.text()).toBe('Show');
+  });
+
+  it('should update modelValue when input value changes', async () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+        modelValue: '',
+      },
+    });
+
+    const input = wrapper.find('input');
+    await input.setValue('newPassword123');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+      'newPassword123',
+    ]);
+  });
+
+  it('clears the input when the clear button is clicked', async () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+        modelValue: 'somePassword',
+        isClearable: true,
+        clearLabel: 'Clear content',
+      },
+    });
+
+    const clearButton = wrapper.find('.mc-controls-options__button');
+
+    await clearButton.trigger('click');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['']);
+  });
+
+  it('disables the input when disabled prop is passed', () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+        disabled: true,
+      },
+    });
+
+    const input = wrapper.find('input');
+
+    expect(input.attributes('disabled')).toBeDefined();
+  });
+
+  it('applies invalid state when isInvalid prop is true', () => {
+    const wrapper = mount(MPasswordInput, {
+      props: {
+        id: 'password-input',
+        isInvalid: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('is-invalid');
+  });
+});

package/src/components/passwordinput/MPasswordInput.stories.ts

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MPasswordInput from './MPasswordInput.vue';
+
+const meta: Meta<typeof MPasswordInput> = {
+  title: 'Form Elements/PasswordInput',
+  component: MPasswordInput,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).',
+      },
+    },
+  },
+  args: {
+    id: 'passwordInputId',
+    placeholder: 'Enter your password',
+  },
+  render: (args) => ({
+    components: { MPasswordInput },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MPasswordInput 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MPasswordInput>;
+
+export const WithValue: Story = {
+  args: {
+    id: 'withValueId',
+    modelValue: 'Magic-word-123',
+  },
+};
+
+export const Default: Story = {};
+
+export const Clearable: Story = {
+  args: {
+    id: 'clearableId',
+    modelValue: 'Magic-word-123',
+    isClearable: true,
+  },
+};
+
+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,
+  },
+};

package/src/components/passwordinput/MPasswordInput.vue

@@ -1,97 +1,146 @@
 <template>
-  <div class="mc-password-input" :class="cssFieldElementClass">
+  <div class="mc-password-input mc-text-input" :class="classObject">
     <input
-      :type="setType"
-      :required="required"
-      class="mc-text-input mc-password-input__control"
-      :class="setInputClasses"
+      class="mc-password-input__control mc-text-input__control"
+      v-model="modelValue"
+      :id="id"
+      :type="inputType"
+      :name="name"
+      :placeholder="placeholder"
+      :disabled="disabled"
       :aria-invalid="isInvalid"
-      spellcheck="false"
+      :readonly="readonly"
+      v-bind="$attrs"
+      @input="
+        emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
     />
-
-    <button
+    <div v-if="isClearable && modelValue" class="mc-controls-options">
+      <button class="mc-controls-options__button" @click="clearValue">
+        <CrossCircleFilled24
+          class="mc-controls-options__icon"
+          aria-hidden="true"
+        />
+        <span class="mc-controls-options__label">{{ clearLabel }}</span>
+      </button>
+    </div>
+    <MButton
       ref="button"
-      type="button"
-      class="mc-password-input__button"
       role="switch"
-      :aria-pressed="setAriaPressed"
-      @click="onClick"
+      :aria-checked="ariaChecked"
+      :disabled="disabled"
+      @click="toggleVisibility"
+      size="s"
+      ghost
     >
-      {{ setButtonLabel }}
-    </button>
+      {{ isVisible ? buttonLabel.hide : buttonLabel.show }}
+    </MButton>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MPasswordInput',
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import MButton from '../button/MButton.vue';
 
-  inject: {
-    cssFieldElementClass: {
-      default: '',
-    },
+/**
+ * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the password input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the password input element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the password input field.
+     */
+    modelValue?: string | number;
+    /**
+     * A placeholder text to show in the password input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the password input, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the password input is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the password input has a value.
+     */
+    isClearable?: boolean;
+    /**
+     * The label text for the clear button
+     */
+    clearLabel?: string;
+    /**
+     * Labels of the button displayed when showing or hiding the password
+     */
+    buttonLabel?: {
+      show: string;
+      hide: string;
+    };
+  }>(),
+  {
+    clearLabel: 'Clear content',
+    buttonLabel: () => ({ show: 'Show', hide: 'Hide' }),
   },
+);
 
-  props: {
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-    isValid: {
-      type: Boolean,
-      default: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-    buttonLabel: {
-      type: Object,
-      default: function () {
-        return { show: 'Show', hide: 'Hide' };
-      },
-    },
-  },
+const classObject = computed(() => ({
+  'is-invalid': props.isInvalid,
+}));
 
-  data: function () {
-    return {
-      isVisible: false,
-    };
-  },
+// Local state management
+const modelValue = ref(props.modelValue);
+const isVisible = ref(false);
 
-  computed: {
-    setType() {
-      return this.isVisible ? 'text' : 'password';
-    },
-    setInputClasses() {
-      return {
-        'is-valid': this.isValid,
-        'is-invalid': this.isInvalid,
-      };
-    },
-    setAriaPressed() {
-      return this.isVisible ? 'true' : 'false';
-    },
-    setButtonLabel() {
-      return this.isVisible ? this.buttonLabel.hide : this.buttonLabel.show;
-    },
-  },
+/**
+ * Clear the input value.
+ */
+const clearValue = () => {
+  modelValue.value = '';
+  emit('update:modelValue', '');
+};
 
-  methods: {
-    onClick() {
-      const aria = this.$refs.button.getAttribute('aria-pressed') === 'false';
-      this.isVisible = aria;
-    },
-  },
+/**
+ * Toggle the visibility of the password.
+ */
+const toggleVisibility = () => {
+  isVisible.value = !isVisible.value;
 };
+
+/**
+ * Compute the input type based on visibility state.
+ */
+const inputType = computed(() => (isVisible.value ? 'text' : 'password'));
+
+/**
+ * Aria attributes for accessibility.
+ */
+const ariaChecked = computed(() => (isVisible.value ? 'true' : 'false'));
+
+const emit = defineEmits<{
+  /**
+   * Emits when the input value changes, updating the `modelValue` prop.
+   */
+  (on: 'update:modelValue', value: string | number): void;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.text-input';
-@import 'components/_c.password-input';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/controls-options';
+@use '@mozaic-ds/styles/components/text-input';
+@use '@mozaic-ds/styles/components/password-input';
 </style>

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