@pequity/squirrel 3.1.2 → 4.0.1

package/dist/cjs/index.js

@@ -75,6 +75,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-action-bar",
   props: {
+    show: { type: Boolean },
     label: {},
     actions: {}
   },
@@ -82,7 +83,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-        vue.createElementVNode("div", vue.mergeProps({
+        _ctx.show ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: 0,
           class: "fixed bottom-6 left-1/2 z-[100] -translate-x-2/4",
           role: "alertdialog"
         }, _ctx.$attrs), [
@@ -169,7 +171,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
               }), 128))
             ])
           ])
-        ], 16)
+        ], 16)) : vue.createCommentVNode("", true)
       ]);
     };
   }

package/dist/cjs/p-info-icon.js

@@ -1,7 +1,7 @@
 "use strict";
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _withScopeId = (n) => (vue.pushScopeId("data-v-189b159e"), n = n(), vue.popScopeId(), n);
+const _withScopeId = (n) => (vue.pushScopeId("data-v-2662da21"), n = n(), vue.popScopeId(), n);
 const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("i", { class: "bg-info-circle-icon block h-3 w-3" }, null, -1));
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -17,7 +17,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       const _component_VTooltip = vue.resolveComponent("VTooltip");
-      return vue.openBlock(), vue.createBlock(_component_VTooltip, null, {
+      return vue.openBlock(), vue.createBlock(_component_VTooltip, {
+        "popper-triggers": ["hover"],
+        delay: { show: 750, hide: 0 }
+      }, {
         popper: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default", {}, () => [
             vue.createTextVNode(vue.toDisplayString(__props.text), 1)
@@ -31,5 +34,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const PInfoIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-189b159e"]]);
+const PInfoIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-2662da21"]]);
 module.exports = PInfoIcon;

package/dist/cjs/p-modal.js

@@ -111,7 +111,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "8a536574": __props.maxWidth
+      "4d751ed2": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -321,12 +321,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       class: "mr-auto pt-4 text-xl font-semibold"
                     }, vue.toDisplayString(__props.title), 9, _hoisted_5)) : vue.createCommentVNode("", true),
                     vue.createElementVNode("div", _hoisted_6, [
-                      __props.enableClose ? (vue.openBlock(), vue.createBlock(pCloseBtn, {
-                        key: 0,
+                      vue.createVNode(pCloseBtn, {
                         disabled: __props.disabled,
+                        class: vue.normalizeClass({ invisible: !__props.enableClose }),
                         "aria-label": __props.closeLabel,
                         onClick: vue.withModifiers(close, ["prevent"])
-                      }, null, 8, ["disabled", "aria-label"])) : vue.createCommentVNode("", true)
+                      }, null, 8, ["disabled", "class", "aria-label"])
                     ])
                   ])
                 ], true),
@@ -365,5 +365,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-ee599a02"]]);
+const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-fb5dbd9f"]]);
 module.exports = pModal;

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { config } from "./config.js";
-import { defineComponent, openBlock, createBlock, Teleport, createElementVNode, mergeProps, createVNode, toDisplayString, createElementBlock, Fragment, renderList, withCtx, resolveDynamicComponent, createCommentVNode, shallowRef, ref, computed, onMounted, normalizeClass, unref, withModifiers, createTextVNode, withDirectives, vShow, pushScopeId, popScopeId, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, onBeforeUnmount, watch, toHandlers } from "vue";
+import { defineComponent, openBlock, createBlock, Teleport, createElementBlock, mergeProps, createElementVNode, createVNode, toDisplayString, Fragment, renderList, withCtx, resolveDynamicComponent, createCommentVNode, shallowRef, ref, computed, onMounted, normalizeClass, unref, withModifiers, createTextVNode, withDirectives, vShow, pushScopeId, popScopeId, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, onBeforeUnmount, watch, toHandlers } from "vue";
 import PBtn from "./p-btn.js";
 import PCloseBtn from "./p-close-btn.js";
 import PDropdown from "./p-dropdown.js";
@@ -75,6 +75,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   __name: "p-action-bar",
   props: {
+    show: { type: Boolean },
     label: {},
     actions: {}
   },
