feat: cvTooltip and cvDefinitionTooltip ported to Vue3

main.js

@@ -62,6 +62,9 @@ import CvRow from './src/components/CvGrid/CvRow.vue';
 import CvNumberInput from './src/components/CvNumberInput/CvNumberInput.vue';
 import CvNumberInputSkeleton from './src/components/CvNumberInput/CvNumberInputSkeleton.vue';
 import CvToggle from './src/components/CvToggle/CvToggle.vue';
+import CvTooltip from './src/components/CvTooltip/CvTooltip.vue';
+import CvDefinitionTooltip from './src/components/CvTooltip/CvDefinitionTooltip.vue';
+import CvInteractiveTooltip from './src/components/CvTooltip/CvInteractiveTooltip.vue';
 
 const all = {
   CvAspectRatio,
@@ -128,6 +131,9 @@ const all = {
   CvNumberInput,
   CvNumberInputSkeleton,
   CvToggle,
+  CvTooltip,
+  CvDefinitionTooltip,
+  CvInteractiveTooltip,
 };
 export default {
   install(app, options) {

src/components/CvButton/CvButtonSkeleton.stories.js

@@ -35,9 +35,6 @@ const Template = (args, { argTypes }) => {
 };
 
 export const Default = Template.bind({});
-console.log('Story: ', {
-  Default,
-});
 Default.args = {
   size: 'default',
 };

src/components/CvTooltip/CvDefinitionTooltip.stories.js

@@ -0,0 +1,80 @@
+import CvDefinitionTooltip from './CvDefinitionTooltip.vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { alignments, directions } from './consts';
+import { sbTooltipPrefix } from './sbTooltipPrefix';
+
+export default {
+  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvDefinitionTooltip`,
+  component: CvDefinitionTooltip,
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      options: alignments,
+      defaultValue: CvDefinitionTooltip.props.alignment.default,
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: directions,
+      defaultValue: CvDefinitionTooltip.props.direction.default,
+    },
+    definition: {
+      control: { type: 'text' },
+      table: { category: 'props' },
+      description: 'Definition of the term',
+    },
+    term: {
+      control: { type: 'text' },
+      table: { category: 'props' },
+      description: 'Term to be defined',
+    },
+    'definition ': {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Definition of the term slot.',
+    },
+    'term ': {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Term slot',
+    },
+  },
+};
+
+const Term = 'A term needing definition';
+const Definition = 'Brief description of the dotted, underlined term';
+
+const template = `<cv-definition-tooltip v-bind="args" />`;
+
+const Template = args => {
+  return {
+    components: { CvDefinitionTooltip },
+    template,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  term: Term,
+  definition: Definition,
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

src/components/CvTooltip/CvDefinitionTooltip.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    :class="`cv-definition-tooltip ${carbonPrefix}--tooltip--definition ${carbonPrefix}--tooltip--a11y`"
+    :id="cvId"
+  >
+    <button
+      :aria-describedby="`${cvId}-label`"
+      :class="[
+        `${carbonPrefix}--tooltip__trigger`,
+        `${carbonPrefix}--tooltip--a11y`,
+        `${carbonPrefix}--tooltip__trigger--definition`,
+        `${carbonPrefix}--tooltip--${direction}`,
+        `${carbonPrefix}--tooltip--align-${alignment}`,
+      ]"
+      type="button"
+    >
+      <slot name="term">
+        {{ term }}
+      </slot>
+    </button>
+    <div
+      :class="`${carbonPrefix}--assistive-text`"
+      :id="`${cvId}-label`"
+      role="tooltip"
+    >
+      <slot name="definition">
+        {{ definition }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { TipAlignments, alignments, TipDirections, directions } from './consts';
+
+const props = defineProps({
+  alignment: {
+    type: String,
+    default: TipAlignments.center,
+    validator: val => alignments.includes(val),
+  },
+  direction: {
+    type: String,
+    default: TipDirections.top,
+    validator: val => directions.includes(val),
+  },
+  definition: {
+    type: String,
+    default: '',
+  },
+  term: {
+    type: String,
+    default: '',
+  },
+  ...propsCvId,
+});
+
+const cvId = useCvId(props);
+</script>

src/components/CvTooltip/CvInteractiveTooltip.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class=""></div>
+</template>
+
+<script setup>
+//
+</script>

src/components/CvTooltip/CvTooltip.stories.js

@@ -0,0 +1,125 @@
+import CvTooltip from './CvTooltip.vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { alignments, directions } from './consts';
+import { sbTooltipPrefix } from './sbTooltipPrefix';
+
+export default {
+  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvTooltip`,
+  component: CvTooltip,
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      options: alignments,
+      defaultValue: CvTooltip.props.alignment.default,
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: directions,
+      defaultValue: CvTooltip.props.direction.default,
+    },
+    default: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Tooltip trigger slot.',
+    },
+    content: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Tooltip text slot',
+    },
+  },
+};
+
+const TipText = 'This is a tooltip';
+
+const template = `<cv-tooltip v-bind="args" />`;
+
+const Template = args => {
+  return {
+    components: { CvTooltip },
+    template,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  tip: TipText,
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+const triggerSlotTemplate = `
+  <cv-tooltip v-bind="args">
+    <svg width="16" height="12" viewBox="0 0 16 12">
+      <path d="M8.05 2a2.5 2.5 0 0 1 4.9 0H16v1h-3.05a2.5 2.5 0 0 1-4.9 0H0V2h8.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.05 9a2.5 2.5 0 0 1 4.9 0H16v1H7.95a2.5 2.5 0 0 1-4.9 0H0V9h3.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
+    </svg>
+  </cv-tooltip>
+`;
+
+const TriggerSlotTemplate = args => {
+  return {
+    components: { CvTooltip },
+    template: triggerSlotTemplate,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const TriggerSlot = TriggerSlotTemplate.bind({});
+TriggerSlot.parameters = storyParametersObject(
+  TriggerSlot.parameters,
+  triggerSlotTemplate,
+  TriggerSlot.args
+);
+
+const contentSlotTemplate = `
+  <cv-tooltip v-bind="args">
+    <template #content>
+    <div>
+      <p style="color:green;font-weight:bold;margin-bottom:5px;">Title</p>
+      <p>Lorem ipsum dolor</p>
+    </div>
+    </template>
+  </cv-tooltip>
+`;
+
+const ContentSlotTemplate = args => {
+  return {
+    components: { CvTooltip },
+    template: contentSlotTemplate,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const ContentSlot = ContentSlotTemplate.bind({});
+ContentSlot.parameters = storyParametersObject(
+  ContentSlot.parameters,
+  contentSlotTemplate,
+  ContentSlot.args
+);

src/components/CvTooltip/CvTooltip.vue

@@ -0,0 +1,44 @@
+<template>
+  <button
+    :class="[
+      `cv-tooltip`,
+      `${carbonPrefix}--tooltip__trigger`,
+      `${carbonPrefix}--tooltip--a11y`,
+      `${carbonPrefix}--tooltip--${direction}`,
+      `${carbonPrefix}--tooltip--align-${alignment}`,
+    ]"
+    type="button"
+  >
+    <span :class="`${carbonPrefix}--assistive-text`">
+      <slot name="content">
+        {{ tip }}
+      </slot>
+    </span>
+    <slot>
+      <Information16 />
+    </slot>
+  </button>
+</template>
+
+<script setup>
+import Information16 from '@carbon/icons-vue/es/information/16';
+import { carbonPrefix } from '../../global/settings';
+import { TipAlignments, alignments, TipDirections, directions } from './consts';
+
+defineProps({
+  alignment: {
+    type: String,
+    default: TipAlignments.center,
+    validator: val => alignments.includes(val),
+  },
+  direction: {
+    type: String,
+    default: TipDirections.top,
+    validator: val => directions.includes(val),
+  },
+  tip: {
+    type: String,
+    default: '',
+  },
+});
+</script>