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

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/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';
+import { action } from '@storybook/addon-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,
+  },
+};