@weni/unnnic-system 3.9.2 → 3.9.3-alpha.0

package/dist/components/Tag/IndicatorTag.vue.d.ts

@@ -1,151 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    tooltipText: {
-        type: StringConstructor;
-        default: null;
-    };
-    count: {
-        type: NumberConstructor;
-        default: number;
-    };
-    clickable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hasBackButton: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    enableTooltip: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    tooltipText: {
-        type: StringConstructor;
-        default: null;
-    };
-    count: {
-        type: NumberConstructor;
-        default: number;
-    };
-    clickable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hasBackButton: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    enableTooltip: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    text: string;
-    clickable: boolean;
-    tooltipText: string;
-    count: number;
-    hasBackButton: boolean;
-    enableTooltip: boolean;
-}, {}, {
-    UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        click: (event: Event) => any;
-        mousedown: (event: Event) => any;
-        mouseup: (event: Event) => any;
-    }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
-        onClick?: ((event: Event) => any) | undefined;
-        onMousedown?: ((event: Event) => any) | undefined;
-        onMouseup?: ((event: Event) => any) | undefined;
-    }>, {
-        filled: boolean;
-        icon: string | null;
-        clickable: boolean;
-        size: import('../Icon.vue').IconSize;
-        scheme: import('../Icon.vue').SchemeColor;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-    ToolTip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        text: {
-            type: StringConstructor;
-            default: string;
-        };
-        enabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        forceOpen: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        side: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        maxWidth: {
-            type: StringConstructor;
-            default: string;
-        };
-        shortcutText: {
-            type: StringConstructor;
-            default: null;
-        };
-        enableHtml: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>, {}, {
-        topPos: null;
-        leftPos: null;
-    }, {}, {
-        handleResize(): void;
-        getRightPost(element: any): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        text: {
-            type: StringConstructor;
-            default: string;
-        };
-        enabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        forceOpen: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        side: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        maxWidth: {
-            type: StringConstructor;
-            default: string;
-        };
-        shortcutText: {
-            type: StringConstructor;
-            default: null;
-        };
-        enableHtml: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, {
-        text: string;
-        forceOpen: boolean;
-        enabled: boolean;
-        side: string;
-        maxWidth: string;
-        shortcutText: string;
-        enableHtml: boolean;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=IndicatorTag.vue.d.ts.map

package/dist/components/Tag/IndicatorTag.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IndicatorTag.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/IndicatorTag.vue"],"names":[],"mappings":"AAsBA;"}

package/dist/components/Tag/TagNext.vue.d.ts

@@ -1,24 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    scheme: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    scheme: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    text: string;
-    scheme: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=TagNext.vue.d.ts.map

package/dist/components/Tag/TagNext.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TagNext.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/TagNext.vue"],"names":[],"mappings":"AAOA;"}

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>