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

package/src/components/quantityselector/MQuantitySelector.vue

@@ -1,166 +1,177 @@
 <template>
-  <div class="mc-quantity-selector" :class="cssFieldElementClass">
-    <m-button
-      class="mc-quantity-selector__button-left"
-      theme="bordered"
-      icon="ControlLess32"
-      icon-position="left"
-      :aria-label="decrementAriaLabel"
-      :aria-controls="id"
-      :disabled="disabled ? disabled : currentValue === valuemin"
-      :size="small ? 's' : null"
-      tabindex="-1"
-      type="button"
-      @click="decrement()"
-    />
-
-    <MTextInputField
+  <div class="mc-quantity-selector" :class="classObject">
+    <input
       :id="id"
-      ref="input"
-      :value="currentValue"
+      v-model="currentValue"
+      class="mc-quantity-selector__control"
       type="number"
-      class="mc-quantity-selector__input"
-      name="quantity-selector-input"
-      :aria-label="inputAriaLabel"
-      :aria-valuenow="currentValue"
-      :aria-valuemin="valuemin"
-      :aria-valuemax="valuemax"
-      :placeholder="placeholder"
-      :size="small ? 's' : null"
+      :name="name"
       :disabled="disabled"
-      role="spinbutton"
-      @change="handle"
-      @focus="onFocus"
-      @keypress="integerOnly && formatValue($event)"
-      v-on="$listeners"
+      :min="min"
+      :max="max"
+      :step="step"
+      :readonly="readonly"
+      :aria-invalid="isInvalid"
+      :aria-valuemin="min"
+      :aria-valuemax="max"
+      :aria-valuenow="currentValue"
+      v-bind="$attrs"
+      @change="onChange(Number(($event.target as HTMLInputElement).value))"
     />
-
-    <m-button
-      class="mc-quantity-selector__button-right"
-      theme="bordered"
-      icon="ControlMore32"
-      icon-position="right"
-      :aria-label="incrementAriaLabel"
+    <button
+      v-if="!readonly"
+      type="button"
       :aria-controls="id"
-      :disabled="disabled ? disabled : currentValue === valuemax"
-      :size="small ? 's' : null"
+      class="mc-quantity-selector__button mc-quantity-selector__button--increase"
       tabindex="-1"
+      :disabled="disabled || currentValue === max"
+      @click="increment"
+    >
+      <span class="mc-quantity-selector__icon">
+        <More24 />
+      </span>
+      <span class="mc-quantity-selector__label">{{ incrementlabel }}</span>
+    </button>
+    <button
+      v-if="!readonly"
       type="button"
-      @click="increment()"
-    />
+      :aria-controls="id"
+      class="mc-quantity-selector__button mc-quantity-selector__button--decrease"
+      tabindex="-1"
+      :disabled="disabled || currentValue === min"
+      @click="decrement"
+    >
+      <span class="mc-quantity-selector__icon">
+        <Less24 />
+      </span>
+      <span class="mc-quantity-selector__label">{{ decrementLabel }}</span>
+    </button>
   </div>
 </template>
 
-<script>
-import MButton from '../button/MButton.vue';
-import MTextInputField from '../textinput/MTextInputField.vue';
-
-export default {
-  name: 'MQuantitySelector',
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import More24 from '@mozaic-ds/icons-vue/src/components/More24/More24.vue';
+import Less24 from '@mozaic-ds/icons-vue/src/components/Less24/Less24.vue';
 
-  components: {
-    MButton,
-    MTextInputField,
-  },
-  inject: {
-    cssFieldElementClass: {
-      default: '',
-    },
-  },
-  props: {
-    id: {
-      type: String,
-      default: 'qty-selector',
-    },
-    value: {
-      type: Number,
-      default: 0,
-    },
-    inputAriaLabel: {
-      type: String,
-      default: 'Quantity Selector',
-    },
-    decrementAriaLabel: {
-      type: String,
-      default: 'Decrement',
-    },
-    incrementAriaLabel: {
-      type: String,
-      default: 'Increment',
-    },
-    valuemin: {
-      type: Number,
-      default: 1,
-    },
-    valuemax: {
-      type: Number,
-      default: 100,
-    },
-    placeholder: {
-      type: String,
-      default: null,
-    },
-    small: {
-      type: Boolean,
-      default: false,
-    },
-    integerOnly: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+/**
+ * The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the quantity selector element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the quantity selector element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the quantity selector field.
+     */
+    modelValue?: number;
+    /**
+     * If `true`, applies an invalid state to the quantity selector.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the quantity selector, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Determines the size of the quantity selector
+     */
+    size?: 's' | 'm';
+    /**
+     * Minimum acceptable value for the quantity selector.
+     */
+    min?: number;
+    /**
+     * Maximum acceptable value for the quantity selector.
+     */
+    max?: number;
+    /**
+     * Determines how much the value will change per click when the quantity is increased or decreased.
+     */
+    step?: number;
+    /**
+     * If `true`, the quantity selector is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * The label text for the increment button.
+     */
+    incrementlabel?: string;
+    /**
+     * The label text for the decrement button.
+     */
+    decrementLabel?: string;
+  }>(),
+  {
+    modelValue: 1,
+    min: 1,
+    max: 100,
+    step: 1,
+    size: 'm',
+    name: 'quantity-selector-input',
+    incrementlabel: 'Increment',
+    decrementLabel: 'Decrement',
   },
+);
 
