@weni/unnnic-system 3.4.1-alpha.1 → 3.5.0

package/src/components/Alert/AlertBanner.vue

@@ -0,0 +1,182 @@
+<template>
+  <section
+    :class="[
+      'banner-alert',
+      {
+        'banner-alert--banner-danger': type === 'danger',
+        'banner-alert--banner-warning': type === 'warning',
+      },
+    ]"
+  >
+    <header
+      v-show="text"
+      class="banner-alert__container-text"
+    >
+      <UnnnicIcon
+        v-show="isShowTextIcon(type)"
+        class="banner-alert__textIcon"
+        :icon="getIconType(type)"
+        size="sm"
+        scheme="neutral-white"
+        data-test="unnnic-icon"
+      />
+      <p class="text">{{ text }}</p>
+      <a
+        v-if="linkHref"
+        class="banner-alert__link"
+        :href="linkHref"
+        :target="linkTarget"
+      >
+        {{ linkText }}
+      </a>
+    </header>
+
+    <div
+      v-show="showCloseButton"
+      class="banner-alert__close"
+      @click="emitClose"
+    >
+      <UnnnicIcon
+        icon="close"
+        size="sm"
+        scheme="neutral-white"
+        data-test="unnnic-close-icon"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  components: {
+    UnnnicIcon,
+  },
+  props: {
+    text: {
+      type: String,
+      default: null,
+    },
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: false,
+    },
+    linkHref: {
+      type: String,
+      default: '',
+    },
+    linkTarget: {
+      type: String,
+      default: '_blank',
+    },
+    linkText: {
+      type: String,
+      default: 'Learn more',
+    },
+    type: {
+      type: String,
+      default: 'info',
+    },
+  },
+  methods: {
+    getIconType(type) {
+      if (type === 'danger') return 'block';
+      if (!type.trim()) return 'info'; // check if type is empty or whitespace
+      return type;
+    },
+    isShowTextIcon(type) {
+      return ['danger', 'warning', 'info', ''].includes(type);
+    },
+    emitClose() {
+      this.onClose();
+
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.banner-alert {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  text-align: center;
+  margin-bottom: $unnnic-spacing-sm;
+
+  color: $unnnic-color-neutral-white;
+  font-family: $unnnic-font-family-secondary;
+  font-size: $unnnic-font-size-body-gt;
+  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+  font-weight: $unnnic-font-weight-regular;
+  background-color: $unnnic-color-aux-blue-500;
+
+  &__container-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+    flex-grow: 1;
+
+    .text {
+      margin: 0 $unnnic-spacing-nano 0 0;
+    }
+  }
+
+  &__textIcon {
+    margin-right: $unnnic-spacing-xs;
+  }
+
+  &__link {
+    color: inherit;
+    display: block;
+    font-weight: $unnnic-font-weight-bold;
+    text-decoration: underline;
+    text-underline-position: under;
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    max-height: 38px;
+    padding: 0 $unnnic-spacing-sm;
+    cursor: pointer;
+    user-select: none;
+    border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-blue-300;
+    &:hover {
+      background-color: $unnnic-color-aux-blue-300;
+    }
+  }
+
+  &--banner-warning {
+    background-color: $unnnic-color-aux-orange-500;
+
+    .banner-alert__close {
+      border-left: $unnnic-border-width-thinner solid
+        $unnnic-color-aux-orange-300;
+
+      &:hover {
+        background-color: $unnnic-color-aux-orange-300;
+      }
+    }
+  }
+
+  &--banner-danger {
+    background-color: $unnnic-color-aux-red-500;
+
+    .banner-alert__close {
+      border-left: $unnnic-border-width-thinner solid $unnnic-color-aux-red-300;
+
+      &:hover {
+        background-color: $unnnic-color-aux-red-300;
+      }
+    }
+  }
+}
+</style>

package/src/components/Alert/AlertCaller.vue

@@ -0,0 +1,49 @@
+<template>
+  <button @click="callAlert">Launch alert</button>
+</template>
+
+<script>
+import alert from '../../utils/call';
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: null,
+    },
+    text: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+    scheme: {
+      type: String,
+      default: null,
+    },
+    seconds: {
+      type: Number,
+      default: 3,
+    },
+    closeText: {
+      type: String,
+      default: null,
+    },
+    position: {
+      type: String,
+      default: 'top-right',
+    },
+  },
+  methods: {
+    callAlert() {
+      alert.callAlert({ props: this.$props, seconds: this.seconds });
+    },
+  },
+};
+</script>

package/src/components/Alert/Version1dot1.vue

@@ -27,6 +27,15 @@
         {{ text }}
       </div>
 
+      <a
+        v-if="linkHref"
+        class="alert__link"
+        :href="linkHref"
+        :target="linkTarget"
+      >
+        {{ linkText }}
+      </a>
+
       <div
         class="alert__close"
         @click="emitClose"
@@ -49,6 +58,10 @@ export default {
     UnnnicIcon,
   },
   props: {
+    version: {
+      type: String,
+      default: '1.0',
+    },
     text: {
       type: String,
       default: null,
@@ -61,6 +74,18 @@ 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',
@@ -182,6 +207,7 @@ export default {
     padding: $unnnic-spacing-xs $unnnic-spacing-sm;
   }
 
+  &__link,
   &__close {
     border-left: $unnnic-border-width-thinner solid $unnnic-color-neutral-cloudy;
 
@@ -190,6 +216,14 @@ 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;
@@ -203,6 +237,7 @@ 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;
@@ -220,6 +255,7 @@ 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__/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__/__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="material-symbols-rounded unnnic-icon-scheme--blue-500 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="material-symbols-rounded unnnic-icon-scheme--neutral-dark 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="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>"
 `;

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" next="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
     </div>