@weni/unnnic-system 3.11.2 → 3.11.3-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.11.2",
+  "version": "3.11.3-alpha.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -63,6 +63,7 @@
     "reka-ui": "^2.6.0",
     "remark-gfm": "^4.0.0",
     "tw-animate-css": "^1.4.0",
+    "vaul-vue": "^0.4.1",
     "vue": "^3.4.8",
     "vue-i18n": "9",
     "vue-the-mask": "^0.11.1"

package/src/assets/scss/tailwind.scss

@@ -92,5 +92,13 @@
     @apply bg-background text-foreground;
     font-family: $unnnic-font-family;
   }
+
+  button {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+  }
 }
 

package/src/components/Drawer/Drawer.vue

@@ -1,198 +1,208 @@
 <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
+      :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,
+});
+
+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 +214,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 {