@weni/unnnic-system 3.31.1 → 3.32.1

package/src/components/Carousel/TagCarousel.vue

@@ -1,209 +0,0 @@
-<template>
-  <div class="unnnic-card-tag-carousel">
-    <div
-      class="unnnic-card-tag-carousel__button unnnic-card-tag-carousel__button--left"
-    >
-      <div class="unnnic-card-tag-carousel__button__icon">
-        <UnnnicIcon
-          icon="arrow-left-1-1"
-          size="sm"
-          :scheme="hasPrev ? 'fg-emphasized' : 'fg-muted'"
-          clickable
-          @click="handlePrevious"
-        />
-      </div>
-      <span
-        v-show="hasPrev"
-        class="unnnic-card-tag-carousel__button__blur unnnic-card-tag-carousel__button__blur--left"
-      />
-    </div>
-
-    <div
-      id="scroll"
-      class="unnnic-card-tag-carousel__container"
-    >
-      <div
-        v-for="tag in slides"
-        :key="tag.id"
-        class="unnnic-card-tag-carousel__container__slide"
-      >
-        <UnnnicTag
-          :text="tag.name"
-          clickable
-          type="brand"
-          :disabled="checkIsInclude(tag)"
-          class="unnnic-card-tag-carousel__container__slide__item"
-          @click="save(tag)"
-        />
-      </div>
-    </div>
-
-    <div
-      class="unnnic-card-tag-carousel__button unnnic-card-tag-carousel__button--right"
-    >
-      <span
-        v-show="hasNext"
-        class="unnnic-card-tag-carousel__button__blur unnnic-card-tag-carousel__button__blur--right"
-      />
-      <div class="unnnic-card-tag-carousel__button__icon">
-        <UnnnicIcon
-          icon="arrow-right-1-1"
-          size="sm"
-          :scheme="hasNext ? 'fg-emphasized' : 'fg-muted'"
-          clickable
-          @click="handleNext"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicTag from '../Tag/Tag.vue';
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  name: 'UnnnicTagCarousel',
-  components: {
-    UnnnicTag,
-    UnnnicIcon,
-  },
-  props: {
-    modelValue: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    tagItems: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      hasNext: true,
-      hasPrev: false,
-      slides: [],
-    };
-  },
-  mounted() {
-    this.slides = this.tagItems;
-  },
-  methods: {
-    handleNext() {
-      this.next();
-    },
-    handlePrevious() {
-      this.previous();
-    },
-    save(tagItem) {
-      let valueLocal = this.modelValue;
-      if (this.checkIsInclude(tagItem)) {
-        valueLocal = valueLocal.filter((id) => id !== tagItem.id);
-      } else {
-        valueLocal = [...valueLocal, tagItem.id];
-      }
-      this.$emit('selected', valueLocal);
-    },
-    checkIsInclude(tagItem) {
-      return this.modelValue.some((id) => id === tagItem.id);
-    },
-    next() {
-      const element = document.querySelector('#scroll');
-      const scrollCalc = element.scrollWidth - element.clientWidth;
-      element.scrollLeft += 200;
-      if (scrollCalc !== element.scrollLeft) {
-        if (!this.hasNext) {
-          this.hasNext = true;
-        }
-        this.hasPrev = true;
-      } else {
-        this.hasNext = false;
-      }
-    },
-    previous() {
-      const element = document.querySelector('#scroll');
-      element.scrollLeft -= 200;
-      if (element.scrollLeft !== 0) {
-        if (!this.hasPrev) {
-          this.hasPrev = true;
-        }
-        this.hasNext = true;
-      } else {
-        this.hasPrev = false;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-card-tag-carousel {
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  &__container {
-    width: 100%;
-    display: flex;
-    overflow: hidden;
-    scroll-behavior: smooth;
-
-    &__slide {
-      &:first-of-type {
-        margin-left: $unnnic-inline-lg;
-      }
-      &:last-of-type {
-        margin-right: $unnnic-inline-awesome;
-      }
-      &__item {
-        margin-right: 2 * $unnnic-font-size;
-      }
-    }
-  }
-
-  &__button {
-    z-index: 1;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &__icon {
-      height: $unnnic-inline-lg;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: $unnnic-color-bg-base;
-    }
-
-    &__blur {
-      width: $unnnic-inline-giant;
-      height: $unnnic-inline-lg;
-      &--left {
-        background-image: linear-gradient(
-          to right,
-          $unnnic-color-bg-base,
-          rgba($unnnic-color-bg-base, $unnnic-opacity-level-overlay)
-        );
-      }
-      &--right {
-        background-image: linear-gradient(
-          to right,
-          rgba($unnnic-color-bg-base, $unnnic-opacity-level-overlay),
-          $unnnic-color-bg-base
-        );
-      }
-    }
-    &--left {
-      left: 0;
-    }
-    &--right {
-      right: 0;
-    }
-  }
-}
-</style>

package/src/components/Carousel/__tests__/TagCarousel.spec.js

@@ -1,258 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest';
-import { mount, flushPromises } from '@vue/test-utils';
-
-import TagCarousel from '../TagCarousel.vue';
-
-const tagItems = [
-  { id: 1, name: 'Tag 1' },
-  { id: 2, name: 'Tag 2' },
-  { id: 3, name: 'Tag 3' },
-];
-
-const mountCarousel = async (props = {}) => {
-  const wrapper = mount(TagCarousel, {
-    props: {
-      modelValue: [],
-      tagItems,
-      ...props,
-    },
-    attachTo: document.body,
-    global: {
-      stubs: {
-        UnnnicIcon: true,
-      },
-    },
-  });
-
-  await flushPromises();
-  await wrapper.vm.$nextTick();
-
-  return wrapper;
-};
-
-const mockScrollElement = (
-  wrapper,
-  { scrollWidth = 800, clientWidth = 400, scrollLeft = 0 } = {},
-) => {
-  const element = wrapper.find('#scroll').element;
-
-  Object.defineProperty(element, 'scrollWidth', {
-    configurable: true,
-    value: scrollWidth,
-  });
-  Object.defineProperty(element, 'clientWidth', {
-    configurable: true,
-    value: clientWidth,
-  });
-
-  let currentScrollLeft = scrollLeft;
-  Object.defineProperty(element, 'scrollLeft', {
-    configurable: true,
-    get: () => currentScrollLeft,
-    set: (value) => {
-      currentScrollLeft = value;
-    },
-  });
-
-  return element;
-};
-
-describe('TagCarousel', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('renders tag slides from tagItems', async () => {
-    const wrapper = await mountCarousel();
-
-    expect(wrapper.vm.slides).toHaveLength(3);
-    expect(wrapper.findAll('.chip')).toHaveLength(3);
-    expect(wrapper.text()).toContain('Tag 1');
-  });
-
-  it('adds a tag to selection when clicked', async () => {
-    const wrapper = await mountCarousel();
-
-    await wrapper.findAll('.chip')[0].trigger('click');
-
-    expect(wrapper.emitted('selected')[0]).toEqual([[1]]);
-  });
-
-  it('removes a tag from selection when already selected', async () => {
-    const wrapper = await mountCarousel({ modelValue: [1] });
-
-    await wrapper.findAll('.chip')[0].trigger('click');
-
-    expect(wrapper.emitted('selected')[0]).toEqual([[]]);
-  });
-
-  it('checks whether a tag is included in modelValue', async () => {
-    const wrapper = await mountCarousel({ modelValue: [2] });
-
-    expect(wrapper.vm.checkIsInclude({ id: 2, name: 'Tag 2' })).toBe(true);
-    expect(wrapper.vm.checkIsInclude({ id: 1, name: 'Tag 1' })).toBe(false);
-  });
-
-  it('enables previous button after moving forward', async () => {
-    const wrapper = await mountCarousel();
-    mockScrollElement(wrapper, {
-      scrollWidth: 800,
-      clientWidth: 400,
-      scrollLeft: 0,
-    });
-
-    wrapper.vm.next();
-
-    expect(wrapper.vm.hasPrev).toBe(true);
-    expect(wrapper.vm.hasNext).toBe(true);
-  });
-
-  it('disables next button when scrolled to the end', async () => {
-    const wrapper = await mountCarousel();
-    mockScrollElement(wrapper, {
-      scrollWidth: 800,
-      clientWidth: 400,
-      scrollLeft: 200,
-    });
-
-    wrapper.vm.next();
-
-    expect(wrapper.vm.hasNext).toBe(false);
-  });
-
-  it('disables previous button when scrolled to the start', async () => {
-    const wrapper = await mountCarousel();
-    mockScrollElement(wrapper, {
-      scrollWidth: 800,
-      clientWidth: 400,
-      scrollLeft: 200,
-    });
-
-    wrapper.vm.previous();
-
-    expect(wrapper.vm.hasPrev).toBe(false);
-    expect(wrapper.vm.hasNext).toBe(true);
-  });
-
-  it('keeps next enabled when already disabled and not at end', async () => {
-    const wrapper = await mountCarousel();
-    mockScrollElement(wrapper, {
-      scrollWidth: 900,
-      clientWidth: 400,
-      scrollLeft: 0,
-    });
-    wrapper.vm.hasNext = false;
-
-    wrapper.vm.next();
-
-    expect(wrapper.vm.hasNext).toBe(true);
-  });
-
-  it('keeps previous enabled when already disabled and not at start', async () => {
-    const wrapper = await mountCarousel();
-    mockScrollElement(wrapper, {
-      scrollWidth: 900,
-      clientWidth: 400,
-      scrollLeft: 500,
-    });
-
-    wrapper.vm.previous();
-
-    expect(wrapper.vm.hasPrev).toBe(true);
-    expect(wrapper.vm.hasNext).toBe(true);
-  });
-
-  it('shows blur overlays when navigation is available', async () => {
-    const wrapper = await mountCarousel();
-    mockScrollElement(wrapper, {
-      scrollWidth: 800,
-      clientWidth: 400,
-      scrollLeft: 0,
-    });
-
-    expect(wrapper.vm.hasNext).toBe(true);
-    expect(wrapper.vm.hasPrev).toBe(false);
-
-    wrapper.vm.next();
-
-    expect(wrapper.vm.hasPrev).toBe(true);
-    expect(wrapper.vm.hasNext).toBe(true);
-  });
-
-  it('uses default modelValue when omitted', async () => {
-    const wrapper = mount(TagCarousel, {
-      props: { tagItems },
-      attachTo: document.body,
-      global: { stubs: { UnnnicIcon: true } },
-    });
-
-    await flushPromises();
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.modelValue).toEqual([]);
-    expect(wrapper.vm.slides).toHaveLength(3);
-
-    wrapper.unmount();
-  });
-
-  it('uses default tagItems when omitted', async () => {
-    const wrapper = mount(TagCarousel, {
-      props: { modelValue: [] },
-      attachTo: document.body,
-      global: { stubs: { UnnnicIcon: true } },
-    });
-
-    await flushPromises();
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.tagItems).toEqual([]);
-    expect(wrapper.vm.slides).toEqual([]);
-
-    wrapper.unmount();
-  });
-
-  it('keeps next enabled when it is already enabled', async () => {
-    const wrapper = await mountCarousel();
-    mockScrollElement(wrapper, {
-      scrollWidth: 900,
-      clientWidth: 400,
-      scrollLeft: 0,
-    });
-    wrapper.vm.hasNext = true;
-
-    wrapper.vm.handleNext();
-
-    expect(wrapper.vm.hasNext).toBe(true);
-    expect(wrapper.vm.hasPrev).toBe(true);
-  });
-
-  it('keeps previous enabled when it is already enabled', async () => {
-    const wrapper = await mountCarousel();
-    mockScrollElement(wrapper, {
-      scrollWidth: 900,
-      clientWidth: 400,
-      scrollLeft: 500,
-    });
-    wrapper.vm.hasPrev = true;
-
-    wrapper.vm.handlePrevious();
-
-    expect(wrapper.vm.hasPrev).toBe(true);
-    expect(wrapper.vm.hasNext).toBe(true);
-  });
-
-  it('delegates navigation to next and previous handlers', async () => {
-    const wrapper = await mountCarousel();
-    mockScrollElement(wrapper, {
-      scrollWidth: 800,
-      clientWidth: 400,
-      scrollLeft: 0,
-    });
-
-    wrapper.vm.handleNext();
-    expect(wrapper.vm.hasPrev).toBe(true);
-
-    wrapper.vm.handlePrevious();
-    expect(wrapper.vm.hasPrev).toBe(false);
-  });
-});

