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

package/src/components/button/MButton.spec.ts

@@ -0,0 +1,191 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MButton from './MButton.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import MLoader from '../loader/MLoader.vue';
+
+describe('MButton component', () => {
+  it('renders with a label', () => {
+    const wrapper = mount(MButton, {
+      slots: {
+        default: 'Click Me',
+      },
+    });
+    expect(wrapper.text()).toContain('Click Me');
+  });
+
+  it('applies the correct appearance class based on the appearance prop', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        appearance: 'accent',
+      },
+      slots: {
+        default: 'Styled Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--accent');
+  });
+
+  it('applies the correct size class based on the size prop', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        label: 'Sized Button',
+        size: 'l',
+      },
+      slots: {
+        default: 'Sized Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--l');
+  });
+
+  it('disables the button when the disabled prop is true', async () => {
+    const wrapper = mount(MButton, {
+      props: {
+        disabled: true,
+      },
+      slots: {
+        default: 'Disabled Button',
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('disabled')).toBeDefined();
+  });
+
+  it('applies the correct ghost class when ghost prop is true', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        ghost: true,
+      },
+      slots: {
+        default: 'Ghost Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--ghost');
+  });
+
+  it('applies the outlined class when outlined prop is true', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        outlined: true,
+      },
+      slots: {
+        default: 'Outlined Button',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-button--outlined');
+  });
+
+  it('has type="button" by default', () => {
+    const wrapper = mount(MButton, {
+      slots: {
+        default: 'Default Button',
+      },
+    });
+
+    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(MButton, {
+      props: {
+        type: 'submit',
+      },
+      slots: {
+        default: 'Submit Button',
+      },
+    });
+
+    const button = wrapper.find('button');
+    expect(button.attributes('type')).toBe('submit');
+  });
+
+  it('renders with an icon in the left position', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        iconPosition: 'left',
+      },
+      slots: {
+        default: 'Button with Icon',
+        icon: ChevronRight24,
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('renders with an icon in the right position', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        iconPosition: 'right',
+      },
+      slots: {
+        default: 'Button with Icon',
+        icon: ChevronRight24,
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('renders with only an icon when iconPosition is "only"', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        iconPosition: 'only',
+      },
+      slots: {
+        default: 'Icon Only Button',
+        icon: ChevronRight24,
+      },
+    });
+
+    const icon = wrapper.findComponent(ChevronRight24);
+    expect(icon.exists()).toBe(true);
+
+    const label = wrapper.find('.mc-button__label');
+    expect(label.exists()).toBe(false);
+  });
+
+  it('renders loader when isLoading prop is true', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        isLoading: true,
+      },
+      slots: {
+        default: 'Loading Button',
+      },
+    });
+
+    const loader = wrapper.findComponent(MLoader);
+    expect(loader.exists()).toBe(true);
+
+    const label = wrapper.find('.mc-button__label');
+    expect(label.attributes('style')).toContain('visibility: hidden');
+  });
+
+  it('does not render loader when isLoading prop is false', () => {
+    const wrapper = mount(MButton, {
+      props: {
+        isLoading: false,
+      },
+      slots: {
+        default: 'Normal Button',
+      },
+    });
+
+    const loader = wrapper.findComponent(MLoader);
+    expect(loader.exists()).toBe(false);
+
+    const label = wrapper.find('.mc-button__label');
+    expect(label.exists()).toBe(true);
+    expect(label.text()).toBe('Normal Button');
+  });
+});

