@weni/unnnic-system 3.12.8-alpha-teleports.0 → 3.12.8-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.12.8-alpha-teleports.0",
+  "version": "3.12.8-alpha.1",
   "type": "commonjs",
   "files": [
     "dist",

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: 1005;">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast" style="z-index: 1405;">
     <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/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue

@@ -59,9 +59,8 @@ const props = defineProps<{
 }>();
 
 const calculatedTransform = computed(() => {
-  return `skew(${props.data.length === 2 ? '-8deg': '-12deg'}, 0deg) translateX(-20px)`;
+  return `skew(${props.data.length === 2 ? '-8deg' : '-12deg'}, 0deg) translateX(-20px)`;
 });
-
 </script>
 
 <style lang="scss" scoped>

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelTwoRows.vue

@@ -1,65 +1,64 @@
 <template>
-    <ChartFunnelBaseRow
-      class="unnnic-chart-funnel-two-rows"
-      :rows="rows"
-      viewBox="0 0 250 148"
-    />
-  </template>
-  
-  <script>
-  import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
-  export default {
-    name: 'UnnnicChartFunnelTwoRows',
-  
-    components: {
-      ChartFunnelBaseRow,
+  <ChartFunnelBaseRow
+    class="unnnic-chart-funnel-two-rows"
+    :rows="rows"
+    viewBox="0 0 250 148"
+  />
+</template>
+
+<script>
+import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
+export default {
+  name: 'UnnnicChartFunnelTwoRows',
+
+  components: {
+    ChartFunnelBaseRow,
+  },
+
+  props: {
+    data: {
+      type: Array,
+      required: true,
     },
-  
-    props: {
-      data: {
-        type: Array,
-        required: true,
-      },
+  },
+
+  computed: {
+    rows() {
+      const { data } = this;
+      return [
+        {
+          pathD:
+            'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
+          titleX: '50%',
+          titleY: '32',
+          descriptionX: '50%',
+          descriptionY: '52',
+          title: data[0].title,
+          description: data[0].description,
+        },
+        {
+          pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
+          titleX: '50%',
+          titleY: '106',
+          descriptionX: '50%',
+          descriptionY: '126',
+          title: data[1].title,
+          description: data[1].description,
+        },
+      ];
     },
-  
-    computed: {
-      rows() {
-        const { data } = this;
-        return [
-          {
-            pathD:
-              'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
-            titleX: '50%',
-            titleY: '32',
-            descriptionX: '50%',
-            descriptionY: '52',
-            title: data[0].title,
-            description: data[0].description,
-          },
-          {
-            pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
-            titleX: '50%',
-            titleY: '106',
-            descriptionX: '50%',
-            descriptionY: '126',
-            title: data[1].title,
-            description: data[1].description,
-          }
-        ];
-      },
-    },
-  };
-  </script>
-  
-  <style lang="scss">
-  @use '@/assets/scss/unnnic' as *;
-  .unnnic-chart-funnel-two-rows {
-    [class$='row']:nth-child(1) {
-      fill: $unnnic-color-weni-950;
-    }
-    [class$='row']:nth-child(2) {
-      fill: $unnnic-color-weni-800;
-    }
+  },
+};
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+.unnnic-chart-funnel-two-rows {
+  [class$='row']:nth-child(1) {
+    fill: $unnnic-color-weni-950;
+  }
+  [class$='row']:nth-child(2) {
+    fill: $unnnic-color-weni-800;
   }
-  </style>
-  
+}
+</style>

package/src/components/Checkbox/Checkbox.vue

@@ -1,7 +1,12 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <section class="unnnic-checkbox">
-    <label :class="['unnnic-checkbox__input-wrapper', {'unnnic-checkbox__input-wrapper--disabled': disabled}]">
+    <label
+      :class="[
+        'unnnic-checkbox__input-wrapper',
+        { 'unnnic-checkbox__input-wrapper--disabled': disabled },
+      ]"
+    >
       <input
         :class="[
           'unnnic-checkbox__input',
@@ -10,8 +15,8 @@
         type="checkbox"
         :disabled="disabled"
         :checked="modelValue === 'less' || modelValue"
-        @change="click"
         v-bind="pick($attrs, ['id', 'name'])"
+        @change="click"
       />
 
       <p
@@ -150,7 +155,8 @@ $checkbox-size: 21px;
       }
     }
 
-    &:disabled, &:disabled:checked {
+    &:disabled,
+    &:disabled:checked {
       background-color: $unnnic-color-bg-muted;
       border: 1px solid $unnnic-color-border-muted;
 

package/src/components/CheckboxGroup/CheckboxGroup.vue

@@ -1,8 +1,10 @@
 <template>
-  <section :class="[
-    'unnnic-checkbox-group__container',
-    `unnnic-checkbox-group--state-${state}`,
-  ]">
+  <section
+    :class="[
+      'unnnic-checkbox-group__container',
+      `unnnic-checkbox-group--state-${state}`,
+    ]"
+  >
     <UnnnicLabel
       v-if="label"
       :label="label"
@@ -52,7 +54,7 @@ const props = defineProps({
   },
 });
 </script>
