@weni/unnnic-system 3.28.2-alpha.3 → 3.29.0

package/src/components/Tag/__tests__/Tag.spec.js

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import Tag from '../Tag.vue';
+import DefaultTag from '../DefaultTag.vue';
+import Chip from '../../Chip/Chip.vue';
+
+const mountTag = (props = {}) =>
+  mount(Tag, {
+    props: {
+      text: 'Tag label',
+      ...props,
+    },
+    global: {
+      stubs: {
+        UnnnicIcon: true,
+      },
+    },
+  });
+
+describe('Tag', () => {
+  it('renders DefaultTag for default type', () => {
+    const wrapper = mountTag({ type: 'default' });
+
+    expect(wrapper.findComponent(DefaultTag).exists()).toBe(true);
+    expect(wrapper.text()).toContain('Tag label');
+  });
+
+  it('renders Chip for brand type', () => {
+    const wrapper = mountTag({ type: 'brand' });
+
+    expect(wrapper.findComponent(Chip).exists()).toBe(true);
+  });
+
+  it('renders Chip when hasCloseIcon is true', () => {
+    const wrapper = mountTag({ hasCloseIcon: true });
+
+    expect(wrapper.findComponent(Chip).exists()).toBe(true);
+  });
+
+  it('emits close when chip with close icon is clicked', async () => {
+    const wrapper = mountTag({ hasCloseIcon: true });
+
+    await wrapper.find('.chip').trigger('click');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('emits click for brand type chip', async () => {
+    const wrapper = mountTag({ type: 'brand' });
+
+    await wrapper.find('.chip').trigger('click');
+
+    expect(wrapper.emitted('click')).toBeTruthy();
+  });
+
+  it('passes small size for next type', () => {
+    const wrapper = mountTag({ type: 'next' });
+
+    expect(wrapper.findComponent(DefaultTag).props('size')).toBe('small');
+  });
+});
+
+describe('DefaultTag', () => {
+  it('renders left icon when provided', () => {
+    const wrapper = mount(DefaultTag, {
+      props: { text: 'Label', leftIcon: 'info' },
+      global: { stubs: { UnnnicIcon: true } },
+    });
+
+    expect(wrapper.find('.unnnic-tag__icon').exists()).toBe(true);
+  });
+
+  it('applies small size class', () => {
+    const wrapper = mount(DefaultTag, {
+      props: { text: 'Label', size: 'small' },
+      global: { stubs: { UnnnicIcon: true } },
+    });
+
+    expect(wrapper.classes()).toContain('unnnic-tag--small');
+  });
+});

package/src/components/TextArea/__test__/TextArea.spec.js

@@ -57,6 +57,18 @@ describe('TextArea.vue', () => {
     expect(wrapper.emitted('update:modelValue')[0]).toEqual(['new text']);
   });
 
+  test('applies resize none class binding', async () => {
+    await wrapper.setProps({ resize: 'none' });
+    expect(wrapper.find('textarea').exists()).toBe(true);
+  });
+
+  test('returns empty error string for non-string non-array errors', async () => {
+    await wrapper.setProps({ type: 'error', errors: null });
+    expect(
+      wrapper.findComponent({ name: 'UnnnicFormElement' }).props('error'),
+    ).toBe('');
+  });
+
   test('displays errors when type is error', async () => {
     await wrapper.setProps({ type: 'error', errors: ['Error 1', 'Error 2'] });
     expect(
@@ -64,6 +76,13 @@ describe('TextArea.vue', () => {
     ).toBe('Error 1, Error 2');
   });
 
+  test('displays string error when errors is a string', async () => {
+    await wrapper.setProps({ type: 'error', errors: 'Single error' });
+    expect(
+      wrapper.findComponent({ name: 'UnnnicFormElement' }).props('error'),
+    ).toBe('Single error');
+  });
+
   test('applies disabled class and disables textarea when disabled is true', async () => {
     await wrapper.setProps({ disabled: true });
     expect(

package/src/components/ToolTip/__tests__/ToolTip.spec.js

@@ -9,7 +9,7 @@ globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
   disconnect: vi.fn(),
 }));
 
-const createWrapper = (props = {}, slots = {}) => {
+const createWrapper = (props = {}, slots = {}, options = {}) => {
   return mount(ToolTip, {
     props,
     slots: {
@@ -20,11 +20,41 @@ const createWrapper = (props = {}, slots = {}) => {
     global: {
       stubs: {
         teleport: true,
+        ...options.stubs,
       },
     },
   });
 };
 
+const createOpenWrapper = (props = {}, slots = {}) =>
+  mount(ToolTip, {
+    props: {
+      forceOpen: true,
+      enabled: true,
+      ...props,
+    },
+    slots: {
+      default: '<button data-testid="trigger-button">Hover me</button>',
+      ...slots,
+    },
+    attachTo: document.body,
+    global: {
+      stubs: {
+        Tooltip: {
+          template: '<div data-testid="tooltip-wrapper"><slot /></div>',
+        },
+        TooltipTrigger: {
+          template: '<div data-testid="tooltip-trigger"><slot /></div>',
+        },
+        TooltipContent: {
+          props: ['side', 'style', 'class'],
+          template:
+            '<div data-testid="tooltip-content" :style="style"><slot /></div>',
+        },
+      },
+    },
+  });
+
 describe('ToolTip', () => {
   let wrapper;
 
@@ -367,4 +397,55 @@ describe('ToolTip', () => {
       forceOpenWrapper.unmount();
     });
   });
+
+  describe('Close button', () => {
+    it('emits click:close when close icon is clicked', async () => {
+      const closeWrapper = createOpenWrapper({
+        text: 'Text',
+        showClose: true,
+      });
+
+      await closeWrapper.find('.unnnic-tooltip__close').trigger('click');
+
+      expect(closeWrapper.emitted('click:close')).toBeTruthy();
+      closeWrapper.unmount();
+    });
+  });
+
+  describe('Content rendering with forceOpen', () => {
+    it('renders multiline text content', async () => {
+      const multilineWrapper = createOpenWrapper({
+        text: 'Line one\nLine two',
+      });
+
+      const content = multilineWrapper.find('[data-testid="tooltip-content"]');
+      expect(content.text()).toContain('Line one');
+      expect(content.text()).toContain('Line two');
+      multilineWrapper.unmount();
+    });
+
+    it('renders HTML content when enableHtml is true', async () => {
+      const htmlWrapper = createOpenWrapper({
+        text: '<strong>Bold</strong>',
+        enableHtml: true,
+      });
+
+      expect(
+        htmlWrapper.find('[data-testid="tooltip-html-content"]').exists(),
+      ).toBe(true);
+      htmlWrapper.unmount();
+    });
+
+    it('applies default maxWidth of 320px when not provided', async () => {
+      const defaultWidthWrapper = createOpenWrapper({
+        text: 'Text',
+      });
+
+      const content = defaultWidthWrapper.find(
+        '[data-testid="tooltip-content"]',
+      );
+      expect(content.attributes('style')).toContain('max-width: 320px');
+      defaultWidthWrapper.unmount();
+    });
+  });
 });

package/src/components/index.ts

@@ -10,7 +10,6 @@ import sidebar from './Sidebar/index.vue';
 import sidebarItem from './Sidebar/SidebarItem.vue';
 import table from './Table/Table.vue';
 import tableRow from './Table/TableRow.vue';
-import { TableBody, TableCell, TableHead, TableHeader } from './ui/table';
 import dropdown from './Dropdown/Dropdown.vue';
 import dropdownItem from './Dropdown/DropdownItem.vue';
 import avatarIcon from './AvatarIcon/AvatarIcon.vue';
@@ -139,10 +138,6 @@ export const components: ComponentsMap = {
   unnnicSidebarItem: sidebarItem,
   unnnicTable: table,
   unnnicTableRow: tableRow,
-  unnnicTableBody: TableBody,
-  unnnicTableCell: TableCell,
-  unnnicTableHead: TableHead,
-  unnnicTableHeader: TableHeader,
   unnnicAvatarIcon: avatarIcon,
   unnnicIcon: icon,
   unnnicIconSvg: icon,
@@ -266,10 +261,6 @@ export const unnnicSidebar = sidebar;
 export const unnnicSidebarItem = sidebarItem;
 export const unnnicTable = table;
 export const unnnicTableRow = tableRow;
-export const unnnicTableBody = TableBody;
-export const unnnicTableCell = TableCell;
-export const unnnicTableHead = TableHead;
-export const unnnicTableHeader = TableHeader;
 export const unnnicDropdown = dropdown as VueComponent;
 export const unnnicDropdownItem = dropdownItem;
 export const unnnicAvatarIcon = avatarIcon;
@@ -392,10 +383,6 @@ export const UnnnicSidebar = sidebar;
 export const UnnnicSidebarItem = sidebarItem;
 export const UnnnicTable = table;
 export const UnnnicTableRow = tableRow;
-export const UnnnicTableBody = TableBody;
-export const UnnnicTableCell = TableCell;
-export const UnnnicTableHead = TableHead;
-export const UnnnicTableHeader = TableHeader;
 export const UnnnicDropdown = dropdown as VueComponent;
 export const UnnnicDropdownItem = dropdownItem;
 export const UnnnicAvatarIcon = avatarIcon;

package/src/stories/Table.stories.js

@@ -2,24 +2,11 @@ import unnnicTable from '../components/Table/Table.vue';
 import unnnicTableRow from '../components/Table/TableRow.vue';
 import unnnicButton from '../components/Button/Button.vue';
 import unnnicCheckbox from '../components/Checkbox/Checkbox.vue';
-import {
-  TableHeader,
-  TableBody,
-  TableHead,
-  TableCell,
-} from '@/components/ui/table';
-import UnnnicTag from '@/components/Tag/Tag.vue';
-import { action } from 'storybook/actions';
 
 export default {
   title: 'example/Table',
   component: unnnicTable,
-  argTypes: {
-    version: {
-      control: { type: 'select' },
-      options: ['1', '2'],
-    },
-  },
+  argTypes: {},
 };
 
 const Template = (args, { argTypes }) => ({
@@ -34,7 +21,6 @@ const Template = (args, { argTypes }) => ({
     <div>
       <unnnic-table
         v-bind="$props"
-        version="1"
         :items="table.items"
         :style="{ maxHeight: '280px', maxWidth: '800px', }"
       >
@@ -156,63 +142,4 @@ const Template = (args, { argTypes }) => ({
 });
 
 export const Default = Template.bind({});
-Default.args = {
-  version: '1',
-};
-
-export const Version2 = {
-  render: () => ({
-    components: {
-      unnnicTable,
-      unnnicTableRow,
-      TableHeader,
-      TableBody,
-      TableHead,
-      TableCell,
-      UnnnicTag,
-    },
-    setup() {
-      return {
-        onRowClick: action('click'),
-      };
-    },
-    template: `
-      <unnnic-table version="2">
-        <TableHeader>
-          <unnnic-table-row>
-            <TableHead>
-              Invoice
-            </TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Method</TableHead>
-            <TableHead>
-              Amount
-            </TableHead>
-          </unnnic-table-row>
-        </TableHeader>
-        <TableBody>
-          <unnnic-table-row>
-            <TableCell>
-              INV001
-            </TableCell>
-            <TableCell><UnnnicTag scheme="green" text="Paid" /></TableCell>
-            <TableCell>Credit Card</TableCell>
-            <TableCell>
-              $250.00
-            </TableCell>
-          </unnnic-table-row>
-          <unnnic-table-row @click="onRowClick">
-            <TableCell>
-              INV002
-            </TableCell>
-            <TableCell><UnnnicTag scheme="red" text="Pending" /></TableCell>
-            <TableCell>Bank Transfer</TableCell>
-            <TableCell>
-              $199.00
-            </TableCell>
-          </unnnic-table-row>
-        </TableBody>
-      </unnnic-table>
-    `,
-  }),
-};
+Default.args = {};

package/src/components/ui/table/Table.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps<{
-  class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-  <div class="relative w-full overflow-auto">
-    <table :class="cn('unnnic-table', props.class)">
-      <slot />
-    </table>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-table {
-  border-collapse: collapse;
-  width: 100%;
-  caption-side: bottom;
-
-  @include unnnic-font-body;
-  color: $unnnic-color-fg-base;
-}
-</style>

package/src/components/ui/table/TableBody.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps<{
-  class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-  <tbody :class="cn(props.class)">
-    <slot />
-  </tbody>
-</template>

package/src/components/ui/table/TableCell.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps<{
-  class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-  <td :class="cn('unnnic-table-cell', props.class)">
-    <slot />
-  </td>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-table-cell {
-  vertical-align: middle;
-
-  padding: $unnnic-space-4 0;
-
-  &:not(:last-child) {
-    padding-right: $unnnic-space-4;
-  }
-}
-</style>

package/src/components/ui/table/TableHead.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps<{
-  class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-  <th :class="cn('unnnic-table-head', props.class)">
-    <slot />
-  </th>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-table-head {
-  @include unnnic-font-caption-1;
-  color: $unnnic-color-fg-base;
-  text-align: left;
-  align-items: center;
-
-  pointer-events: none;
-}
-</style>

package/src/components/ui/table/TableHeader.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps<{
-  class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-  <thead :class="cn('unnnic-table-header', props.class)">
-    <slot />
-  </thead>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-table-header {
-  * {
-    padding-bottom: $unnnic-space-2;
-  }
-}
-</style>

package/src/components/ui/table/TableRow.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { computed, useAttrs } from 'vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps<{
-  class?: HTMLAttributes['class'];
-}>();
-
-const attrs = useAttrs();
-const isClickable = computed(() => Boolean(attrs.onClick));
-</script>
-
-<template>
-  <tr
-    :class="
-      cn(
-        'unnnic-table-row',
-        'transition-colors data-[state=selected]:bg-muted',
-        isClickable && 'cursor-pointer',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </tr>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-table-row {
-  & > :first-child {
-    padding-left: $unnnic-space-3;
-  }
-
-  & > :last-child {
-    padding-right: $unnnic-space-3;
-  }
-
-  border-bottom: 1px solid $unnnic-color-border-base;
-
-  &:hover {
-    background-color: $unnnic-color-bg-soft;
-  }
-}
-</style>

package/src/components/ui/table/index.ts

@@ -1,6 +0,0 @@
-export { default as Table } from './Table.vue';
-export { default as TableBody } from './TableBody.vue';
-export { default as TableCell } from './TableCell.vue';
-export { default as TableHead } from './TableHead.vue';
-export { default as TableHeader } from './TableHeader.vue';
-export { default as TableRow } from './TableRow.vue';