@@ -82,7 +83,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Teleport, { to: "body" }, [
-        createElementVNode("div", mergeProps({
+        _ctx.show ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 0,
           class: "fixed bottom-6 left-1/2 z-[100] -translate-x-2/4",
           role: "alertdialog"
         }, _ctx.$attrs), [
@@ -169,7 +171,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               }), 128))
             ])
           ])
-        ], 16)
+        ], 16)) : createCommentVNode("", true)
       ]);
     };
   }

package/dist/es/p-info-icon.js

@@ -1,6 +1,6 @@
 import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementVNode } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _withScopeId = (n) => (pushScopeId("data-v-189b159e"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-2662da21"), n = n(), popScopeId(), n);
 const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "bg-info-circle-icon block h-3 w-3" }, null, -1));
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -16,7 +16,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       const _component_VTooltip = resolveComponent("VTooltip");
-      return openBlock(), createBlock(_component_VTooltip, null, {
+      return openBlock(), createBlock(_component_VTooltip, {
+        "popper-triggers": ["hover"],
+        delay: { show: 750, hide: 0 }
+      }, {
         popper: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(__props.text), 1)
@@ -30,7 +33,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PInfoIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-189b159e"]]);
+const PInfoIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2662da21"]]);
 export {
   PInfoIcon as default
 };

package/dist/es/p-modal.js

@@ -110,7 +110,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "8a536574": __props.maxWidth
+      "4d751ed2": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -320,12 +320,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: "mr-auto pt-4 text-xl font-semibold"
                     }, toDisplayString(__props.title), 9, _hoisted_5)) : createCommentVNode("", true),
                     createElementVNode("div", _hoisted_6, [
-                      __props.enableClose ? (openBlock(), createBlock(PCloseBtn, {
-                        key: 0,
+                      createVNode(PCloseBtn, {
                         disabled: __props.disabled,
+                        class: normalizeClass({ invisible: !__props.enableClose }),
                         "aria-label": __props.closeLabel,
                         onClick: withModifiers(close, ["prevent"])
-                      }, null, 8, ["disabled", "aria-label"])) : createCommentVNode("", true)
+                      }, null, 8, ["disabled", "class", "aria-label"])
                     ])
                   ])
                 ], true),
@@ -364,7 +364,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ee599a02"]]);
+const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fb5dbd9f"]]);
 export {
   pModal as default
 };

package/dist/squirrel/components/p-action-bar/p-action-bar.vue.d.ts

@@ -1,5 +1,6 @@
 import { type PActionBarAction } from './p-action-bar.types';
 type Props = {
+    show: boolean;
     label: string;
     actions: PActionBarAction[];
 };

package/dist/style.css

@@ -7,7 +7,7 @@
     transform: translateX(100%);
 }
 }
