@weni/unnnic-system 3.12.2 → 3.12.3-alpha.0

package/src/components/Drawer/Drawer.vue

@@ -1,198 +1,210 @@
 <template>
-  <aside
-    v-if="modelValue"
+  <Drawer
     class="unnnic-drawer"
     data-testid="drawer"
+    :open="modelValue"
+    @update:open="$event ? () => {} : back()"
   >
-    <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="[
+    <DrawerContent
+      v-bind="$attrs"
+      :showOverlay="!withoutOverlay"
+      data-testid="drawer-container"
+      :size="mappedSize"
+      :class="
+        [
           'unnnic-drawer__container',
           `unnnic-drawer__container--${size}`,
-        ]"
-      >
-        <header class="unnnic-drawer__header">
-          <section class="unnnic-drawer__title-container">
-            <slot
-              v-if="$slots.title"
-              name="title"
-            />
-
-            <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"
+          props.class,
+        ]
+          .filter(Boolean)
+          .join(' ')
+      "
+    >
+      <DrawerHeader class="unnnic-drawer__header">
+        <section class="unnnic-drawer__title-container">
+          <slot
+            v-if="$slots.title"
+            name="title"
           />
-        </header>
-        <section class="unnnic-drawer__content">
-          <slot name="content"></slot>
+
+          <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>
-        <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>
+        <template #close>
+          <DrawerClose>
+            <UnnnicButton
+              class="unnnic-drawer__close-icon"
+              data-testid="close-icon"
+              :iconCenter="closeIcon"
+              size="small"
+              type="tertiary"
+              @click="back"
+            />
+          </DrawerClose>
+        </template>
+      </DrawerHeader>
+
+      <section class="unnnic-drawer__content">
+        <slot name="content"></slot>
       </section>
-    </Transition>
-  </aside>
+
+      <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>
 </template>
 
-<script>
-import UnnnicIcon from '../Icon.vue';
-import UnnnicButton from '../Button/Button.vue';
+<script setup>
+import { computed } from 'vue';
 
-export default {
+import UnnnicButton from '../Button/Button.vue';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerClose,
+  DrawerTitle,
+  DrawerDescription,
+} from '../ui/drawer';
+
+defineOptions({
   name: 'UnnnicDrawer',
-  components: {
-    UnnnicIcon,
-    UnnnicButton,
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
   },
-  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,
-    },
+  description: {
+    type: String,
+    default: '',
   },
-  emits: ['primaryButtonClick', 'secondaryButtonClick', 'close', 'back'],
-  data() {
-    return {
-      showDrawer: true,
-    };
+  disabledPrimaryButton: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    showFooter() {
-      return !!(this.primaryButtonText || this.secondaryButtonText);
-    },
+  disabledSecondaryButton: {
+    type: Boolean,
+    default: false,
   },
-  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();
-      }
+  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);
     },
   },
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+  withoutOverlay: {
+    type: Boolean,
+    default: false,
+  },
+  closeIcon: {
+    type: String,
+    default: 'arrow_forward',
+  },
+  distinctCloseBack: {
+    type: Boolean,
+    default: false,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+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>
 
@@ -204,107 +216,16 @@ export default {
   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%;
-  }
 
-  &--xl {
-    width: 66%;
-  }
-
-  &--gt {
-    width: 75%;
-  }
-
-  .unnnic-drawer__header {
+  .unnnic-drawer__close-icon {
+    margin: $unnnic-spacing-nano;
     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,6 +5,19 @@ 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: {
@@ -15,15 +28,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 +43,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 +53,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 +89,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 +111,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 +134,9 @@ describe('Drawer.vue', () => {
           slots: {
             title: '<div data-testid="custom-title">Slot Title</div>',
           },
+          global: {
+            stubs: globalStubs,
+          },
         });
 
         expect(title().exists()).toBe(false);
@@ -164,7 +188,7 @@ describe('Drawer.vue', () => {
     });
   });
 
-  describe('Interactions and Transitions', () => {
+  describe('Interactions', () => {
     beforeEach(() => {
       vi.useFakeTimers();
     });
@@ -174,9 +198,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 +205,6 @@ describe('Drawer.vue', () => {
       await wrapper.setProps({ distinctCloseBack: true });
       await closeIcon().trigger('click');
 
-      vi.advanceTimersByTime(200);
-
       expect(wrapper.emitted('back')).toBeTruthy();
     });
 
@@ -193,49 +212,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 +266,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', () => {