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

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-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 used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.<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%20group).',
+      },
+    },
+  },
+  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';
+import { action } from '@storybook/addon-actions';
+
+import MSelect from './MSelect.vue';
+
+const meta: Meta<typeof MSelect> = {
+  title: 'Form Elements/Select',
+  component: MSelect,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.<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';
+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: { appearance: 'success' },
+};
+
+export const Warning: Story = {
+  args: { appearance: 'warning' },
+};
+
+export const Danger: Story = {
+  args: { appearance: 'danger' },
+};
+
+export const Neutral: Story = {
+  args: { appearance: 'neutral' },
+};

package/src/components/statusbadge/MStatusBadge.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="mc-status-badge" :class="classObject">
+    <MStatusDot :appearance="appearance" />
+    <span class="mc-status-badge__label">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import MStatusDot from './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
+     */
+    appearance?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+  }>(),
+  {
+    appearance: 'info',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-status-badge--${props.appearance}`]:
+      props.appearance && props.appearance != 'info',
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/status-badge';
+</style>

package/src/components/statusbadge/MStatusDot.vue

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