@weni/unnnic-system 3.2.9-alpha.7 → 3.2.9

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

@@ -6,16 +6,20 @@
     :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"
+      :next="next"
       data-testid="icon-loading"
     />
 
@@ -68,7 +72,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';
 
@@ -99,8 +102,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 +120,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 +136,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 +159,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,12 +196,13 @@ 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;
 
@@ -220,91 +216,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;
   }
 
@@ -317,12 +351,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>
@@ -340,8 +388,8 @@ watch(
     }
 
     &-large {
-      height: 45px;
-      width: 45px;
+      height: 46px;
+      width: 46px;
     }
 
     &-large,
@@ -356,8 +404,8 @@ watch(
 
     &-small {
       padding: $unnnic-inset-nano;
-      height: 37px;
-      width: 37px;
+      height: 38px;
+      width: 38px;
 
       .unnnic-icon {
         width: $unnnic-icon-size-ant;

package/src/components/Button/types.ts

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