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

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

@@ -0,0 +1,89 @@
+import { mount } from '@vue/test-utils';
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import AlertBanner from '@/components/Alert/AlertBanner.vue';
+
+describe('AlertBanner.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(AlertBanner, {
+      props: {
+        text: 'This is a banner alert',
+        type: 'danger',
+        showCloseButton: true,
+        linkHref: 'https://example.com',
+        linkText: 'Learn more',
+        linkTarget: '_self',
+        onClose: vi.fn(),
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('renders the correct text and link', () => {
+    const textElement = wrapper.find('.text');
+    const linkElement = wrapper.find('.banner-alert__link');
+
+    expect(textElement.text()).toBe('This is a banner alert');
+    expect(linkElement.text()).toBe('Learn more');
+    expect(linkElement.attributes('href')).toBe('https://example.com');
+    expect(linkElement.attributes('target')).toBe('_self');
+  });
+
+  test('applies the correct class based on the type', () => {
+    expect(wrapper.classes()).toContain('banner-alert--banner-danger');
+  });
+
+  test('renders the correct icon based on the type', () => {
+    const icon = wrapper.findComponent('[data-test="unnnic-icon"]');
+    expect(icon.exists()).toBe(true);
+    expect(icon.props('icon')).toBe('block');
+    expect(icon.props('size')).toBe('sm');
+    expect(icon.props('scheme')).toBe('neutral-white');
+  });
+
+  test('does not render the icon when type is not danger, warning, or info', async () => {
+    await wrapper.setProps({ type: 'success' });
+    const icon = wrapper.findComponent('[data-test="unnnic-icon"]');
+    expect(icon.element.style.display).toBe('none');
+  });
+
+  test('calls emitClose and emits close event when close button is clicked', async () => {
+    const closeButton = wrapper.find('.banner-alert__close');
+    await closeButton.trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('close');
+    expect(wrapper.props().onClose).toHaveBeenCalled();
+  });
+
+  test('does not render close button if showCloseButton is false', async () => {
+    await wrapper.setProps({ showCloseButton: false });
+    const closeButton = wrapper.find('.banner-alert__close');
+    expect(closeButton.element.style.display).toBe('none');
+  });
+
+  test('matches the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('getIconType function returns the correct icon based on type', () => {
+    expect(wrapper.vm.getIconType('danger')).toBe('block');
+    expect(wrapper.vm.getIconType('info')).toBe('info');
+    expect(wrapper.vm.getIconType('')).toBe('info');
+  });
+
+  test('isShowTextIcon function returns true for danger, warning, and info types', () => {
+    expect(wrapper.vm.isShowTextIcon('danger')).toBe(true);
+    expect(wrapper.vm.isShowTextIcon('warning')).toBe(true);
+    expect(wrapper.vm.isShowTextIcon('info')).toBe(true);
+    expect(wrapper.vm.isShowTextIcon('')).toBe(true);
+    expect(wrapper.vm.isShowTextIcon('success')).toBe(false);
+  });
+});

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

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, test, vi, beforeEach, afterEach } from 'vitest';
+import AlertCaller from '@/components/Alert/AlertCaller.vue';
+import alert from '@/utils/call';
+
+vi.mock('@/utils/call', () => ({
+  default: {
+    callAlert: vi.fn(),
+  },
+}));
+
+describe('AlertCaller.vue', () => {
+  let wrapper;
+
+  const defaultProps = {
+    title: 'Test Title',
+    text: 'Test Text',
+    icon: 'test-icon',
+    enabled: true,
+    scheme: 'primary',
+    seconds: 5,
+    closeText: 'Close',
+    position: 'top-right',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(AlertCaller, {
+      props: defaultProps,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+    vi.clearAllMocks();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('button').text()).toBe('Launch alert');
+  });
+
+  test('calls callAlert method when button is clicked', async () => {
+    const callAlertSpy = vi.spyOn(wrapper.vm, 'callAlert');
+    await wrapper.find('button').trigger('click');
+    expect(callAlertSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('callAlert method invokes alert.callAlert with correct props', async () => {
+    await wrapper.find('button').trigger('click');
+    expect(alert.callAlert).toHaveBeenCalledWith({
+      props: defaultProps,
+      seconds: defaultProps.seconds,
+    });
+  });
+
+  test.each([
+    ['title', 'New Title'],
+    ['text', 'New Text'],
+    ['icon', 'new-icon'],
+    ['enabled', false],
+    ['scheme', 'secondary'],
+    ['seconds', 10],
+    ['closeText', 'Dismiss'],
+    ['position', 'bottom-left'],
+  ])('updates %s prop correctly', async (propName, newValue) => {
+    await wrapper.setProps({ [propName]: newValue });
+    await wrapper.find('button').trigger('click');
+    const expectedProps = { ...defaultProps, [propName]: newValue };
+    expect(alert.callAlert).toHaveBeenCalledWith({
+      props: expectedProps,
+      seconds: expectedProps.seconds,
+    });
+  });
+
+  test('passes default values when props are not provided', async () => {
+    wrapper = mount(AlertCaller, {
+      props: {},
+    });
+    await wrapper.find('button').trigger('click');
+    expect(alert.callAlert).toHaveBeenCalledWith({
+      props: {
+        title: null,
+        text: null,
+        icon: null,
+        enabled: true,
+        scheme: null,
+        seconds: 3,
+        closeText: null,
+        position: 'top-right',
+      },
+      seconds: 3,
+    });
+  });
+
+  test('matches snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

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

@@ -9,9 +9,13 @@ 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',
   };
 
@@ -47,6 +51,19 @@ 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();
@@ -76,8 +93,12 @@ 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,15 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
-"<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>"
+"<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>"
 `;

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

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert.vue > matches snapshot 1`] = `
-"<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-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>
+    <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__close">
       <unnnic-icon-stub data-v-fb94f284="" filled="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
     </div>

package/src/components/Button/Button.vue

@@ -6,16 +6,19 @@
     :class="[
       'unnnic-button',
       `unnnic-button--size-${size}`,
-      `unnnic-button--${buttonType}`,
+      `unnnic-button--${type}`,
       iconCenter ? `unnnic-button--icon-on-center` : null,
       float ? `unnnic-button--float` : null,
     ]"
   >
-    <UnnnicIconLoading
+    <UnnnicIcon
       v-if="loading"
+      icon="loading-circle-1"
       :scheme="iconScheme"
       :size="iconSize"
+      :filled="iconsFilled"
       :style="{ position: 'absolute' }"
+      class="rotation"
       data-testid="icon-loading"
     />
 
@@ -27,7 +30,6 @@
       :filled="iconsFilled"
       :class="{ 'unnnic-button__icon-left': hasText }"
       :style="{ visibility: loading ? 'hidden' : 'visible' }"
-      clickable
       data-testid="icon-left"
     />
 
@@ -38,7 +40,6 @@
       :style="{ visibility: loading ? 'hidden' : 'visible' }"
       :size="iconSize"
       :filled="iconsFilled"
-      clickable
       data-testid="icon-center"
     />
 
@@ -59,7 +60,6 @@
       :filled="iconsFilled"
       :class="{ 'unnnic-button__icon-right': hasText }"
       :style="{ visibility: loading ? 'hidden' : 'visible' }"
-      clickable
       data-testid="icon-right"
     />
   </button>
@@ -68,7 +68,6 @@
 <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';
 
@@ -87,7 +86,6 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   iconRight: '',
   iconCenter: '',
   iconsFilled: false,
-  next: false,
   disabled: false,
   loading: false,
 });
@@ -99,8 +97,8 @@ const buttonDisabled = computed(() => {
 });
 
 const iconSize = computed(() => {
-  if (props.size === 'extra-large') return 'lg';
-  return 'ant';
+  if (props.size === 'small') return 'sm';
+  return 'md';
 });
 
 const hasText = computed(() => {
@@ -117,11 +115,12 @@ const iconScheme = computed((): SchemeColor => {
     primary: 'neutral-white',
     secondary: 'neutral-dark',
     tertiary: 'neutral-dark',
+    alternative: 'neutral-white',
     warning: 'neutral-white',
     attention: 'neutral-white',
   };
 
-  return typeToSchemeMap[buttonType.value] || 'neutral-white';
+  return typeToSchemeMap[props.type] || 'neutral-white';
 });
 
 const isSizePropValid = computed(() => {
@@ -132,23 +131,16 @@ 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(buttonType.value);
+  return validTypes.includes(props.type);
 });
 
 const validateProps = () => {
@@ -162,8 +154,6 @@ 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);
@@ -201,19 +191,16 @@ watch(
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: $unnnic-radius-2;
+  border-radius: $unnnic-border-radius-sm;
   border: 0;
   outline: none;
   overflow: hidden;
   white-space: nowrap;
-  font: $unnnic-font-action;
+  font-weight: $unnnic-font-weight-regular;
+  font-family: $unnnic-font-family-secondary;
   cursor: pointer;
   position: relative;
 
-  transition-property: color, background-color, border-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 0.15s;
-
   &__icon {
     &-left {
       margin-right: $unnnic-inline-nano;
@@ -224,91 +211,129 @@ watch(
     }
   }
 
-  &--primary,
-  &--warning,
-  &--attention {
-    color: $unnnic-color-fg-inverted;
-  }
-
-  &--secondary,
-  &--tertiary {
-    color: $unnnic-color-fg-emphasized;
-  }
-
   &--primary {
-    background-color: $unnnic-color-bg-active;
+    background-color: $unnnic-color-weni-600;
+    color: $unnnic-color-neutral-white;
 
     &:hover:enabled {
-      background-color: $unnnic-color-teal-700;
+      background-color: $unnnic-color-weni-700;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-teal-800;
+      background-color: $unnnic-color-weni-800;
     }
   }
 
   &--secondary {
-    background-color: $unnnic-color-bg-base;
+    background-color: $unnnic-color-neutral-white;
+    color: $unnnic-color-neutral-dark;
     box-shadow: inset 0 0 0 $unnnic-border-width-thinner
-      $unnnic-color-border-base;
+      $unnnic-color-neutral-cleanest;
 
     &:hover:enabled {
-      background-color: $unnnic-color-gray-50;
-    }
-
-    &:active:enabled {
-      background-color: $unnnic-color-gray-100;
+      background-color: $unnnic-color-neutral-light;
     }
 
     &:disabled {
       box-shadow: none;
     }
+
+    &:active:enabled {
+      background-color: $unnnic-color-neutral-soft;
+    }
   }
 
   &--tertiary {
     background-color: transparent;
+    color: $unnnic-color-neutral-dark;
 
     &:hover:enabled {
-      background-color: rgba($unnnic-color-gray-400, 0.1);
+      background-color: $unnnic-color-neutral-light;
+    }
+
+    &:disabled {
+      color: $unnnic-color-neutral-clean;
+      cursor: not-allowed;
     }
 
     &:active:enabled {
-      background-color: rgba($unnnic-color-gray-400, 0.2);
+      background-color: $unnnic-color-neutral-soft;
+    }
+  }
+
+  &--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;
+    }
+
+    &: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;
+      }
+    }
+
+    &: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;
+      }
     }
   }
 
   &--warning {
-    background-color: $unnnic-color-red-500;
+    background-color: $unnnic-color-aux-red-500;
     color: $unnnic-color-neutral-white;
 
     &:hover:enabled {
-      background-color: $unnnic-color-red-600;
+      background-color: $unnnic-color-aux-red-700;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-red-700;
+      background-color: $unnnic-color-aux-red-900;
     }
   }
 
   &--attention {
-    background-color: $unnnic-color-yellow-500;
+    background-color: $unnnic-color-aux-yellow-500;
+    color: $unnnic-color-neutral-white;
 
     &:hover:enabled {
-      background-color: $unnnic-color-yellow-600;
+      background-color: $unnnic-color-aux-yellow-700;
     }
 
     &:active:enabled {
-      background-color: $unnnic-color-yellow-700;
+      background-color: $unnnic-color-aux-yellow-900;
     }
   }
 
   &--primary:disabled,
   &--secondary:disabled,
-  &--tertiary:disabled,
+  &--alternative:disabled,
   &--warning:disabled,
   &--attention:disabled {
-    background-color: $unnnic-color-bg-muted;
-    color: $unnnic-color-fg-muted;
+    background-color: $unnnic-color-neutral-soft;
+    color: $unnnic-color-neutral-clean;
     cursor: not-allowed;
   }
 
@@ -321,12 +346,26 @@ watch(
     box-shadow: $unnnic-shadow-level-near;
   }
 
-  &--size-large {
-    padding: $unnnic-space-3 $unnnic-space-4;
-  }
+  &--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;
+    }
 
-  &--size-small {
-    padding: $unnnic-space-2 $unnnic-space-4;
+    &-large {
+      height: 46px;
+    }
+
+    &-small {
+      height: 38px;
+    }
   }
 }
 </style>
@@ -344,19 +383,29 @@ watch(
     }
 
     &-large {
-      height: 45px;
-      width: 45px;
+      height: 46px;
+      width: 46px;
     }
 
     &-large,
     &-extra-large {
       padding: $unnnic-inset-xs;
+
+      .unnnic-icon {
+        width: $unnnic-icon-size-md;
+        height: $unnnic-icon-size-md;
+      }
     }
 
     &-small {
       padding: $unnnic-inset-nano;
-      height: 37px;
-      width: 37px;
+      height: 38px;
+      width: 38px;
+
+      .unnnic-icon {
+        width: $unnnic-icon-size-ant;
+        height: $unnnic-icon-size-ant;
+      }
     }
   }
 }

package/src/components/Button/types.ts

@@ -4,6 +4,7 @@ export type ButtonType =
   | 'primary'
   | 'secondary'
   | 'tertiary'
+  | 'alternative'
   | 'warning'
   | 'attention';