@weni/unnnic-system 3.12.3-alpha.5 → 3.12.3

package/src/components/Drawer/Drawer.vue

@@ -1,210 +1,198 @@
 <template>
-  <Drawer
+  <aside
+    v-if="modelValue"
     class="unnnic-drawer"
     data-testid="drawer"
-    :open="modelValue"
-    @update:open="$event ? () => {} : back()"
   >
-    <DrawerContent
-      v-bind="$attrs"
-      :showOverlay="!withoutOverlay"
-      data-testid="drawer-container"
-      :size="mappedSize"
-      :class="
-        [
+    <section
+      v-if="!withoutOverlay"
+      class="unnnic-drawer__overlay"
+      data-testid="overlay"
+      @click.stop="close"
+    />
+    <Transition
+      appear
+      name="drawer"
+    >
+      <section
+        v-if="showDrawer"
+        data-testid="drawer-container"
+        :class="[
           'unnnic-drawer__container',
           `unnnic-drawer__container--${size}`,
-          props.class,
-        ]
-          .filter(Boolean)
-          .join(' ')
-      "
-    >
-      <DrawerHeader class="unnnic-drawer__header">
-        <section class="unnnic-drawer__title-container">
-          <slot
-            v-if="$slots.title"
-            name="title"
-          />
-
-          <template v-else>
-            <DrawerTitle
-              class="unnnic-drawer__title"
-              data-testid="drawer-title"
-            >
-              {{ title }}
-            </DrawerTitle>
-            <DrawerDescription
-              v-if="description"
-              class="unnnic-drawer__description"
-              data-testid="drawer-description"
-            >
-              {{ description }}
-            </DrawerDescription>
-          </template>
-        </section>
-        <template #close>
-          <DrawerClose>
-            <UnnnicButton
-              class="unnnic-drawer__close-icon"
-              data-testid="close-icon"
-              :iconCenter="closeIcon"
-              size="small"
-              type="tertiary"
-              @click="back"
+        ]"
+      >
+        <header class="unnnic-drawer__header">
+          <section class="unnnic-drawer__title-container">
+            <slot
+              v-if="$slots.title"
+              name="title"
             />
-          </DrawerClose>
-        </template>
-      </DrawerHeader>
 
-      <section class="unnnic-drawer__content">
-        <slot name="content"></slot>
+            <template v-else>
+              <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>
+            </template>
+          </section>
+          <UnnnicIcon
+            class="unnnic-drawer__close"
+            data-testid="close-icon"
+            :icon="closeIcon"
+            size="avatar-nano"
+            clickable
+            @click="back"
+          />
+        </header>
+        <section class="unnnic-drawer__content">
+          <slot name="content"></slot>
+        </section>
+        <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"
+            :loading="loadingSecondaryButton"
+            :text="secondaryButtonText"
+            @click="$emit('secondaryButtonClick')"
+          />
+          <UnnnicButton
+            v-if="primaryButtonText"
+            data-testid="primary-button"
+            size="large"
+            :disabled="disabledPrimaryButton"
+            :loading="loadingPrimaryButton"
+            :type="primaryButtonType"
+            :text="primaryButtonText"
+            @click="$emit('primaryButtonClick')"
+          />
+        </footer>
       </section>
-
-      <DrawerFooter
-        v-if="showFooter"
-        class="unnnic-drawer__footer"
-        data-testid="footer"
-      >
-        <UnnnicButton
-          v-if="secondaryButtonText"
-          data-testid="secondary-button"
-          size="large"
-          type="tertiary"
-          :disabled="disabledSecondaryButton"
-          :loading="loadingSecondaryButton"
-          :text="secondaryButtonText"
-          @click="$emit('secondaryButtonClick')"
-        />
-        <UnnnicButton
-          v-if="primaryButtonText"
-          data-testid="primary-button"
-          size="large"
-          :disabled="disabledPrimaryButton"
-          :loading="loadingPrimaryButton"
-          :type="primaryButtonType"
-          :text="primaryButtonText"
-          @click="$emit('primaryButtonClick')"
-        />
-      </DrawerFooter>
-    </DrawerContent>
-  </Drawer>
+    </Transition>
+  </aside>
 </template>
 
