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

package/src/components/textarea/MTextArea.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MTextArea> = {
     docs: {
       description: {
         component:
-          'A textarea 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#textarea).',
+          'A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.<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#textarea).',
       },
     },
   },

package/src/components/textinput/MTextInput.stories.ts

@@ -11,7 +11,7 @@ const meta: Meta<typeof MTextInput> = {
     docs: {
       description: {
         component:
-          'Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.<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#input).',
+          'A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.<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#input).',
       },
     },
   },

package/src/components/toggle/MToggle.stories.ts

@@ -10,13 +10,13 @@ const meta: Meta<typeof MToggle> = {
     docs: {
       description: {
         component:
-          'A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.',
+          'A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.',
       },
     },
   },
   args: {
     id: 'ToggleId',
-    label: 'Label',
+    label: 'Toggle Label',
   },
   render: (args) => ({
     components: { MToggle },

package/src/components/togglegroup/MToggleGroup.spec.ts

@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MToggleGroup from './MToggleGroup.vue';
+import MToggle from '@/components/toggle/MToggle.vue';
+
+describe('MToggleGroup.vue', () => {
+  it('renders toggles based on options', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MToggleGroup, {
+      props: {
+        name: 'test-name',
+        options,
+      },
+    });
+
+    const toggles = wrapper.findAllComponents(MToggle);
+    expect(toggles.length).toBe(2);
+
+    expect(toggles[0].props('label')).toBe('Option 1');
+    expect(toggles[1].props('label')).toBe('Option 2');
+  });
+
+  it('updates modelValue when a toggle is checked', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MToggleGroup, {
+      props: {
+        name: 'test-name',
+        options,
+        modelValue: [],
+      },
+    });
+
+    const toggle1 = wrapper.findAllComponents(MToggle)[0].find('input');
+    await toggle1.setChecked(true);
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([['option1']]);
+
+    const toggle2 = wrapper.findAllComponents(MToggle)[1].find('input');
+    await toggle2.setChecked(true);
+
+    expect(wrapper.emitted('update:modelValue')[1]).toEqual([
+      ['option1', 'option2'],
+    ]);
+  });
+
+  it('syncs with the v-model when initial value is passed', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MToggleGroup, {
+      props: {
+        name: 'test-name',
+        options,
+        modelValue: ['option1'],
+      },
+    });
+
+    const toggles = wrapper.findAllComponents(MToggle);
+    expect(toggles[0].props('modelValue')).toBe(true);
+    expect(toggles[1].props('modelValue')).toBe(false);
+
+    await wrapper.setProps({ modelValue: ['option2'] });
+
+    expect(toggles[0].props('modelValue')).toBe(false);
+    expect(toggles[1].props('modelValue')).toBe(true);
+  });
+});

package/src/components/togglegroup/MToggleGroup.stories.ts

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import MToggleGroup from './MToggleGroup.vue';
+
+const meta: Meta<typeof MToggleGroup> = {
+  title: 'Form Elements/Toggle Group',
+  component: MToggleGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<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#toggle-group).',
+      },
+    },
+  },
+  args: {
+    name: 'toggleGroupName',
+    modelValue: ['toggle2'],
+    options: [
+      {
+        id: 'toggle-01',
+        label: 'Toggle Label',
+        value: 'toggle1',
+      },
+      {
+        id: 'toggle-02',
+        label: 'Toggle Label',
+        value: 'toggle2',
+      },
+      {
+        id: 'toggle-03',
+        label: 'Toggle Label',
+        value: 'toggle3',
+      },
+      {
+        id: 'toggle-04',
+        label: 'Toggle Label',
+        value: 'toggle4',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MToggleGroup },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MToggleGroup 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MToggleGroup>;
+
+export const Default: Story = {};

package/src/components/togglegroup/MToggleGroup.vue

@@ -0,0 +1,97 @@
+<template>
+  <div :class="classObjectContainer">
+    <MToggle
+      v-for="option in options"
+      :id="option.id"
+      :key="option.id"
+      :label="option.label"
+      :is-invalid="option.isInvalid"
+      :name="name"
+      :class="classObjectItem"
+      :model-value="modelValue ? modelValue.includes(option.value) : undefined"
+      :disabled="option.disabled"
+      @update:model-value="(v: boolean) => onChange(v, option.value)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import MToggle from '../toggle/MToggle.vue';
+
+/**
+ * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.
+ */
+const props = defineProps<{
+  /**
+   * The name attribute for the toggle element, typically used for form submission.
+   */
+  name: string;
+  /**
+   * Property used to manage the values checked by v-model
+   * (Do not use directly)
+   */
+  modelValue?: Array<string>;
+  /**
+   * list of properties of each toggle of the toggle group
+   */
+  options: Array<{
+    id: string;
+    label: string;
+    value: string;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    size?: 's' | 'm';
+  }>;
+  /**
+   * If `true`, make the form element of the group inline.
+   */
+  inline?: boolean;
+}>();
+
+const selectedValue = ref<string[]>([]);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedValue.value = newValue || [];
+  },
+  { immediate: true },
+);
+
+const onChange = (isChecked: boolean, value: string) => {
+  let values = [...selectedValue.value];
+
+  if (isChecked && !values.includes(value)) {
+    values.push(value);
+  } else {
+    values = values.filter((val) => val !== value);
+  }
+
+  emit('update:modelValue', values);
+  selectedValue.value = values;
+};
+
+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 toggle group value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: Array<string>): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/field';
+</style>

package/src/main.ts

@@ -1,4 +1,5 @@
 import MBadge from './components/badge/MBadge.vue';
+import MBreadcrumb from './components/breadcrumb/MBreadcrumb.vue';
 import MButton from './components/button/MButton.vue';
 import MCheckbox from './components/checkbox/MCheckbox.vue';
 import MCheckboxGroup from './components/checkboxgroup/MCheckboxGroup.vue';
@@ -8,17 +9,21 @@ import MIconButton from './components/iconbutton/MIconButton.vue';
 import MLink from './components/link/MLink.vue';
 import MLoader from './components/loader/MLoader.vue';
 import MOverlay from './components/overlay/MOverlay.vue';
+import MPasswordInput from './components/passwordinput/MPasswordInput.vue';
 import MQuantitySelector from './components/quantityselector/MQuantitySelector.vue';
 import MRadio from './components/radio/MRadio.vue';
 import MRadioGroup from './components/radiogroup/MRadioGroup.vue';
 import MSelect from './components/select/MSelect.vue';
 import MStatusBadge from './components/statusbadge/MStatusBadge.vue';
+import MStatusNotification from './components/statusnotification/MStatusNotification.vue';
 import MTextArea from './components/textarea/MTextArea.vue';
 import MTextInput from './components/textinput/MTextInput.vue';
 import MToggle from './components/toggle/MToggle.vue';
+import MToggleGroup from './components/togglegroup/MToggleGroup.vue';
 
 export {
   MBadge,
+  MBreadcrumb,
   MButton,
   MCheckbox,
   MCheckboxGroup,
@@ -28,12 +33,15 @@ export {
   MLink,
   MLoader,
   MOverlay,
+  MPasswordInput,
   MQuantitySelector,
   MRadio,
   MRadioGroup,
   MSelect,
   MStatusBadge,
+  MStatusNotification,
   MTextArea,
   MTextInput,
   MToggle,
+  MToggleGroup,
 };