@weni/unnnic-system 3.31.1 → 3.32.0

package/src/components/Slider/__tests__/Slider.spec.js

@@ -1,321 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-
-import Slider from '../Slider.vue';
-
-const tooltipStub = {
-  name: 'UnnnicTooltip',
-  template: '<div><div ref="label" class="tooltip-label"><slot /></div></div>',
-  mounted() {
-    Object.defineProperty(this.$refs.label, 'clientWidth', {
-      configurable: true,
-      value: 32,
-    });
-  },
-};
-
-const noLabelTooltipStub = {
-  name: 'UnnnicTooltip',
-  template: '<div><slot /></div>',
-};
-
-const mockInputDimensions = (wrapper, width = 200) => {
-  const input = wrapper.find('input[type="range"]').element;
-
-  Object.defineProperty(input, 'clientWidth', {
-    configurable: true,
-    value: width,
-  });
-  Object.defineProperty(input, 'offsetWidth', {
-    configurable: true,
-    value: width,
-  });
-};
-
-const createWrapper = async (props = {}, options = {}) => {
-  const wrapper = mount(Slider, {
-    props: {
-      initialValue: 2,
-      minValue: 0,
-      maxValue: 10,
-      ...props,
-    },
-    attachTo: document.body,
-    global: {
-      stubs: {
-        UnnnicTooltip: tooltipStub,
-        UnnnicIcon: true,
-        ...options.stubs,
-      },
-    },
-  });
-
-  mockInputDimensions(wrapper);
-  await wrapper.vm.$nextTick();
-
-  return wrapper;
-};
-
-describe('Slider', () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-    document.body.innerHTML = '';
-  });
-
-  it('renders label, info tooltip, and min/max labels', async () => {
-    const wrapper = await createWrapper({
-      label: 'Volume',
-      labelInfo: 'Adjust volume',
-      minLabel: 'Low',
-      maxLabel: 'High',
-    });
-
-    expect(wrapper.find('.unnnic-slider__label').text()).toBe('Volume');
-    expect(wrapper.find('.unnnic-label__tooltip').exists()).toBe(true);
-    expect(wrapper.find('.unnnic-slider__content__labels__min').text()).toBe(
-      'Low',
-    );
-    expect(wrapper.find('.unnnic-slider__content__labels__max').text()).toBe(
-      'High',
-    );
-  });
-
-  it('hides value input when showInputValue is false', async () => {
-    const wrapper = await createWrapper({ showInputValue: false });
-
-    expect(wrapper.find('.value-input').exists()).toBe(false);
-  });
-
-  it('emits valueChange when range input changes', async () => {
-    const wrapper = await createWrapper();
-
-    const rangeInput = wrapper.find('input[type="range"]');
-    await rangeInput.setValue(5);
-    await rangeInput.trigger('change');
-
-    expect(wrapper.emitted('valueChange')).toBeTruthy();
-    expect(wrapper.emitted('valueChange').at(-1)).toEqual(['5']);
-  });
-
-  it('updates value from the text input', async () => {
-    const wrapper = await createWrapper();
-
-    const valueInput = wrapper.find('.value-input');
-    await valueInput.setValue('7');
-
-    expect(wrapper.vm.sliderVal).toBe('7');
-    expect(wrapper.emitted('valueChange')).toBeTruthy();
-  });
-
-  it('shows tooltip on mouseover and hides on mouseleave', async () => {
-    const wrapper = await createWrapper();
-
-    const rangeInput = wrapper.find('input[type="range"]');
-    await rangeInput.trigger('mouseover');
-    expect(wrapper.vm.showTooltip).toBe(true);
-
-    await rangeInput.trigger('mouseleave');
-    expect(wrapper.vm.showTooltip).toBe(false);
-  });
-
-  it('computes css variables from current state', async () => {
-    const wrapper = await createWrapper({
-      initialValue: 4,
-      minValue: 0,
-      maxValue: 8,
-    });
-
-    expect(wrapper.vm.cssVars).toEqual({
-      '--val': 4,
-      '--tooltip-offset': expect.any(Number),
-      '--min': 0,
-      '--max': 8,
-    });
-  });
-
-  it('returns zero tooltip offset when dimensions are unavailable', async () => {
-    const wrapper = await createWrapper();
-    wrapper.vm.sliderWidth = 0;
-    wrapper.vm.labelWidth = 0;
-
-    expect(wrapper.vm.getNewTooltipPosition()).toBe(0);
-  });
-
-  it('handles NaN range when min and max are equal', async () => {
-    const wrapper = await createWrapper({
-      initialValue: 5,
-      minValue: 5,
-      maxValue: 5,
-    });
-    wrapper.vm.sliderWidth = 200;
-    wrapper.vm.labelWidth = 32;
-
-    expect(wrapper.vm.getNewTooltipPosition()).toBeTypeOf('number');
-  });
-
-  it('uses fallback label width when label width is zero', async () => {
-    const wrapper = await createWrapper();
-    wrapper.vm.sliderWidth = 200;
-    wrapper.vm.labelWidth = 0;
-
-    expect(wrapper.vm.getNewTooltipPosition()).toBe(0);
-  });
-
-  it('reconfigures tooltip on window resize', async () => {
-    const wrapper = await createWrapper();
-    const configureSpy = vi.spyOn(wrapper.vm, 'configureTooltip');
-
-    window.dispatchEvent(new Event('resize'));
-
-    expect(configureSpy).toHaveBeenCalled();
-  });
-
-  it('removes resize listener on unmount', async () => {
-    const wrapper = await createWrapper();
-    const removeSpy = vi.spyOn(window, 'removeEventListener');
-
-    wrapper.unmount();
-
-    expect(removeSpy).toHaveBeenCalledWith('resize', wrapper.vm.handleResize);
-  });
-
-  it('initializes dimensions from polling intervals', async () => {
-    const wrapper = await createWrapper();
-    mockInputDimensions(wrapper, 0);
-
-    vi.advanceTimersByTime(100);
-    await wrapper.vm.$nextTick();
-
-    mockInputDimensions(wrapper, 200);
-    vi.advanceTimersByTime(100);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.sliderWidth).toBe(200);
-    expect(wrapper.vm.labelWidth).toBe(32);
-  });
-
-  it('skips tooltip label polling when label ref is missing', async () => {
-    vi.spyOn(Slider.methods, 'configureTooltip').mockImplementation(() => {});
-
-    const wrapper = await createWrapper(
-      {},
-      { stubs: { UnnnicTooltip: noLabelTooltipStub } },
-    );
-    mockInputDimensions(wrapper);
-
-    vi.advanceTimersByTime(100);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.labelWidth).toBe(0);
-
-    Slider.methods.configureTooltip.mockRestore();
-  });
-
-  it('syncs value input text when slider value changes', async () => {
-    const wrapper = await createWrapper({ initialValue: 1 });
-
-    const valueInput = wrapper.find('.value-input').element;
-    valueInput.textContent = 'old';
-
-    wrapper.vm.sliderVal = 9;
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
-
-    expect(valueInput.textContent).toBe('9');
-  });
-
-  it('skips value input sync when text already matches slider value', async () => {
-    const wrapper = await createWrapper({ initialValue: 4 });
-    const valueInput = wrapper.find('.value-input').element;
-    valueInput.textContent = '4';
-
-    wrapper.vm.sliderVal = 4;
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
-
-    expect(valueInput.textContent).toBe('4');
-  });
-
-  it('computes tooltip position with non-zero dimensions', async () => {
-    const wrapper = await createWrapper({
-      initialValue: 5,
-      minValue: 0,
-      maxValue: 10,
-    });
-    wrapper.vm.sliderWidth = 200;
-    wrapper.vm.labelWidth = 32;
-
-    expect(wrapper.vm.getNewTooltipPosition()).toBeGreaterThan(0);
-  });
-
-  it('uses fallback label width when label width is NaN', async () => {
-    const wrapper = await createWrapper();
-    wrapper.vm.sliderWidth = 200;
-    wrapper.vm.labelWidth = Number.NaN;
-
-    expect(wrapper.vm.getNewTooltipPosition()).toBeTypeOf('number');
-  });
-
-  it('ignores input polling after unmount', async () => {
-    const wrapper = await createWrapper();
-    mockInputDimensions(wrapper, 0);
-
-    wrapper.unmount();
-    vi.advanceTimersByTime(200);
-
-    expect(true).toBe(true);
-  });
-
-  it('waits until tooltip label width is greater than zero', async () => {
-    const delayedLabelTooltipStub = {
-      name: 'UnnnicTooltip',
-      template:
-        '<div><div ref="label" class="tooltip-label"><slot /></div></div>',
-      mounted() {
-        Object.defineProperty(this.$refs.label, 'clientWidth', {
-          configurable: true,
-          value: 0,
-        });
-      },
-    };
-
-    vi.spyOn(Slider.methods, 'configureTooltip').mockImplementation(
-      function mockConfigure() {
-        if (!this.$refs.input || !this.$refs.tooltip?.$refs?.label) {
-          return;
-        }
-
-        this.sliderWidth = this.$refs.input.clientWidth;
-        this.labelWidth = this.$refs.tooltip.$refs.label.clientWidth;
-        this.tooltipOffset = this.getNewTooltipPosition();
-      },
-    );
-
-    const wrapper = await createWrapper(
-      {},
-      {
-        stubs: { UnnnicTooltip: delayedLabelTooltipStub },
-      },
-    );
-    mockInputDimensions(wrapper);
-
-    vi.advanceTimersByTime(100);
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.labelWidth).toBe(0);
-
-    Object.defineProperty(wrapper.vm.$refs.tooltip.$refs.label, 'clientWidth', {
-      configurable: true,
-      value: 32,
-    });
-    vi.advanceTimersByTime(100);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.labelWidth).toBe(32);
-
-    Slider.methods.configureTooltip.mockRestore();
-  });
-});

