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

package/src/components/statusbadge/MstatusBadge.spec.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import MStatusBadge from './MStatusBadge.vue';
+
+describe('MStatusBadge component', () => {
+  it('renders properly', () => {
+    const wrapper = mount(MStatusBadge, {
+      props: {
+        label: 'Badge Label',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Badge Label');
+  });
+});

package/src/components/textarea/MTextArea.spec.ts

@@ -0,0 +1,112 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MTextArea from './MTextArea.vue';
+
+describe('MTextArea component', () => {
+  it('should render correctly with the given props', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+        placeholder: 'Enter text here...',
+        rows: 5,
+        maxLength: 200,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+
+    expect(textarea.attributes('id')).toBe('textarea-id');
+    expect(textarea.attributes('placeholder')).toBe('Enter text here...');
+    expect(textarea.attributes('rows')).toBe('5');
+    expect(textarea.attributes('maxlength')).toBe('200');
+  });
+
+  it('should apply is-invalid class when isInvalid prop is true', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+        isInvalid: true,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.classes()).toContain('is-invalid');
+  });
+
+  it('should update modelValue when the textarea value changes', async () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Initial value',
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    await textarea.setValue('Updated value');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([
+      'Updated value',
+    ]);
+  });
+
+  it('should not allow changes if the textarea is disabled', async () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Initial value',
+        disabled: true,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.attributes('disabled')).toBeDefined();
+
+    await textarea.setValue('Updated value');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeFalsy();
+  });
+
+  it('should be read-only if the readonly prop is true', async () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Initial value',
+        readonly: true,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.attributes('readonly')).toBeDefined();
+
+    await textarea.setValue('Updated value');
+
+    expect(textarea.attributes('value')).toBe('Initial value');
+  });
+
+  it('should apply a default classObject computed class', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-textarea');
+  });
+
+  it('should correctly bind rows attribute', () => {
+    const wrapper = mount(MTextArea, {
+      props: {
+        id: 'textarea-id',
+        modelValue: 'Test value',
+        rows: 4,
+      },
+    });
+
+    const textarea = wrapper.find('textarea');
+    expect(textarea.attributes('rows')).toBe('4');
+  });
+});

package/src/components/textarea/MTextArea.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MTextArea from './MTextArea.vue';
+
+const meta: Meta<typeof MTextArea> = {
+  title: 'Form Elements/Textarea',
+  component: MTextArea,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A textarea is a form element for multi-line text input, ideal for longer content like comments or descriptions.<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#textarea).',
+      },
+    },
+  },
+  args: {
+    id: 'textareaId',
+    placeholder: 'Placeholder',
+  },
+  render: (args) => ({
+    components: { MTextArea },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MTextArea 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MTextArea>;
+
+export const WithValue: Story = {
+  args: {
+    id: 'withValueId',
+    modelValue: 'Value of the textarea component',
+  },
+};
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    id: 'disabledId',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    id: 'invalidId',
+    isInvalid: true,
+  },
+};

package/src/components/textarea/MTextArea.vue

@@ -1,53 +1,92 @@
 <template>
   <textarea
+    :id="id"
     class="mc-textarea"
-    :class="[
-      { 'is-valid': isValid, 'is-invalid': isInvalid },
-      cssFieldElementClass,
-    ]"
+    :class="classObject"
     :aria-invalid="isInvalid"
-    :value="value"
-    v-on="inputListeners"
+    :value="modelValue"
+    :name="name"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :minlength="minLength"
+    :maxlength="maxLength"
+    :rows="rows"
+    :readonly="readonly"
+    v-bind="$attrs"
+    @input="
+      emit('update:modelValue', ($event.target as HTMLInputElement).value)
+    "
   />
 </template>
 
