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

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';
+import { action } from '@storybook/addon-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',
+  },
+};

package/src/components/checkbox/MCheckbox.vue

@@ -1,118 +1,77 @@
 <template>
-  <div v-if="hasLabel" class="mc-checkbox">
+  <div class="mc-checkbox">
     <input
-      v-bind="$attrs"
       :id="id"
-      ref="input"
-      :name="name"
       type="checkbox"
       class="mc-checkbox__input"
-      :class="setInputClasses"
-      :checked="checked"
-      :required="required"
+      :class="classObject"
+      :name="name"
+      :checked="modelValue"
+      :indeterminate="indeterminate"
       :disabled="disabled"
-      @change="$emit('change', $event.target.checked)"
+      :aria-invalid="isInvalid"
+      v-bind="$attrs"
+      @change="
+        emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+      "
     />
-    <label :for="id" class="mc-checkbox__label">
-      <slot name="label">
-        {{ label }}
-      </slot>
+    <label v-if="label" :for="id" class="mc-checkbox__label">
+      {{ label }}
     </label>
   </div>
-
-  <input
-    v-else
-    v-bind="$attrs"
-    :id="id"
-    ref="input"
-    :name="name"
-    type="checkbox"
-    class="mc-checkbox__input"
-    :class="setInputClasses"
-    :checked="checked"
-    :required="required"
-    :disabled="disabled"
-    @change="$emit('change', $event.target.checked)"
-  />
 </template>
 
-<script>
-export default {
-  name: 'MCheckbox',
-
-  inheritAttrs: false,
-
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      default: null,
-    },
-    label: {
-      type: String,
-      default: null,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    indeterminate: {
-      type: Boolean,
-      default: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  computed: {
-    hasLabel() {
-      return this.label != null || this.$slots.label != null;
-    },
-
-    setInputClasses() {
-      return {
-        'is-invalid': this.isInvalid,
-      };
-    },
-  },
+<script setup lang="ts">
+import { computed } from 'vue';
 
-  watch: {
-    indeterminate() {
-      this.setIndeterminate();
-    },
-  },
+/**
+ * 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<{
+  /**
+   * A unique identifier for the checkbox, used to associate the label with the form element.
+   */
+  id: string;
+  /**
+   * The name attribute for the checkbox element, typically used for form submission.
+   */
+  name?: string;
+  /**
+   * The text label displayed next to the checkbox.
+   */
+  label?: string;
+  /**
+   * The checkbox's checked state, bound via v-model.
+   */
+  modelValue?: boolean;
+  /**
+   * Sets the checkbox to an indeterminate state (partially selected).
+   */
+  indeterminate?: boolean;
+  /**
+   * If `true`, applies an invalid state to the checkbox.
+   */
+  isInvalid?: boolean;
+  /**
+   * If `true`, disables the checkbox, making it non-interactive.
+   */
+  disabled?: boolean;
+}>();
 
-  mounted() {
-    this.setIndeterminate();
-  },
+const classObject = computed(() => {
+  return {
+    'is-invalid': props.isInvalid,
+  };
+});
 
-  methods: {
-    setIndeterminate() {
-      this.$refs.input.indeterminate = this.indeterminate;
-    },
-  },
-};
+const emit = defineEmits<{
+  /**
+   * Emits when the checkbox value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: boolean): void;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/c.checkbox';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/checkbox';
 </style>