package/src/components/StarRating/StarRating.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="unnnic-star-rating">
-    <UnnnicIcon
-      v-for="index in 5"
-      :key="index"
-      :scheme="starScheme(index)"
-      icon="star"
-      :filled="index <= modelValue"
-      size="ant"
-    />
-
-    <div
-      v-if="showValue"
-      class="rating-title"
-    >
-      <span class="highlight"> {{ modelValue.toFixed(1) }} </span>
-      /5.0
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  components: {
-    UnnnicIcon,
-  },
-
-  props: {
-    modelValue: {
-      type: Number,
-    },
-
-    showValue: {
-      type: Boolean,
-    },
-
-    readonly: {
-      type: Boolean,
-    },
-  },
-
-  data() {
-    return {};
-  },
-
-  methods: {
-    starScheme(star) {
-      return star <= this.modelValue ? 'yellow-5' : 'fg-base';
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-star-rating {
-  display: flex;
-  align-items: center;
-
-  .rating-title {
-    margin-left: $unnnic-spacing-inline-xs;
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-bold;
-    font-size: $unnnic-font-size-body-lg;
-    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-    color: $unnnic-color-fg-muted;
-
-    .highlight {
-      color: $unnnic-color-fg-emphasized;
-    }
-  }
-}
-</style>

package/src/components/TransitionRipple/TransitionRipple.vue

@@ -1,126 +0,0 @@
-<template>
-  <TransitionGroup
-    class="ripples"
-    name="grow"
-    tag="div"
-  >
-    <div
-      v-for="ripple in ripples"
-      :key="ripple.id"
-      class="ripple"
-      :style="{
-        top: ripple.top,
-        left: ripple.left,
-        width: ripple.width,
-        height: ripple.height,
-      }"
-      :class="`ripples-color--${color}`"
-    ></div>
-  </TransitionGroup>
-</template>
-
-<script>
-export default {
-  props: {
-    color: {
-      type: String,
-      default: 'fg-inverted',
-    },
-  },
-  data() {
-    return {
-      ripples: [],
-      rippleWidth: 0,
-      halfRippleWidth: 0,
-    };
-  },
-  mounted() {
-    const { transitionContainer } = this.$parent.$refs;
-
-    if (transitionContainer) {
-      this.$parent.$refs.transitionContainer.style.position = 'relative';
-      this.$parent.$refs.transitionContainer.style.overflow = 'hidden';
-    }
-
-    const width = transitionContainer.offsetWidth;
-    const height = transitionContainer.offsetHeight;
-    this.rippleWidth = width > height ? width : height;
-    this.halfRippleWidth = this.rippleWidth / 2;
-
-    window.addEventListener('mouseup', this.purgeRipples);
-  },
-  beforeUnmount() {
-    window.removeEventListener('mouseup', this.purgeRipples);
-  },
-  methods: {
-    addRipple(e) {
-      const { left, top } =
-        this.$parent.$refs.transitionContainer.getBoundingClientRect();
-      const rippleId = Date.now();
-      this.ripples.push({
-        width: `${this.rippleWidth}px`,
-        height: `${this.rippleWidth}px`,
-        left: `${e.clientX - left - this.halfRippleWidth}px`,
-        top: `${e.clientY - top - this.halfRippleWidth}px`,
-        id: rippleId,
-      });
-    },
-    purgeRipples() {
-      this.ripples = [];
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@use '@/assets/scss/unnnic' as *;
-
-.ripples {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-
-  @each $name, $color in $unnnic-scheme-colors {
-    &-color--#{$name} {
-      background-color: $color;
-    }
-  }
-}
-
-.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  opacity: 0.05;
-  animation: grow 1s ease-out;
-}
-
-.grow-enter-active,
-.grow-enter-to-active {
-  transition: all 1.5s ease-out;
-}
-.grow-leave-active,
-.grow-leave-to-active {
-  transition: all 1s ease-out;
-}
-
-.grow-enter {
-  transform: scale(0);
-  opacity: 0.1;
-}
-
-.grow-enter-to {
-  transform: scale(4);
-  opacity: 0.1;
-}
-
-.grow-leave {
-  transform: scale(4);
-  opacity: 0.1;
-}
-.grow-leave-to {
-  transform: scale(4);
-  opacity: 0;
-}
-</style>

package/src/stories/ButtonIcon.stories.js

@@ -1,31 +0,0 @@
-import UnnnicButtonIcon from '../components/Button/ButtonIcon.vue';
-
-const iconsOptions = ['add'];
-
-export default {
-  title: 'Form/ButtonIcon',
-  component: UnnnicButtonIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'large'],
-      },
-    },
-
-    icon: {
-      control: {
-        type: 'select',
-        options: iconsOptions,
-      },
-    },
-  },
-};
-
-export const Normal = {
-  args: {
-    size: 'small',
-    icon: iconsOptions[0],
-  },
-};

