@weni/unnnic-system 3.12.1-alpha.1 → 3.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.12.1-alpha.1",
+  "version": "3.12.1",
   "type": "commonjs",
   "files": [
     "dist",
@@ -63,7 +63,6 @@
     "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"
@@ -115,4 +114,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/assets/scss/tailwind.scss

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

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

@@ -2,7 +2,7 @@
 
 exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
 "<transition-stub data-v-c3231c18="" name="toast-slide" appear="true" persisted="false" css="true" data-testid="toast-transition">
-  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast" style="z-index: 1405;">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast">
     <section data-v-c3231c18="" class="unnnic-toast__content" data-testid="toast-content">
       <header data-v-c3231c18="" class="unnnic-toast__header" data-testid="toast-header"><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--green-500 unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="toast-type-icon" translate="no">check_circle</span>
         <h3 data-v-c3231c18="" class="unnnic-toast__title" data-testid="toast-title">Test Alert</h3><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable unnnic-toast__close" data-testid="toast-close-icon" translate="no">close</span>

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 {