-  data() {
-    return {
-      currentValue: this.value || this.valuemin,
-    };
-  },
-  watch: {
-    value() {
-      this.currentValue = this.value || this.valuemin;
-    },
-  },
-  methods: {
-    handle(value) {
-      this.currentValue = value;
-      if (this.currentValue > this.valuemax) {
-        this.currentValue = this.valuemax;
-      }
-      if (this.currentValue <= this.valuemin) {
-        this.currentValue = this.valuemin;
-      }
-      this.$emit('input', this.currentValue);
-    },
-    increment() {
-      if (this.currentValue < this.valuemax) {
-        this.currentValue++;
-        this.$emit('increment', this.currentValue);
-      }
-    },
-    decrement() {
-      if (this.currentValue > this.valuemin) {
-        this.currentValue--;
-        this.$emit('decrement', this.currentValue);
-      }
-    },
-    formatValue(e) {
-      const INTEGER_ONLY_REGEX = /[0-9/]+/;
-      if (!INTEGER_ONLY_REGEX.test(e.key)) {
-        e.preventDefault();
-      }
-    },
-    onFocus(e) {
-      e.target.select();
-    },
-  },
+const currentValue = ref(props.modelValue);
+
+watch(currentValue, (newVal) => {
+  if (newVal !== props.modelValue) {
+    emit('update:modelValue', newVal);
+  }
+});
+
+const classObject = computed(() => {
+  return {
+    [`mc-quantity-selector--${props.size}`]: props.size && props.size != 'm',
+    'is-invalid': props.isInvalid,
+  };
+});
+
+const increment = () => {
+  if (currentValue.value + props.step <= props.max) {
+    currentValue.value += props.step;
+  } else {
+    currentValue.value = props.max;
+  }
 };
