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

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

@@ -0,0 +1,423 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-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"
+      />
+    `,
+  },
+  argTypes: {
+    $slots: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  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/iconbutton/MIconButton.spec.ts

@@ -0,0 +1,108 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MIconButton from './MIconButton.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+
+describe('MButton component', () => {
+  it('renders with an icon', () => {
+    const wrapper = mount(MIconButton, {
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('applies the correct appearance class based on the appearance prop', () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        appearance: 'accent',
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--accent');
+  });
+
+  it('applies the correct size class based on the size prop', () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        size: 'l',
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--l');
+  });
+
+  it('disables the button when the disabled prop is true', async () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        disabled: true,
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('disabled')).toBeDefined();
+  });
+
+  it('applies the correct ghost class when ghost prop is true', () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        ghost: true,
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--ghost');
+  });
+
+  it('applies the outlined class when outlined prop is true', () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        outlined: true,
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--outlined');
+  });
+
+  it('has type="button" by default', () => {
+    const wrapper = mount(MIconButton, {
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('type')).toBe('button');
+  });
+
+  it('can have type="submit" when the type prop is "submit"', () => {
+    const wrapper = mount(MIconButton, {
+      props: {
+        type: 'submit',
+      },
+      slots: {
+        icon: [ChevronRight24],
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('type')).toBe('submit');
+  });
+});

package/src/components/iconbutton/MIconButton.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import MIconButton from './MIconButton.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+
+const meta: Meta<typeof MIconButton> = {
+  title: 'Action/Icon Button',
+  component: MIconButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.',
+      },
+    },
+  },
+  args: {
+    icon: '<ChevronRight24/>',
+    ariaLabel: 'Go to next page',
+  },
+  argTypes: {
+    ariaLabel: {
+      table: {
+        disable: true,
+      },
+    },
+    $slots: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MIconButton, ChevronRight24 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MIconButton 
+        v-bind="args"
+      >
+        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
+      </MIconButton>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MIconButton>;
+
+export const Standard: Story = {};
+
+export const Outline: Story = {
+  args: { outlined: true },
+};
+
+export const Ghost: Story = {
+  args: { ghost: true },
+};
+
+export const SizeS: Story = {
+  args: { size: 's' },
+};
+
+export const SizeL: Story = {
+  args: { size: 'l' },
+};