-<script>
-export default {
-  name: 'MTextArea',
-  inject: {
-    cssFieldElementClass: {
-      default: '',
-    },
-  },
-  props: {
-    value: {
-      type: String,
-      default: null,
-    },
-    isValid: {
-      type: Boolean,
-      default: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    inputListeners: function () {
-      // see => https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
-      var vm = this;
-      return Object.assign({}, this.$listeners, {
-        input: function (event) {
-          vm.$emit('input', event.target.value);
-        },
-      });
-    },
+<script setup lang="ts">
+import { computed } from 'vue';
+
+/**
+ * A textarea is a form element for multi-line text input, ideal for longer content like comments or descriptions.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the textarea, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the textarea element, used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the textarea field.
+     */
+    modelValue?: string | number;
+    /**
+     * Text displayed when the textarea is empty.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the textarea is marked as invalid.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, the textarea is disabled and non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * The number of visible text lines in the textarea.
+     */
+    rows?: number;
+    /**
+     * Minimum number of characters required for the textarea.
+     */
+    minLength?: number;
+    /**
+     * Maximum number of characters allowed in the textarea.
+     */
+    maxLength?: number;
+    /**
+     * If `true`, the textarea is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+  }>(),
+  {
+    rows: 2,
   },
-};
+);
+
+const classObject = computed(() => {
+  return {
+    'is-invalid': props.isInvalid,
+  };
+});
+
+const emit = defineEmits<{
+  /**
+   * Emits when the textarea 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.textarea';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/textarea';
 </style>

package/src/components/textinput/MTextInput.spec.ts

@@ -0,0 +1,121 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MTextInput from './MTextInput.vue';
+import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';
+
+describe('MTextInput component', () => {
+  it('should render correctly with the given props', () => {
+    const wrapper = mount(MTextInput, {
+      props: {
+        id: 'input-id',
+        modelValue: 'test',
+        placeholder: 'Enter text',
+        inputType: 'text',
+        size: 's',
+      },
+    });
+
+    const input = wrapper.find('input');
+
+    expect(input.attributes('id')).toBe('input-id');
+    expect(input.attributes('placeholder')).toBe('Enter text');
+    expect(input.attributes('type')).toBe('text');
+    expect(wrapper.classes()).toContain('mc-text-input--s');
+  });
+
+  it('should update modelValue when input value changes', async () => {
+    const wrapper = mount(MTextInput, {
+      props: {
+        id: 'input-id',
+        modelValue: 'initial value',
+      },
+    });
+
+    const input = wrapper.find('input');
+    await input.setValue('new value');
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['new value']);
+  });
+
+  it('should render Search24 icon when passed to icon slot', () => {
+    const wrapper = mount(MTextInput, {
+      props: {
+        id: 'input-id',
+        modelValue: 'test',
+      },
+      slots: {
+        icon: Search24,
+      },
+    });
+
+    const iconWrapper = wrapper.find('.mc-text-input__icon');
+    expect(iconWrapper.exists()).toBe(true);
+    expect(iconWrapper.findComponent(Search24).exists()).toBe(true);
+  });
+
+  it('should render the clear button when isClearable is true and modelValue is not empty', () => {
+    const wrapper = mount(MTextInput, {
+      props: {
+        id: 'input-id',
+        modelValue: 'text content',
+        isClearable: true,
+      },
+    });
+
+    const clearButton = wrapper.find('.mc-controls-options__button');
+    expect(clearButton.exists()).toBe(true);
+  });
+
+  it('should clear the input value when the clear button is clicked', async () => {
+    const wrapper = mount(MTextInput, {
+      props: {
+        id: 'input-id',
+        modelValue: 'text content',
+        isClearable: true,
+      },
+    });
+
+    const clearButton = wrapper.find('.mc-controls-options__button');
+    await clearButton.trigger('click');
+
+    expect(wrapper.vm.modelValue).toBe('');
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['']);
+  });
+
+  it('should not render the clear button if isClearable is false', () => {
+    const wrapper = mount(MTextInput, {
+      props: {
+        id: 'input-id',
+        modelValue: 'text content',
+        isClearable: false,
+      },
+    });
+
+    const clearButton = wrapper.find('.mc-controls-options__button');
+    expect(clearButton.exists()).toBe(false);
+  });
+
+  it('should apply the correct classes based on validation props', () => {
+    const wrapper = mount(MTextInput, {
+      props: {
+        id: 'input-id',
+        modelValue: 'text content',
+        isInvalid: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('is-invalid');
+  });
+
+  it('should not apply is-invalid if not specified', () => {
+    const wrapper = mount(MTextInput, {
+      props: {
+        id: 'input-id',
+        modelValue: 'text content',
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('is-invalid');
+  });
+});

package/src/components/textinput/MTextInput.stories.ts

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MTextInput from './MTextInput.vue';
+import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';
+
+const meta: Meta<typeof MTextInput> = {
+  title: 'Form Elements/TextInput',
+  component: MTextInput,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.<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: 'textInputId',
+    placeholder: 'Placeholder',
+  },
+  argTypes: {
+    $slots: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MTextInput, Search24 },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MTextInput 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MTextInput>;
+
+export const WithValue: Story = {
+  args: {
+    id: 'withValueId',
+    modelValue: 'Value of the input component',
+    isClearable: true,
+  },
+};
+
+export const Default: Story = {};
+
+export const Small: Story = {
+  args: {
+    id: 'smallId',
+    size: 's',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    id: 'withIconId',
+    icon: `
+      <template v-slot:icon>
+        <Search24/>
+      </template>
+    `,
+  },
+  render: (args) => ({
+    components: { MTextInput, Search24 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MTextInput v-bind="args">
+        ${args.icon}
+      </MTextInput>
+    `,
+  }),
+};
+
+export const minValue: Story = {
+  args: {
+    id: 'minValueId',
+    inputType: 'number',
+    modelValue: '4',
+    min: '3',
+  },
+};
+
+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,
+  },
+};