@mozaic-ds/vue 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -49,7 +49,7 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@mozaic-ds/css-dev-tools": "1.75.0",
-    "@mozaic-ds/icons-vue": "^0.1.0-beta.3",
+    "@mozaic-ds/icons-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^8.0.2",
     "@storybook/addon-a11y": "^9.0.18",
     "@storybook/addon-themes": "^9.0.18",

package/src/components/Contributing.mdx

@@ -102,7 +102,7 @@ Before submitting please make sure to run:
 
 ```
 // Pull down the latest
-$ git pull origin master
+$ git pull origin main
 
 // Create your working branch
 $ git branch - b type-id-description

package/src/components/Introduction.mdx

@@ -38,7 +38,7 @@ import vue from '../../.storybook/assets/vue.svg';
       alt="npm version"
     />
   </a>
-  <a href="https://github.com/adeo/mozaic-vue/blob/master/CONTRIBUTING.md">
+  <a href="https://github.com/adeo/mozaic-vue/blob/main/CONTRIBUTING.md">
     <img
       src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github"
       alt="PRs welcome"

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

@@ -0,0 +1,59 @@
+<template>
+  <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>
+    </div>
+  </div>
+</template>
+
+<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
+  },
+);
+
+defineSlots<{
+  /**
+   * The tooltip will point to the content of the slot.
+   */
+  default: string;
+}>();
+
+const classObject = computed(() => {
+  return {
+    [`mc-tooltip--${props.position}`]: props.position,
+    'mc-tooltip--no-pointer': !props.pointer,
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tooltip';
+</style>

package/src/main.ts

@@ -29,4 +29,5 @@ export { default as MTag } from './components/tag/MTag.vue';
 export { default as MTextArea } from './components/textarea/MTextArea.vue';
 export { default as MTextInput } from './components/textinput/MTextInput.vue';
 export { default as MToggle } from './components/toggle/MToggle.vue';
+export { default as MTooltip } from './components/tooltip/MTooltip.vue';
 export { default as MToggleGroup } from './components/togglegroup/MToggleGroup.vue';