+
+const decrement = () => {
+  if (currentValue.value - props.step > props.min) {
+    currentValue.value -= props.step;
+  } else {
+    currentValue.value = props.min;
+  }
+};
+
+const onChange = (value: number) => {
+  currentValue.value = value;
+
+  if (currentValue.value > props.max) {
+    currentValue.value = props.max;
+  }
+  if (currentValue.value <= props.min) {
+    currentValue.value = props.min;
+  }
+
+  emit('update:modelValue', currentValue.value);
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the quantity selector value changes, updating the `modelValue` prop.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.quantity-selector';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/quantity-selector';
 </style>

package/src/components/radio/MRadio.spec.ts

@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils';
+import MRadio from './MRadio.vue';
+import { describe, it, expect } from 'vitest';
+
+describe('MRadio component', () => {
+  it('renders a radio button with a label', () => {
+    const wrapper = mount(MRadio, {
+      props: {
+        id: 'radio1',
+        label: 'Option 1',
+      },
+    });
+
+    const radioInput = wrapper.find('input[type="radio"]');
+    expect(radioInput.exists()).toBe(true);
+
+    const label = wrapper.find('label');
+    expect(label.text()).toBe('Option 1');
+  });
+
+  it('binds modelValue correctly when checked', async () => {
+    const wrapper = mount(MRadio, {
+      props: {
+        id: 'radio1',
+        modelValue: false,
+      },
+    });
+
+    const radioInput = wrapper.find('input');
+
+    expect(radioInput.element.checked).toBe(false);
+
+    await radioInput.setChecked();
+
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+  });
+
+  it('sets the disabled attribute when disabled prop is true', () => {
+    const wrapper = mount(MRadio, {
+      props: {
+        id: 'radio1',
+        disabled: true,
+      },
+    });
+
+    const radioInput = wrapper.find('input[type="radio"]');
+    expect(radioInput.attributes('disabled')).toBeDefined();
+  });
+
+  it('applies the is-invalid class when isInvalid prop is true', () => {
+    const wrapper = mount(MRadio, {
+      props: {
+        id: 'radio1',
+        isInvalid: true,
+      },
+    });
+
+    const radioInput = wrapper.find('input[type="radio"]');
+    expect(radioInput.classes()).toContain('is-invalid');
+  });
+
+  it('does not apply the is-invalid class when isInvalid prop is false', () => {
+    const wrapper = mount(MRadio, {
+      props: {
+        id: 'radio1',
+        isInvalid: false,
+      },
+    });
+
+    const radioInput = wrapper.find('input[type="radio"]');
+    expect(radioInput.classes()).not.toContain('is-invalid');
+  });
+
+  it('emits update:modelValue on change', async () => {
+    const wrapper = mount(MRadio, {
+      props: {
+        id: 'radio1',
+        modelValue: false,
+      },
+    });
+
+    const radioInput = wrapper.find('input[type="radio"]');
+
+    await radioInput.setChecked();
+
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+  });
+
+  it('does not emit change when disabled', async () => {
+    const wrapper = mount(MRadio, {
+      props: {
+        id: 'radio1',
+        disabled: true,
+        modelValue: false,
+      },
+    });
+
+    const radioInput = wrapper.find('input[type="radio"]');
+
+    await radioInput.setChecked();
+
+    expect(wrapper.emitted()['update:modelValue']).toBeUndefined();
+  });
+});

package/src/components/radio/MRadio.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MRadio from './MRadio.vue';
+
+const meta: Meta<typeof MRadio> = {
+  title: 'Form Elements/Radio',
+  component: MRadio,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.',
+      },
+    },
+  },
+  args: {
+    id: 'RadioId',
+    label: 'Label',
+  },
+  render: (args) => ({
+    components: { MRadio },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MRadio 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MRadio>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: {
+    modelValue: true,
+    id: 'checkedId',
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    isInvalid: true,
+    id: 'invalidId',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    id: 'disabledId',
+  },
+};
+
+export const CheckedDisabled: Story = {
+  args: {
+    modelValue: true,
+    disabled: true,
+    id: 'checkedDisabledId',
+  },
+};

package/src/components/radio/MRadio.vue

@@ -1,55 +1,72 @@
 <template>
-  <div class="mc-radio" :class="rootClass">
+  <div class="mc-radio">
     <input
       :id="id"
       type="radio"
       class="mc-radio__input"
-      :class="{ 'is-invalid': isInvalid }"
+      :class="classObject"
+      :name="name"
+      :checked="modelValue"
+      :disabled="disabled"
+      :aria-invalid="isInvalid"
       v-bind="$attrs"
-      :checked="checked"
-      @change="$emit('change', $event.target.checked)"
+      @change="
+        emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+      "
     />
-    <label :for="id" class="mc-radio__label">{{ label }}</label>
+    <label v-if="label" :for="id" class="mc-radio__label">
+      {{ label }}
+    </label>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MRadio',
+<script setup lang="ts">
+import { computed } from 'vue';
 
-  inheritAttrs: false,
+/**
+ * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
+ */
+const props = defineProps<{
+  /**
+   * A unique identifier for the radio, used to associate the label with the form element.
+   */
+  id: string;
+  /**
+   * The name attribute for the radio element, typically used for form submission.
+   */
+  name?: string;
+  /**
+   * The text label displayed next to the radio.
+   */
+  label?: string;
+  /**
+   * The radio's checked state, bound via v-model.
+   */
+  modelValue?: boolean;
+  /**
+   * If `true`, applies an invalid state to the radio.
+   */
+  isInvalid?: boolean;
+  /**
+   * If `true`, disables the radio, making it non-interactive.
+   */
+  disabled?: boolean;
+}>();
 
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
+const classObject = computed(() => {
+  return {
+    'is-invalid': props.isInvalid,
+  };
+});
 
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-    rootClass: {
-      type: String,
-      default: '',
-    },
-  },
-};
+const emit = defineEmits<{
+  /**
+   * Emits when the radio value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: boolean): void;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.radio';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/radio';
 </style>

package/src/components/radiogroup/MRadioGroup.spec.ts

@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MRadioGroup from './MRadioGroup.vue';
+import MField from '@/components/field/MField.vue';
+import MRadio from '@/components/radio/MRadio.vue';
+
+describe('MRadioGroup component', () => {
+  const options = [
+    { id: 'option-1', label: 'Option 1', value: 'option1' },
+    { id: 'option-2', label: 'Option 2', value: 'option2', disabled: true },
+    { id: 'option-3', label: 'Option 3', value: 'option3' },
+  ];
+
+  // eslint-disable-next-line
+  const mountComponent = (props: Record<string, any>) => {
+    return mount(MRadioGroup, {
+      global: {
+        components: { MField, MRadio },
+      },
+      props: {
+        name: 'radio-group',
+        options,
+        ...props,
+      },
+    });
+  };
+
+  it('renders the radio buttons correctly', () => {
+    const wrapper = mountComponent({});
+    expect(wrapper.findAll('input[type="radio"]')).toHaveLength(3);
+  });
+
+  it('binds the modelValue prop correctly', async () => {
+    const wrapper = mountComponent({ modelValue: 'option1' });
+
+    const radio1 = wrapper.find('#option-1');
+    const radio2 = wrapper.find('#option-2');
+    const radio3 = wrapper.find('#option-3');
+
+    expect(radio1.element.checked).toBe(true);
+    expect(radio2.element.checked).toBe(false);
+    expect(radio3.element.checked).toBe(false);
+  });
+
+  it('does not allow disabled options to be selected', async () => {
+    const wrapper = mountComponent({ modelValue: 'option1' });
+    const radio2 = wrapper.find('#option-2');
+
+    expect(radio2.attributes('disabled')).toBeDefined();
+    await radio2.setChecked();
+
+    expect(wrapper.emitted()['update:modelValue']).toBeUndefined();
+  });
+});