-.bg-info-circle-icon[data-v-189b159e] {
+.bg-info-circle-icon[data-v-2662da21] {
   background-image: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_4002_33291)'%3e%3cpath%20d='M0.5%206C0.5%207.45869%201.07946%208.85764%202.11091%209.88909C3.14236%2010.9205%204.54131%2011.5%206%2011.5C7.45869%2011.5%208.85764%2010.9205%209.88909%209.88909C10.9205%208.85764%2011.5%207.45869%2011.5%206C11.5%204.54131%2010.9205%203.14236%209.88909%202.11091C8.85764%201.07946%207.45869%200.5%206%200.5C4.54131%200.5%203.14236%201.07946%202.11091%202.11091C1.07946%203.14236%200.5%204.54131%200.5%206Z'%20stroke='%231A123B'%20stroke-miterlimit='10'/%3e%3cpath%20d='M6.5%203.5H5.5V2.5H6.5V3.5Z'%20fill='%231A123B'/%3e%3cpath%20d='M4.5%205H6V9M4.5%208.5H7.5'%20stroke='%231A123B'%20stroke-miterlimit='10'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_4002_33291'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
 div[id^=popper_].dropdown {
@@ -409,33 +409,33 @@ to {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
 }
-}.pm[data-v-ee599a02] {
+}.pm[data-v-fb5dbd9f] {
   width: calc(100% - 32px);
   min-width: 110px;
-  max-width: var(--8a536574);
+  max-width: var(--4d751ed2);
   max-height: calc(100vh - 32px);
 }
-.fadeIn[data-v-ee599a02] {
+.fadeIn[data-v-fb5dbd9f] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-ee599a02;
+  animation-name: fadeInFrames-fb5dbd9f;
   animation-fill-mode: both;
 }
-.fadeOut[data-v-ee599a02] {
+.fadeOut[data-v-fb5dbd9f] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-ee599a02;
+  animation-name: fadeOutFrames-fb5dbd9f;
   animation-fill-mode: both;
 }
-.slideInTop[data-v-ee599a02] {
+.slideInTop[data-v-fb5dbd9f] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-ee599a02,slideInTopFrames-ee599a02;
+  animation-name: fadeInFrames-fb5dbd9f,slideInTopFrames-fb5dbd9f;
   animation-fill-mode: both;
 }
-.slideOutTop[data-v-ee599a02] {
+.slideOutTop[data-v-fb5dbd9f] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-ee599a02,slideOutTopFrames-ee599a02;
+  animation-name: fadeOutFrames-fb5dbd9f,slideOutTopFrames-fb5dbd9f;
   animation-fill-mode: both;
 }
-@keyframes slideInTopFrames-ee599a02 {
+@keyframes slideInTopFrames-fb5dbd9f {
 from {
     transform: translate(0, -12px);
     animation-timing-function: cubic-bezier(0, 0, 0, 1);
@@ -444,7 +444,7 @@ to {
     transform: translate(0, 0);
 }
 }
-@keyframes slideOutTopFrames-ee599a02 {
+@keyframes slideOutTopFrames-fb5dbd9f {
 from {
     transform: translate(0, 0);
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
@@ -453,7 +453,7 @@ to {
     transform: translate(0, -12px);
 }
 }
-@keyframes fadeInFrames-ee599a02 {
+@keyframes fadeInFrames-fb5dbd9f {
 from {
     opacity: 0;
     animation-timing-function: cubic-bezier(0, 0, 1, 1);
@@ -462,7 +462,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes fadeOutFrames-ee599a02 {
+@keyframes fadeOutFrames-fb5dbd9f {
 from {
     opacity: 1;
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "3.1.2",
-  "packageManager": "pnpm@8.9.2",
+  "version": "4.0.1",
+  "packageManager": "pnpm@9.7.1",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -71,11 +71,11 @@
     "@storybook/theming": "^8.2.9",
     "@storybook/vue3": "^8.2.9",
     "@storybook/vue3-vite": "^8.2.9",
-    "@tanstack/vue-virtual": "3.9.0",
+    "@tanstack/vue-virtual": "3.10.1",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.4.1",
+    "@types/node": "^22.4.2",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vue/compiler-sfc": "3.4.38",
     "@vue/test-utils": "^2.4.6",
@@ -83,13 +83,13 @@
     "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
     "concurrently": "^8.2.2",
-    "dayjs": "1.11.12",
+    "dayjs": "1.11.13",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
-    "glob": "^10.4.5",
+    "glob": "^11.0.0",
     "http-server": "^14.1.1",
-    "husky": "^9.1.4",
+    "husky": "^9.1.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.9",
@@ -99,7 +99,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "resolve-tspaths": "^0.8.19",
-    "rimraf": "^5.0.10",
+    "rimraf": "^6.0.1",
     "sass": "^1.77.8",
     "semantic-release": "^24.1.0",
     "storybook": "^8.2.9",
@@ -108,12 +108,11 @@
     "ts-jest": "^29.2.4",
     "typescript": "5.5.4",
     "v-calendar": "3.1.2",
-    "vite": "^5.4.1",
+    "vite": "^5.4.2",
     "vue": "3.4.38",
     "vue-currency-input": "3.1.0",
     "vue-router": "4.4.3",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.0.29",
-    "wait-on": "^7.2.0"
+    "vue-tsc": "2.0.29"
   }
 }

package/squirrel/components/p-action-bar/p-action-bar.spec.js

@@ -48,9 +48,22 @@ const createComponentWrapper = (args = {}) =>
   });
 
 describe('PActionBar.vue', () => {
+  it.each([true, false])('shows/hides when the show prop is %s', async (val) => {
+    const wrapper = createComponentWrapper({
+      props: { show: false, label: 'Hello World', actions: [{ label: 'Say Hi', name: 'greet' }] },
+    });
+
+    await wrapper.setProps({ show: val });
+
+    const mainDiv = wrapper.find('.teleport-stub > .fixed.bottom-6');
+
+    expect(mainDiv.exists()).toBe(val);
+  });
+
   it('renders correctly', async () => {
     const wrapper = createComponentWrapper({
       props: {
+        show: true,
         label: 'Hello World',
         actions: [
           { label: 'Say Hi', name: 'greet' },
@@ -93,6 +106,7 @@ describe('PActionBar.vue', () => {
   it('attrs fall through ', async () => {
     const wrapper = createComponentWrapper({
       props: {
+        show: true,
         label: 'Hello World',
         actions: [
           { label: 'Say Hi', name: 'greet' },
@@ -114,7 +128,7 @@ describe('PActionBar.vue', () => {
 
   it('emits a click:dismiss event', async () => {
     const wrapper = createComponentWrapper({
-      props: { label: 'Hello World', actions: [{ label: 'Say Hi', name: 'greet' }] },
+      props: { show: true, label: 'Hello World', actions: [{ label: 'Say Hi', name: 'greet' }] },
     });
 
     const button = await wrapper.find('button.inline-flex');
@@ -127,6 +141,7 @@ describe('PActionBar.vue', () => {
   it('emits a click:action event with the correct name', async () => {
     const wrapper = createComponentWrapper({
       props: {
+        show: true,
         label: 'Hello World',
         actions: [
           { label: 'Say Hi', name: 'greet' },

package/squirrel/components/p-action-bar/p-action-bar.stories.js

@@ -5,12 +5,11 @@ import PaginateLeftIcon from '@squirrel/assets/pagination-left-icon.svg?inline';
 import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import { action } from '@storybook/addon-actions';
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
-import { shallowRef } from 'vue';
 
 const actionBarActions = [
   {
     label: 'Upload',
-    icon: shallowRef(FileUploadIcon),
+    icon: FileUploadIcon,
     name: 'upload',
   },
   {
@@ -23,12 +22,12 @@ const actionBarActions = [
       {
         label: 'Subaction 1',
         name: 'subaction1',
-        icon: shallowRef(PaginateLeftIcon),
+        icon: PaginateLeftIcon,
       },
       {
         label: 'Subaction 2',
         name: 'subaction2',
-        icon: shallowRef(PaginateRightIcon),
+        icon: PaginateRightIcon,
       },
     ],
   },
@@ -49,22 +48,29 @@ export default {
 
 export const Default = {
   render: (args) => ({
-    components: { PActionBar },
+    components: { PActionBar, PBtn },
     setup() {
       const onDismiss = action('dismiss');
+
       const onAction = action('action');
 
-      return { args, onAction, onDismiss };
+      const setShow = (val) => {
+        args.show = val;
+      };
+
+      return { args, onAction, onDismiss, setShow };
     },
     template: `
       <div class="h-20">
-        <PActionBar v-bind="args" @click:dismiss="onDismiss" @click:action="onAction" />
+        <PBtn class="mr-2" @click="setShow(!args.show)">Toggle action bar</PBtn>
+        <PActionBar v-bind="args" @click:dismiss="onDismiss(), setShow(false)" @click:action="onAction" />
       </div>
     `,
   }),
   args: {
     label: 'Hello World',
     actions: actionBarActions,
+    show: false,
   },
 };
 
@@ -89,6 +95,7 @@ export const WithAnElementBehind = {
   args: {
     label: 'Hello World',
     actions: actionBarActions,
+    show: true,
     onClick: fn(),
   },
   play: async ({ args, canvasElement }) => {

package/squirrel/components/p-action-bar/p-action-bar.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <div class="fixed bottom-6 left-1/2 z-[100] -translate-x-2/4" role="alertdialog" v-bind="$attrs">
+    <div v-if="show" class="fixed bottom-6 left-1/2 z-[100] -translate-x-2/4" role="alertdialog" v-bind="$attrs">
       <div
         class="flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white"
       >
@@ -64,6 +64,7 @@ defineOptions({
 });
 
 type Props = {
+  show: boolean;
   label: string;
   actions: PActionBarAction[];
 };

package/squirrel/components/p-info-icon/p-info-icon.spec.js

@@ -55,4 +55,25 @@ describe('PInfoIcon.vue', () => {
 
     expect(wrapper.text()).toBe('Lorem ipsum dolor sit amet.');
   });
+
+  it('tooltip should stay visible on hover', async () => {
+    const wrapper = createWrapperFor(PInfoIcon, {
+      props: {
+        text: '',
+      },
+      slots: {
+        default: 'Lorem ipsum dolor sit amet.',
+      },
+      global: {
+        stubs: {
+          VTooltip: true,
+        },
+      },
+    });
+
+    const tooltip = wrapper.findComponent('v-tooltip-stub');
+
+    expect(tooltip.props().popperTriggers).toEqual(['hover']);
+    expect(tooltip.props().delay).toEqual({ show: 750, hide: 0 });
+  });
 });

package/squirrel/components/p-info-icon/p-info-icon.stories.js

@@ -55,3 +55,35 @@ export const DifferentPlacements = {
     },
   },
 };
+
+export const WithBigText = {
+  render: (args) => ({
+    components: { PInfoIcon },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="w-full pt-60 pb-20 flex justify-center">
+        <PInfoIcon v-bind="args" />
+      </div>`,
+  }),
+  args: {
+    text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada convallis ultricies.
+    Pellentesque rhoncus felis et neque pellentesque pretium.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada convallis ultricies.
+    Pellentesque rhoncus felis et neque pellentesque pretium.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada convallis ultricies.
+    Pellentesque rhoncus felis et neque pellentesque pretium.
+    `,
+    placement: 'top',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `The info tooltip allows for long text and the ability to scroll.`,
+      },
+    },
+  },
+};

package/squirrel/components/p-info-icon/p-info-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <VTooltip>
+  <VTooltip :popper-triggers="['hover']" :delay="{ show: 750, hide: 0 }">
     <i class="bg-info-circle-icon block h-3 w-3"></i>
     <template #popper>
       <slot>{{ text }}</slot>

package/squirrel/components/p-modal/p-modal-features.spec.js

@@ -9,7 +9,7 @@ const ModalParent = {
   template: `
   <div>
     <button type="button" class="open-modal-1" @click="showModal1 = true">Open modal 1</button>
-    <Modal1 wrapperClass="modal-1" v-model="showModal1" :title="title" :live="live">
+    <Modal1 wrapperClass="modal-1" v-model="showModal1" :title="title" :live="live" :enable-close="enableClose">
       <div>
         <input v-if="showInput" type="text" value="" autofocus class="text-input" />
         <button type="button" class="open-modal-2" @click="showModal2 = true">Open modal 2</button>
@@ -52,6 +52,7 @@ const createModalsWrapper = (data) => {
           title: 'Test title',
           showModal1: false,
           showModal2: false,
+          enableClose: true,
         },
         ...data,
       };
@@ -321,4 +322,25 @@ describe('Modal features', () => {
 
     wrapper.unmount();
   });
+
+  it('makes the close button invisible instead of hidden, when enableClose is false', async () => {
+    const wrapper = createModalsWrapper({
+      enableClose: false,
+    });
+
+    await waitNT(wrapper.vm);
+
+    await wrapper.find('.open-modal-1').trigger('click');
+
+    await sleep(100);
+
+    const modal1 = wrapper.getComponent('.modal-1');
+
+    const closeBtn = modal1.find('button[aria-label="Close"]');
+
+    expect(closeBtn.isVisible()).toBe(true);
+    expect(closeBtn.classes()).toContain('invisible');
+
+    wrapper.unmount();
+  });
 });

package/squirrel/components/p-modal/p-modal.vue

@@ -36,7 +36,12 @@
                 {{ title }}
               </h3>
               <div class="ml-auto">
-                <PCloseBtn v-if="enableClose" :disabled="disabled" :aria-label="closeLabel" @click.prevent="close" />
+                <PCloseBtn
+                  :disabled="disabled"
+                  :class="{ invisible: !enableClose }"
+                  :aria-label="closeLabel"
+                  @click.prevent="close"
+                />
               </div>
             </div>
           </slot>

package/squirrel/components/p-table-header-cell/p-table-header-cell.stories.js

@@ -43,10 +43,10 @@ export const Active = {
   },
 };
 
-export const WithToolyip = {
+export const WithTooltip = {
   args: {
     ...Default.args,
-    tooltipText: 'This is a tooltip',
+    tooltipText: `Lorem ipsum dolor sit amet.`,
   },
 };