-<script setup>
-import { computed } from 'vue';
-
+<script>
+import UnnnicIcon from '../Icon.vue';
 import UnnnicButton from '../Button/Button.vue';
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerClose,
-  DrawerTitle,
-  DrawerDescription,
-} from '../ui/drawer';
-
-defineOptions({
-  name: 'UnnnicDrawer',
-  inheritAttrs: false,
-});
 
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  disabledPrimaryButton: {
-    type: Boolean,
-    default: false,
-  },
-  disabledSecondaryButton: {
-    type: Boolean,
-    default: false,
-  },
-  loadingPrimaryButton: {
-    type: Boolean,
-    default: false,
-  },
-  loadingSecondaryButton: {
-    type: Boolean,
-    default: false,
-  },
-  primaryButtonText: {
-    type: String,
-    default: '',
-  },
-  primaryButtonType: {
-    type: String,
-    default: 'primary',
-  },
-  secondaryButtonText: {
-    type: String,
-    default: '',
+export default {
+  name: 'UnnnicDrawer',
+  components: {
+    UnnnicIcon,
+    UnnnicButton,
   },
-  size: {
-    type: String,
-    default: 'md',
-    validator(val) {
-      return ['md', 'lg', 'xl', 'gt'].includes(val);
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    disabledPrimaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    disabledSecondaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadingPrimaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadingSecondaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    primaryButtonText: {
+      type: String,
+      default: '',
+    },
+    primaryButtonType: {
+      type: String,
+      default: 'primary',
+    },
+    secondaryButtonText: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator(val) {
+        return ['md', 'lg', 'xl', 'gt'].includes(val);
+      },
+    },
+    wide: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    withoutOverlay: {
+      type: Boolean,
+      default: false,
+    },
+    closeIcon: {
+      type: String,
+      default: 'arrow_back',
+    },
+    distinctCloseBack: {
+      type: Boolean,
+      default: false,
     },
   },
-  modelValue: {
-    type: Boolean,
-    required: true,
-  },
-  withoutOverlay: {
-    type: Boolean,
-    default: false,
-  },
-  closeIcon: {
-    type: String,
-    default: 'arrow_forward',
+  emits: ['primaryButtonClick', 'secondaryButtonClick', 'close', 'back'],
+  data() {
+    return {
+      showDrawer: true,
+    };
   },
-  distinctCloseBack: {
-    type: Boolean,
-    default: false,
+  computed: {
+    showFooter() {
+      return !!(this.primaryButtonText || this.secondaryButtonText);
+    },
   },
-  class: {
-    type: String,
-    default: '',
+  methods: {
+    transitionClose(callback) {
+      this.showDrawer = false;
+      setTimeout(() => {
+        callback?.();
+        this.showDrawer = true;
+      }, 200);
+    },
+    close() {
+      this.transitionClose(() => this.$emit('close'));
+    },
+    back() {
+      if (this.distinctCloseBack) {
+        this.transitionClose(() => this.$emit('back'));
+      } else {
+        this.close();
+      }
+    },
   },
-});
-
-const emit = defineEmits([
-  'primaryButtonClick',
-  'secondaryButtonClick',
-  'close',
-  'back',
-]);
-const showFooter = computed(
-  () => !!(props.primaryButtonText || props.secondaryButtonText),
-);
-const mappedSize = computed(() => {
-  const sizes = {
-    md: 'medium',
-    lg: 'large',
-    xl: 'extra-large',
-    gt: 'giant',
-  };
-  return sizes[props.size] || 'medium';
-});
-
-const close = () => {
-  emit('close');
-};
-
-const back = () => {
-  if (props.distinctCloseBack) {
-    emit('back');
-  } else {
-    close();
-  }
 };
 </script>
 
@@ -216,16 +204,107 @@ const back = () => {
   box-sizing: border-box;
 }
 
+@keyframes drawerOpen {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes drawerClose {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.drawer-enter-active,
+.drawer-enter-to {
+  animation: drawerOpen 200ms ease-in;
+}
+
+.drawer-leave-active,
+.drawer-leave-to {
+  display: none;
+  animation: drawerClose 200ms ease-in;
+}
+
 .unnnic-drawer {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
   z-index: 8;
 }
 
+.unnnic-drawer__overlay {
+  z-index: 9;
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+}
+
 .unnnic-drawer__container {
   z-index: 10;
+  top: 0;
+  right: 0;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  font-family: $unnnic-font-family-secondary;
+  justify-content: space-between;
+  height: 100%;
+  background-color: $unnnic-color-neutral-white;
+
+  &--md {
+    width: calc(100% / 3);
+  }
+
+  &--lg {
+    width: 50%;
+  }
 
-  .unnnic-drawer__close-icon {
-    margin: $unnnic-spacing-nano;
+  &--xl {
+    width: 66%;
+  }
+
+  &--gt {
+    width: 75%;
+  }
+
+  .unnnic-drawer__header {
     display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid $unnnic-color-neutral-soft;
+    padding: $unnnic-spacing-md;
+    .unnnic-drawer__title-container {
+      .unnnic-drawer__title {
+        color: $unnnic-color-neutral-darkest;
+        font-family: $unnnic-font-family-secondary;
+        font-size: $unnnic-font-size-title-sm;
+        font-weight: $unnnic-font-weight-black;
+        line-height: $unnnic-line-height-large * 1.75;
+      }
+
+      .unnnic-drawer__description {
+        color: $unnnic-color-neutral-cloudy;
+        font-family: $unnnic-font-family-secondary;
+        font-size: $unnnic-font-size-body-gt;
+        font-weight: $unnnic-font-weight-regular;
+        line-height: $unnnic-line-height-large * 1.375;
+      }
+    }
+
+    .unnnic-drawer__close {
+      margin: $unnnic-spacing-nano;
+      transform: rotate(180deg);
+      display: flex;
+    }
   }
 
   .unnnic-drawer__content {

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

@@ -5,19 +5,6 @@ import Drawer from '../Drawer.vue';
 describe('Drawer.vue', () => {
   let wrapper;
 
-  const templateSlot = { template: `<div><slot /></div>` };
-  const globalStubs = {
-    UnnnicIcon: true,
-    UnnnicButton: true,
-    Teleport: templateSlot,
-    UnnnicDrawerNext: templateSlot,
-    UnnnicDrawerContent: templateSlot,
-    UnnnicDrawerFooter: templateSlot,
-    UnnnicDrawerClose: templateSlot,
-    UnnnicDrawerTitle: templateSlot,
-    UnnnicDrawerDescription: templateSlot,
-  };
-
   beforeEach(() => {
     wrapper = mount(Drawer, {
       props: {
@@ -28,14 +15,15 @@ describe('Drawer.vue', () => {
         secondaryButtonText: 'Secondary Action',
       },
       global: {
-        stubs: globalStubs,
+        stubs: ['UnnnicIcon', 'UnnnicButton'],
       },
     });
   });
 
   const element = (id) => wrapper.find(`[data-testid="${id}"]`);
   const component = (id) => wrapper.findComponent(`[data-testid="${id}"]`);
-  const drawerRoot = () => wrapper.findComponent({ name: 'UnnnicDrawerNext' });
+  const drawer = () => element('drawer');
+  const overlay = () => element('overlay');
   const title = () => element('drawer-title');
   const description = () => element('drawer-description');
   const primaryButton = () => component('primary-button');
@@ -43,8 +31,6 @@ 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', () => {
@@ -53,21 +39,21 @@ describe('Drawer.vue', () => {
       });
 
       it('should render the drawer when modelValue is true', () => {
-        expect(drawerRoot().props('open')).toBe(true);
+        expect(drawer().exists()).toBe(true);
       });
 
       it('should not render the drawer when modelValue is false', async () => {
         await wrapper.setProps({ modelValue: false });
-        expect(drawerRoot().props('open')).toBe(false);
+        expect(drawer().exists()).toBe(false);
       });
 
       it('should render the overlay when withoutOverlay is false', () => {
-        expect(drawerContentComponent().props('showOverlay')).toBe(true);
+        expect(overlay().exists()).toBe(true);
       });
 
       it('should not render the overlay when withoutOverlay is true', async () => {
         await wrapper.setProps({ withoutOverlay: true });
-        expect(drawerContentComponent().props('showOverlay')).toBe(false);
+        expect(overlay().exists()).toBe(false);
       });
 
       it('should display the title and description correctly', () => {
@@ -89,11 +75,7 @@ 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,
         );
@@ -111,9 +93,6 @@ describe('Drawer.vue', () => {
           slots: {
             title: '<h2 data-testid="custom-title">Custom Title Content</h2>',
           },
-          global: {
-            stubs: globalStubs,
-          },
         });
 
         expect(title().exists()).toBe(false);
@@ -134,9 +113,6 @@ describe('Drawer.vue', () => {
           slots: {
             title: '<div data-testid="custom-title">Slot Title</div>',
           },
-          global: {
-            stubs: globalStubs,
-          },
         });
 
         expect(title().exists()).toBe(false);
@@ -188,7 +164,7 @@ describe('Drawer.vue', () => {
     });
   });
 
-  describe('Interactions', () => {
+  describe('Interactions and Transitions', () => {
     beforeEach(() => {
       vi.useFakeTimers();
     });
@@ -198,6 +174,9 @@ 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();
     });
 
@@ -205,6 +184,8 @@ describe('Drawer.vue', () => {
       await wrapper.setProps({ distinctCloseBack: true });
       await closeIcon().trigger('click');
 
+      vi.advanceTimersByTime(200);
+
       expect(wrapper.emitted('back')).toBeTruthy();
     });
 
@@ -212,21 +193,49 @@ 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(drawerContentComponent().props('class')).toContain(
+      expect(drawerContainer().classes()).toContain(
         'unnnic-drawer__container--lg',
       );
-      expect(drawerContentComponent().props('size')).toBe('large');
 
       await wrapper.setProps({ size: 'xl' });
-      expect(drawerContentComponent().props('class')).toContain(
+      expect(drawerContainer().classes()).toContain(
         'unnnic-drawer__container--xl',
       );
-      expect(drawerContentComponent().props('size')).toBe('extra-large');
     });
 
     it('should display footer if either primaryButtonText or secondaryButtonText is provided', async () => {
@@ -266,7 +275,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('iconCenter')).toBe('custom_close_icon');
+      expect(closeIcon().props('icon')).toBe('custom_close_icon');
     });
 
     it('should validate all size prop values correctly', () => {