Merge branch 'main' of https://github.com/weni-ai/unnnic into feature…

…/new-structure-default-funnel

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ['@weni/eslint-config/vue3', '@vue/typescript/recommended'],
+  extends: ['@weni/eslint-config/vue3'],
   plugins: ['@typescript-eslint'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 2.15.1 (2024-10-31)
+
+### Added
+
+- ChartFunnel: Added new variant's 'default' | 'basic'
+
+## 2.15.0 (2024-10-31)
+
+### Added
+
+- Tag: `leftIcon` and `rightIcon` props;
+- TableNext: `hideHeaders` and `size` props;
+- TableNext: Added the possibility of column sizes being `'auto'`;
+- TableNext: Removed the requirement to pass the headers prop.
+
 ## 2.14.2 (2024-10-22)
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.14.2",
+  "version": "2.15.1",
   "type": "commonjs",
   "files": [
     "dist",

src/components/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue

@@ -44,26 +44,22 @@ interface FunnelStep {
 }
 
 defineProps<{
-  data: FunnelStep[]
+  data: FunnelStep[];
 }>();
 </script>
 
 <style lang="scss" scoped>
 @import '../../../assets/scss/unnnic.scss';
 
 .unnnic-chart-funnel-base-container {
-  width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .unnnic-chart-funnel-base-item {
   display: flex;
-  align-items: center;
   justify-content: flex-start;
-  flex-grow: 1;
 
   &__card {
     height: 100%;
@@ -138,22 +134,10 @@ defineProps<{
       }
     }
   }
-}
-
-.w-60 {
-  width: 60%;
-}
-.w-50 {
-  width: 50%;
-}
-.w-40 {
-  width: 40%;
-}
-.w-30 {
-  width: 30%;
-}
-.w-20 {
-  width: 20%;
+  &:last-child .unnnic-chart-funnel-base-item__card::after,
+  &:last-child .unnnic-chart-funnel-base-item__text::after {
+    content: none;
+  }
 }
 .overflow-hidden {
   height: 100%;

src/components/Collapse/Collapse.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div
+    data-testid="collapse"
     :class="[
       'unnnic-collapse',
       `unnnic-collapse--size-${size}`,
@@ -12,6 +13,7 @@
     ]"
   >
     <div
+      data-testid="collapse-header"
       class="unnnic-collapse__header"
       @click="localActive = !localActive"
     >

src/components/Collapse/__tests__/Collapse.spec.js

@@ -0,0 +1,117 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest';
+import Collapse from '../Collapse.vue';
+
+describe('Collapse.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Collapse, {
+      props: { title: 'Test Title' },
+    });
+  });
+
+  it('matches the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  describe('Props', () => {
+    it('should accept title prop and render it correctly', () => {
+      expect(wrapper.find('[data-testid="collapse-header"]').text()).toContain(
+        'Test Title',
+      );
+    });
+
+    it('should accept active prop and set localActive accordingly', async () => {
+      await wrapper.setProps({ active: true });
+      expect(wrapper.vm.localActive).toBe(true);
+
+      await wrapper.setProps({ active: false });
+      expect(wrapper.vm.localActive).toBe(false);
+    });
+
+    it('should apply classes based on props', async () => {
+      await wrapper.setProps({ borderBottom: true });
+      expect(wrapper.classes()).toContain('unnnic-collapse--border-bottom');
+
+      await wrapper.setProps({ unspacedIcon: true });
+      expect(wrapper.classes()).toContain('unnnic-collapse--unspaced-icon');
+
+      await wrapper.setProps({ size: 'lg' });
+      expect(wrapper.classes()).toContain('unnnic-collapse--size-lg');
+
+      await wrapper.setProps({ size: 'md' });
+      expect(wrapper.classes()).toContain('unnnic-collapse--size-md');
+
+      await wrapper.setProps({ size: undefined });
+      expect(wrapper.classes()).toContain('unnnic-collapse--size-lg'); // default size
+
+      await wrapper.setProps({ modelValue: true });
+      expect(wrapper.classes()).toContain('unnnic-collapse--active');
+
+      await wrapper.setProps({ modelValue: false });
+      expect(wrapper.classes()).not.toContain('unnnic-collapse--active');
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should toggle localActive when header is clicked', async () => {
+      const header = wrapper.find('[data-testid="collapse-header"]');
+
+      expect(wrapper.vm.localActive).toBe(false);
+      await header.trigger('click');
+      expect(wrapper.vm.localActive).toBe(true);
+      await header.trigger('click');
+      expect(wrapper.vm.localActive).toBe(false);
+    });
+
+    it('should emit change and update:modelValue on toggle', async () => {
+      const header = wrapper.find('[data-testid="collapse-header"]');
+
+      await header.trigger('click');
+
+      expect(wrapper.emitted('change')).toEqual([[true]]);
+      expect(wrapper.emitted('update:modelValue')).toEqual([[true]]);
+
+      await header.trigger('click');
+
+      expect(wrapper.emitted('change')).toEqual([[true], [false]]);
+      expect(wrapper.emitted('update:modelValue')).toEqual([[true], [false]]);
+    });
+  });
+
+  describe('Slots', () => {
+    it('should render default slot content when active', async () => {
+      const defaultSlotContent = 'This is default slot content';
+      wrapper = mount(Collapse, {
+        props: { title: 'Test Title', active: true },
+        slots: { default: defaultSlotContent },
+      });
+      expect(wrapper.html()).toContain(defaultSlotContent);
+    });
+
+    it('should render header slot content if provided', async () => {
+      const headerSlotContent =
+        '<header data-testid="header-slot">Header Slot Content</header>';
+      wrapper = mount(Collapse, {
+        props: { title: 'Test Title' },
+        slots: { header: headerSlotContent },
+      });
+      expect(wrapper.find('[data-testid="header-slot"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Watchers', () => {
+    it('should update localActive when active prop changes', async () => {
+      expect(wrapper.vm.localActive).toBe(false);
+      await wrapper.setProps({ active: true });
+      expect(wrapper.vm.localActive).toBe(true);
+    });
+
+    it('should update localActive when modelValue prop changes', async () => {
+      expect(wrapper.vm.localActive).toBe(false);
+      await wrapper.setProps({ modelValue: true });
+      expect(wrapper.vm.localActive).toBe(true);
+    });
+  });
+});

src/components/Collapse/__tests__/__snapshots__/Collapse.spec.js.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Collapse.vue > matches the snapshot 1`] = `
+"<div data-v-7d0d9fbd="" data-testid="collapse" class="unnnic-collapse unnnic-collapse--size-lg">
+  <div data-v-7d0d9fbd="" data-testid="collapse-header" class="unnnic-collapse__header">Test Title<svg data-v-26446d8e="" data-v-7d0d9fbd="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--xs unnnic-icon-scheme--neutral-cloudy" data-testid="old-map-icons">
+      <path d="M5.31471 14.0096L19.0432 29.5967C19.1676 29.7264 19.3169 29.8296 19.4822 29.9001C19.6474 29.9707 19.8253 30.007 20.005 30.007C20.1847 30.007 20.3625 29.9707 20.5278 29.9001C20.6931 29.8296 20.8424 29.7264 20.9668 29.5967L34.689 14.0096C34.7987 13.886 34.8825 13.7415 34.9353 13.5849C34.9882 13.4282 35.009 13.2625 34.9965 13.0977C34.984 12.9328 34.9385 12.7721 34.8627 12.6252C34.7869 12.4783 34.6824 12.3481 34.5553 12.2423L32.243 10.2963C31.9852 10.0789 31.6522 9.97163 31.316 9.99759C30.9797 10.0235 30.6671 10.1807 30.4457 10.435L20.2406 22.25C20.2112 22.2841 20.1749 22.3114 20.134 22.3302C20.0931 22.3489 20.0487 22.3587 20.0037 22.3587C19.9588 22.3587 19.9143 22.3489 19.8734 22.3302C19.8326 22.3114 19.7962 22.2841 19.7669 22.25L9.558 10.4338C9.33639 10.1806 9.02374 10.0252 8.68809 10.0013C8.52167 9.9865 8.35397 10.0052 8.19489 10.0563C8.03582 10.1074 7.8886 10.1898 7.76195 10.2988L5.44845 12.2423C5.32061 12.3479 5.21534 12.4781 5.13889 12.6252C5.06245 12.7723 5.0164 12.9332 5.0035 13.0985C4.99099 13.2635 5.01212 13.4294 5.06562 13.586C5.11911 13.7426 5.20386 13.8868 5.31471 14.0096Z" fill="#3B414D" class="primary"></path>
+    </svg></div>
+  <div data-v-7d0d9fbd="" class="unnnic-collapse__body" style="display: none;"></div>
+</div>"
+`;

src/components/Drawer/Drawer.vue

@@ -2,10 +2,12 @@
   <aside
     v-if="modelValue"
     class="unnnic-drawer"
+    data-testid="drawer"
   >
     <section
       v-if="!withoutOverlay"
       class="unnnic-drawer__overlay"
+      data-testid="overlay"
       @click.stop="close"
     />
     <Transition
@@ -14,23 +16,31 @@
     >
       <section
         v-if="showDrawer"
+        data-testid="drawer-container"
         :class="[
           'unnnic-drawer__container',
           `unnnic-drawer__container--${size}`,
         ]"
       >
         <header class="unnnic-drawer__header">
           <section class="unnnic-drawer__title-container">
-            <h1 class="unnnic-drawer__title">{{ title }}</h1>
+            <h1
+              class="unnnic-drawer__title"
+              data-testid="drawer-title"
+            >
+              {{ title }}
+            </h1>
             <p
               v-if="description"
               class="unnnic-drawer__description"
+              data-testid="drawer-description"
             >
               {{ description }}
             </p>
           </section>
           <UnnnicIcon
             class="unnnic-drawer__close"
+            data-testid="close-icon"
             :icon="closeIcon"
             size="avatar-nano"
             clickable
@@ -43,9 +53,11 @@
         <footer
           v-if="showFooter"
           class="unnnic-drawer__footer"
+          data-testid="footer"
         >
           <UnnnicButton
             v-if="secondaryButtonText"
+            data-testid="secondary-button"
             size="large"
             type="tertiary"
             :disabled="disabledSecondaryButton"
@@ -55,6 +67,7 @@
           />
           <UnnnicButton
             v-if="primaryButtonText"
+            data-testid="primary-button"
             size="large"
             :disabled="disabledPrimaryButton"
             :loading="loadingPrimaryButton"