@weni/unnnic-system 3.31.1 → 3.32.0

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>

package/src/components/CircleProgressBar/CircleProgressBar.vue

@@ -1,150 +0,0 @@
-<template>
-  <div class="unnnic-circle-progress-bar">
-    <svg
-      width="46"
-      height="46"
-      class="semicircle"
-    >
-      <circle
-        cx="23"
-        cy="23"
-        r="21"
-        stroke="black"
-        stroke-width="4px"
-        :class="['background', progress === totalProgress ? 'filled' : '']"
-      />
-
-      <path
-        v-show="progress < totalProgress && progress > 0"
-        id="path"
-        ref="background"
-        fill="none"
-        stroke-linecap="round"
-        class="front"
-        stroke-width="4px"
-      ></path>
-    </svg>
-
-    <div class="content">{{ progress }}/{{ totalProgress }}</div>
-  </div>
-</template>
-
-<script>
-export default {
-  components: {},
-
-  props: {
-    progress: {
-      type: Number,
-    },
-
-    totalProgress: {
-      type: Number,
-    },
-  },
-
-  computed: {
-    progressChange() {
-      return `${this.progress}-${this.totalProgress}`;
-    },
-  },
-
-  watch: {
-    progressChange: {
-      immediate: true,
-      handler() {
-        function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
-          const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-
-          return {
-            x: centerX + radius * -Math.cos(angleInRadians),
-            y: centerY + radius * -Math.sin(angleInRadians),
-          };
-        }
-
-        function describeArc(
-          x,
-          y,
-          innerRadius,
-          outerRadius,
-          startAngle,
-          endAngle,
-        ) {
-          const radius = innerRadius;
-          const spread = outerRadius - innerRadius;
-          const outerStart = polarToCartesian(x, y, radius + spread, endAngle);
-          const outerEnd = polarToCartesian(x, y, radius + spread, startAngle);
-
-          const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-
-          const d = [
-            'M',
-            outerStart.x,
-            outerStart.y,
-            'A',
-            radius + spread,
-            radius + spread,
-            0,
-            largeArcFlag,
-            0,
-            outerEnd.x,
-            outerEnd.y,
-          ].join(' ');
-
-          return d;
-        }
-
-        const value = (this.progress / this.totalProgress) * 360;
-
-        const path = describeArc(23, 23, 0, 21, 180 - value.toFixed(), 180);
-
-        this.$nextTick(() => {
-          this.$refs.background.setAttribute('d', path);
-        });
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-circle-progress-bar {
-  position: relative;
-  width: fit-content;
-
-  .semicircle {
-    display: block;
-  }
-
-  .background {
-    fill: transparent;
-    stroke: rgba($unnnic-color-teal-8, $unnnic-opacity-level-extra-light);
-
-    &.filled {
-      stroke: $unnnic-color-teal-8;
-    }
-  }
-
-  .front {
-    stroke: $unnnic-color-teal-8;
-  }
-
-  .content {
-    position: absolute;
-    text-align: center;
-    width: 100%;
-
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    color: $unnnic-color-fg-muted;
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-regular;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-  }
-}
-</style>

package/src/components/Indicator/Indicator.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="weni-step-indicator">
-    <div
-      v-for="step in numberOfSteps"
-      :key="step"
-      :class="{
-        'weni-step-indicator__step__wrapper': true,
-        'weni-step-indicator--has-separator': step > 1,
-      }"
-    >
-      <div
-        v-if="step !== 1"
-        :class="{
-          'weni-step-indicator__step__separator': true,
-          'weni-step-indicator__step__separator--active': step <= currentStep,
-        }"
-      />
-      <div
-        :class="{
-          'weni-step-indicator__step': true,
-          'weni-step-indicator__step--active': step <= currentStep,
-        }"
-      >
-        <span class="weni-step-indicator__label">
-          {{ titleForStep(step) }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'UnnnicIndicator',
-  props: {
-    numberOfSteps: {
-      type: Number,
-      required: true,
-    },
-    titles: {
-      type: Array,
-      default: () => [],
-    },
-    currentStep: {
-      type: Number,
-      default: 0,
-    },
-  },
-  methods: {
-    titleForStep(step) {
-      try {
-        return this.titles[step - 1];
-      } catch (e) {
-        return null;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.weni-step-indicator {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  &--has-separator {
-    flex: 1;
-  }
-  &__step {
-    border-radius: 50%;
-    height: $unnnic-avatar-size-nano;
-    width: $unnnic-avatar-size-nano;
-    border: $unnnic-border-width-thick solid $unnnic-color-border-muted;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    position: relative;
-    &__wrapper {
-      display: flex;
-      align-items: center;
-    }
-    &--active {
-      background-color: $unnnic-color-teal-8;
-      border: 4px solid rgba(0, 222, 210, 0.24);
-      background-clip: content-box;
-    }
-    &__separator {
-      border: $unnnic-border-width-thin solid $unnnic-color-border-muted;
-      margin: 0 $unnnic-inline-xs;
-      border-radius: 3px;
-      flex: 1;
-      &--active {
-        border: 2px solid $unnnic-color-teal-8;
-      }
-    }
-  }
-  &__label {
-    position: absolute;
-    white-space: nowrap;
-    text-align: center;
-    transform: translateX(-50%);
-    left: 50%;
-    top: 100%;
-    margin: $unnnic-inline-xs 0 0 0;
-    color: $unnnic-color-fg-base;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-  }
-}
-</style>