package/src/stories/Carousel.stories.js

@@ -1,45 +0,0 @@
-import UnnnicCarousel from '../components/Carousel/Carousel.vue';
-import iconList from '../utils/iconList';
-
-export default {
-  title: 'Data Display/Carousel',
-  component: UnnnicCarousel,
-  tags: ['autodocs'],
-  argTypes: {
-    type: { control: { type: 'select' }, options: ['brand'] },
-    icon: { control: { type: 'select' }, options: iconList },
-  },
-  render: (args) => ({
-    components: {
-      UnnnicCarousel,
-    },
-    setup() {
-      return { args };
-    },
-    data() {
-      return {
-        selecteds: [1],
-      };
-    },
-    template: `
-      <UnnnicCarousel v-bind="args" v-model="selecteds" />
-    `,
-  }),
-};
-
-export const Tag = {
-  args: {
-    type: 'brand',
-    tagItems: [
-      { id: 1, name: 'tag - 1' },
-      { id: 2, name: 'tag - 2' },
-      { id: 3, name: 'tag - 3' },
-      { id: 4, name: 'tag - 4' },
-      { id: 5, name: 'tag - 5' },
-      { id: 6, name: 'tag - 6' },
-      { id: 7, name: 'tag - 7' },
-      { id: 8, name: 'tag - 8' },
-      { id: 9, name: 'tag - 9' },
-    ],
-  },
-};

