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

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>"
 `;

package/src/components/Button/Button.vue

@@ -6,20 +6,16 @@
     :class="[
       'unnnic-button',
       `unnnic-button--size-${size}`,
-      `unnnic-button--${type}`,
+      `unnnic-button--${buttonType}`,
       iconCenter ? `unnnic-button--icon-on-center` : null,
       float ? `unnnic-button--float` : null,
     ]"
   >
-    <UnnnicIcon
+    <UnnnicIconLoading
       v-if="loading"
-      icon="loading-circle-1"
       :scheme="iconScheme"
       :size="iconSize"
-      :filled="iconsFilled"
       :style="{ position: 'absolute' }"
-      class="rotation"
-      :next="next"
       data-testid="icon-loading"
     />
 
@@ -72,6 +68,7 @@
 <script setup lang="ts">
 import { computed, watch, useSlots } from 'vue';
 import UnnnicIcon from '../Icon.vue';
+import UnnnicIconLoading from '../IconLoading/IconLoading.vue';
 import type { ButtonProps, ButtonSize, ButtonType } from './types';
 import type { SchemeColor } from '@/types/scheme-colors';
 
@@ -102,8 +99,8 @@ const buttonDisabled = computed(() => {
 });
 
 const iconSize = computed(() => {
-  if (props.size === 'small') return 'sm';
-  return 'md';
+  if (props.size === 'extra-large') return 'lg';
+  return 'ant';
 });
 
 const hasText = computed(() => {
@@ -120,12 +117,11 @@ const iconScheme = computed((): SchemeColor => {
     primary: 'neutral-white',
     secondary: 'neutral-dark',
     tertiary: 'neutral-dark',
-    alternative: 'neutral-white',
     warning: 'neutral-white',
     attention: 'neutral-white',
   };
 
-  return typeToSchemeMap[props.type] || 'neutral-white';
+  return typeToSchemeMap[buttonType.value] || 'neutral-white';
 });
 
 const isSizePropValid = computed(() => {
@@ -136,16 +132,23 @@ const isSizePropValid = computed(() => {
   );
 });
 
+const buttonType = computed(() => {
+  return (
+    {
+      alternative: 'tertiary',
+    }[props.type] || props.type
+  );
+});
+
 const isTypePropValid = computed(() => {
   const validTypes: ButtonType[] = [
     'primary',
     'secondary',
     'tertiary',
-    'alternative',
     'warning',
     'attention',
   ];
-  return validTypes.includes(props.type);
+  return validTypes.includes(buttonType.value);
 });
 
 const validateProps = () => {
@@ -159,6 +162,8 @@ const validateProps = () => {
 
     if (!isTypePropValid.value) {
       errorMessage += ' Invalid type prop.';
+      errorMessage +=
+        ' Please provide one of the following types: primary, secondary, tertiary, warning, attention. Alternative is discontinued and it was forced renamed to tertiary.';
     }
 
     throw new Error(errorMessage);
@@ -196,13 +201,12 @@ watch(
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: $unnnic-border-radius-sm;
+  border-radius: $unnnic-radius-2;
   border: 0;
   outline: none;
   overflow: hidden;
   white-space: nowrap;
-  font-weight: $unnnic-font-weight-regular;
-  font-family: $unnnic-font-family-secondary;
+  font: $unnnic-font-action;
   cursor: pointer;
   position: relative;
 
@@ -216,129 +220,91 @@ watch(
     }
   }
 
+  &--primary,
+  &--warning,
+  &--attention {
+    color: $unnnic-color-fg-inverted;
+  }
+
+  &--secondary,
+  &--tertiary {
+    color: $unnnic-color-fg-emphasized;
+  }
+
   &--primary {
-    background-color: $unnnic-color-weni-600;
-    color: $unnnic-color-neutral-white;
+    background-color: $unnnic-color-bg-active;
 
     &:hover:enabled {
-      background-color: $unnnic-color-weni-700;
+      background-color: $unnnic-color-teal-700;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-weni-800;
+      background-color: $unnnic-color-teal-800;
     }
   }
 
   &--secondary {
-    background-color: $unnnic-color-neutral-white;
-    color: $unnnic-color-neutral-dark;
+    background-color: $unnnic-color-bg-base;
     box-shadow: inset 0 0 0 $unnnic-border-width-thinner
-      $unnnic-color-neutral-cleanest;
+      $unnnic-color-border-base;
 
     &:hover:enabled {
-      background-color: $unnnic-color-neutral-light;
-    }
-
-    &:disabled {
-      box-shadow: none;
+      background-color: $unnnic-color-gray-50;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-neutral-soft;
-    }
-  }
-
-  &--tertiary {
-    background-color: transparent;
-    color: $unnnic-color-neutral-dark;
-
-    &:hover:enabled {
-      background-color: $unnnic-color-neutral-light;
+      background-color: $unnnic-color-gray-100;
     }
 
     &:disabled {
-      color: $unnnic-color-neutral-clean;
-      cursor: not-allowed;
-    }
-
-    &:active:enabled {
-      background-color: $unnnic-color-neutral-soft;
+      box-shadow: none;
     }
   }
 
-  &--alternative {
-    background-color: $unnnic-color-weni-50;
-    color: $unnnic-color-weni-800;
-
-    :deep(svg .primary) {
-      fill: $unnnic-color-weni-800;
-    }
-
-    :deep(svg .primary-stroke) {
-      stroke: $unnnic-color-weni-800;
-    }
+  &--tertiary {
+    background-color: transparent;
 
     &:hover:enabled {
-      background-color: $unnnic-color-weni-100;
-    }
-
-    &:disabled {
-      :deep(svg .primary) {
-        fill: $unnnic-color-neutral-clean;
-      }
-
-      :deep(svg .primary-stroke) {
-        stroke: $unnnic-color-neutral-clean;
-      }
+      background-color: rgba($unnnic-color-gray-400, 0.1);
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-weni-200;
-      color: $unnnic-color-weni-900;
-
-      :deep(svg .primary) {
-        fill: $unnnic-color-weni-900;
-      }
-
-      :deep(svg .primary-stroke) {
-        stroke: $unnnic-color-weni-900;
-      }
+      background-color: rgba($unnnic-color-gray-400, 0.2);
     }
   }
 
   &--warning {
-    background-color: $unnnic-color-aux-red-500;
+    background-color: $unnnic-color-red-500;
     color: $unnnic-color-neutral-white;
 
     &:hover:enabled {
-      background-color: $unnnic-color-aux-red-700;
+      background-color: $unnnic-color-red-600;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-aux-red-900;
+      background-color: $unnnic-color-red-700;
     }
   }
 
   &--attention {
-    background-color: $unnnic-color-aux-yellow-500;
-    color: $unnnic-color-neutral-white;
+    background-color: $unnnic-color-yellow-500;
 
     &:hover:enabled {
-      background-color: $unnnic-color-aux-yellow-700;
+      background-color: $unnnic-color-yellow-600;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-aux-yellow-900;
+      background-color: $unnnic-color-yellow-700;
     }
   }
 
   &--primary:disabled,
   &--secondary:disabled,
-  &--alternative:disabled,
+  &--tertiary:disabled,
   &--warning:disabled,
   &--attention:disabled {
-    background-color: $unnnic-color-neutral-soft;
-    color: $unnnic-color-neutral-clean;
+    background-color: $unnnic-color-bg-muted;
+    color: $unnnic-color-fg-muted;
     cursor: not-allowed;
   }
 
@@ -351,26 +317,12 @@ watch(
     box-shadow: $unnnic-shadow-level-near;
   }
 
-  &--size {
-    &-extra-large,
-    &-large,
-    &-small {
-      padding: $unnnic-squish-xs;
-      font-size: $unnnic-font-size-body-gt;
-      line-height: ($unnnic-font-size-body-gt + $unnnic-line-height-medium);
-    }
-
-    &-extra-large {
-      height: 58px;
-    }
-
-    &-large {
-      height: 46px;
-    }
+  &--size-large {
+    padding: $unnnic-space-3 $unnnic-space-4;
+  }
 
-    &-small {
-      height: 38px;
-    }
+  &--size-small {
+    padding: $unnnic-space-2 $unnnic-space-4;
   }
 }
 </style>
@@ -388,8 +340,8 @@ watch(
     }
 
     &-large {
-      height: 46px;
-      width: 46px;
+      height: 45px;
+      width: 45px;
     }
 
     &-large,
@@ -404,8 +356,8 @@ watch(
 
     &-small {
       padding: $unnnic-inset-nano;
-      height: 38px;
-      width: 38px;
+      height: 37px;
+      width: 37px;
 
       .unnnic-icon {
         width: $unnnic-icon-size-ant;

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

@@ -47,16 +47,17 @@ describe('Button', () => {
     await wrapper.setProps({ iconCenter: 'search-1', text: '' });
 
     const centeredIcon = wrapper.findComponent('[data-testid="icon-center"]');
-
     expect(centeredIcon.exists()).toBe(true);
 
-    expect(wrapper.text()).toBe('');
+    const label = wrapper.find('[data-testid="button-label"]');
+    expect(label.text()).toBe('');
   });
 
   it('should render button float variation', async () => {
     await wrapper.setProps({ iconCenter: 'search-1', float: true });
 
-    expect(wrapper.text()).toBe('');
+    const label = wrapper.find('[data-testid="button-label"]');
+    expect(label.exists()).toBe(false);
 
     expect(wrapper.classes()).toContain('unnnic-button--float');
   });

package/src/components/Button/types.ts

@@ -4,7 +4,6 @@ export type ButtonType =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'alternative'
   | 'warning'
   | 'attention';
 
@@ -17,7 +16,6 @@ export interface ButtonProps {
   iconRight?: string;
   iconCenter?: string;
   iconsFilled?: boolean;
-  next?: boolean;
   disabled?: boolean;
   loading?: boolean;
 }