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

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

@@ -0,0 +1,274 @@
+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';
+
+const meta: Meta<typeof MFieldGroup> = {
+  title: 'Form Elements/Field Group',
+  component: MFieldGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'the Field Group 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.',
+      },
+    },
+  },
+  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 },
+    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).',
+  },
+};
+
+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-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"
+      />
+    `,
+  },
+};
+
+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: 'radio01',
+              label: 'Radio button Label',
+              value: 'radio1'
+            },
+            {
+              id: 'radio02',
+              label: 'Radio button Label',
+              value: 'radio2'
+            },
+            {
+              id: 'radio03',
+              label: 'Radio button Label',
+              value: 'radio3'
+            },
+            {
+              id: 'radio04',
+              label: 'Radio button Label',
+              value: 'radio4'
+            }
+          ]
+        "
+        @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-1',
+              label: 'Radio button Label',
+              value: 'radio1'
+            },
+            {
+              id: 'radio-2',
+              label: 'Radio button Label',
+              value: 'radio2'
+            },
+            {
+              id: 'radio-3',
+              label: 'Radio button Label',
+              value: 'radio3'
+            },
+            {
+              id: 'radio-4',
+              label: 'Radio button Label',
+              value: 'radio4'
+            }
+          ]
+        "
+        @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:
+          'Icon Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.',
+      },
+    },
+  },
+  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' },
+};

package/src/components/iconbutton/MIconButton.vue

@@ -0,0 +1,73 @@
+<template>
+  <button
+    class="mc-button mc-button--icon-button"
+    :class="classObject"
+    :disabled="disabled"
+    :type="type"
+  >
+    <span class="mc-button__icon">
+      <slot name="icon" />
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+/**
+ * Icon Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Defines the visual style of the icon button.
+     */
+    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
+    /**
+     * Determines the size of the icon button.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * If `true`, disables the icon button, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, applies a "ghost" style to the icon button.
+     */
+    ghost?: boolean;
+    /**
+     * If `true`, the icon button gets an outlined style.
+     */
+    outlined?: boolean;
+    /**
+     * Specifies the button's HTML `type` attribute.
+     */
+    type?: 'button' | 'reset' | 'submit';
+  }>(),
+  {
+    appearance: 'standard',
+    size: 'm',
+    type: 'button',
+  },
+);
+
+defineSlots<{
+  /**
+   * Use this slot to insert the form element of your choice
+   */
+  icon: VNode;
+}>();
+
+const classObject = computed(() => {
+  return {
+    [`mc-button--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+    [`mc-button--${props.size}`]: props.size && props.size != 'm',
+    'mc-button--ghost': props.ghost,
+    'mc-button--outlined': props.outlined,
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/button';
+</style>