package/src/components/button/MButton.stories.ts

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import MButton from './MButton.vue';
+import Download24 from '@mozaic-ds/icons-vue/src/components/Download24/Download24.vue';
+import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+
+const meta: Meta<typeof MButton> = {
+  title: 'Action/Button',
+  component: MButton,
+  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: { default: 'Button Label' },
+  render: (args) => ({
+    components: { MButton, Download24, ChevronRight24 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MButton 
+        v-bind="args"
+      >
+        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+      </MButton>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MButton>;
+
+export const Filled: Story = {};
+
+export const Outline: Story = {
+  args: { outlined: true },
+};
+
+export const Ghost: Story = {
+  args: { ghost: true },
+};
+
+export const Icon: Story = {
+  args: {
+    iconPosition: 'left',
+    icon: '<ChevronRight24/>',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    ariaLabel: 'Loading button',
+  },
+};

package/src/components/button/MButton.vue

@@ -1,169 +1,113 @@
 <template>
-  <a v-if="href" :href="href" class="mc-button" :class="setClasses" :aria-label="ariaLabel">
-    <m-icon
-      v-if="icon && iconPosition === 'left'"
-      :id="`mc-button__${iconPosition}-icon-${id}`"
-      :class="`mc-button__icon mc-button__icon--${iconPosition}`"
-      :name="icon"
-    />
-    <span v-if="label" class="mc-button__label">
-      {{ label }}
-    </span>
-    <m-icon
-      v-if="icon && iconPosition === 'right'"
-      :id="`mc-button__${iconPosition}-icon-${id}`"
-      :class="`mc-button__icon mc-button__icon--${iconPosition}`"
-      :name="icon"
-    />
-  </a>
   <button
-    v-else
     class="mc-button"
+    :class="classObject"
     :disabled="disabled"
-    :class="setClasses"
-    :aria-label="ariaLabel"
-    @click="$emit('click', $event)"
+    :type="type"
   >
-    <m-icon
-      v-if="icon && iconPosition === 'left'"
-      :id="`mc-button__${iconPosition}-icon-${id}`"
-      :class="`mc-button__icon mc-button__icon--${iconPosition}`"
-      :name="icon"
-    />
-    <span v-if="label" class="mc-button__label">
-      {{ label }}
+    <span
+      v-if="$slots.icon && iconPosition == 'left' && !isLoading"
+      class="mc-button__icon"
+    >
+      <slot name="icon" />
+    </span>
+    <span
+      v-if="isLoading"
+      class="mc-button__icon"
+      :style="{ position: 'absolute' }"
+    >
+      <MLoader :style="{ color: 'currentColor' }" size="s" />
+    </span>
+    <span v-if="$slots.icon && iconPosition == 'only'" class="mc-button__icon">
+      <slot name="icon" />
+    </span>
+    <span
+      v-else
+      class="mc-button__label"
+      :style="{ visibility: isLoading ? 'hidden' : 'visible' }"
+    >
+      <slot>Button Label</slot>
+    </span>
+    <span
+      v-if="$slots.icon && iconPosition == 'right' && !isLoading"
+      class="mc-button__icon"
+    >
+      <slot name="icon" />
     </span>
-    <m-icon
-      v-if="icon && iconPosition === 'right'"
-      :id="`mc-button__${iconPosition}-icon-${id}`"
-      :class="`mc-button__icon mc-button__icon--${iconPosition}`"
-      :name="icon"
-    />
   </button>
 </template>
 
-<script>
-import {
-  responsiveModifiers,
-  responsiveModifierValidators,
-} from '../../utils/mozaicClasses';
-import MIcon from '../icon/MIcon.vue';
-
-export default {
-  name: 'MButton',
-
-  components: {
-    MIcon,
-  },
-
-  props: {
-    label: {
-      type: String,
-      default: null,
-    },
-    href: {
-      type: String,
-      default: null,
-    },
-    theme: {
-      type: String,
-      default: null,
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) =>
-        responsiveModifierValidators(value, [
-          's',
-          's@from-m',
-          's@from-l',
-          's@from-xl',
-          's@from-xxl',
-          'm',
-          'm@from-m',
-          'm@from-l',
-          'm@from-xl',
-          'm@from-xxl',
-          'l',
-          'l@from-m',
-          'l@from-l',
-          'l@from-xl',
-          'l@from-xxl',
-        ]),
-    },
-    width: {
-      type: String,
-      default: null,
-      validator: (value) =>
-        responsiveModifierValidators(value, [
-          'fit',
-          'fit@from-m',
-          'fit@from-l',
-          'fit@from-xl',
-          'fit@from-xxl',
-          'full',
-          'full@from-m',
-          'full@from-l',
-          'full@from-xl',
-          'full@from-xxl',
-        ]),
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    iconPosition: {
-      type: String,
-      default: 'left',
-      validator: (value) => ['left', 'right'].includes(value),
-    },
-    ariaLabel: {
-      type: String,
-      default: null,
-    },
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+import MLoader from '../loader/MLoader.vue';
+/**
+ * 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 button.
+     */
+    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
+    /**
+     * Determines the size of the button.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * If `true`, disables the button, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, applies a "ghost" style to the button, typically a transparent background with a border.
+     */
+    ghost?: boolean;
+    /**
+     * If `true`, the button gets an outlined style, usually with just the border and no solid background.
+     */
+    outlined?: boolean;
+    /**
+     * Controls the positioning of an icon in the button.
+     */
+    iconPosition?: 'left' | 'right' | 'only';
+    /**
+     * Specifies the button's HTML `type` attribute.
+     */
+    type?: 'button' | 'reset' | 'submit';
+    /**
+     * If `true`, a loading state is displayed.
+     */
+    isLoading?: boolean;
+  }>(),
+  {
+    appearance: 'standard',
+    size: 'm',
+    type: 'button',
   },
+);
 
-  data() {
-    return {
-      id: null,
-    };
-  },
-
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.theme) {
-        classes.push(`mc-button--${this.theme}`);
-      }
-
-      if (this.size) {
-        responsiveModifiers('mc-button', this.size, classes);
-      }
-
-      if (this.width) {
-        responsiveModifiers('mc-button', this.width, classes);
-      }
+defineSlots<{
+  /**
+   * The content displayed in the button.
+   */
+  default: string;
+  /**
+   * Use this slot to insert an icon for the Button
+   */
+  icon?: VNode;
+}>();
 
-      if (!this.label) {
-        classes.push('mc-button--square');
-      }
-
-      return classes;
-    },
-  },
-
-  created() {
-    this.id = this._uid;
-  },
-};
+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,
+    'mc-button--icon-only': props.iconPosition == 'only',
+  };
+});
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/c.button';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/button';
 </style>

