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

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:
+          'A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.<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-group).',
+      },
+    },
+  },
+  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 checkbox 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 checkbox button of the checkbox 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);
+  });
+});