@weni/unnnic-system 3.9.4 → 3.11.0-alpha.2

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

@@ -5,6 +5,13 @@ import Drawer from '../Drawer.vue';
 describe('Drawer.vue', () => {
   let wrapper;
 
+  const templateSlot = { template: `<div><slot /></div>` };
+  const globalStubs = {
+    UnnnicIcon: true,
+    UnnnicButton: true,
+    Teleport: templateSlot,
+  };
+
   beforeEach(() => {
     wrapper = mount(Drawer, {
       props: {
@@ -15,15 +22,14 @@ describe('Drawer.vue', () => {
         secondaryButtonText: 'Secondary Action',
       },
       global: {
-        stubs: ['UnnnicIcon', 'UnnnicButton'],
+        stubs: globalStubs,
       },
     });
   });
 
   const element = (id) => wrapper.find(`[data-testid="${id}"]`);
   const component = (id) => wrapper.findComponent(`[data-testid="${id}"]`);
-  const drawer = () => element('drawer');
-  const overlay = () => element('overlay');
+  const drawerRoot = () => wrapper.findComponent({ name: 'UnnnicDrawerNext' });
   const title = () => element('drawer-title');
   const description = () => element('drawer-description');
   const primaryButton = () => component('primary-button');
@@ -31,6 +37,8 @@ describe('Drawer.vue', () => {
   const footer = () => element('footer');
   const closeIcon = () => component('close-icon');
   const drawerContainer = () => element('drawer-container');
+  const drawerContentComponent = () =>
+    wrapper.findComponent({ name: 'UnnnicDrawerContent' });
 
   describe('Component Rendering', () => {
     describe('Component Rendering', () => {
@@ -39,21 +47,21 @@ describe('Drawer.vue', () => {
       });
 
       it('should render the drawer when modelValue is true', () => {
-        expect(drawer().exists()).toBe(true);
+        expect(drawerRoot().props('open')).toBe(true);
       });
 
       it('should not render the drawer when modelValue is false', async () => {
         await wrapper.setProps({ modelValue: false });
-        expect(drawer().exists()).toBe(false);
+        expect(drawerRoot().props('open')).toBe(false);
       });
 
       it('should render the overlay when withoutOverlay is false', () => {
-        expect(overlay().exists()).toBe(true);
+        expect(drawerContentComponent().props('showOverlay')).toBe(true);
       });
 
       it('should not render the overlay when withoutOverlay is true', async () => {
         await wrapper.setProps({ withoutOverlay: true });
-        expect(overlay().exists()).toBe(false);
+        expect(drawerContentComponent().props('showOverlay')).toBe(false);
       });
 
       it('should display the title and description correctly', () => {
@@ -75,7 +83,11 @@ describe('Drawer.vue', () => {
           slots: {
             content: '<div data-testid="slot-content">Slot Content</div>',
           },
+          global: {
+            stubs: globalStubs,
+          },
         });
+
         expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(
           true,
         );
@@ -93,6 +105,9 @@ describe('Drawer.vue', () => {
           slots: {
             title: '<h2 data-testid="custom-title">Custom Title Content</h2>',
           },
+          global: {
+            stubs: globalStubs,
+          },
         });
 
         expect(title().exists()).toBe(false);
@@ -113,6 +128,9 @@ describe('Drawer.vue', () => {
           slots: {
             title: '<div data-testid="custom-title">Slot Title</div>',
           },
+          global: {
+            stubs: globalStubs,
+          },
         });
 
         expect(title().exists()).toBe(false);
@@ -164,7 +182,7 @@ describe('Drawer.vue', () => {
     });
   });
 
-  describe('Interactions and Transitions', () => {
+  describe('Interactions', () => {
     beforeEach(() => {
       vi.useFakeTimers();
     });
@@ -174,9 +192,6 @@ describe('Drawer.vue', () => {
 
     it('should close the drawer when the close icon is clicked', async () => {
       await closeIcon().trigger('click');
-
-      vi.advanceTimersByTime(200);
-
       expect(wrapper.emitted('close')).toBeTruthy();
     });
 
@@ -184,8 +199,6 @@ describe('Drawer.vue', () => {
       await wrapper.setProps({ distinctCloseBack: true });
       await closeIcon().trigger('click');
 
-      vi.advanceTimersByTime(200);
-
       expect(wrapper.emitted('back')).toBeTruthy();
     });
 
@@ -193,49 +206,21 @@ describe('Drawer.vue', () => {
       await closeIcon().trigger('click');
       expect(wrapper.emitted('back')).toBeUndefined();
     });
-
-    it('should correctly handle transitions when closing the drawer', async () => {
-      await wrapper.vm.close();
-      expect(wrapper.vm.showDrawer).toBe(false);
-
-      setTimeout(() => {
-        expect(drawer().exists()).toBe(false);
-      }, 200);
-    });
-
-    it('should handle overlay clicks to close the drawer when withoutOverlay is false', async () => {
-      expect(overlay().exists()).toBe(true);
-      await overlay().trigger('click');
-
-      vi.advanceTimersByTime(200);
-
-      expect(wrapper.emitted('close')).toBeTruthy();
-    });
-
-    it('should execute the callback after 200ms timeout and reset showDrawer', async () => {
-      const callbackMock = vi.fn();
-      wrapper.vm.transitionClose(callbackMock);
-
-      expect(wrapper.vm.showDrawer).toBe(false);
-
-      vi.advanceTimersByTime(200);
-
-      expect(callbackMock).toHaveBeenCalled();
-      expect(wrapper.vm.showDrawer).toBe(true);
-    });
   });
 
   describe('Props and Computed Properties', () => {
     it('should render the correct size class based on size prop', async () => {
       await wrapper.setProps({ size: 'lg' });
-      expect(drawerContainer().classes()).toContain(
+      expect(drawerContentComponent().props('class')).toContain(
         'unnnic-drawer__container--lg',
       );
+      expect(drawerContentComponent().props('size')).toBe('large');
 
       await wrapper.setProps({ size: 'xl' });
-      expect(drawerContainer().classes()).toContain(
+      expect(drawerContentComponent().props('class')).toContain(
         'unnnic-drawer__container--xl',
       );
+      expect(drawerContentComponent().props('size')).toBe('extra-large');
     });
 
     it('should display footer if either primaryButtonText or secondaryButtonText is provided', async () => {
@@ -275,7 +260,7 @@ describe('Drawer.vue', () => {
 
     it('should use correct icon for close button based on closeIcon prop', async () => {
       await wrapper.setProps({ closeIcon: 'custom_close_icon' });
-      expect(closeIcon().props('icon')).toBe('custom_close_icon');
+      expect(closeIcon().props('iconCenter')).toBe('custom_close_icon');
     });
 
     it('should validate all size prop values correctly', () => {

package/src/components/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap

@@ -1,23 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Drawer.vue > Component Rendering > Component Rendering > matches the snapshot 1`] = `
-"<aside data-v-196de012="" class="unnnic-drawer" data-testid="drawer">
-  <section data-v-196de012="" class="unnnic-drawer__overlay" data-testid="overlay"></section>
-  <transition-stub data-v-196de012="" name="drawer" appear="true" persisted="false" css="true">
-    <section data-v-196de012="" data-testid="drawer-container" class="unnnic-drawer__container unnnic-drawer__container--md">
-      <header data-v-196de012="" class="unnnic-drawer__header">
-        <section data-v-196de012="" class="unnnic-drawer__title-container">
-          <h1 data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</h1>
-          <p data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
-        </section>
-        <unnnic-icon-stub data-v-196de012="" filled="false" icon="arrow_back" clickable="true" size="avatar-nano" scheme="neutral-darkest" class="unnnic-drawer__close" data-testid="close-icon"></unnnic-icon-stub>
-      </header>
-      <section data-v-196de012="" class="unnnic-drawer__content"></section>
-      <footer data-v-196de012="" class="unnnic-drawer__footer" data-testid="footer">
-        <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
-        <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
-      </footer>
-    </section>
-  </transition-stub>
-</aside>"
+"<div data-v-e761d31f="" data-v-196de012="" disabled="false" defer="false" forcemount="false" data-testid="drawer-container">
+  <div data-v-7f241b30="" data-v-e761d31f="" data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="unnnic-drawer__overlay"></div>
+  <div data-v-e761d31f="" data-dismissable-layer="" style="--snap-point-height: 0; --initial-transform: calc(100% + 8px); pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" size="medium" showoverlay="true" class="unnnic-drawer__content unnnic-drawer__content--medium unnnic-drawer__container unnnic-drawer__container--md" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+    <header data-v-39d0dfb8="" data-v-196de012="" class="unnnic-drawer__header unnnic-drawer__header">
+      <section data-v-196de012="" class="unnnic-drawer__title-container">
+        <h2 data-v-97709962="" data-v-196de012="" id="reka-dialog-title-v-0" class="unnnic-drawer__title unnnic-drawer__title" data-testid="drawer-title">Test Title</h2>
+        <p data-v-750ea255="" data-v-196de012="" id="reka-dialog-description-v-1" class="unnnic-drawer__description unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
+      </section><button data-v-4a771f40="" data-v-196de012="" type="button" class="unnnic-drawer__close">
+        <unnnic-button-stub data-v-196de012="" size="small" text="" type="tertiary" float="false" iconleft="" iconright="" iconcenter="arrow_forward" iconsfilled="false" disabled="false" loading="false" class="unnnic-drawer__close-icon" data-testid="close-icon"></unnnic-button-stub>
+      </button>
+    </header>
+    <section data-v-196de012="" class="unnnic-drawer__content"></section>
+    <footer data-v-02ebc5b4="" data-v-196de012="" class="unnnic-drawer__footer unnnic-drawer__footer" data-testid="footer">
+      <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
+      <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
+    </footer>
+  </div>
+</div>"
 `;

package/src/components/FormElement/FormElement.vue

@@ -3,66 +3,53 @@
     class="unnnic-form-element"
     :class="{ 'unnnic-form-element--disabled': disabled }"
   >
-    <p
+    <UnnnicLabel
       v-if="label"
+      :label="label"
+      :tooltip="tooltip"
       :class="[
         'unnnic-form-element__label',
         {
           'unnnic-form-element__label--fixed': fixedLabel,
         },
       ]"
-    >
-      {{ fullySanitize(label) }}
-    </p>
+    />
 
     <slot></slot>
 
-    <p
-      v-if="shouldShowErrorSection"
-      class="unnnic-form-element__error"
-    >
-      <template v-if="error !== true">
-        <UnnnicIcon
-          size="sm"
-          icon="warning"
-          scheme="aux-red-500"
-        />
-
-        {{ fullySanitize(error) }}
-      </template>
-
-      <span
-        v-if="!!$slots.rightMessage"
-        class="unnnic-form-element__right-message"
-      >
-        <slot name="rightMessage"></slot>
-      </span>
-    </p>
-
-    <p
-      v-if="message || !!$slots.rightMessage"
-      class="unnnic-form-element__message"
+    <section
+      class="unnnic-form-element__hints-container"
+      v-if="message || error || !!$slots.rightMessage"
     >
-      {{ fullySanitize(message) }}
-
-      <span
-        v-if="!shouldShowErrorSection && !!$slots.rightMessage"
-        class="unnnic-form-element__right-message"
-      >
-        <slot name="rightMessage"></slot>
-      </span>
-    </p>
+      <section class="unnnic-form-element__message-container">
+        <p
+          v-if="message"
+          class="unnnic-form-element__message"
+        >
+          {{ fullySanitize(message) }}
+        </p>
+        <p
+          v-if="!!error?.length"
+          class="unnnic-form-element__message error"
+        >
+          {{ Array.isArray(error) ? error.join(', ') : error }}
+        </p>
+      </section>
+      <p v-if="!!$slots.rightMessage">
+        <slot name="rightMessage" />
+      </p>
+    </section>
   </section>
 </template>
 
-<script>
-import UnnnicIcon from '../../components/Icon.vue';
+<script lang="js">
 import { fullySanitize } from '../../utils/sanitize';
+import UnnnicLabel from '../Label/Label.vue';
+
 export default {
   components: {
-    UnnnicIcon,
+    UnnnicLabel,
   },
-
   props: {
     size: {
       type: String,
@@ -70,28 +57,20 @@ export default {
       validator: (size) => ['md', 'sm'].includes(size),
     },
 
-    label: String,
+    label: { type: String, default: '' },
 
-    fixedLabel: Boolean,
+    fixedLabel: { type: Boolean, default: false },
 
     error: {
       type: [Boolean, String],
       default: false,
     },
 
-    message: String,
+    message: { type: String, default: '' },
 
-    disabled: Boolean,
-  },
+    disabled: { type: Boolean, default: false },
 
-  data() {
-    return {};
-  },
-
-  computed: {
-    shouldShowErrorSection() {
-      return this.error && (this.error !== true || !!this.$slots.rightMessage);
-    },
+    tooltip: { type: String, default: '' },
   },
   methods: {
     fullySanitize,
@@ -102,75 +81,66 @@ export default {
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
+* {
+  margin: $unnnic-space-0;
+  padding: $unnnic-space-0;
+  box-sizing: border-box;
+}
+
 .unnnic-form-element {
   &__label {
-    margin: 0;
-    margin-bottom: $unnnic-spacing-nano;
-
+    font: $unnnic-font-body;
     color: $unnnic-color-neutral-cloudy;
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-
-    $label-bottom-spacing: 3px;
+    margin-bottom: $unnnic-space-1;
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
 
     &--fixed {
-      margin-top: -$unnnic-font-size-body-gt - $unnnic-line-height-md +
-        $label-bottom-spacing;
+      margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 + $unnnic-space-1;
     }
 
     &--fixed {
-      margin-bottom: 0;
+      margin-bottom: $unnnic-space-0;
       position: absolute;
-      padding: 0 $unnnic-spacing-nano;
-      margin-left: $unnnic-spacing-xs;
+      padding: $unnnic-space-0 $unnnic-space-1;
+      margin-left: $unnnic-space-2;
 
       &:after {
         content: ' ';
         position: absolute;
-        left: 0;
-        bottom: $label-bottom-spacing - $unnnic-border-width-thinner;
+        left: $unnnic-space-0;
+        bottom: $unnnic-space-1 - $unnnic-border-width-thinner;
         width: 100%;
         height: $unnnic-border-width-thinner;
-        background-color: $unnnic-color-neutral-white;
+        background-color: $unnnic-color-white;
       }
     }
   }
 
-  &__error,
   &__message {
-    margin: 0;
-    margin-top: $unnnic-spacing-stack-nano;
-
-    color: $unnnic-color-neutral-cloudy;
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-md;
-    line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+    &.error {
+      color: $unnnic-color-fg-critical;
+    }
   }
 
-  &__message {
+  &__hints-container {
     display: flex;
-    column-gap: $unnnic-spacing-nano;
-  }
-
-  &__right-message {
-    margin-left: auto;
+    justify-content: space-between;
+    margin-top: $unnnic-space-1;
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-base;
   }
 
-  &__error {
+  &__message-container {
     display: flex;
-    column-gap: $unnnic-spacing-nano;
-    align-items: center;
-
-    color: $unnnic-color-aux-red-500;
+    flex-direction: column;
+    gap: $unnnic-space-1;
   }
 
   &--disabled .unnnic-form-element__label,
   &--disabled .unnnic-form-element__message {
     user-select: none;
-    color: $unnnic-color-neutral-cleanest;
   }
 }
 </style>

package/src/components/Icon.vue

@@ -133,15 +133,7 @@ $icon-sizes:
   font-family: 'Material Symbols Rounded';
   font-style: normal;
   font-weight: 300;
-  src: url('../assets/fonts/Material Symbols Rounded.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Material Symbols Rounded Filled';
-  font-style: normal;
-  font-weight: 300;
-  src: url('../assets/fonts/Material Symbols Rounded Filled.woff2')
-    format('woff2');
+  src: url('../assets/fonts/material-symbols-rounded.woff2') format('woff2');
 }
 
 .unnnic-icon {
@@ -197,8 +189,10 @@ $icon-sizes:
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 
+  user-select: none;
+
   &--filled {
-    font-family: 'Material Symbols Rounded Filled';
+    font-variation-settings: 'FILL' 1;
   }
 }
 </style>

package/src/components/Input/BaseInput.vue

@@ -7,13 +7,13 @@
     :class="classes"
     :type="nativeType"
   />
-
   <input
     v-else
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
     :class="classes"
     :type="nativeType"
+    :maxlength="maxlength"
   />
 </template>
 
@@ -49,6 +49,10 @@ export default {
     },
     hasIconLeft: Boolean,
     hasIconRight: Boolean,
+    maxlength: {
+      type: Number,
+      default: null,
+    },
   },
   emits: ['update:modelValue'],
   data() {
@@ -96,27 +100,23 @@ export default {
   &.size {
     &-md {
       @include input-md-font;
-
-      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
-        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
+      padding: $unnnic-space-3 $unnnic-space-4;
+      height: 45px;
     }
 
     &-sm {
       @include input-sm-font;
-
-      padding: $unnnic-spacing-xs
-        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
+      padding: $unnnic-space-2 $unnnic-space-4;
+      height: 37px;
     }
   }
 
   &.input--has-icon-left {
-    padding-left: $unnnic-spacing-sm + $unnnic-icon-size-sm +
-      $unnnic-spacing-xs - $unnnic-border-width-thinner;
+    padding-left: $unnnic-space-10;
   }
 
   &.input--has-icon-right {
-    padding-right: $unnnic-spacing-sm + $unnnic-icon-size-sm +
-      $unnnic-spacing-xs - $unnnic-border-width-thinner;
+    padding-right: $unnnic-space-10;
   }
 
   &.error {
@@ -126,7 +126,7 @@ export default {
   &:-ms-input-placeholder,
   &::-ms-input-placeholder {
     /* Internet Explorer 10-11 */
-    color: $unnnic-color-brand-sec;
+    color: $unnnic-color-fg-muted;
   }
 }
 </style>

package/src/components/Input/Input.scss

@@ -1,43 +1,42 @@
 @use '@/assets/scss/unnnic' as *;
 
 @mixin input-base {
-  background: $unnnic-color-neutral-white;
-  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+  background: $unnnic-color-white;
+  border: $unnnic-border-width-thinner solid $unnnic-color-border-base;
   outline: none;
-  border-radius: $unnnic-border-radius-sm;
-  color: $unnnic-color-neutral-darkest;
-  caret-color: $unnnic-color-neutral-clean;
-  font-weight: $unnnic-font-weight-regular;
-  font-family: $unnnic-font-family-secondary;
+  border-radius: $unnnic-radius-2;
+  color: $unnnic-color-fg-emphasized;
+  caret-color: $unnnic-color-fg-muted;
+  font: $unnnic-font-body;
+
+  transition: border-color 0.1s ease-in-out;
 
   &:focus {
-    border-color: $unnnic-color-weni-600;
+    border-color: $unnnic-color-border-active;
   }
 
   &::placeholder {
-    color: $unnnic-color-neutral-cleanest;
-    opacity: 1; /* Firefox */
+    color: $unnnic-color-fg-muted;
+    opacity: 1;
+    /* Firefox */
   }
 
   &:disabled {
-    border-color: $unnnic-color-neutral-cleanest;
-    background-color: $unnnic-color-neutral-lightest;
+    border-color: $unnnic-color-border-muted;
+    background-color: $unnnic-color-bg-muted;
     cursor: not-allowed;
-    color: $unnnic-color-neutral-cleanest;
+    color: $unnnic-color-fg-muted;
   }
 }
 
 @mixin input-sm-font {
-  font-size: $unnnic-font-size-body-md;
-  line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
+  font: $unnnic-font-body;
 }
 
 @mixin input-md-font {
-  font-size: $unnnic-font-size-body-gt;
-  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+  font: $unnnic-font-body;
 }
 
 @mixin input-error {
-  border-color: $unnnic-color-aux-red-500;
-  color: $unnnic-color-aux-red-500;
-}
+  border-color: $unnnic-color-border-critical;
+}