-  
+
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 

package/src/components/Chip/Chip.vue

@@ -80,7 +80,7 @@ const chipClass = computed(() => {
   border-radius: 600px;
   background-color: $unnnic-color-bg-base;
   border: 1px solid transparent;
-  
+
   &:hover {
     background-color: $unnnic-color-bg-soft;
   }

package/src/components/DatePicker/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="['unnnic-date-picker', `unnnic-date-picker--${props.variant}`]"
+    class="unnnic-date-picker"
     data-testid="date-picker-root"
   >
     <template v-if="type === 'day'">
@@ -296,8 +296,6 @@ export interface DatePickerProps {
 
   locale?: string;
   translations?: Record<string, unknown>;
-
-  variant?: 'card' | 'popover';
 }
 
 const props = withDefaults(defineProps<DatePickerProps>(), {
@@ -317,7 +315,6 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   disableClear: false,
   locale: undefined,
   translations: undefined,
-  variant: 'card',
 });
 
 const emit = defineEmits<{
@@ -966,13 +963,6 @@ onMounted(() => {
   box-shadow: $unnnic-shadow-level-separated;
   overflow: hidden;
 
-  &--popover {
-    background-color: transparent;
-    border-radius: 0;
-    box-shadow: none;
-    overflow: visible;
-  }
-
   .month-container {
     display: flex;
     flex-direction: column;

package/src/components/Drawer/Drawer.vue

@@ -10,11 +10,15 @@
       :showOverlay="!withoutOverlay"
       data-testid="drawer-container"
       :size="mappedSize"
-      :class="[
-        'unnnic-drawer__container',
-        `unnnic-drawer__container--${size}`,
-        props.class,
-      ].filter(Boolean).join(' ')"
+      :class="
+        [
+          'unnnic-drawer__container',
+          `unnnic-drawer__container--${size}`,
+          props.class,
+        ]
+          .filter(Boolean)
+          .join(' ')
+      "
     >
       <DrawerHeader class="unnnic-drawer__header">
         <section class="unnnic-drawer__title-container">
@@ -91,7 +95,7 @@
 import { computed } from 'vue';
 
 import UnnnicButton from '../Button/Button.vue';
-import { 
+import {
   Drawer,
   DrawerContent,
   DrawerHeader,
@@ -172,15 +176,22 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['primaryButtonClick', 'secondaryButtonClick', 'close', 'back']);
-const showFooter = computed(() => !!(props.primaryButtonText || props.secondaryButtonText));
+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';
 });
 

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

@@ -35,7 +35,7 @@ describe('Drawer.vue', () => {
 
   const element = (id) => wrapper.find(`[data-testid="${id}"]`);
   const component = (id) => wrapper.findComponent(`[data-testid="${id}"]`);
-  const drawer = () => element('drawer');
+  const drawerRoot = () => wrapper.findComponent({ name: 'UnnnicDrawerNext' });
   const title = () => element('drawer-title');
   const description = () => element('drawer-description');
   const primaryButton = () => component('primary-button');
@@ -43,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', () => {
@@ -51,23 +53,21 @@ describe('Drawer.vue', () => {
       });
 
       it('should render the drawer when modelValue is true', () => {
-        expect(drawer().attributes('open')).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().attributes('open')).toBe('false');
+        expect(drawerRoot().props('open')).toBe(false);
       });
 
       it('should render the overlay when withoutOverlay is false', () => {
-        console.log('wrapper.html()', wrapper.html());
-
-        expect(drawerContainer().attributes('showoverlay')).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(drawerContainer().attributes('showoverlay')).toBe('false');
+        expect(drawerContentComponent().props('showOverlay')).toBe(false);
       });
 
       it('should display the title and description correctly', () => {
@@ -217,14 +217,16 @@ describe('Drawer.vue', () => {
   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 () => {

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

@@ -1,22 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Drawer.vue > Component Rendering > Component Rendering > matches the snapshot 1`] = `
-"<div data-v-196de012="" class="unnnic-drawer" data-testid="drawer" open="true">
-  <div data-v-196de012="" showoverlay="true" data-testid="drawer-container" size="medium" class="unnnic-drawer__container unnnic-drawer__container--md">
+"<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">
-        <div data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</div>
-        <div data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</div>
-      </section>
-      <div data-v-196de012="">
+        <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>
-      </div>
+      </button>
     </header>
     <section data-v-196de012="" class="unnnic-drawer__content"></section>
-    <div data-v-196de012="" class="unnnic-drawer__footer" data-testid="footer">
+    <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>
-    </div>
+    </footer>
   </div>
 </div>"
 `;

package/src/components/EmojiPicker/EmojiPicker.vue

@@ -172,7 +172,7 @@ const onEmojiSelect = (emoji: Emoji) => {
   }
 
   :deep(.emoji-type-image.emoji-set-apple) {
-    background-image: url('./apple-64.png') !important;
+    background-image: url('https://cdn.cloud.weni.ai/emojis-apple-64.png') !important;
   }
 
   :deep(.emoji-type-image.emoji-set-facebook),

package/src/components/FormElement/FormElement.vue

@@ -1,28 +1,37 @@
 <template>
-  <section class="unnnic-form-element" :class="{ 'unnnic-form-element--disabled': disabled }">
-    <UnnnicLabel 
-      v-if="label" 
-      :label="label" 
+  <section
+    class="unnnic-form-element"
+    :class="{ 'unnnic-form-element--disabled': disabled }"
+  >
+    <UnnnicLabel
+      v-if="label"
+      :label="label"
       :tooltip="tooltip"
       :class="[
         'unnnic-form-element__label',
         {
           'unnnic-form-element__label--fixed': fixedLabel,
         },
-      ]" 
+      ]"
     />
 
     <slot></slot>
 
-    <section 
-      class="unnnic-form-element__hints-container"
+    <section
       v-if="message || error || !!$slots.rightMessage"
+      class="unnnic-form-element__hints-container"
     >
       <section class="unnnic-form-element__message-container">
-        <p v-if="message" class="unnnic-form-element__message">
+        <p
+          v-if="message"
+          class="unnnic-form-element__message"
+        >
           {{ fullySanitize(message) }}
         </p>
-        <p v-if="!!error?.length" class="unnnic-form-element__message error">
+        <p
+          v-if="!!error?.length"
+          class="unnnic-form-element__message error"
+        >
           {{ Array.isArray(error) ? error.join(', ') : error }}
         </p>
       </section>
@@ -34,104 +43,104 @@
 </template>
 
 <script lang="js">
-  import { fullySanitize } from '../../utils/sanitize';
-  import UnnnicLabel from '../Label/Label.vue';
-
-  export default {
-    components: {
-      UnnnicLabel,
+import { fullySanitize } from '../../utils/sanitize';
+import UnnnicLabel from '../Label/Label.vue';
+
+export default {
+  components: {
+    UnnnicLabel,
+  },
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      validator: (size) => ['md', 'sm'].includes(size),
     },
-    props: {
-      size: {
-        type: String,
-        default: 'md',
-        validator: (size) => ['md', 'sm'].includes(size),
-      },
 
-      label: { type: String, default: '' },
+    label: { type: String, default: '' },
 
-      fixedLabel: { type: Boolean, default: false },
+    fixedLabel: { type: Boolean, default: false },
 
-      error: {
-        type: [Boolean, String],
-        default: false,
-      },
+    error: {
+      type: [Boolean, String],
+      default: false,
+    },
 
-      message: { type: String, default: '' },
+    message: { type: String, default: '' },
 
-      disabled: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
 
-      tooltip: { type: String, default: '' },
-    },
-    methods: {
-      fullySanitize,
-    },
-  };
+    tooltip: { type: String, default: '' },
+  },
+  methods: {
+    fullySanitize,
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @use '@/assets/scss/unnnic' as *;
-
-  * {
-    margin: $unnnic-space-0;
-    padding: $unnnic-space-0;
-    box-sizing: border-box;
-  }
+@use '@/assets/scss/unnnic' as *;
+
+* {
+  margin: $unnnic-space-0;
+  padding: $unnnic-space-0;
+  box-sizing: border-box;
+}
+
+.unnnic-form-element {
+  &__label {
+    font: $unnnic-font-body;
+    color: $unnnic-color-neutral-cloudy;
+    margin-bottom: $unnnic-space-1;
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+
+    &--fixed {
+      margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 + $unnnic-space-1;
+    }
 
-  .unnnic-form-element {
-    &__label {
-      font: $unnnic-font-body;
-      color: $unnnic-color-neutral-cloudy;
-      margin-bottom: $unnnic-space-1;
-      display: flex;
-      align-items: center;
-      gap: $unnnic-space-2;
-
-      &--fixed {
-        margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 + $unnnic-space-1;
-      }
+    &--fixed {
+      margin-bottom: $unnnic-space-0;
+      position: absolute;
+      padding: $unnnic-space-0 $unnnic-space-1;
+      margin-left: $unnnic-space-2;
 
-      &--fixed {
-        margin-bottom: $unnnic-space-0;
+      &:after {
+        content: ' ';
         position: absolute;
-        padding: $unnnic-space-0 $unnnic-space-1;
-        margin-left: $unnnic-space-2;
-
-        &:after {
-          content: ' ';
-          position: absolute;
-          left: $unnnic-space-0;
-          bottom: $unnnic-space-1 - $unnnic-border-width-thinner;
-          width: 100%;
-          height: $unnnic-border-width-thinner;
-          background-color: $unnnic-color-white;
-        }
+        left: $unnnic-space-0;
+        bottom: $unnnic-space-1 - $unnnic-border-width-thinner;
+        width: 100%;
+        height: $unnnic-border-width-thinner;
+        background-color: $unnnic-color-white;
       }
     }
+  }
 
-    &__message {
-      &.error {
-        color: $unnnic-color-fg-critical;
-      }
+  &__message {
+    &.error {
+      color: $unnnic-color-fg-critical;
     }
+  }
 
-    &__hints-container {
-      display: flex;
-      justify-content: space-between;
-      margin-top: $unnnic-space-1;
-      font: $unnnic-font-caption-2;
-      color: $unnnic-color-fg-base;
-    }
+  &__hints-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: $unnnic-space-1;
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-base;
+  }
 
-    &__message-container {
-      display: flex;
-      flex-direction: column;
-      gap: $unnnic-space-1;
-    }
+  &__message-container {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-space-1;
+  }
 
-    &--disabled .unnnic-form-element__label,
-    &--disabled .unnnic-form-element__message {
-      user-select: none;
-    }
+  &--disabled .unnnic-form-element__label,
+  &--disabled .unnnic-form-element__message {
+    user-select: none;
   }
+}
 </style>