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

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

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

@@ -0,0 +1,416 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MFieldGroup from './MFieldGroup.vue';
+import MCheckboxGroup from '../checkboxgroup/MCheckboxGroup.vue';
+import MRadioGroup from '../radiogroup/MRadioGroup.vue';
+import MToggleGroup from '../togglegroup/MToggleGroup.vue';
+
+const meta: Meta<typeof MFieldGroup> = {
+  title: 'Form Elements/Field Group',
+  component: MFieldGroup,
+  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.',
+      },
+    },
+  },
+  args: {
+    legend: 'Label',
+    id: 'ReplaceByInputId',
+    requirementText: 'required',
+    helpText: 'Help text',
+    default: `
+      <MCheckboxGroup
+        name="checkboxGroupName"
+        :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',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+  render: (args) => ({
+    components: { MFieldGroup, MCheckboxGroup, MRadioGroup, MToggleGroup },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MFieldGroup v-bind="args">
+        ${args.default}
+      </MFieldGroup>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MFieldGroup>;
+
+export const Default: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ReplaceByInputId',
+    helpText: 'Help text',
+    requirementText: 'optional',
+    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>
+    `,
+  },
+  render: (args) => ({
+    components: { MFieldGroup },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MFieldGroup v-bind="args">
+        ${args.default}
+      </MFieldGroup>
+    `,
+  }),
+};
+
+export const CheckboxGroup: Story = {};
+
+export const CheckboxGroupValid: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ReplaceByInputId',
+    requirementText: 'required',
+    isValid: true,
+    message: 'Validation message (Be concise and use comprehensive words).',
+    default: `
+      <MCheckboxGroup
+        name="checkboxGroupName"
+        :options="
+          [
+            {
+              id: 'checkbox-05',
+              label: 'checkbox Label',
+              value: 'checkbox5',
+            },
+            {
+              id: 'checkbox-06',
+              label: 'checkbox Label',
+              value: 'checkbox6',
+            },
+            {
+              id: 'checkbox-07',
+              label: 'checkbox Label',
+              value: 'checkbox7',
+            },
+            {
+              id: 'checkbox-08',
+              label: 'checkbox Label',
+              value: 'checkbox8',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const CheckboxGroupInvalid: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ReplaceByInputId',
+    requirementText: 'required',
+    isInvalid: true,
+    message: 'Error message (Be concise and use comprehensive words)',
+    default: `
+      <MCheckboxGroup
+        name="checkboxGroupName"
+        isInvalid
+        :options="
+          [
+            {
+              id: 'checkbox-09',
+              label: 'checkbox Label',
+              value: 'checkbox9',
+            },
+            {
+              id: 'checkbox-10',
+              label: 'checkbox Label',
+              value: 'checkbox10',
+            },
+            {
+              id: 'checkbox-11',
+              label: 'checkbox Label',
+              value: 'checkbox11',
+            },
+            {
+              id: 'checkbox-12',
+              label: 'checkbox Label',
+              value: 'checkbox12',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const RadioGroup: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ReplaceByInputId',
+    default: `
+      <MRadioGroup
+        name="radioGroupName"
+        :options="
+          [
+            {
+              id: 'radio-01',
+              label: 'Radio button Label',
+              value: 'radio1'
+            },
+            {
+              id: 'radio-02',
+              label: 'Radio button Label',
+              value: 'radio2'
+            },
+            {
+              id: 'radio-03',
+              label: 'Radio button Label',
+              value: 'radio3'
+            },
+            {
+              id: 'radio-04',
+              label: 'Radio button Label',
+              value: 'radio4'
+            }
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const RadioGroupValid: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ReplaceByInputId',
+    requirementText: 'required',
+    isValid: true,
+    message: 'Validation message (Be concise and use comprehensive words).',
+    default: `
+      <MRadioGroup
+        name="radioGroupValidName"
+        :options="
+          [
+            {
+              id: 'radio05',
+              label: 'Radio button Label',
+              value: 'radio5'
+            },
+            {
+              id: 'radio06',
+              label: 'Radio button Label',
+              value: 'radio6'
+            },
+            {
+              id: 'radio07',
+              label: 'Radio button Label',
+              value: 'radio7'
+            },
+            {
+              id: 'radio08',
+              label: 'Radio button Label',
+              value: 'radio8'
+            }
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const RadioGroupInvalid: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ReplaceByInputId',
+    requirementText: 'required',
+    isInvalid: true,
+    message: 'Error message (Be concise and use comprehensive words)',
+    default: `
+      <MRadioGroup
+        name="radioGroupInvalidName"
+        isInvalid
+        :options="
+          [
+            {
+              id: 'radio-9',
+              label: 'Radio button Label',
+              value: 'radio9'
+            },
+            {
+              id: 'radio-10',
+              label: 'Radio button Label',
+              value: 'radio10'
+            },
+            {
+              id: 'radio-11',
+              label: 'Radio button Label',
+              value: 'radio11'
+            },
+            {
+              id: 'radio-12',
+              label: 'Radio button Label',
+              value: 'radio12'
+            }
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const ToggleGroup: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ToggleGroupId',
+    requirementText: 'required',
+    default: `
+      <MToggleGroup
+        name="ToggleGroupName"
+        :options="
+          [
+            {
+              id: 'toggle-01',
+              label: 'Toggle Label',
+              value: 'toggle1',
+            },
+            {
+              id: 'toggle-02',
+              label: 'Toggle Label',
+              value: 'toggle2',
+            },
+            {
+              id: 'toggle-03',
+              label: 'Toggle Label',
+              value: 'toggle3',
+            },
+            {
+              id: 'toggle-04',
+              label: 'Toggle Label',
+              value: 'toggle4',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const ToggleGroupValid: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ToggleGroupId',
+    requirementText: 'required',
+    isValid: true,
+    message: 'Validation message (Be concise and use comprehensive words).',
+    default: `
+      <MToggleGroup
+        name="ToggleGroupName"
+        :options="
+          [
+            {
+              id: 'toggle-05',
+              label: 'Toggle Label',
+              value: 'toggle5',
+            },
+            {
+              id: 'toggle-06',
+              label: 'Toggle Label',
+              value: 'toggle6',
+            },
+            {
+              id: 'toggle-07',
+              label: 'Toggle Label',
+              value: 'toggle7',
+            },
+            {
+              id: 'toggle-08',
+              label: 'Toggle Label',
+              value: 'toggle8',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
+export const ToggleGroupInvalid: Story = {
+  args: {
+    legend: 'Label',
+    id: 'ToggleGroupId',
+    requirementText: 'required',
+    isInvalid: true,
+    message: 'Error message (Be concise and use comprehensive words)',
+    default: `
+      <MToggleGroup
+        name="ToggleGroupName"
+        :options="
+          [
+            {
+              id: 'toggle-09',
+              label: 'Toggle Label',
+              value: 'toggle9',
+            },
+            {
+              id: 'toggle-10',
+              label: 'Toggle Label',
+              value: 'toggle10',
+            },
+            {
+              id: 'toggle-11',
+              label: 'Toggle Label',
+              value: 'toggle11',
+            },
+            {
+              id: 'toggle-12',
+              label: 'Toggle Label',
+              value: 'toggle12',
+            },
+          ]
+        "
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};

package/src/components/fieldgroup/MFieldGroup.vue

@@ -0,0 +1,79 @@
+<template>
+  <fieldset class="mc-field--group">
+    <legend class="mc-field__legend" :for="id">
+      {{ legend }}
+      <span v-if="requirementText" class="mc-field__requirement"
+        >({{ requirementText }})</span
+      >
+    </legend>
+
+    <span v-if="helpText" class="mc-field__help">{{ helpText }}</span>
+
+    <div class="mc-field__content">
+      <slot />
+    </div>
+
+    <span
+      v-if="(isValid || isInvalid) && message"
+      class="mc-field__validation-message"
+      :class="classObjectValidation"
+    >
+      {{ message }}
+    </span>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+/**
+ * This component creates a structured form field for group field such as Radio Group, Checkbox Group or Toggle Group 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 legend for the form fieldset.
+   */
+  legend: 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;
+  /**
+   * If `true`, applies a valid state to the form field.
+   */
+  isValid?: boolean;
+  /**
+   * If `true`, applies an invalid state to the form field.
+   */
+  isInvalid?: boolean;
+  /**
+   * 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" scoped>
+@use '@mozaic-ds/styles/components/field';
+</style>

package/src/components/flag/MFlag.spec.ts

@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import Flag from './MFlag.vue';
+
+describe('Flag component', () => {
+  it('renders the label correctly', () => {
+    const wrapper = mount(Flag, {
+      props: {
+        label: 'New',
+      },
+    });
+    expect(wrapper.text()).toContain('New');
+  });
+
+  it('applies no modifier class when appearance is standard or undefined', () => {
+    const wrapperDefault = mount(Flag, {
+      props: {
+        label: 'Default',
+      },
+    });
+    expect(wrapperDefault.classes()).not.toContain('mc-flag--standard');
+
+    const wrapperStandard = mount(Flag, {
+      props: {
+        label: 'Standard',
+        appearance: 'standard',
+      },
+    });
+    expect(wrapperStandard.classes()).not.toContain('mc-flag--standard');
+  });
+
+  it('applies correct modifier class for non-standard appearance', () => {
+    const appearances = ['danger', 'accent', 'inverse'] as const;
+
+    appearances.forEach((appearance) => {
+      const wrapper = mount(Flag, {
+        props: {
+          label: `Label ${appearance}`,
+          appearance,
+        },
+      });
+
+      expect(wrapper.classes()).toContain(`mc-flag--${appearance}`);
+    });
+  });
+});