@weni/unnnic-system 3.10.0 → 3.11.0-alpha.2

package/dist/utils/call.d.ts

@@ -3,9 +3,10 @@ declare namespace _default {
     export { callModal };
 }
 export default _default;
-export function callAlert({ props, containerRef }: {
+export function callAlert({ props, containerRef, seconds }: {
     props: any;
     containerRef: any;
+    seconds: any;
 }): void;
 export function callModal({ props }: {
     props: any;

package/dist/utils/call.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"call.d.ts","sourceRoot":"","sources":["../../src/utils/call.js"],"names":[],"mappings":";;;;;AAOA;;;SAqBC;AAED;;SAeC"}
+{"version":3,"file":"call.d.ts","sourceRoot":"","sources":["../../src/utils/call.js"],"names":[],"mappings":";;;;;AAOA;;;;SAiDC;AAED;;SAeC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.10.0",
+  "version": "3.11.0-alpha.2",
   "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"
@@ -114,4 +115,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/assets/icons/checkbox-checked-disabled.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.60023 7.13135L9.96565 0.765935C10.0744 0.655796 10.2018 0.599407 10.3477 0.596768C10.4936 0.594129 10.6242 0.650518 10.7396 0.765935C10.855 0.881351 10.9127 1.00955 10.9127 1.15052C10.9127 1.29163 10.8577 1.41718 10.7477 1.52718L4.08586 8.19864C3.9503 8.33531 3.79224 8.40364 3.61169 8.40364C3.43099 8.40364 3.27224 8.33531 3.13544 8.19864L0.260439 5.32364C0.150439 5.2135 0.0928002 5.08711 0.0875224 4.94448C0.0821058 4.80198 0.137106 4.67302 0.252522 4.5576C0.367939 4.44218 0.496759 4.38448 0.638981 4.38448C0.781203 4.38448 0.907731 4.44218 1.01856 4.5576L3.60023 7.13135Z" fill="#B2B9C7"/>
+</svg>

package/src/assets/icons/checkbox-checked.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.60023 7.13135L9.96565 0.765935C10.0744 0.655796 10.2018 0.599407 10.3477 0.596768C10.4936 0.594129 10.6242 0.650518 10.7396 0.765935C10.855 0.881351 10.9127 1.00955 10.9127 1.15052C10.9127 1.29163 10.8577 1.41718 10.7477 1.52718L4.08586 8.19864C3.9503 8.33531 3.79224 8.40364 3.61169 8.40364C3.43099 8.40364 3.27224 8.33531 3.13544 8.19864L0.260439 5.32364C0.150439 5.2135 0.0928002 5.08711 0.0875224 4.94448C0.0821058 4.80198 0.137106 4.67302 0.252522 4.5576C0.367939 4.44218 0.496759 4.38448 0.638981 4.38448C0.781203 4.38448 0.907731 4.44218 1.01856 4.5576L3.60023 7.13135Z" fill="white"/>
+</svg>

package/src/assets/icons/checkbox-less-disabled.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.625 1.25C0.447917 1.25 0.299514 1.19007 0.179792 1.07021C0.0599307 0.950347 0 0.801875 0 0.624791C0 0.447569 0.0599307 0.299167 0.179792 0.179583C0.299514 0.059861 0.447917 0 0.625 0H8.54167C8.71875 0 8.86715 0.0599307 8.98688 0.179792C9.10674 0.299653 9.16667 0.448125 9.16667 0.625209C9.16667 0.802431 9.10674 0.950833 8.98688 1.07042C8.86715 1.19014 8.71875 1.25 8.54167 1.25H0.625Z" fill="#B2B9C7"/>
+</svg>

package/src/assets/icons/checkbox-less.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.625 1.25C0.447917 1.25 0.299514 1.19007 0.179792 1.07021C0.0599307 0.950347 0 0.801875 0 0.624791C0 0.447569 0.0599307 0.299167 0.179792 0.179583C0.299514 0.059861 0.447917 0 0.625 0H8.54167C8.71875 0 8.86715 0.0599307 8.98688 0.179792C9.10674 0.299653 9.16667 0.448125 9.16667 0.625209C9.16667 0.802431 9.10674 0.950833 8.98688 1.07042C8.86715 1.19014 8.71875 1.25 8.54167 1.25H0.625Z" fill="white"/>
+</svg>

package/src/assets/icons/radio-checked.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4.5" cy="4.5" r="4" fill="white"/>
+</svg>

package/src/assets/icons/switch-checked-disabled.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" rx="7" fill="#D6D9E1"/>
+</svg>

package/src/assets/icons/switch-checked.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" rx="7" fill="white"/>
+</svg>

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/Alert/Alert.vue

@@ -1,55 +1,25 @@
 <template>
-  <div
-    v-if="version === '1.0'"
-    :class="['unnnic-alert', `unnnic-alert-position--${position}`]"
-  >
-    <UnnnicIcon
-      :icon="icon"
-      :scheme="scheme"
-      size="sm"
-      data-test="unnnic-icon"
-    />
-    <div class="unnnic-alert__content">
-      <div class="unnnic-alert__title">
-        {{ title.toUpperCase() }}
-      </div>
-      <div class="unnnic-alert__text">
-        {{ text }}
-      </div>
-    </div>
-    <div
-      v-if="closeText"
-      class="unnnic-alert__close-text unnnic--clickable"
-      @click="onClose()"
-    >
-      {{ closeText.toUpperCase() }}
-    </div>
-    <UnnnicIcon
-      v-else
-      clickable
-      icon="close-1"
-      scheme="brand-sec"
-      size="xs"
-      data-test="unnnic-icon-close"
-      @click="onClose"
-    />
-  </div>
+  <Version1dot1
+    v-if="version === '1.1'"
+    v-bind="{ ...$props }"
+  />
 
-  <component
-    :is="'version' + version.replace(/\./g, 'dot')"
+  <UnnnicToast
     v-else
-    v-bind="{ ...$props }"
-  ></component>
+    :title="text || ''"
+    :type="toastType"
+    @close="() => onClose()"
+  />
 </template>
 
-<script>
-import UnnnicIcon from '../Icon.vue';
+<script lang="ts">
 import Version1dot1 from './Version1dot1.vue';
+import UnnnicToast from '../Toast/Toast.vue';
 
 export default {
   name: 'UnnnicAlert',
   components: {
-    UnnnicIcon,
+    UnnnicToast,
     Version1dot1,
   },
   props: {
@@ -57,11 +27,6 @@ export default {
       type: String,
       default: '1.1',
     },
-
-    title: {
-      type: String,
-      default: null,
-    },
     text: {
       type: String,
       default: null,
@@ -70,102 +35,28 @@ export default {
       type: String,
       default: null,
     },
-    icon: {
-      type: String,
-      default: null,
-    },
     onClose: {
       type: Function,
       default: () => {},
     },
-    closeText: {
-      type: String,
-      default: '',
-    },
-    position: {
-      type: String,
-      default: 'top-right',
-    },
-    linkHref: {
-      type: String,
-      default: '',
-    },
-    linkTarget: {
-      type: String,
-      default: '',
-    },
-    linkText: {
-      type: String,
-      default: '',
-    },
     type: {
       type: String,
       default: '',
     },
   },
+  computed: {
+    toastType() {
+      if (this.scheme === 'feedback-green' || this.type === 'success') {
+        return 'success';
+      }
+      if (this.scheme === 'feedback-red' || this.type === 'error') {
+        return 'error';
+      }
+      if (this.type === 'attention') {
+        return 'attention';
+      }
+      return 'informational';
+    },
+  },
 };
 </script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-alert {
-  position: fixed;
-  padding: $unnnic-inset-xs;
-  min-width: 12.5 * $unnnic-font-size;
-
-  display: inline-flex;
-  align-items: center;
-
-  font-family: $unnnic-font-family-secondary;
-  border-radius: $unnnic-border-radius-sm;
-
-  background-color: $unnnic-color-background-snow;
-  box-shadow: $unnnic-shadow-level-near;
-
-  z-index: 9999;
-
-  &-position {
-    &--top-right {
-      top: 1 * $unnnic-font-size;
-      right: 1 * $unnnic-font-size;
-    }
-    &--top-left {
-      top: 1 * $unnnic-font-size;
-      left: 1 * $unnnic-font-size;
-    }
-    &--bottom-right {
-      bottom: 1 * $unnnic-font-size;
-      right: 1 * $unnnic-font-size;
-    }
-    &--bottom-left {
-      bottom: 1 * $unnnic-font-size;
-      left: 1 * $unnnic-font-size;
-    }
-  }
-
-  &__content {
-    flex: 1;
-    margin: 0 $unnnic-inline-xs;
-  }
-
-  &__title {
-    font-size: $unnnic-font-size-body-sm;
-    font-weight: $unnnic-font-weight-bold;
-    color: $unnnic-color-neutral-darkest;
-  }
-
-  &__text {
-    font-size: $unnnic-font-size-body-md;
-    font-weight: $unnnic-font-weight-regular;
-    color: $unnnic-color-neutral-dark;
-  }
-
-  &__close {
-    &-text {
-      color: $unnnic-color-brand-sec;
-      font-size: $unnnic-font-size-body-md;
-    }
-  }
-}
-</style>

package/src/components/Alert/Version1dot1.vue

@@ -27,15 +27,6 @@
         {{ text }}
       </div>
 
-      <a
-        v-if="linkHref"
-        class="alert__link"
-        :href="linkHref"
-        :target="linkTarget"
-      >
-        {{ linkText }}
-      </a>
-
       <div
         class="alert__close"
         @click="emitClose"
@@ -58,10 +49,6 @@ export default {
     UnnnicIcon,
   },
   props: {
-    version: {
-      type: String,
-      default: '1.0',
-    },
     text: {
       type: String,
       default: null,
@@ -74,18 +61,6 @@ export default {
       type: Function,
       default: () => {},
     },
-    linkHref: {
-      type: String,
-      default: '',
-    },
-    linkTarget: {
-      type: String,
-      default: '_blank',
-    },
-    linkText: {
-      type: String,
-      default: 'Learn more',
-    },
     type: {
       type: String,
       default: 'default',
@@ -207,7 +182,6 @@ export default {
     padding: $unnnic-spacing-xs $unnnic-spacing-sm;
   }
 
-  &__link,
   &__close {
     border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-cloudy;
 
@@ -216,14 +190,6 @@ export default {
     }
   }
 
-  &__link {
-    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
-    text-decoration: none;
-    color: inherit;
-    display: block;
-    font-weight: $unnnic-font-weight-bold;
-  }
-
   &__close {
     padding: $unnnic-spacing-xs $unnnic-spacing-sm;
     cursor: pointer;
@@ -237,7 +203,6 @@ export default {
       background-color: $unnnic-color-aux-green-700;
     }
 
-    .alert__link,
     .alert__close {
       border-left: $unnnic-border-width-thinner solid
         $unnnic-color-aux-green-300;
@@ -255,7 +220,6 @@ export default {
       background-color: $unnnic-color-aux-red-700;
     }
 
-    .alert__link,
     .alert__close {
       border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-red-300;
 

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

@@ -8,13 +8,10 @@ describe('UnnnicAlert.vue', () => {
   beforeEach(() => {
     wrapper = mount(UnnnicAlert, {
       props: {
-        version: '1.0',
+        version: '2.0',
         title: 'Test Alert',
         text: 'This is an alert message',
-        scheme: 'primary',
-        icon: 'alert-icon',
-        position: 'top-right',
-        closeText: 'Close',
+        type: 'success',
       },
     });
   });
@@ -27,46 +24,6 @@ describe('UnnnicAlert.vue', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
-  test('renders title and text in uppercase', () => {
-    const title = wrapper.find('.unnnic-alert__title');
-    const text = wrapper.find('.unnnic-alert__text');
-
-    expect(title.text()).toBe('TEST ALERT');
-    expect(text.text()).toBe('This is an alert message');
-  });
-
-  test('applies the correct position class', () => {
-    expect(wrapper.classes()).toContain('unnnic-alert-position--top-right');
-  });
-
-  test('renders the icon with correct props', () => {
-    const icon = wrapper.findComponent('[data-test="unnnic-icon"]');
-    expect(icon.exists()).toBe(true);
-    expect(icon.props('icon')).toBe('alert-icon');
-    expect(icon.props('scheme')).toBe('primary');
-    expect(icon.props('size')).toBe('sm');
-  });
-
-  test('renders closeText and calls onClose when clicked', async () => {
-    const closeText = wrapper.find('.unnnic-alert__close-text');
-    expect(closeText.exists()).toBe(true);
-    expect(closeText.text()).toBe('CLOSE');
-
-    const onCloseSpy = vi.spyOn(wrapper.props(), 'onClose');
-    await closeText.trigger('click');
-    expect(onCloseSpy).toHaveBeenCalled();
-  });
-
-  test('renders default close icon if closeText is not provided', async () => {
-    await wrapper.setProps({ closeText: '', onClose: () => vi.fn() });
-    await wrapper.vm.$nextTick();
-    const closeIcon = wrapper.findComponent('[data-test="unnnic-icon-close"]');
-    expect(closeIcon.exists()).toBe(true);
-    expect(closeIcon.props('icon')).toBe('close-1');
-    expect(closeIcon.props('scheme')).toBe('brand-sec');
-    expect(closeIcon.props('size')).toBe('xs');
-  });
-
   test('renders the correct component for version 1.1', async () => {
     await wrapper.setProps({ version: '1.1' });
     const versionComponent = wrapper.findComponent({ name: 'Version1dot1' });

package/src/components/Alert/__tests__/Version1dot1.spec.js

@@ -9,13 +9,9 @@ describe('Alert.vue', () => {
   let wrapper;
 
   const defaultProps = {
-    version: '1.0',
     text: 'Test Alert',
     scheme: 'feedback-green',
     onClose: vi.fn(),
-    linkHref: 'https://example.com',
-    linkTarget: '_blank',
-    linkText: 'Learn more',
     type: 'success',
   };
 
@@ -51,19 +47,6 @@ describe('Alert.vue', () => {
     expect(wrapper.find('.alert--scheme-aux-red').exists()).toBe(true);
   });
 
-  test('renders link when linkHref is provided', () => {
-    const link = wrapper.find('.alert__link');
-    expect(link.exists()).toBe(true);
-    expect(link.attributes('href')).toBe('https://example.com');
-    expect(link.attributes('target')).toBe('_blank');
-    expect(link.text()).toBe('Learn more');
-  });
-
-  test('does not render link when linkHref is not provided', async () => {
-    await wrapper.setProps({ linkHref: '' });
-    expect(wrapper.find('.alert__link').exists()).toBe(false);
-  });
-
   test('emits close event and calls onClose prop when close button is clicked', async () => {
     await wrapper.find('.alert__close').trigger('click');
     expect(wrapper.emitted('close')).toBeTruthy();
@@ -93,12 +76,8 @@ describe('Alert.vue', () => {
   });
 
   test.each([
-    ['version', '1.1'],
     ['text', 'New Alert Text'],
     ['scheme', 'feedback-red'],
-    ['linkHref', 'https://newexample.com'],
-    ['linkTarget', '_self'],
-    ['linkText', 'Click here'],
     ['type', 'error'],
   ])('updates %s prop correctly', async (propName, newValue) => {
     await wrapper.setProps({ [propName]: newValue });

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

@@ -1,11 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
-"<div data-v-284427ba="" class="unnnic-alert unnnic-alert-position--top-right"><span data-v-26446d8e="" data-v-284427ba="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--primary unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no" data-test="unnnic-icon">alert-icon</span>
-  <div data-v-284427ba="" class="unnnic-alert__content">
-    <div data-v-284427ba="" class="unnnic-alert__title">TEST ALERT</div>
-    <div data-v-284427ba="" class="unnnic-alert__text">This is an alert message</div>
-  </div>
-  <div data-v-284427ba="" class="unnnic-alert__close-text unnnic--clickable">CLOSE</div>
-</div>"
+"<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">
+    <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>
+      </header>
+      <!--v-if-->
+    </section>
+    <!--v-if-->
+  </aside>
+</transition-stub>"
 `;

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

@@ -2,9 +2,9 @@
 
 exports[`AlertBanner.vue > matches the snapshot 1`] = `
 "<section data-v-e8e4d051="" class="banner-alert banner-alert--banner-danger">
-  <header data-v-e8e4d051="" class="banner-alert__container-text"><span data-v-26446d8e="" data-v-e8e4d051="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-white unnnic-icon-size--sm unnnic-icon__size--sm banner-alert__textIcon" data-testid="material-icon" translate="no" data-test="unnnic-icon">block</span>
+  <header data-v-e8e4d051="" class="banner-alert__container-text"><span data-v-26446d8e="" data-v-e8e4d051="" class="material-symbols-rounded unnnic-icon-scheme--neutral-white unnnic-icon-size--sm banner-alert__textIcon" data-testid="material-icon" translate="no" data-test="unnnic-icon">block</span>
     <p data-v-e8e4d051="" class="text">This is a banner alert</p><a data-v-e8e4d051="" class="banner-alert__link" href="https://example.com" target="_self">Learn more</a>
   </header>
-  <div data-v-e8e4d051="" class="banner-alert__close"><span data-v-26446d8e="" data-v-e8e4d051="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-white unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no" data-test="unnnic-close-icon">close</span></div>
+  <div data-v-e8e4d051="" class="banner-alert__close"><span data-v-26446d8e="" data-v-e8e4d051="" class="material-symbols-rounded unnnic-icon-scheme--neutral-white unnnic-icon-size--sm" data-testid="material-icon" translate="no" data-test="unnnic-close-icon">close</span></div>
 </section>"
 `;

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

@@ -4,7 +4,7 @@ exports[`Alert.vue > matches snapshot 1`] = `
 "<div data-v-fb94f284="" class="alert-container">
   <div data-v-fb94f284="" class="alert alert--scheme-aux-green">
     <div data-v-fb94f284="" class="alert__progress"></div>
-    <div data-v-fb94f284="" class="alert__text">Test Alert</div><a data-v-fb94f284="" class="alert__link" href="https://example.com" target="_blank">Learn more</a>
+    <div data-v-fb94f284="" class="alert__text">Test Alert</div>
     <div data-v-fb94f284="" class="alert__close">
       <unnnic-icon-stub data-v-fb94f284="" filled="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
     </div>