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

package/src/components/textarea/MTextArea.vue

@@ -1,54 +1,92 @@
 <template>
   <textarea
+    :id="id"
     class="mc-textarea"
-    :class="[
-      { 'is-valid': isValid, 'is-invalid': isInvalid },
-      cssFieldElementClass,
-    ]"
+    :class="classObject"
     :aria-invalid="isInvalid"
-    :value="value"
-    spellcheck="false"
-    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,107 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/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:
+          'A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.<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',
+  },
+  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,
+  },
+};

package/src/components/textinput/MTextInput.vue

@@ -1,58 +1,138 @@
 <template>
-  <div
-    v-if="icon"
-    key="icon-input"
-    class="mc-left-icon-input"
-    :class="cssFieldElementClass"
-  >
-    <m-text-input-icon :icon="icon" />
-    <m-text-input-field
-      ref="mField"
-      v-bind="[$attrs, $props]"
-      :class="textInputFieldClass"
-      v-on="$listeners"
+  <div class="mc-text-input" :class="classObject">
+    <span v-if="$slots.icon" class="mc-text-input__icon">
+      <slot name="icon" />
+    </span>
+
+    <input
+      :id="id"
+      class="mc-text-input__control"
+      :value="modelValue"
+      :type="inputType"
+      :name="name"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="isInvalid"
+      :readonly="readonly"
+      v-bind="$attrs"
+      @input="
+        emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
     />
-  </div>
 
-  <m-text-input-field
-    v-else
-    key="input-only"
-    ref="mField"
-    v-bind="[$attrs, $props]"
-    :class="cssFieldElementClass"
-    v-on="$listeners"
-  />
+    <div v-if="isClearable && modelValue" class="mc-controls-options">
+      <button
+        type="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>
+  </div>
 </template>
 
-<script>
-import MTextInputField from './MTextInputField.vue';
-import MTextInputIcon from './MTextInputIcon.vue';
+<script setup lang="ts">
+import { computed, ref, type VNode } from 'vue';
+import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
 
-export default {
-  name: 'MTextInput',
-
-  components: {
-    MTextInputField,
-    MTextInputIcon,
+/**
+ * Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the input element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the input field.
+     */
+    modelValue?: string | number;
+    /**
+     * A placeholder text to show in the input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * Defines the type of input
+     */
+    inputType?:
+      | 'date'
+      | 'email'
+      | 'number'
+      | 'password'
+      | 'search'
+      | 'tel'
+      | 'text';
+    /**
+     * If `true`, applies an invalid state to the input.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the input, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Determines the size of the input
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, the input is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the input has a value.
+     */
+    isClearable?: boolean;
+    /**
+     * The label text for the clear button
+     */
+    clearLabel?: string;
+  }>(),
+  {
+    inputType: 'text',
+    size: 'm',
+    clearLabel: 'clear content',
   },
+);
 
-  inject: {
-    cssFieldElementClass: {
-      default: '',
-    },
-  },
+defineSlots<{
+  /**
+   * Use this slot to insert an icon in the input
+   */
+  icon?: VNode;
+}>();
 
-  inheritAttrs: false,
-
-  props: {
-    icon: {
-      type: String,
-      default: null,
-    },
-    textInputFieldClass: {
-      type: String,
-      default: null,
-    },
-  },
+const classObject = computed(() => {
+  return {
+    [`mc-text-input--${props.size}`]: props.size && props.size != 'm',
+    'is-invalid': props.isInvalid,
+  };
+});
+
+const modelValue = ref(props.modelValue);
+const clearValue = () => {
+  modelValue.value = '';
+  emit('update:modelValue', '');
 };
+
+const emit = defineEmits<{
+  /**
+   * Emits when the input value changes, updating the `modelValue` prop.
+   */
+  (on: 'update:modelValue', value: string | number): void;
+}>();
 </script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/controls-options';
+@use '@mozaic-ds/styles/components/text-input';
+</style>

package/src/components/toggle/MToggle.spec.ts

@@ -0,0 +1,99 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MToggle from './MToggle.vue';
+
+describe('MToggle Component', () => {
+  it('should render the toggle with default props', () => {
+    const wrapper = mount(MToggle, {
+      props: {
+        id: 'test-toggle',
+      },
+    });
+
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes().id).toBe('test-toggle');
+    expect(input.classes()).toContain('mc-toggle__input');
+  });
+
+  it('should bind and update modelValue (v-model)', async () => {
+    const wrapper = mount(MToggle, {
+      props: {
+        id: 'test-toggle',
+        modelValue: false,
+      },
+    });
+
+    const input = wrapper.find('input');
+    expect(input.element.checked).toBe(false);
+
+    await input.setChecked(true);
+
+    const emittedEvent = wrapper.emitted()['update:modelValue'];
+    expect(emittedEvent).toBeDefined();
+    expect(emittedEvent![0]).toEqual([true]);
+  });
+
+  it('is disabled when the disabled prop is true', () => {
+    const wrapper = mount(MToggle, {
+      props: {
+        id: 'test-toggle',
+        disabled: true,
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    expect(checkbox.element.disabled).toBe(true);
+  });
+
+  it('should render the label if provided', () => {
+    const wrapper = mount(MToggle, {
+      props: {
+        id: 'test-toggle',
+        label: 'Enable feature',
+      },
+    });
+
+    const label = wrapper.find('.mc-toggle__label');
+    expect(label.exists()).toBe(true);
+    expect(label.text()).toBe('Enable feature');
+  });
+
+  it('should not render the label if not provided', () => {
+    const wrapper = mount(MToggle, {
+      props: {
+        id: 'test-toggle',
+      },
+    });
+
+    const label = wrapper.find('.mc-toggle__label');
+    expect(label.exists()).toBe(false);
+  });
+
+  it('should apply the correct size class based on the size prop', () => {
+    const wrapper = mount(MToggle, {
+      props: {
+        id: 'test-toggle',
+        size: 'm',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-toggle--m');
+  });
+
+  it('should emit updated modelValue on toggle change', async () => {
+    const wrapper = mount(MToggle, {
+      props: {
+        id: 'test-toggle',
+        modelValue: false,
+      },
+    });
+
+    const input = wrapper.find('input');
+    await input.setChecked(true);
+
+    const emittedEvent = wrapper.emitted()['update:modelValue'];
+    expect(emittedEvent).toBeDefined();
+    expect(emittedEvent![0]).toEqual([true]);
+  });
+});