@pequity/squirrel 6.0.13 → 6.1.0

package/squirrel/components/p-btn/p-btn.spec.js

@@ -1,6 +1,7 @@
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { describe } from 'vitest';
 
 vi.mock('@squirrel/utils/sanitization', () => {
   return {
@@ -27,215 +28,280 @@ const DEFAULT_CLASSES_ARRAY = [
 ];
 
 describe('PBtn.vue', () => {
-  Object.keys(ELEMENTS_MAP).forEach((el) => {
-    const to = ELEMENTS_MAP[el];
+  describe('default button', () => {
+    Object.keys(ELEMENTS_MAP).forEach((el) => {
+      const to = ELEMENTS_MAP[el];
 
-    it.each([
-      ['primary', ['text-surface', 'bg-primary', 'hover:bg-accent', 'active:bg-p-blue-80']],
-      ['secondary', ['bg-p-gray-20', 'hover:bg-p-gray-30', 'active:bg-p-gray-40']],
-      [
-        'primary-outline',
-        ['text-p-purple-60', 'bg-p-blue-10', 'ring-1', 'ring-inset', 'ring-p-purple-60', 'hover:bg-p-gray-20'],
-      ],
-      [
-        'secondary-outline',
+      it.each([
+        ['primary', ['text-surface', 'bg-primary', 'hover:bg-accent', 'active:bg-p-blue-80']],
+        ['secondary', ['bg-p-gray-20', 'hover:bg-p-gray-30', 'active:bg-p-gray-40']],
+        [
+          'primary-outline',
+          ['text-p-purple-60', 'bg-p-blue-10', 'ring-1', 'ring-inset', 'ring-p-purple-60', 'hover:bg-p-gray-20'],
+        ],
         [
-          'text-p-purple-60',
-          'bg-surface',
-          'ring-1',
-          'ring-inset',
-          'ring-p-gray-30',
-          'hover:bg-p-blue-10',
-          'aria-selected:bg-p-blue-10',
+          'secondary-outline',
+          [
+            'text-p-purple-60',
+            'bg-surface',
+            'ring-1',
+            'ring-inset',
+            'ring-p-gray-30',
+            'hover:bg-p-blue-10',
+            'aria-selected:bg-p-blue-10',
+          ],
         ],
-      ],
-      [
-        'secondary-outline-blue',
         [
-          'text-p-purple-60',
-          'bg-surface',
-          'ring-1',
-          'ring-inset',
-          'ring-p-gray-30',
-          'hover:bg-p-blue-10',
-          'aria-selected:bg-p-blue-15',
-          'aria-selected:text-p-blue-60',
+          'secondary-outline-blue',
+          [
+            'text-p-purple-60',
+            'bg-surface',
+            'ring-1',
+            'ring-inset',
+            'ring-p-gray-30',
+            'hover:bg-p-blue-10',
+            'aria-selected:bg-p-blue-15',
+            'aria-selected:text-p-blue-60',
+          ],
         ],
-      ],
-      ['error', ['text-white', 'bg-p-red-40', 'hover:bg-p-red-50']],
-      ['success', ['text-white', 'bg-p-green-40', 'hover:bg-p-green-50']],
-      ['primary-link', ['text-primary', 'bg-transparent', 'hover:text-accent', 'underline']],
-      ['secondary-ghost', ['text-on-surface', 'hover:bg-p-gray-20']],
-    ])(`renders a ${el} of type %s`, async (type, classes) => {
+        ['error', ['text-white', 'bg-p-red-40', 'hover:bg-p-red-50']],
+        ['success', ['text-white', 'bg-p-green-40', 'hover:bg-p-green-50']],
+        ['primary-link', ['text-primary', 'bg-transparent', 'hover:text-accent', 'underline']],
+        ['secondary-ghost', ['text-on-surface', 'hover:bg-p-gray-20']],
+      ])(`renders a ${el} of type %s`, async (type, classes) => {
+        const wrapper = createWrapperFor(PBtn, {
+          props: { type },
+          attrs: { to },
+          global: {
+            stubs: { RouterLink: { template: '<section class="router-link-stub"><slot /></section>' } },
+          },
+        });
+
+        const element = wrapper.find(el);
+
+        if (el !== 'a') {
+          const slotWrapper = wrapper.find('.slot-wrapper');
+          expect(slotWrapper.classes()).toEqual(['slot-wrapper', 'empty:hidden']);
+        }
+
+        expect(classes.every((c) => element.classes().includes(c))).toBe(true);
+        expect(DEFAULT_CLASSES_ARRAY.every((c) => element.classes().includes(c))).toBe(true);
+      });
+    });
+
+    it.each([
+      ['sm', ['flex', 'items-center', 'justify-center', 'has-[.slot-wrapper:empty]:gap-0', 'gap-1']],
+      ['md', ['flex', 'items-center', 'justify-center', 'has-[.slot-wrapper:empty]:gap-0', 'gap-2']],
+      ['lg', ['flex', 'items-center', 'justify-center', 'has-[.slot-wrapper:empty]:gap-0', 'gap-2.5']],
+    ])('renders slots for content', async (size, classes) => {
       const wrapper = createWrapperFor(PBtn, {
-        props: { type },
-        attrs: { to },
-        global: {
-          stubs: { RouterLink: { template: '<section class="router-link-stub"><slot /></section>' } },
+        props: { size },
+        slots: {
+          default: `This is a button`,
         },
       });
 
-      const element = await wrapper.find(el);
+      const contentWrapper = await wrapper.find('div');
+      const button = await wrapper.find('button');
 
-      expect(classes.every((c) => element.classes().includes(c))).toBe(true);
-      expect(DEFAULT_CLASSES_ARRAY.every((c) => element.classes().includes(c))).toBe(true);
+      expect(contentWrapper.classes()).toEqual(classes);
+      expect(button.text()).toContain(`This is a button`);
     });
-  });
 
-  it('renders slots for icon and content', async () => {
-    const wrapper = createWrapperFor(PBtn, {
-      slots: {
-        default: `This is a button`,
-      },
-    });
+    it.each([
+      ['button', undefined],
+      ['a', 'https://pequity.com/'],
+      ['a', { name: 'home', params: { id: 1 } }],
+    ])('gets disabled when the element is a %s and points to %s', async (el, to) => {
+      const wrapper = createWrapperFor(PBtn, {
+        props: {
+          to,
+        },
+        attrs: {
+          disabled: true,
+        },
+        global: {
+          stubs: { RouterLink: { template: '<a class="router-link-stub"><slot /></a>' } },
+        },
+      });
 
-    const button = await wrapper.find('button');
+      const button = await wrapper.find(el);
 
-    expect(button.text()).toContain(`This is a button`);
-  });
+      await button.trigger('click');
 
-  it.each([
-    ['button', undefined],
-    ['a', 'https://pequity.com/'],
-    ['a', { name: 'home', params: { id: 1 } }],
-  ])('gets disabled when the element is a %s and points to %s', async (el, to) => {
-    const wrapper = createWrapperFor(PBtn, {
-      props: {
-        to,
-      },
-      attrs: {
-        disabled: true,
-      },
-      global: {
-        stubs: { RouterLink: { template: '<a class="router-link-stub"><slot /></a>' } },
-      },
-    });
+      if (el === 'button') {
+        expect(wrapper.emitted().click).toBeFalsy();
+      }
+      expect(button.attributes()).toHaveProperty('disabled');
+      expect(button.attributes()['aria-disabled']).toBe('true');
 
-    const button = await wrapper.find(el);
+      await wrapper.setProps({ disabled: false });
 
-    await button.trigger('click');
+      await button.trigger('click');
 
-    if (el === 'button') {
-      expect(wrapper.emitted().click).toBeFalsy();
-    }
-    expect(button.attributes()).toHaveProperty('disabled');
-    expect(button.attributes()['aria-disabled']).toBe('true');
+      if (el === 'button') {
+        expect(wrapper.emitted().click[0][0] instanceof MouseEvent).toBe(true);
+      }
+      expect(button.attributes()).not.toHaveProperty('disabled');
+      expect(button.attributes()['aria-disabled']).toBe('false');
+    });
 
-    await wrapper.setProps({ disabled: false });
+    it('has a loading state', async () => {
+      const wrapper = createWrapperFor(PBtn, {
+        props: {
+          loading: true,
+        },
+        global: {
+          stubs: { PRingLoader: { template: '<div class="loader-stub">loader</div>' } },
+        },
+      });
 
-    await button.trigger('click');
+      const button = await wrapper.find('button');
+      const loader = await wrapper.find('.loader-stub');
 
-    if (el === 'button') {
-      expect(wrapper.emitted().click[0][0] instanceof MouseEvent).toBe(true);
-    }
-    expect(button.attributes()).not.toHaveProperty('disabled');
-    expect(button.attributes()['aria-disabled']).toBe('false');
-  });
+      await button.trigger('click');
 
-  it('has a loading state', async () => {
-    const wrapper = createWrapperFor(PBtn, {
-      props: {
-        loading: true,
-      },
-      global: {
-        stubs: { PRingLoader: { template: '<div class="loader-stub">loader</div>' } },
-      },
+      expect(wrapper.emitted().click).toBeFalsy();
+      expect(button.attributes()).toHaveProperty('disabled');
+      expect(loader.exists()).toBe(true);
     });
 
-    const button = await wrapper.find('button');
-    const loader = await wrapper.find('.loader-stub');
+    it.each(['button', 'submit', 'reset'])('renders a button of native type %s', async (nativeType) => {
+      const wrapper = createWrapperFor(PBtn, { props: { nativeType } });
 
-    await button.trigger('click');
+      const button = await wrapper.find('button');
 
-    expect(wrapper.emitted().click).toBeFalsy();
-    expect(button.attributes()).toHaveProperty('disabled');
-    expect(loader.exists()).toBe(true);
-  });
+      expect(button.attributes().type).toBe(nativeType);
+    });
 
-  it.each(['button', 'submit', 'reset'])('renders a button of native type %s', async (nativeType) => {
-    const wrapper = createWrapperFor(PBtn, { props: { nativeType } });
+    it.each([
+      ['sm', ['py-1', 'px-2', 'rounded', 'font-medium', 'text-sm']],
+      ['md', ['py-2', 'px-6', 'rounded', 'font-medium', 'text-base']],
+      ['lg', ['py-2.5', 'px-6', 'rounded', 'font-medium', 'text-lg']],
+    ])('renders a button of size %s', async (size, classes) => {
+      const wrapper = createWrapperFor(PBtn, { props: { size }, slots: { default: `button` } });
 
-    const button = await wrapper.find('button');
+      const button = await wrapper.find('button');
 
-    expect(button.attributes().type).toBe(nativeType);
-  });
+      expect(classes.every((c) => button.classes().includes(c))).toBe(true);
+    });
+
+    it('renders an href in case it is an external link', async () => {
+      const wrapper = createWrapperFor(PBtn, {
+        props: {
+          to: 'https://pequity.com/',
+        },
+        slots: {
+          default: `This is a button`,
+        },
+      });
 
-  it.each([
-    ['sm', ['py-1', 'px-2', 'rounded', 'font-medium', 'text-sm']],
-    ['md', ['py-2', 'px-6', 'rounded', 'font-medium', 'text-base']],
-    ['lg', ['py-2.5', 'px-6', 'rounded', 'font-medium', 'text-lg']],
-  ])('renders a button of size %s', async (size, classes) => {
-    const wrapper = createWrapperFor(PBtn, { props: { size } });
+      const a = await wrapper.find('a');
 
-    const button = await wrapper.find('button');
+      expect(a.attributes().href).toBe(`sanitized-https://pequity.com/`);
+      expect(a.attributes().target).toBe('_blank');
+      expect(a.text()).toBe('This is a button');
+    });
 
-    expect(classes.every((c) => button.classes().includes(c))).toBe(true);
-  });
+    it('renders a router link', async () => {
+      const wrapper = createWrapperFor(PBtn, {
+        props: {
+          to: { name: 'home', params: { id: 1 } },
+        },
+        slots: {
+          default: `This is a button`,
+        },
+        global: {
+          stubs: { RouterLink: { template: '<section class="router-link-stub"><slot /></section>' } },
+        },
+      });
+
+      const routerLink = await wrapper.find('section');
 
-  it('renders an href in case it is an external link', async () => {
-    const wrapper = createWrapperFor(PBtn, {
-      props: {
-        to: 'https://pequity.com/',
-      },
-      slots: {
-        default: `This is a button`,
-      },
+      expect(routerLink.classes()).toContain('router-link-stub');
+      expect(routerLink.text()).toBe('This is a button');
     });
 
-    const a = await wrapper.find('a');
+    it('sets the aria-selected attribute when the selected prop is set', async () => {
+      const wrapper = createWrapperFor(PBtn, {
+        props: {
+          selected: true,
+        },
+        slots: {
+          default: `This is a button`,
+        },
+      });
 
-    expect(a.attributes().href).toBe(`sanitized-https://pequity.com/`);
-    expect(a.attributes().target).toBe('_blank');
-    expect(a.text()).toBe('This is a button');
-  });
+      const button = await wrapper.find('button');
 
-  it('renders a router link', async () => {
-    const wrapper = createWrapperFor(PBtn, {
-      props: {
-        to: { name: 'home', params: { id: 1 } },
-      },
-      slots: {
-        default: `This is a button`,
-      },
-      global: {
-        stubs: { RouterLink: { template: '<section class="router-link-stub"><slot /></section>' } },
-      },
+      expect(button.attributes()['aria-selected']).toBe('true');
     });
 
-    const routerLink = await wrapper.find('section');
+    it('sanitizes an invalid link', async () => {
+      const wrapper = createWrapperFor(PBtn, {
+        props: {
+          to: 'javascript:evil()',
+        },
+        slots: {
+          default: `This is a button`,
+        },
+      });
+
+      const a = await wrapper.find('a');
 
-    expect(routerLink.classes()).toContain('router-link-stub');
-    expect(routerLink.text()).toBe('This is a button');
+      expect(a.text()).toBe('This is a button');
+      expect(sanitizeUrl).toHaveBeenCalledTimes(1);
+    });
   });
 
-  it('sets the aria-selected attribute when the selected prop is set', async () => {
-    const wrapper = createWrapperFor(PBtn, {
-      props: {
-        selected: true,
-      },
-      slots: {
-        default: `This is a button`,
-      },
+  describe('icon button', () => {
+    it.each([
+      ['sm', ['shrink-0', 'text-lg']],
+      ['md', ['shrink-0', 'text-xl']],
+      ['lg', ['shrink-0', 'text-2xl']],
+    ])('renders a button with icon of size %s', async (size, classes) => {
+      const wrapper = createWrapperFor(PBtn, {
+        props: { size, icon: 'edit' },
+        slots: { default: 'text' },
+        global: { stubs: { PIcon: true } },
+      });
+
+      const icon = await wrapper.findComponent({ name: 'PIcon' });
+
+      expect(classes.every((c) => icon.classes().includes(c))).toBe(true);
     });
 
-    const button = await wrapper.find('button');
+    it.each([
+      ['sm', ['shrink-0', 'text-lg']],
+      ['md', ['shrink-0', 'text-xl']],
+      ['lg', ['shrink-0', 'text-2xl']],
+    ])('renders a button with a right icon of size %s', async (size, classes) => {
+      const wrapper = createWrapperFor(PBtn, {
+        props: { size, iconRight: 'edit' },
+        slots: { default: 'text' },
+        global: { stubs: { PIcon: true } },
+      });
 
-    expect(button.attributes()['aria-selected']).toBe('true');
-  });
+      const icon = await wrapper.findComponent({ name: 'PIcon' });
 
-  it('sanitizes an invalid link', async () => {
-    const wrapper = createWrapperFor(PBtn, {
-      props: {
-        to: 'javascript:evil()',
-      },
-      slots: {
-        default: `This is a button`,
-      },
+      expect(classes.every((c) => icon.classes().includes(c))).toBe(true);
     });
 
-    const a = await wrapper.find('a');
+    it.each([
+      ['sm', ['shrink-0', 'text-lg'], ['has-[.slot-wrapper:empty]:px-1']],
+      ['md', ['shrink-0', 'text-xl'], ['has-[.slot-wrapper:empty]:px-2']],
+      ['lg', ['shrink-0', 'text-2xl'], ['has-[.slot-wrapper:empty]:px-2.5']],
+    ])('renders a button with an icon without text of size %s', async (size, classes, buttonClasses) => {
+      const wrapper = createWrapperFor(PBtn, {
+        props: { size, icon: 'edit' },
+        global: { stubs: { PIcon: true } },
+      });
 
-    expect(a.text()).toBe('This is a button');
-    expect(sanitizeUrl).toHaveBeenCalledTimes(1);
+      const button = wrapper.find('button');
+      const icon = wrapper.findComponent({ name: 'PIcon' });
+
+      expect(classes.every((c) => icon.classes().includes(c))).toBe(true);
+      expect(buttonClasses.every((c) => button.classes().includes(c))).toBe(true);
+    });
   });
 });

package/squirrel/components/p-btn/p-btn.stories.js

@@ -1,4 +1,3 @@
-import Icon from '@squirrel/assets/info-circle-icon.svg?inline';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import { action } from '@storybook/addon-actions';
 import { expect, within } from '@storybook/test';
@@ -101,19 +100,44 @@ export const PrimaryLink = {
   },
 };
 
-export const IconButtonSmall = {
+export const Icon = {
   render: (args) => ({
-    components: { PBtn, Icon },
+    components: { PBtn },
     setup() {
       return { args };
     },
-    template: `
-      <PBtn v-bind="args">
-        <Icon class="my-1" />
-      </PBtn>`,
+    template: ` <PBtn v-bind="args" icon="archive">Icon Button</PBtn> `,
   }),
   args: {
-    size: 'sm',
+    size: 'md',
+    type: 'secondary-outline',
+  },
+};
+
+export const IconRight = {
+  render: (args) => ({
+    components: { PBtn },
+    setup() {
+      return { args };
+    },
+    template: ` <PBtn v-bind="args" icon-right="archive">Icon Button</PBtn> `,
+  }),
+  args: {
+    size: 'md',
+    type: 'secondary-outline',
+  },
+};
+
+export const IconWithoutContent = {
+  render: (args) => ({
+    components: { PBtn },
+    setup() {
+      return { args };
+    },
+    template: ` <PBtn v-bind="args" icon-right="archive"></PBtn> `,
+  }),
+  args: {
+    size: 'md',
     type: 'secondary-outline',
   },
 };