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

package/src/components/field/MField.stories.ts

@@ -0,0 +1,376 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MField from './MField.vue';
+import MTextInput from '../textinput/MTextInput.vue';
+import MTextArea from '../textarea/MTextArea.vue';
+import MSelect from '../select/MSelect.vue';
+
+const meta: Meta<typeof MField> = {
+  title: 'Form Elements/Field',
+  component: MField,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The Field component creates a structured form field with a label, optional help text, error and validation message handling.',
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    id: 'ReplaceByInputId',
+    default: `
+      <!-- All the code below must be replaced by a form element. -->
+      <div class="content-slot">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
+  },
+  argTypes: {
+    $slots: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MField, MTextInput },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MField>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { MField },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};
+
+export const Input: Story = {
+  args: {
+    label: 'Label',
+    id: 'inputId',
+    default: `
+      <MTextInput
+        id="inputId"
+        placeholder="Placeholder"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const InputFull: Story = {
+  args: {
+    label: 'Label',
+    requirementText: 'optional',
+    helpText: 'Help text',
+    id: 'inputFullId',
+    default: `
+      <MTextInput
+        id="inputFullId"
+        placeholder="Placeholder"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const InputValid: Story = {
+  args: {
+    label: 'Label',
+    requirementText: 'required',
+    helpText: 'Help text',
+    id: 'inputvalidId',
+    isValid: true,
+    message: 'Validation message (Be concise and use comprehensive words).',
+    default: `
+      <MTextInput
+        id="inputvalidId"
+        placeholder="Placeholder"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const InputInvalid: Story = {
+  args: {
+    label: 'Label',
+    requirementText: 'required',
+    helpText: 'Help text',
+    id: 'inputInvalidId',
+    isInvalid: true,
+    message: 'Error message (Be concise and use comprehensive words)',
+    default: `
+      <MTextInput
+        id="inputInvalidId"
+        placeholder="Placeholder"
+        isInvalid
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const Textarea: Story = {
+  args: {
+    label: 'Label',
+    id: 'textareaId',
+    default: `
+      <MTextArea
+        id="textareaId"
+        placeholder="Placeholder"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MField, MTextArea },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};
+
+export const TextareaValid: Story = {
+  args: {
+    label: 'Label',
+    id: 'textareaValidId',
+    requirementText: 'required',
+    helpText: 'Help text',
+    isValid: true,
+    message: 'Validation message (Be concise and use comprehensive words).',
+    default: `
+      <MTextArea
+        id="textareaValidId"
+        placeholder="Placeholder"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MField, MTextArea },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};
+
+export const TextareaInvalid: Story = {
+  args: {
+    label: 'Label',
+    id: 'textareaValidId',
+    requirementText: 'required',
+    helpText: 'Help text',
+    isInvalid: true,
+    message: 'Error message (Be concise and use comprehensive words)',
+    default: `
+      <MTextArea
+        id="textareaValidId"
+        isInvalid
+        placeholder="Placeholder"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MField, MTextArea },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};
+
+export const Select: Story = {
+  args: {
+    label: 'Label',
+    id: 'selectId',
+    default: `
+      <MSelect
+        id="selectId"
+        name="selectName"
+        placeholder="Choose an option"
+        :options="
+          [
+            {
+              text: 'Option 1',
+              value: 'option1',
+            },
+            {
+              text: 'Option 2',
+              value: 'option2',
+            },
+            {
+              text: 'Option 3',
+              value: 'option3',
+            },
+            {
+              text: 'Option 4',
+              value: 'option4',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MField, MSelect },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};
+
+export const SelectValid: Story = {
+  args: {
+    label: 'Label',
+    id: 'selectValidId',
+    requirementText: 'required',
+    helpText: 'Help text',
+    isValid: true,
+    message: 'Validation message (Be concise and use comprehensive words).',
+    default: `
+      <MSelect
+        id="selectValidId"
+        name="selectValidName"
+        placeholder="Choose an option"
+        :options="
+          [
+            {
+              text: 'Option 1',
+              value: 'option1',
+            },
+            {
+              text: 'Option 2',
+              value: 'option2',
+            },
+            {
+              text: 'Option 3',
+              value: 'option3',
+            },
+            {
+              text: 'Option 4',
+              value: 'option4',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MField, MSelect },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};
+
+export const SelectInvalid: Story = {
+  args: {
+    label: 'Label',
+    id: 'selectInvalidId',
+    requirementText: 'required',
+    helpText: 'Help text',
+    isInvalid: true,
+    message: 'Error message (Be concise and use comprehensive words)',
+    default: `
+      <MSelect
+        id="selectInvalidId"
+        name="selectInvalidName"
+        isInvalid
+        placeholder="Choose an option"
+        :options="
+          [
+            {
+              text: 'Option 1',
+              value: 'option1',
+            },
+            {
+              text: 'Option 2',
+              value: 'option2',
+            },
+            {
+              text: 'Option 3',
+              value: 'option3',
+            },
+            {
+              text: 'Option 4',
+              value: 'option4',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MField, MSelect },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MField v-bind="args">
+        ${args.default}
+      </MField>
+    `,
+  }),
+};

package/src/components/field/MField.vue

@@ -1,73 +1,90 @@
 <template>
   <div class="mc-field">
-    <label :for="id" class="mc-field__label">
+    <label class="mc-field__label" :for="id">
       {{ label }}
-      <span
-        v-if="requirementText"
-        class="mc-field__requirement"
-        aria-hidden="true"
+      <span v-if="requirementText" class="mc-field__requirement"
+        >({{ requirementText }})</span
       >
-        {{ requirementText }}
-      </span>
     </label>
-    <span v-if="helpId && helpText" :id="helpId" class="mc-field__help">
-      {{ helpText }}
-    </span>
-    <slot />
-    <span v-if="isInvalid" :id="errorId" class="mc-field__error-message">
-      {{ errorMessage }}
+
+    <span v-if="helpId && helpText" :id="helpId" class="mc-field__help">{{
+      helpText
+    }}</span>
+
+    <div class="mc-field__content">
+      <slot />
+    </div>
+
+    <span
+      v-if="(isValid || isInvalid) && message"
+      class="mc-field__validation-message"
+      :id="messageId"
+      :class="classObjectValidation"
+    >
+      {{ message }}
     </span>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MField',
-  provide: {
-    cssFieldElementClass: 'mc-field__element',
-  },
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    requirementText: {
-      type: String,
-      default: null,
-    },
-    helpId: {
-      type: String,
-      default: null,
-    },
-    helpText: {
-      type: String,
-      default: null,
-    },
-    errorId: {
-      type: String,
-      default: null,
-    },
-    errorMessage: {
-      type: String,
-      default: null,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+/**
+ * This component creates a structured form field with a label, optional help text, error and validation message handling.
+ */
+const props = defineProps<{
+  /**
+   * A unique identifier for the form field, used to associate the label with the form element.
+   */
+  id: string;
+  /**
+   * The text displayed as the label for the form field.
+   */
+  label: string;
+  /**
+   * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional
+   */
+  requirementText?: string;
+  /**
+   * Text shown below the form field to provide additional context or instructions for the user.
+   */
+  helpText?: string;
+  /**
+   * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._
+   */
+  helpId?: string;
+  /**
+   * If `true`, applies a valid state to the form field.
+   */
+  isValid?: boolean;
+  /**
+   * If `true`, applies an invalid state to the form field.
+   */
+  isInvalid?: boolean;
+  /**
+   * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
+   */
+  messageId?: string;
+  /**
+   * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
+   */
+  message?: string;
+}>();
+
+defineSlots<{
+  /**
+   * Use this slot to insert the form element of your choice
+   */
+  default: VNode;
+}>();
+
+const classObjectValidation = computed(() => {
+  return {
+    'is-valid': props.isValid,
+    'is-invalid': props.isInvalid,
+  };
+});
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.fields';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/field';
 </style>

package/src/components/fieldgroup/MFieldGroup.spec.ts

@@ -0,0 +1,165 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MFieldGroup from './MFieldGroup.vue';
+
+describe('MFieldGroup component', () => {
+  it('should render label correctly', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+      },
+    });
+
+    const label = wrapper.find('legend');
+    expect(label.exists()).toBe(true);
+    expect(label.text()).toBe('Field Label');
+  });
+
+  it('should render requirement text if provided', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+        requirementText: 'required',
+      },
+    });
+
+    const requirementText = wrapper.find('.mc-field__requirement');
+    expect(requirementText.exists()).toBe(true);
+    expect(requirementText.text()).toBe('(required)');
+  });
+
+  it('should not render requirement text if not provided', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+      },
+    });
+
+    const requirementText = wrapper.find('.mc-field__requirement');
+    expect(requirementText.exists()).toBe(false);
+  });
+
+  it('should render help text if provided', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+        helpText: 'This is some help text.',
+      },
+    });
+
+    const helpText = wrapper.find('.mc-field__help');
+    expect(helpText.exists()).toBe(true);
+    expect(helpText.text()).toBe('This is some help text.');
+  });
+
+  it('should not render help text if not provided', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+      },
+    });
+
+    const helpText = wrapper.find('.mc-field__help');
+    expect(helpText.exists()).toBe(false);
+  });
+
+  it('should apply is-valid class when isValid prop is true', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+        isValid: true,
+        message: 'Valid input',
+      },
+    });
+
+    expect(wrapper.find('.mc-field__validation-message').classes()).toContain(
+      'is-valid',
+    );
+    expect(wrapper.find('.mc-field__validation-message').text()).toBe(
+      'Valid input',
+    );
+  });
+
+  it('should apply is-invalid class when isInvalid prop is true', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+        isInvalid: true,
+        message: 'Invalid input',
+      },
+    });
+
+    expect(wrapper.find('.mc-field__validation-message').classes()).toContain(
+      'is-invalid',
+    );
+    expect(wrapper.find('.mc-field__validation-message').text()).toBe(
+      'Invalid input',
+    );
+  });
+
+  it('should render a validation message only when isValid or isInvalid is true and message is provided', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+        isValid: true,
+        message: 'This is a valid input',
+      },
+    });
+
+    const validationMessage = wrapper.find('.mc-field__validation-message');
+    expect(validationMessage.exists()).toBe(true);
+    expect(validationMessage.text()).toBe('This is a valid input');
+  });
+
+  it('should render the form element passed in the slot', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+      },
+      slots: {
+        default: '<input type="text" />',
+      },
+    });
+
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('type')).toBe('text');
+  });
+
+  it('should render validation message when isInvalid is true and message is provided', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+        isInvalid: true,
+        message: 'There is an error',
+      },
+    });
+
+    const validationMessage = wrapper.find('.mc-field__validation-message');
+    expect(validationMessage.exists()).toBe(true);
+    expect(validationMessage.text()).toBe('There is an error');
+  });
+
+  it('should not render validation message when message is not provided', () => {
+    const wrapper = mount(MFieldGroup, {
+      props: {
+        id: 'input-id',
+        legend: 'Field Label',
+        isValid: true,
+      },
+    });
+
+    const validationMessage = wrapper.find('.mc-field__validation-message');
+    expect(validationMessage.exists()).toBe(false);
+  });
+});