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

package/src/components/checkboxgroup/MCheckboxGroup.spec.ts

@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MCheckboxGroup from './MCheckboxGroup.vue';
+import MCheckbox from '@/components/checkbox/MCheckbox.vue';
+
+describe('MCheckboxGroup.vue', () => {
+  it('renders checkboxes based on options', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MCheckboxGroup, {
+      props: {
+        name: 'test-name',
+        options,
+      },
+    });
+
+    const checkboxes = wrapper.findAllComponents(MCheckbox);
+    expect(checkboxes.length).toBe(2);
+
+    expect(checkboxes[0].props('label')).toBe('Option 1');
+    expect(checkboxes[1].props('label')).toBe('Option 2');
+  });
+
+  it('updates modelValue when a checkbox is checked', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MCheckboxGroup, {
+      props: {
+        name: 'test-name',
+        options,
+        modelValue: [],
+      },
+    });
+
+    const checkbox1 = wrapper.findAllComponents(MCheckbox)[0].find('input');
+    await checkbox1.setChecked(true);
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([['option1']]);
+
+    const checkbox2 = wrapper.findAllComponents(MCheckbox)[1].find('input');
+    await checkbox2.setChecked(true);
+
+    expect(wrapper.emitted('update:modelValue')[1]).toEqual([
+      ['option1', 'option2'],
+    ]);
+  });
+
+  it('syncs with the v-model when initial value is passed', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MCheckboxGroup, {
+      props: {
+        name: 'test-name',
+        options,
+        modelValue: ['option1'],
+      },
+    });
+
+    const checkboxes = wrapper.findAllComponents(MCheckbox);
+    expect(checkboxes[0].props('modelValue')).toBe(true);
+    expect(checkboxes[1].props('modelValue')).toBe(false);
+
+    await wrapper.setProps({ modelValue: ['option2'] });
+
+    expect(checkboxes[0].props('modelValue')).toBe(false);
+    expect(checkboxes[1].props('modelValue')).toBe(true);
+  });
+});

package/src/components/checkboxgroup/MCheckboxGroup.stories.ts

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MCheckboxGroup from './MCheckboxGroup.vue';
+
+const meta: Meta<typeof MCheckboxGroup> = {
+  title: 'Form Elements/Checkbox Group',
+  component: MCheckboxGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.<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 Group section](/docs/form-elements-field-group--docs#checkbox%20group).',
+      },
+    },
+  },
+  args: {
+    name: 'checkboxGroupName',
+    modelValue: ['checkbox2'],
+    options: [
+      {
+        id: 'checkbox-01',
+        label: 'checkbox Label',
+        value: 'checkbox1',
+      },
+      {
+        id: 'checkbox-02',
+        label: 'checkbox Label',
+        value: 'checkbox2',
+      },
+      {
+        id: 'checkbox-03',
+        label: 'checkbox Label',
+        value: 'checkbox3',
+      },
+      {
+        id: 'checkbox-04',
+        label: 'checkbox Label',
+        value: 'checkbox4',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MCheckboxGroup },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MCheckboxGroup 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MCheckboxGroup>;
+
+export const Default: Story = {};

package/src/components/checkboxgroup/MCheckboxGroup.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="mc-field__container" :class="classObjectContainer">
+    <MCheckbox
+      v-for="option in options"
+      :id="option.id"
+      :key="option.id"
+      :label="option.label"
+      :is-invalid="option.isInvalid"
+      :name="name"
+      class="mc-field__item"
+      :class="classObjectItem"
+      :model-value="modelValue ? modelValue.includes(option.value) : undefined"
+      :disabled="option.disabled"
+      @update:model-value="(v: boolean) => onChange(v, option.value)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import MCheckbox from '../checkbox/MCheckbox.vue';
+
+/**
+ * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.
+ */
+const props = defineProps<{
+  /**
+   * The name attribute for the radio element, typically used for form submission.
+   */
+  name: string;
+  /**
+   * Property used to manage the values checked by v-model
+   * (Do not use directly)
+   */
+  modelValue?: Array<string>;
+  /**
+   * list of properties of each radio button of the radio group
+   */
+  options: Array<{
+    id: string;
+    label: string;
+    value: string;
+    disabled?: boolean;
+    isInvalid?: boolean;
+  }>;
+  /**
+   * If `true`, make the form element of the group inline.
+   */
+  inline?: boolean;
+}>();
+
+const selectedValue = ref<string[]>([]);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedValue.value = newValue || [];
+  },
+  { immediate: true },
+);
+
+const onChange = (isChecked: boolean, value: string) => {
+  let values = [...selectedValue.value];
+
+  if (isChecked && !values.includes(value)) {
+    values.push(value);
+  } else {
+    values = values.filter((val) => val !== value);
+  }
+
+  emit('update:modelValue', values);
+  selectedValue.value = values;
+};
+
+const classObjectContainer = computed(() => {
+  return {
+    'mc-field__container--inline': props.inline,
+  };
+});
+
+const classObjectItem = computed(() => {
+  return {
+    'mc-field__container--inline__item': props.inline,
+  };
+});
+
+const emit = defineEmits<{
+  /**
+   * Emits when the checkbox group value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: Array<string>): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/field';
+</style>

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

@@ -0,0 +1,166 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MField from './MField.vue';
+
+describe('MField component', () => {
+  it('should render label correctly', () => {
+    const wrapper = mount(MField, {
+      props: {
+        id: 'input-id',
+        label: 'Field Label',
+      },
+    });
+
+    const label = wrapper.find('label');
+    expect(label.exists()).toBe(true);
+    expect(label.text()).toBe('Field Label');
+  });
+
+  it('should render requirement text if provided', () => {
+    const wrapper = mount(MField, {
+      props: {
+        id: 'input-id',
+        label: '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(MField, {
+      props: {
+        id: 'input-id',
+        label: 'Field Label',
+      },
+    });
+
+    const requirementText = wrapper.find('.mc-field__requirement');
+    expect(requirementText.exists()).toBe(false);
+  });
+
+  it('should render help text if provided', () => {
+    const wrapper = mount(MField, {
+      props: {
+        id: 'input-id',
+        label: 'Field Label',
+        helpText: 'This is some help text.',
+        helpId: 'help-id',
+      },
+    });
+
+    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(MField, {
+      props: {
+        id: 'input-id',
+        label: '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(MField, {
+      props: {
+        id: 'input-id',
+        label: '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(MField, {
+      props: {
+        id: 'input-id',
+        label: '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(MField, {
+      props: {
+        id: 'input-id',
+        label: '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(MField, {
+      props: {
+        id: 'input-id',
+        label: '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(MField, {
+      props: {
+        id: 'input-id',
+        label: '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(MField, {
+      props: {
+        id: 'input-id',
+        label: 'Field Label',
+        isValid: true,
+      },
+    });
+
+    const validationMessage = wrapper.find('.mc-field__validation-message');
+    expect(validationMessage.exists()).toBe(false);
+  });
+});