feat: port CvTooltip 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';
 import CvRadioButton from './src/components/CvRadioButton/CvRadioButton.vue';
 import CvRadioGroup from './src/components/CvRadioButton/CvRadioGroup.vue';
 
@@ -130,6 +133,9 @@ const all = {
   CvNumberInput,
   CvNumberInputSkeleton,
   CvToggle,
+  CvTooltip,
+  CvDefinitionTooltip,
+  CvInteractiveTooltip,
   CvRadioButton,
   CvRadioGroup,
 };

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.stories.js

@@ -0,0 +1,90 @@
+import CvInteractiveTooltip from './CvInteractiveTooltip.vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { alignments, directions } from './consts';
+import { sbTooltipPrefix } from './sbTooltipPrefix';
+import Filter16 from '@carbon/icons-vue/es/filter/16';
+
+export default {
+  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvInteractiveTooltip`,
+  component: CvInteractiveTooltip,
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      options: alignments,
+      defaultValue: CvInteractiveTooltip.props.alignment.default,
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: directions,
+      defaultValue: CvInteractiveTooltip.props.direction.default,
+    },
+    visible: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: CvInteractiveTooltip.props.visible.default,
+      description: 'Initial tooltip visibility state',
+    },
+    label: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Label slot.',
+    },
+    content: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Content slot.',
+    },
+    trigger: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Trigger slot',
+    },
+  },
+};
+const template = `
+  <cv-interactive-tooltip v-bind="args">
+    <template #label>
+      Tooltip label
+    </template>
+    <template #trigger>
+      <Filter16 class="bx--overflow-menu__icon bx--toolbar-filter-icon" />
+    </template>
+    <template #content>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      <button class="bx--button">Clicky one</button>
+    </template>
+  </cv-interactive-tooltip>
+`;
+
+const Template = args => {
+  return {
+    components: { CvInteractiveTooltip, Filter16 },
+    template,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);