@weni/unnnic-system 3.5.2 → 3.5.3-alpha.0

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 });
@@ -111,8 +90,6 @@ describe('Alert.vue', () => {
       clickable: false,
       filled: false,
       icon: 'close-1',
-      lineHeight: null,
-      next: false,
       size: 'sm',
       scheme: 'neutral-white',
     });

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="material-symbols-rounded unnnic-icon-scheme--primary 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" icon="alert-icon" position="top-right" closetext="Close">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--informational" role="status" aria-live="polite" data-testid="unnnic-toast">
+    <section data-v-c3231c18="" class="unnnic-toast__content">
+      <header data-v-c3231c18="" class="unnnic-toast__header"><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--blue-500 unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="toast-type-icon" translate="no">info</span>
+        <h3 data-v-c3231c18="" class="unnnic-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-button" 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="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>
+  <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>
     <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="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>
+  <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>
 </section>"
 `;

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

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert.vue > matches snapshot 1`] = `
-"<div data-v-fb94f284="" class="alert-container">
+"<div data-v-fb94f284="" class="alert-container" version="1.0" linkhref="https://example.com" linktarget="_blank" linktext="Learn more">
   <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" next="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
+      <unnnic-icon-stub data-v-fb94f284="" filled="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
     </div>
   </div>
 </div>"

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

@@ -2,6 +2,6 @@
 
 exports[`AvatarIcon.vue > matches the snapshot 1`] = `
 "<div data-v-5f185a90="" class="unnnic-avatar-icon aux-blue sm">
-  <unnnic-icon-stub data-v-5f185a90="" filled="false" next="false" icon="graph-stats-1" clickable="false" size="md" scheme="aux-blue"></unnnic-icon-stub>
+  <unnnic-icon-stub data-v-5f185a90="" filled="false" icon="graph-stats-1" clickable="false" size="md" scheme="aux-blue"></unnnic-icon-stub>
 </div>"
 `;