feat: new tooltips (#525)

.storybook/preview.js

@@ -5,10 +5,16 @@ import PrimeVue from 'primevue/config';
 
 import '@/assets/styles/main.scss';
 import 'primeicons/primeicons.css';
+import Tooltip from 'primevue/tooltip';
+import { TooltipPassThrough } from '@/components/Tooltip';
 
 setup((app) => {
   app.use(configs.constants);
-  app.use(PrimeVue, { unstyled: true });
+  app.use(PrimeVue, {
+    unstyled: true,
+    pt: { directives: { tooltip: TooltipPassThrough } }
+  });
+  app.directive('tooltip', Tooltip);
   for (const mixinName in mixins) {
     const mixin = mixins[mixinName];
     app.mixin(mixin);

CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## v2.0.80
+
+- Add PrimeVue `tooltip` directive to plugin installation
+
+### Breaking Changes
+
+- Removes `Tooltip` component
+- Adds a dependency on PrimeVue plugin installation prior to `ui-component` plugin installation
+
 ## v2.0.79
 
 - Make `Modal`s scrollable when overflow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.79",
+  "version": "2.0.80",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/assets/styles/main.scss

@@ -79,7 +79,6 @@
   }
 }
 
-// This is a hack for the modal styles flashing.
 @keyframes fadeIn {
   from {
     opacity: 0;

src/components/Label/Label.stories.js

@@ -2,7 +2,6 @@ import LobLabel from './Label.vue';
 import mdx from './Label.mdx';
 
 import { Info } from '@/components/Icons';
-import Tooltip from '@/components/Tooltip/Tooltip.vue';
 
 export default {
   title: 'Components/Label',
@@ -80,19 +79,11 @@ RequiredField.args = {
 
 const WithTooltipTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { LobLabel, Info, Tooltip },
+  components: { LobLabel, Info },
   setup: () => ({ args }),
   template: `
     <lob-label v-bind="args">
       <template v-slot:tooltip>
-        <Tooltip position="bottom">
-          <template #trigger>
-            <Info class="w-5 h-5" />
-          </template>
-          <template #content>
-            {{ args.tooltipContent }}
-          </template>
-        </Tooltip>
       </template>
     </lob-label>
     <input class="border rounded p-2 text-gray-500" />

src/components/Label/Label.vue

@@ -10,23 +10,19 @@
     ]"
     data-testid="labelWrapper"
   >
-    <Tooltip
+    <span
       v-if="tooltipContent"
-      position="bottom"
-      :class="['text-gray-500', { 'mr-1': tooltipPosition === 'leading' }]"
-      :data-testid="
-        tooltipPosition === 'trailing' ? 'tooltip-trailing' : 'tooltip-leading'
-      "
+      v-tooltip.bottom="tooltipContent"
+      data-testid="uic-tooltip-icon"
+      :class="[
+        'text-gray-500',
+        {
+          'mr-1': tooltipContent && tooltipPosition !== 'trailing'
+        }
+      ]"
     >
-      <template #trigger>
-        <CircleInfo />
-      </template>
-      <template #content>
-        <p class="w-max max-w-[200px]">
-          {{ tooltipContent }}
-        </p>
-      </template>
-    </Tooltip>
+      <Icon icon="CircleInfo" />
+    </span>
     <label :for="labelFor">
       <span>
         {{ label }}
@@ -41,14 +37,12 @@
 
 <script>
 import { defineComponent } from 'vue';
-import Tooltip from '../Tooltip/Tooltip.vue';
-import CircleInfo from '../Icons/CircleInfo.vue';
+import { Icon } from '../Icon';
 
 export default defineComponent({
   name: 'LobLabel',
   components: {
-    Tooltip,
-    CircleInfo
+    Icon
   },
   props: {
     label: { type: String, required: true },

src/components/Label/__tests__/LobLabel.spec.js → src/components/Label/__tests__/Label.spec.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/vue';
+import { fireEvent, render } from '@testing-library/vue';
 import LobLabel from '../Label.vue';
+import Tooltip from 'primevue/tooltip';
 
 const initialProps = {
   id: 'test',
@@ -11,7 +12,10 @@ const initialProps = {
 describe('LobLabel', () => {
   it('renders correctly', () => {
     const props = initialProps;
-    const { getByText } = render(LobLabel, { props });
+    const { getByText } = render(LobLabel, {
+      props,
+      global: { directives: { tooltip: Tooltip } }
+    });
 
     const label = getByText(props.label);
     expect(label).toBeInTheDocument();
@@ -23,33 +27,42 @@ describe('LobLabel', () => {
       required: true
     };
 
-    const { getByText } = render(LobLabel, { props });
+    const { getByText } = render(LobLabel, {
+      props,
+      global: { directives: { tooltip: Tooltip } }
+    });
     const label = getByText(props.label);
     const asterisk = getByText('*');
     expect(label).toContainElement(asterisk);
   });
 
   describe('if a tooltip is added', () => {
-    it('the tooltip shows on the left by default', () => {
+    it('the tooltip shows on the left by default', async () => {
       const props = { ...initialProps, tooltipContent: 'magic tooltip' };
-      const { getByTestId } = render(LobLabel, { props });
+      const { findByText, getByTestId } = render(LobLabel, {
+        props,
+        global: { directives: { tooltip: Tooltip } }
+      });
 
-      const tooltip = getByTestId('tooltip-leading');
-      expect(tooltip).toBeInTheDocument();
+      await fireEvent.mouseEnter(getByTestId('uic-tooltip-icon'));
+      expect(await findByText('magic tooltip')).toBeInTheDocument();
       const labelWrapper = getByTestId('labelWrapper');
       expect(labelWrapper).not.toHaveClass('justify-between');
     });
 
-    it('the tooltip shows on the right if tooltipPosition:trailing is added', () => {
+    it('the tooltip shows on the right if tooltipPosition:trailing is added', async () => {
       const props = {
         ...initialProps,
         tooltipContent: 'magic tooltip',
         tooltipPosition: 'trailing'
       };
-      const { getByTestId } = render(LobLabel, { props });
+      const { findByText, getByTestId } = render(LobLabel, {
+        props,
+        global: { directives: { tooltip: Tooltip } }
+      });
 
-      const tooltip = getByTestId('tooltip-trailing');
-      expect(tooltip).toBeInTheDocument();
+      await fireEvent.mouseEnter(getByTestId('uic-tooltip-icon'));
+      expect(await findByText('magic tooltip')).toBeInTheDocument();
       const labelWrapper = getByTestId('labelWrapper');
       expect(labelWrapper).toHaveClass('justify-between flex-row-reverse');
     });

src/components/MainNavigation/MainNavigationItem.vue

@@ -22,21 +22,7 @@
       @[clickEvent]="toggleSubNav"
     >
       <div class="w-5 h-5 transition-transform duration-100 ease-in">
-        <div v-if="expanded">
-          <slot name="icon" :title="title" />
-        </div>
-        <div v-else>
-          <Tooltip position="right">
-            <template #content>
-              <div class="whitespace-nowrap !type-xs-500 !leading-3">
-                {{ title }}
-              </div>
-            </template>
-            <template #trigger>
-              <slot name="icon" :title="title" />
-            </template>
-          </Tooltip>
-        </div>
+        <slot name="icon" :title="title" />
       </div>
       <span
         :class="[
@@ -79,11 +65,10 @@
 <script>
 import ChevronDown from '../Icons/ChevronDown';
 import LobLink from '../Link/Link';
-import Tooltip from '../Tooltip/Tooltip.vue';
 
 export default {
   name: 'MainNavigationItem',
-  components: { ChevronDown, LobLink, Tooltip },
+  components: { ChevronDown, LobLink },
   props: {
     title: {
       type: String,

src/components/RadioButton/RadioButton.mdx

@@ -37,11 +37,7 @@ Example with slot that contains label and tooltip
   v-model="postcard.size"
   @click="handleClick"
 >
-  <div class="flex">
-    {{ service.description }}
-    <!-- this becomes the label -->
-    <Tooltip />
-  </div>
+  <div class="flex">{{ service.description }}</div>
 </RadioButton>
 ```
 

src/components/RadioButtonLarge/RadioButtonLarge.mdx

@@ -37,11 +37,7 @@ Example with slot that contains label and tooltip
   v-model="postcard.size"
   @click="handleClick"
 >
-  <div class="flex">
-    {{ service.description }}
-    <!-- this becomes the label -->
-    <Tooltip />
-  </div>
+  <div class="flex">{{ service.description }}</div>
 </RadioButtonLarge>
 ```