package/src/stories/ChatText.stories.js

@@ -1,57 +0,0 @@
-import { action } from 'storybook/actions';
-
-import UnnnicChatText from '../components/ChatText/ChatText.vue';
-import UnnnicButtonIcon from '../components/Button/ButtonIcon.vue';
-import colorsList from '../utils/colorsList';
-
-export default {
-  title: 'Data Display/ChatText',
-  component: UnnnicChatText,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['normal', 'small'] },
-    titleColor: {
-      control: 'select',
-      options: colorsList,
-    },
-  },
-  render: (args) => ({
-    components: {
-      UnnnicChatText,
-      UnnnicButtonIcon,
-    },
-    setup() {
-      return { args };
-    },
-    methods: {
-      actionClick() {
-        action('action-click')();
-      },
-    },
-    template: `
-      <div>
-        <UnnnicChatText v-bind="args">
-          <template #actions>
-            <UnnnicButtonIcon
-              @click="actionClick"
-              type="secondary"
-              size="small"
-              icon="pencil-write-1"
-            />
-          </template>
-
-          <template #description>
-            <span class="intent">Lorem</span> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-          </template>
-        </UnnnicChatText>
-      </div>
-    `,
-  }),
-};
-
-export const Default = {
-  args: {
-    title: 'Title',
-    info: 'Info',
-  },
-};

package/src/stories/CircleProgressBar.stories.js

@@ -1,15 +0,0 @@
-import UnnnicCircleProgressBar from '../components/CircleProgressBar/CircleProgressBar.vue';
-
-export default {
-  title: 'Progress/CircleProgressBar',
-  component: UnnnicCircleProgressBar,
-  tags: ['autodocs'],
-  argTypes: {},
-};
-
-export const Default = {
-  args: {
-    progress: 4,
-    totalProgress: 8,
-  },
-};

package/src/stories/Indicator.stories.js

@@ -1,18 +0,0 @@
-import UnnnicIndicator from '../components/Indicator/Indicator.vue';
-
-export default {
-  title: 'Example/Indicator',
-  component: UnnnicIndicator,
-  argTypes: {
-    numberOfSteps: { control: { type: 'number' } },
-    currentStep: { control: { type: 'number' } },
-  },
-};
-
-export const Default = {
-  args: {
-    numberOfSteps: 3,
-    currentStep: 2,
-    titles: ['Indicator-1', 'Indicator-2', 'Indicator-3'],
-  },
-};