package/src/components/ChatText/ChatText.vue

@@ -1,179 +0,0 @@
-<template>
-  <div :class="['unnnic-chat-text', size]">
-    <div class="header">
-      <div :class="['title', titleColor]">
-        {{ title }}
-
-        <UnnnicToolTip
-          v-if="info"
-          side="top"
-          class="info"
-          :text="info"
-          enabled
-        >
-          <UnnnicIcon
-            class="info__icon"
-            icon="info"
-            size="sm"
-            scheme="fg-base"
-          ></UnnnicIcon>
-        </UnnnicToolTip>
-      </div>
-
-      <slot name="actions" />
-    </div>
-
-    <div
-      ref="description"
-      class="description"
-    >
-      <slot name="description" />
-
-      <div
-        v-if="isScrollable"
-        class="scrollable-gradient"
-      ></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicToolTip from '../ToolTip/ToolTip.vue';
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  components: {
-    UnnnicToolTip,
-    UnnnicIcon,
-  },
-
-  props: {
-    size: {
-      type: String,
-      default: 'normal',
-    },
-
-    title: {
-      type: String,
-    },
-
-    titleColor: {
-      type: String,
-      default: 'brand-weni-soft',
-    },
-
-    info: {
-      type: String,
-    },
-  },
-
-  data() {
-    return {
-      isScrollable: false,
-    };
-  },
-
-  mounted() {
-    const areaScrollable =
-      this.$refs.description.scrollHeight - this.$refs.description.offsetHeight;
-
-    this.isScrollable = areaScrollable;
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-chat-text {
-  border-radius: $unnnic-border-radius-lg;
-  background-color: $unnnic-color-bg-base;
-  max-width: 31.25 * $unnnic-font-size;
-  padding: $unnnic-spacing-inset-md;
-  box-sizing: border-box;
-  border: 1px solid $unnnic-color-border-base;
-  max-height: 15.625 * $unnnic-font-size;
-  display: flex;
-  flex-direction: column;
-
-  .header {
-    margin-bottom: $unnnic-spacing-stack-md;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .title {
-      display: flex;
-
-      font-family: $unnnic-font-family-secondary;
-      font-weight: $unnnic-font-weight-black;
-      font-size: $unnnic-font-size-body-gt;
-      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-      flex: 1;
-
-      .info {
-        display: flex;
-        align-items: center;
-
-        &__icon {
-          margin-left: $unnnic-spacing-inline-nano;
-          cursor: default;
-        }
-      }
-
-      @each $name, $color in $scheme-colors {
-        &.#{$name} {
-          color: $color;
-        }
-      }
-    }
-  }
-
-  .description {
-    font-family: $unnnic-font-family-primary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-lg;
-    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-    color: $unnnic-color-fg-emphasized;
-    overflow: hidden;
-    position: relative;
-
-    .intent {
-      background-color: rgba(
-        $unnnic-color-purple-10,
-        $unnnic-opacity-level-light
-      );
-      padding: calc($unnnic-line-height-md / 2) 0;
-    }
-
-    .scrollable-gradient {
-      position: absolute;
-      background-image: linear-gradient(transparent, $unnnic-color-bg-base);
-      width: 100%;
-      height: 5 * $unnnic-font-size;
-      bottom: 0;
-      left: 0;
-      pointer-events: none;
-    }
-  }
-
-  &.small {
-    border-radius: $unnnic-border-radius-md;
-    padding: $unnnic-spacing-inset-sm;
-    max-height: 7.1875 * $unnnic-font-size;
-
-    .header {
-      margin-bottom: $unnnic-spacing-stack-xs;
-    }
-
-    .description {
-      font-size: $unnnic-font-size-body-md;
-      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-
-      .scrollable-gradient {
-        height: 2 * $unnnic-font-size;
-      }
-    }
-  }
-}
-</style>