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

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]);
+  });
+});

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MToggle from './MToggle.vue';
+
+const meta: Meta<typeof MToggle> = {
+  title: 'Form Elements/Toggle',
+  component: MToggle,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.',
+      },
+    },
+  },
+  args: {
+    id: 'ToggleId',
+    label: 'Label',
+  },
+  render: (args) => ({
+    components: { MToggle },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MToggle 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MToggle>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: {
+    modelValue: true,
+    id: 'checkedId',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    id: 'disabledId',
+  },
+};
+
+export const Size: Story = {
+  args: {
+    id: 'sizeId',
+    size: 's',
+  },
+};
+
+export const HideLabel: Story = {
+  args: {
+    id: 'hideLabelId',
+    label: undefined,
+    ariaLabel: 'Label',
+  },
+};

package/src/components/toggle/MToggle.vue

@@ -1,117 +1,77 @@
 <template>
-  <div class="mc-toggle" :class="setClasses">
-    <input
-      :id="id"
-      :name="name"
-      type="checkbox"
-      class="mc-toggle__input"
-      :checked="checked"
-      :disabled="disabled"
-      @change="$emit('change', $event.target.checked)"
-    />
-    <label :for="id" class="mc-toggle__label">
-      <span class="mc-toggle__content">
+  <div class="mc-toggle" :class="classObject">
+    <label class="mc-toggle__container" :for="id">
+      <input
+        :id="id"
+        type="checkbox"
+        class="mc-toggle__input"
+        :name="name"
+        :checked="modelValue"
+        :disabled="disabled"
+        v-bind="$attrs"
+        @change="
+          emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+        "
+      />
+      <span v-if="label" :for="id" class="mc-toggle__label">
         {{ label }}
-        <span
-          v-if="stateLabelOff && stateLabelOn"
-          class="mc-toggle__state"
-          aria-hidden="true"
-        >
-          <span class="mc-toggle__off">{{ stateLabelOff }}</span>
-          <span class="mc-toggle__on">{{ stateLabelOn }}</span>
-        </span>
       </span>
     </label>
   </div>
 </template>
 
-<script>
-import {
-  responsiveModifierValidators,
-  responsiveModifiers,
-} from '../../utils/mozaicClasses';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-export default {
-  name: 'MToggle',
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      default: null,
-    },
-    name: {
-      type: String,
-      default: null,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => responsiveModifierValidators(value, ['s', 'm']),
-    },
-    // Experimental solution waiting on this issue https://github.com/adeo/mozaic-vue/issues/52
-    responsiveSizeModifiers: {
-      type: Array,
-      default: null,
-      validator: (array) =>
-        array.every((e) =>
-          responsiveModifierValidators(e, [
-            's@from-m',
-            's@from-l',
-            's@from-xl',
-            's@from-xxl',
-            'm@from-m',
-            'm@from-l',
-            'm@from-xl',
-            'm@from-xxl',
-          ])
-        ),
-    },
-    stateLabelOff: {
-      type: String,
-      default: null,
-    },
-    stateLabelOn: {
-      type: String,
-      default: null,
-    },
+/**
+ * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the toggle, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the toggle element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the toggle.
+     */
+    label?: string;
+    /**
+     * The toggle's checked state, bound via v-model.
+     */
+    modelValue?: boolean;
+    /**
+     * Determines the size of the toggle
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, disables the toggle, making it non-interactive.
+     */
+    disabled?: boolean;
+  }>(),
+  {
+    size: 's',
   },
+);
 
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.size) {
-        classes.push(`mc-toggle--${this.size}`);
-      }
+const classObject = computed(() => {
+  return {
+    [`mc-toggle--${props.size}`]: props.size && props.size != 's',
+  };
+});
 
-      if (
-        this.responsiveSizeModifiers &&
-        this.responsiveSizeModifiers.length > 0
-      ) {
-        for (const modifier of this.responsiveSizeModifiers) {
-          responsiveModifiers('mc-toggle', modifier, classes);
-        }
-      }
-
-      return classes;
-    },
-  },
-};
+const emit = defineEmits<{
+  /**
+   * Emits when the toggle value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: boolean): void;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/c.toggle';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/toggle';
 </style>

package/src/components/usingIcons.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs';
+
+<Meta title="Using Icons" />
+
+# Using Icons
+
+To use icons in Vue applications, you need to install a dedicated package.
+
+You must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/icons-vue):
+
+<Source
+  language="bash"
+  dark
+  code="npm install @mozaic-ds/icons-vue"
+/>
+
+Or with **Yarn**:
+
+<Source
+  language="bash"
+  dark
+  code="yarn add @mozaic-ds/icons-vue"
+/>
+
+You can then start importing the icon of your choice into your Vue component:
+
+<Source
+  language='html'
+  dark
+  code={`
+// In one of the .vue file of your application
+
+<template>
+  <A11y20 fill="#333" />
+</template>
+
+<script setup>
+import A11y20 from '@mozaic-ds/icons-vue/src/components/A11y20/A11y20.vue';
+</script>
+`} />
+
+[The full list of icons is available here](https://github.com/adeo/mozaic-icons-vue/tree/main/src/components).