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

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MToggle from './MToggle.vue';
+
+const meta: Meta<typeof MToggle> = {
+  title: 'Form Elements/Toggle',
+  component: MToggle,
+  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.',
+      },
+    },
+  },
+  args: {
+    id: 'ToggleId',
+    label: 'Toggle Label',
+  },
+  render: (args) => ({
+    components: { MToggle },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MToggle 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MToggle>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: {
+    modelValue: true,
+    id: 'checkedId',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    id: 'disabledId',
+  },
+};
+
+export const Size: Story = {
+  args: {
+    id: 'sizeId',
+    size: 's',
+  },
+};
+
+export const HideLabel: Story = {
+  args: {
+    id: 'hideLabelId',
+    label: undefined,
+    ariaLabel: 'Label',
+  },
+};

package/src/components/toggle/MToggle.vue

@@ -1,117 +1,77 @@
 <template>
-  <div class="mc-toggle" :class="setClasses">
-    <input
-      :id="id"
-      :name="name"
-      type="checkbox"
-      class="mc-toggle__input"
-      :checked="checked"
-      :disabled="disabled"
-      @change="$emit('change', $event.target.checked)"
-    />
-    <label :for="id" class="mc-toggle__label">
-      <span class="mc-toggle__content">
+  <div class="mc-toggle" :class="classObject">
+    <label class="mc-toggle__container" :for="id">
+      <input
+        :id="id"
+        type="checkbox"
+        class="mc-toggle__input"
+        :name="name"
+        :checked="modelValue"
+        :disabled="disabled"
+        v-bind="$attrs"
+        @change="
+          emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+        "
+      />
+      <span v-if="label" :for="id" class="mc-toggle__label">
         {{ label }}
-        <span
-          v-if="stateLabelOff && stateLabelOn"
-          class="mc-toggle__state"
-          aria-hidden="true"
-        >
-          <span class="mc-toggle__off">{{ stateLabelOff }}</span>
-          <span class="mc-toggle__on">{{ stateLabelOn }}</span>
-        </span>
       </span>
     </label>
   </div>
 </template>
 
-<script>
-import {
-  responsiveModifierValidators,
-  responsiveModifiers,
-} from '../../utils/mozaicClasses';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-export default {
-  name: 'MToggle',
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      default: null,
-    },
-    name: {
-      type: String,
-      default: null,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => responsiveModifierValidators(value, ['s', 'm']),
-    },
-    // Experimental solution waiting on this issue https://github.com/adeo/mozaic-vue/issues/52
-    responsiveSizeModifiers: {
-      type: Array,
-      default: null,
-      validator: (array) =>
-        array.every((e) =>
-          responsiveModifierValidators(e, [
-            's@from-m',
-            's@from-l',
-            's@from-xl',
-            's@from-xxl',
-            'm@from-m',
-            'm@from-l',
-            'm@from-xl',
-            'm@from-xxl',
-          ])
-        ),
-    },
-    stateLabelOff: {
-      type: String,
-      default: null,
-    },
-    stateLabelOn: {
-      type: String,
-      default: null,
-    },
+/**
+ * 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 = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the toggle, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the toggle element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the toggle.
+     */
+    label?: string;
+    /**
+     * The toggle's checked state, bound via v-model.
+     */
+    modelValue?: boolean;
+    /**
+     * Determines the size of the toggle
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, disables the toggle, making it non-interactive.
+     */
+    disabled?: boolean;
+  }>(),
+  {
+    size: 's',
   },
+);
 
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.size) {
-        classes.push(`mc-toggle--${this.size}`);
-      }
+const classObject = computed(() => {
+  return {
+    [`mc-toggle--${props.size}`]: props.size && props.size != 's',
+  };
+});
 
