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

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MRadioGroup from './MRadioGroup.vue';
+
+const meta: Meta<typeof MRadioGroup> = {
+  title: 'Form Elements/Radio Group',
+  component: MRadioGroup,
+  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.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#radio-group).',
+      },
+    },
+  },
+  args: {
+    name: 'radioGroupName',
+    modelValue: 'radio2',
+    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',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MRadioGroup },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MRadioGroup 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MRadioGroup>;
+
+export const Default: Story = {};

package/src/components/radiogroup/MRadioGroup.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="mc-field__container" :class="classObjectContainer">
+    <MRadio
+      v-for="option in options"
+      :id="option.id"
+      :key="option.id"
+      :label="option.label"
+      :is-invalid="isInvalid"
+      :name="name"
+      class="mc-field__item"
+      :class="classObjectItem"
+      :model-value="modelValue === option.value"
+      :disabled="option.disabled"
+      @update:model-value="
+        (v: boolean) => (v ? emit('update:modelValue', option.value) : null)
+      "
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import MRadio from '../radio/MRadio.vue';
+
+/**
+ * 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<{
+  /**
+   * The name attribute for the radio element, typically used for form submission.
+   */
+  name: string;
+  /**
+   * Property used to manage the values checked by v-model
+   * (Do not use directly)
+   */
+  modelValue?: string;
+  /**
+   * list of properties of each radio button of the radio group
+   */
+  options: Array<{
+    id: string;
+    label: string;
+    value: string;
+    disabled?: boolean;
+  }>;
+  /**
+   * If `true`, applies an invalid state to the radio group.
+   */
+  isInvalid?: boolean;
+  /**
+   * If `true`, make the form element of the group inline.
+   */
+  inline?: boolean;
+}>();
+
+const classObjectContainer = computed(() => {
+  return {
+    'mc-field__container--inline': props.inline,
+  };
+});
+
+const classObjectItem = computed(() => {
+  return {
+    'mc-field__container--inline__item': props.inline,
+  };
+});
+
+const emit = defineEmits<{
+  /**
+   * Emits when the radio group value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: string): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/field';
+</style>

package/src/components/select/MSelect.spec.ts

@@ -0,0 +1,114 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MSelect from './MSelect.vue';
+
+describe('Select.vue', () => {
+  it('renders options correctly', () => {
+    const options = [
+      { text: 'Option 1', value: '1' },
+      { text: 'Option 2', value: '2' },
+      { text: 'Option 3', value: '3' },
+    ];
+
+    const wrapper = mount(MSelect, {
+      props: {
+        id: 'test-select',
+        modelValue: '1',
+        options,
+      },
+    });
+
+    const optionElements = wrapper.findAll('option');
+    expect(optionElements.length).toBe(options.length);
+    expect(optionElements[0].text()).toBe('Option 1');
+    expect(optionElements[1].text()).toBe('Option 2');
+    expect(optionElements[2].text()).toBe('Option 3');
+  });
+
+  it('renders placeholder when provided', () => {
+    const options = [
+      { text: 'Option 1', value: '1' },
+      { text: 'Option 2', value: '2' },
+    ];
+
+    const wrapper = mount(MSelect, {
+      props: {
+        id: 'test-select',
+        modelValue: '',
+        options,
+        placeholder: 'Select an option',
+      },
+    });
+
+    const placeholderOption = wrapper.find('option[disabled]');
+    expect(placeholderOption.exists()).toBe(true);
+    expect(placeholderOption.text()).toBe('-- Select an option --');
+  });
+
+  it('binds and updates the modelValue correctly', async () => {
+    const options = [
+      { text: 'Option 1', value: '1' },
+      { text: 'Option 2', value: '2' },
+    ];
+
+    const wrapper = mount(MSelect, {
+      props: {
+        id: 'test-select',
+        modelValue: '1',
+        options,
+      },
+    });
+
+    await wrapper.find('select').setValue('2');
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeDefined();
+    expect(emitted!.length).toBe(1);
+    expect(emitted![0]).toEqual(['2']);
+  });
+
+  it('disables the select when the disabled prop is true', () => {
+    const wrapper = mount(MSelect, {
+      props: {
+        id: 'test-select',
+        modelValue: '1',
+        options: [{ text: 'Option 1', value: '1' }],
+        disabled: true,
+      },
+    });
+
+    const select = wrapper.find('select');
+    expect(select.attributes('disabled')).toBeDefined();
+  });
+
+  it('applies the correct classes based on props', () => {
+    const wrapper = mount(MSelect, {
+      props: {
+        id: 'test-select',
+        modelValue: '1',
+        options: [{ text: 'Option 1', value: '1' }],
+        size: 's',
+        isInvalid: true,
+      },
+    });
+
+    const select = wrapper.find('select');
+
+    expect(select.classes()).toContain('mc-select--s');
+
+    expect(select.classes()).toContain('is-invalid');
+  });
+
+  it('does not apply invalid class if isInvalid is not set', () => {
+    const wrapper = mount(MSelect, {
+      props: {
+        id: 'test-select',
+        modelValue: '1',
+        options: [{ text: 'Option 1', value: '1' }],
+      },
+    });
+
+    const select = wrapper.find('select');
+    expect(select.classes()).not.toContain('is-invalid');
+  });
+});

package/src/components/select/MSelect.stories.ts

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MSelect from './MSelect.vue';
+
+const meta: Meta<typeof MSelect> = {
+  title: 'Form Elements/Select',
+  component: MSelect,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#select).',
+      },
+    },
+  },
+  argTypes: {
+    ariaLabel: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    id: 'selectId',
+    placeholder: 'Choose an option',
+    options: [
+      {
+        text: 'Option 1',
+        value: 'option1',
+      },
+      {
+        text: 'Option 2',
+        value: 'option2',
+        disabled: true,
+      },
+      {
+        text: 'Option 3',
+        value: 'option3',
+      },
+      {
+        text: 'Option 4',
+        value: 'option4',
+      },
+    ],
+    ariaLabel: 'Choose an option',
+  },
+  render: (args) => ({
+    components: { MSelect },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MSelect 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MSelect>;
+
+export const WithValue: Story = {
+  args: {
+    id: 'withValueId',
+    modelValue: 'option1',
+  },
+};
+
+export const Default: Story = {};
+
+export const Small: Story = {
+  args: {
+    id: 'smallId',
+    size: 's',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    id: 'disabledId',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    id: 'invalidId',
+    isInvalid: true,
+  },
+};

package/src/components/select/MSelect.vue

@@ -1,15 +1,17 @@
 <template>
   <select
     :id="id"
-    ref="select"
     class="mc-select"
-    :class="[setClasses, cssFieldElementClass]"
-    :value="getSelectValue"
+    :name="name"
+    :value="modelValue"
+    :class="classObject"
     :disabled="disabled"
-    @change="onChange($event.target.value)"
-    v-on="inputListeners"
+    v-bind="$attrs"
+    @change="
+      emit('update:modelValue', ($event.target as HTMLSelectElement).value)
+    "
   >
-    <option v-if="placeholder" value="" disabled="disabled">
+    <option v-if="placeholder" value="" disabled>
       -- {{ placeholder }} --
     </option>
     <option
@@ -19,127 +21,83 @@
       v-bind="option.attributes"
       :disabled="option.disabled"
     >
-      <slot name="text" :option="option">
-        {{ option.text }}
-      </slot>
+      {{ option.text }}
     </option>
-    <slot name="options" />
   </select>
 </template>
 
-<script>
-export default {
-  name: 'MSelect',
-  inject: {
-    cssFieldElementClass: {
-      default: '',
-    },
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
+<script setup lang="ts">
+import { computed } from 'vue';
 
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => ['s', 'm'].includes(value),
-    },
-    placeholder: {
-      type: String,
-      default: null,
-    },
-    isValid: {
-      type: Boolean,
-      default: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+/**
+ * A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the select, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the select element, used for form submission.
+     */
+    name?: string;
+    /**
+     * Define the available choices for the select element.
+     */
+    options: Array<{
+      id?: string;
+      text: string;
+      value: string | number;
+      attributes?: Record<string, string | boolean | number>;
+      disabled?: boolean;
+    }>;
+    /**
+     * The current value of the select.
+     */
+    modelValue?: string | number;
+    /**
+     * Text displayed when the select has no selected value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the select is marked as invalid.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, the select is disabled and non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Determines the size of the select
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, the select is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+  }>(),
+  {
+    size: 'm',
   },
+);
 
-  data() {
-    return {
-      optionValue: null,
-    };
-  },
-
-  computed: {
-    getSelectValue() {
-      return this.optionValue ? this.optionValue : this.value;
-    },
-
-    setClasses() {
-      const classes = [
-        {
-          'is-valid': this.isValid,
-          'is-invalid': this.isInvalid,
-        },
-      ];
-
-      if (this.size) {
-        classes.push(`mc-select--${this.size}`);
-      }
+const classObject = computed(() => {
+  return {
+    [`mc-select--${props.size}`]: props.size && props.size != 'm',
+    'mc-select--readonly': props.readonly,
+    'is-invalid': props.isInvalid,
+  };
+});
 
-      return classes;
-    },
-    inputListeners: function () {
-      // see => https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
-      var vm = this;
-      return Object.assign({}, this.$listeners, {
-        change: function (event) {
-          vm.$emit('change', event.target.value);
-        },
-      });
-    },
-  },
-
-  mounted() {
-    this.getOptionValue();
-  },
-
-  methods: {
-    getOptionValue() {
-      if (!this.value) {
-        const firstOption = this.$el.querySelector('option');
-        this.optionValue = firstOption.value;
-      }
-    },
-    onChange(value) {
-      const optionText = this.$refs.select
-        .querySelector(`option[value="${value}"]`)
-        .textContent.trim();
-      const optionData = {
-        text: optionText,
-        value: value,
-      };
-
-      this.$emit('change', value, optionData);
-    },
-  },
-};
+const emit = defineEmits<{
+  /**
+   * Emits when the select value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: string | number): void;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.select';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/select';
 </style>

package/src/components/statusbadge/MStatusBadge.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MStatusBadge from './MStatusBadge.vue';
+
+const meta: Meta<typeof MStatusBadge> = {
+  title: 'Status/Status Badge',
+  component: MStatusBadge,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A status badge indicates the status of an entity and can evolve at any time.',
+      },
+    },
+  },
+  args: { label: 'Badge label' },
+  render: (args) => ({
+    components: { MStatusBadge },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MStatusBadge v-bind="args"></MStatusBadge>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MStatusBadge>;
+
+export const Info: Story = {};
+
+export const Success: Story = {
+  args: { status: 'success' },
+};
+
+export const Warning: Story = {
+  args: { status: 'warning' },
+};
+
+export const Error: Story = {
+  args: { status: 'error' },
+};
+
+export const Neutral: Story = {
+  args: { status: 'neutral' },
+};

package/src/components/statusbadge/MStatusBadge.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="mc-status-badge" :class="classObject">
+    <MStatusDot :status="status" />
+    <span class="mc-status-badge__label">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import MStatusDot from '../statusdot/MStatusDot.vue';
+/**
+ * A status badge indicates the status of an entity and can evolve at any time.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Content of the Status Badge
+     */
+    label: string;
+    /**
+     * Allows to define the Status Badge style
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+  }>(),
+  {
+    status: 'info',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-status-badge--${props.status}`]:
+      props.status && props.status != 'info',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/status-badge';
+</style>

package/src/components/statusbadge/MstatusBadge.spec.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import MStatusBadge from './MStatusBadge.vue';
+
+describe('MStatusBadge component', () => {
+  it('renders properly', () => {
+    const wrapper = mount(MStatusBadge, {
+      props: {
+        label: 'Badge Label',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Badge Label');
+  });
+});