@weni/unnnic-system 3.9.4 → 3.11.0

package/src/components/Alert/AlertBanner.vue

@@ -1,182 +0,0 @@
-<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

@@ -1,49 +0,0 @@
-<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/__tests__/AlertBanner.spec.js

@@ -1,89 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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/Tag/BrandTag.vue

@@ -1,96 +0,0 @@
-<template>
-  <div
-    :class="{
-      'unnnic-brand-tag': true,
-      'unnnic-brand-tag--disabled': !disabled,
-      'unnnic-brand-tag--clickable': clickable,
-    }"
-  >
-    <span class="unnnic-brand-tag__label">{{ text }}</span>
-    <UnnnicIcon
-      :icon="disabled ? 'close-1' : 'add-1'"
-      :scheme="disabled ? 'neutral-snow' : 'brand-weni-dark'"
-      class="unnnic-brand-tag__icon"
-      size="xs"
-    />
-  </div>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  name: 'UnnnicBrandTag',
-  components: {
-    UnnnicIcon,
-  },
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    closeClicked() {
-      if (!this.closeClicked) return;
-      this.$emit('close-click');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-brand-tag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: $unnnic-border-radius-pill;
-  border: 1px solid $unnnic-color-brand-weni-soft;
-  height: 1.875 * $unnnic-font-size;
-  white-space: nowrap;
-  transition: 0.2s;
-
-  color: $unnnic-color-neutral-snow;
-  background-color: $unnnic-color-brand-weni-dark;
-  &:hover {
-    background-color: $unnnic-color-brand-weni-soft;
-  }
-
-  &--disabled {
-    color: $unnnic-color-brand-weni-dark;
-    background-color: $unnnic-color-background-snow;
-    &:hover {
-      background-color: rgba(
-        $unnnic-color-brand-weni,
-        $unnnic-opacity-level-extra-light
-      );
-    }
-  }
-  &--clickable {
-    cursor: pointer;
-  }
-
-  &__label {
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-md;
-    font-weight: $unnnic-font-weight-regular;
-    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-    padding: $unnnic-spacing-stack-nano $unnnic-inline-ant;
-  }
-
-  &__icon {
-    margin-right: $unnnic-inline-ant;
-    cursor: pointer;
-  }
-}
-</style>

package/src/components/Tag/IndicatorTag.vue

@@ -1,107 +0,0 @@
-<template>
-  <div
-    :class="`unnnic-tag
-        ${clickable ? 'unnnic-tag--clickable' : ''}`"
-  >
-    <ToolTip
-      :enabled="enableTooltip"
-      :text="tooltipText"
-      side="bottom"
-    >
-      <span class="unnnic-tag__count">{{ count }}</span>
-    </ToolTip>
-    <span class="unnnic-tag__label">{{ text }}</span>
-    <UnnnicIcon
-      v-if="hasBackButton"
-      icon="arrow-right-1-1"
-      class="unnnic-tag__icon"
-      scheme="neutral-darkest"
-      size="xs"
-    />
-  </div>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-import ToolTip from '../ToolTip/ToolTip.vue';
-
-export default {
-  name: 'UnnnicTag',
-  components: {
-    UnnnicIcon,
-    ToolTip,
-  },
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    tooltipText: {
-      type: String,
-      default: null,
-    },
-    count: {
-      type: Number,
-      default: 0,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-    hasBackButton: {
-      type: Boolean,
-      default: false,
-    },
-    enableTooltip: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-tag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: $unnnic-border-radius-sm;
-  background-color: $unnnic-color-background-sky;
-  padding: $unnnic-inset-nano;
-  border: $unnnic-border-width-thinner solid $unnnic-color-background-sky;
-
-  &:hover {
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
-  }
-
-  &--clickable {
-    cursor: pointer;
-  }
-
-  &__count {
-    background-color: $unnnic-color-neutral-soft;
-    border-radius: $unnnic-border-radius-sm;
-    padding: $unnnic-inline-nano;
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-md;
-    font-weight: $unnnic-font-weight-regular;
-    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-    color: $unnnic-color-neutral-darkest;
-  }
-
-  &__label {
-    padding: 0 $unnnic-inline-xs;
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-md;
-    font-weight: $unnnic-font-weight-regular;
-    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-    color: $unnnic-color-neutral-darkest;
-  }
-
-  &__icon {
-    margin-right: $unnnic-inline-ant;
-  }
-}
-</style>

package/src/components/Tag/TagNext.vue

@@ -1,60 +0,0 @@
-<template>
-  <section :class="['unnnic-tag-next', `unnnic-tag-next--${scheme}`]">
-    <p class="unnnic-tag-next__text">
-      {{ text }}
-    </p>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'TagNext',
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    scheme: {
-      type: String,
-      default: 'weni',
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-tag-next {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-
-  border-radius: $unnnic-border-radius-pill;
-  padding: 0 $unnnic-spacing-xs;
-
-  font-family: $unnnic-font-family-secondary;
-  font-size: $unnnic-font-size-body-md;
-  font-weight: $unnnic-font-weight-regular;
-  line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-
-  &__text {
-    margin: 0;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &--aux-purple {
-    background-color: $unnnic-color-aux-purple-100;
-    color: $unnnic-color-aux-purple-500;
-  }
-
-  &--weni {
-    background-color: $unnnic-color-weni-100;
-    color: $unnnic-color-weni-600;
-  }
-}
-</style>