-      if (
-        this.responsiveSizeModifiers &&
-        this.responsiveSizeModifiers.length > 0
-      ) {
-        for (const modifier of this.responsiveSizeModifiers) {
-          responsiveModifiers('mc-toggle', modifier, classes);
-        }
-      }
-
-      return classes;
-    },
-  },
-};
+const emit = defineEmits<{
+  /**
+   * Emits when the toggle value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: boolean): void;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/c.toggle';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/toggle';
 </style>

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-vite';
+import { action } from 'storybook/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/components/tooltip/MTooltip.spec.ts

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MTooltip from './MTooltip.vue';
+
+describe('MTooltip.vue', () => {
+  const defaultProps = {
+    id: 'tooltip-1',
+    text: 'Tooltip content',
+  };
+
+  it('renders tooltip text', () => {
+    const wrapper = mount(MTooltip, {
+      props: { ...defaultProps },
+      slots: { default: 'Hover me' }
+    });
+    expect(wrapper.text()).toContain(defaultProps.text);
+  });
+
+  it('sets aria-describedby attribute correctly', () => {
+    const wrapper = mount(MTooltip, {
+      props: { ...defaultProps }
+    });
+    const tooltipDiv = wrapper.find('.mc-tooltip');
+    expect(tooltipDiv.attributes('aria-describedby')).toBe(defaultProps.id);
+  });
+
+  it('applies position class based on prop', () => {
+    const wrapper = mount(MTooltip, {
+      props: { ...defaultProps, position: 'bottom' }
+    });
+    expect(wrapper.find('.mc-tooltip').classes()).toContain('mc-tooltip--bottom');
+  });
+
+  it('applies no-pointer class when pointer is false', () => {
+    const wrapper = mount(MTooltip, {
+      props: { ...defaultProps, pointer: false }
+    });
+    expect(wrapper.find('.mc-tooltip').classes()).toContain('mc-tooltip--no-pointer');
+  });
+
+  it('does not apply no-pointer class when pointer is true', () => {
+    const wrapper = mount(MTooltip, {
+      props: { ...defaultProps, pointer: true }
+    });
+    expect(wrapper.find('.mc-tooltip').classes()).not.toContain('mc-tooltip--no-pointer');
+  });
+});

package/src/components/tooltip/MTooltip.stories.ts

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MTooltip from './MTooltip.vue';
+
+const meta: Meta<typeof MTooltip> = {
+  title: 'Overlay/Tooltip',
+  component: MTooltip,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.',
+      },
+    },
+  },
+  args: {
+    id: 'tooltipId',
+    text: 'Keep the tooltip text concise.',
+    default: 'Tooltip on the top',
+  },
+  render: (args) => ({
+    components: { MTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MTooltip v-bind="args">
+        ${args.default}
+      </MTooltip>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MTooltip>;
+
+export const Default: Story = {};
+
+export const Pointer: Story = {
+  args: {
+    pointer: false
+  }
+};
+
+export const Right: Story = {
+  args: {
+    position: 'right'
+  }
+};
+
+export const Left: Story = {
+  args: {
+    position: 'left'
+  }
+};
+
+export const Bottom: Story = {
+  args: {
+    position: 'bottom'
+  }
+};

package/src/components/tooltip/MTooltip.vue

@@ -1,42 +1,59 @@
 <template>
-  <div
-    class="mc-tooltip"
-    :class="position ? `mc-tooltip--${position}` : ''"
-    :aria-describedby="id"
-  >
-    <slot />
-
-    <span :id="id" class="mc-tooltip__content" role="tooltip">
+  <div class="tooltip-story-wrapper">
+    <div class="mc-tooltip" :class="classObject" :aria-describedby="id">
+      <slot/>
+      <span :id="id" class="mc-tooltip__content" role="tooltip">
       {{ text }}
-    </span>
+      </span>
+    </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MTooltip',
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the tooltip, used to describe the tooltip.
+     */
+    id: string;
+    /**
+     * Content of the tooltip
+     */
+    text: string;
+    /**
+     * Determines the position of the tooltip
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * if `true`, the tooltip display a pointer.
+     */
+    pointer?: boolean;
+  }>(),
+  {
+    position: 'top',
+    pointer: true
+  },
+);
 
-  inheritAttrs: false,
+defineSlots<{
+  /**
+   * The tooltip will point to the content of the slot.
+   */
+  default: string;
+}>();
 
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    text: {
-      type: String,
-      required: true,
-    },
-    position: {
-      type: String,
-      default: 'top',
-      validator: (value) => ['top', 'right', 'bottom', 'left'].includes(value),
-    },
-  },
-};
+const classObject = computed(() => {
+  return {
+    [`mc-tooltip--${props.position}`]: props.position,
+    'mc-tooltip--no-pointer': !props.pointer,
+  };
+});
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.tooltip';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tooltip';
 </style>