package/src/components/checkbox/MCheckbox.spec.ts

@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils';
+import MCheckbox from './MCheckbox.vue';
+import { describe, it, expect } from 'vitest';
+
+describe('MCheckbox', () => {
+  it('renders with label', () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        label: 'Accept terms',
+        modelValue: false,
+      },
+    });
+
+    expect(wrapper.find('label').text()).toBe('Accept terms');
+  });
+
+  it('renders the checkbox as checked when modelValue is true', () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        modelValue: true,
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    expect(checkbox.element.checked).toBe(true);
+  });
+
+  it('renders the checkbox as unchecked when modelValue is false', () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        modelValue: false,
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    expect(checkbox.element.checked).toBe(false);
+  });
+
+  it('emits update:modelValue when clicked', async () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        modelValue: false,
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    await checkbox.setChecked(true);
+
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+  });
+
+  it('emits update:modelValue when unchecked', async () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        modelValue: true,
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    await checkbox.setChecked(false);
+
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([false]);
+  });
+
+  it('is disabled when the disabled prop is true', () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        disabled: true,
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    expect(checkbox.element.disabled).toBe(true);
+  });
+
+  it('sets the indeterminate state correctly', () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        indeterminate: true,
+      },
+    });
+
+    const checkbox = wrapper.find('input');
+    expect(checkbox.element.indeterminate).toBe(true);
+  });
+
+  it('applies is-invalid class when isInvalid is true', () => {
+    const wrapper = mount(MCheckbox, {
+      props: {
+        id: 'test-checkbox',
+        isInvalid: true,
+      },
+    });
+
+    expect(wrapper.find('input').classes()).toContain('is-invalid');
+  });
+});

package/src/components/checkbox/MCheckbox.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MCheckbox from './MCheckbox.vue';
+
+const meta: Meta<typeof MCheckbox> = {
+  title: 'Form Elements/Checkbox',
+  component: MCheckbox,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.',
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    id: 'checkboxId',
+  },
+  render: (args) => ({
+    components: { MCheckbox },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MCheckbox 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MCheckbox>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: {
+    modelValue: true,
+    id: 'checkedId',
+  },
+};
+
+export const Indeterminate: Story = {
+  args: {
+    indeterminate: true,
+    id: 'IndeterminateId',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    id: 'disabledId',
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    isInvalid: true,
+    id: 'invalidId',
+  },
+};
+
+export const IndeterminateDisabled: Story = {
+  args: {
+    indeterminate: true,
+    disabled: true,
+    id: 'checkedIndeterminateId',
+  },
+};
+
+export const CheckedDisabled: Story = {
+  args: {
+    modelValue: true,
+    disabled: true,
+    id: 'checkedDisabledId',
+  },
+};