@weni/unnnic-system 3.2.1 → 3.2.3

package/src/components/Icon/types.ts

@@ -0,0 +1,114 @@
+export type SchemeColor = 
+  | 'background-solo'
+  | 'background-sky'
+  | 'background-grass'
+  | 'background-carpet'
+  | 'background-snow'
+  | 'background-lightest'
+  | 'background-white'
+  | 'neutral-black'
+  | 'neutral-darkest'
+  | 'neutral-dark'
+  | 'neutral-cloudy'
+  | 'neutral-cleanest'
+  | 'neutral-clean'
+  | 'neutral-soft'
+  | 'neutral-lightest'
+  | 'neutral-light'
+  | 'neutral-white'
+  | 'neutral-snow'
+  | 'feedback-red'
+  | 'feedback-green'
+  | 'feedback-yellow'
+  | 'feedback-blue'
+  | 'feedback-grey'
+  | 'aux-blue'
+  | 'aux-purple'
+  | 'aux-orange'
+  | 'aux-lemon'
+  | 'aux-pink'
+  | 'aux-baby-blue'
+  | 'aux-baby-yellow'
+  | 'aux-baby-red'
+  | 'aux-baby-green'
+  | 'aux-baby-pink'
+  | 'aux-green-100'
+  | 'aux-green-300'
+  | 'aux-green-500'
+  | 'aux-green-700'
+  | 'aux-green-900'
+  | 'aux-blue-100'
+  | 'aux-blue-300'
+  | 'aux-blue-500'
+  | 'aux-blue-700'
+  | 'aux-blue-900'
+  | 'aux-purple-100'
+  | 'aux-purple-300'
+  | 'aux-purple-500'
+  | 'aux-purple-700'
+  | 'aux-purple-900'
+  | 'aux-red-100'
+  | 'aux-red-300'
+  | 'aux-red-500'
+  | 'aux-red-700'
+  | 'aux-red-900'
+  | 'aux-orange-100'
+  | 'aux-orange-300'
+  | 'aux-orange-500'
+  | 'aux-orange-700'
+  | 'aux-orange-900'
+  | 'aux-yellow-100'
+  | 'aux-yellow-300'
+  | 'aux-yellow-500'
+  | 'aux-yellow-700'
+  | 'aux-yellow-900'
+  | 'floweditor-blue'
+  | 'floweditor-purple'
+  | 'floweditor-wine'
+  | 'floweditor-orange'
+  | 'floweditor-pink'
+  | 'floweditor-turquoise'
+  | 'floweditor-green'
+  | 'weni-50'
+  | 'weni-100'
+  | 'weni-200'
+  | 'weni-300'
+  | 'weni-400'
+  | 'weni-500'
+  | 'weni-600'
+  | 'weni-700'
+  | 'weni-800'
+  | 'weni-900'
+  | 'weni-950'
+  | 'brand-weni'
+  | 'brand-weni-dark'
+  | 'brand-weni-soft'
+  | 'brand-sec-dark'
+  | 'brand-sec-soft'
+  | 'brand-sec';
+
+export type IconSize = 
+  | 'nano'
+  | 'xs'
+  | 'sm'
+  | 'ant'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | 'avatar-lg'
+  | 'avatar-md'
+  | 'avatar-sm'
+  | 'avatar-xs'
+  | 'avatar-nano';
+
+export type LineHeight = 'sm' | 'md' | 'lg';
+
+export interface IconProps {
+  filled?: boolean;
+  next?: boolean;
+  icon?: string | null;
+  clickable?: boolean;
+  size?: IconSize;
+  lineHeight?: LineHeight | null;
+  scheme?: SchemeColor;
+}

package/src/components/Icon.vue

@@ -13,8 +13,8 @@
     data-testid="material-icon"
     translate="no"
     @click="onClick"
-    @mousedown="$emit('mousedown')"
-    @mouseup="$emit('mouseup')"
+    @mousedown="(event) => $emit('mousedown', event)"
+    @mouseup="(event) => $emit('mouseup', event)"
   >
     {{ materialSymbolsName }}
   </span>
@@ -31,87 +31,54 @@
     ]"
     data-testid="old-map-icons"
     @click="onClick"
-    @mousedown="$emit('mousedown')"
-    @mouseup="$emit('mouseup')"
+    @mousedown="(event) => $emit('mousedown', event)"
+    @mouseup="(event) => $emit('mouseup', event)"
   />
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from 'vue';
 import icons from '../utils/icons';
 import OldIconsMap from './Icon/OldIconsMap.json';
-/* eslint-disable vue/multi-word-component-names */
-export default {
-  name: 'Icon',
-  props: {
-    filled: {
-      type: Boolean,
-    },
-    next: {
-      type: Boolean,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'md',
-      validator(value) {
-        return (
-          [
-            'nano',
-            'xs',
-            'sm',
-            'ant',
-            'md',
-            'lg',
-            'xl',
-            'avatar-lg',
-            'avatar-md',
-            'avatar-sm',
-            'avatar-xs',
-            'avatar-nano',
-          ].indexOf(value) !== -1
-        );
-      },
-    },
-    lineHeight: {
-      type: String,
-      default: null,
-      validator(value) {
-        return !value || ['sm', 'md', 'lg'].indexOf(value) !== -1;
-      },
-    },
-    scheme: {
-      type: String,
-      default: 'neutral-darkest',
-    },
-  },
-  emits: ['click', 'mousedown', 'mouseup'],
-  computed: {
-    svg() {
-      return icons[this.icon];
-    },
+import type { IconProps, IconSize, LineHeight, SchemeColor } from './Icon/types';
 
-    materialSymbolsName() {
-      if (Object.keys(icons).includes(this.icon) && !this.next) {
-        return null;
-      }
+defineOptions({
+  name: 'UnnnicIcon',
+});
+
+export type { IconProps, IconSize, LineHeight, SchemeColor };
+
+const props = withDefaults(defineProps<IconProps>(), {
+  filled: false,
+  next: false,
+  icon: null,
+  clickable: false,
+  size: 'md',
+  lineHeight: null,
+  scheme: 'neutral-darkest',
+});
+
+const emit = defineEmits<{
+  click: [event: Event];
+  mousedown: [event: Event];
+  mouseup: [event: Event];
+}>();
+
+const svg = computed(() => {
+  return icons[props.icon as string];
+});
+
+const materialSymbolsName = computed(() => {
+  if (Object.keys(icons).includes(props.icon as string) && !props.next) {
+    return null;
+  }
+
+  return (OldIconsMap as Record<string, string>)[props.icon as string] || props.icon;
+});
 
-      return OldIconsMap[this.icon] || this.icon;
-    },
-  },
-  mounted() {},
-  methods: {
-    onClick($event) {
-      if (!this.clickable) return;
-      this.$emit('click', $event);
-    },
-  },
+const onClick = (event: Event) => {
+  if (!props.clickable) return;
+  emit('click', event);
 };
 </script>
 
@@ -258,6 +225,7 @@ $icon-sizes:
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
+  font-feature-settings: 'liga';
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 

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

@@ -14,7 +14,7 @@ describe('Switch', () => {
   });
   it('should render the component correctly with default props', () => {
     expect(wrapper.exists()).toBe(true);
-    expect(wrapper.findComponent({ name: 'Icon' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).exists()).toBe(true);
     expect(wrapper.text()).toBe('');
   });
 
@@ -42,11 +42,11 @@ describe('Switch', () => {
 
   it('should render the correct icon when the switch is disabled/enabled', async () => {
     await wrapper.setProps({ disabled: true });
-    const disabledIconComponent = wrapper.findComponent({ name: 'Icon' });
+    const disabledIconComponent = wrapper.findComponent({ name: 'UnnnicIcon' });
     expect(disabledIconComponent.props('icon')).toBe('switch-default-disabled');
 
     await wrapper.setProps({ modelValue: true });
-    const enabledIconComponent = wrapper.findComponent({ name: 'Icon' });
+    const enabledIconComponent = wrapper.findComponent({ name: 'UnnnicIcon' });
     expect(enabledIconComponent.props('icon')).toBe('switch-selected-disabled');
   });
 
@@ -54,31 +54,31 @@ describe('Switch', () => {
     expect(wrapper.vm.isActive).toBe(false);
     await wrapper.setProps({ modelValue: true });
     expect(wrapper.vm.isActive).toBe(true);
-    expect(wrapper.findComponent({ name: 'Icon' }).props('icon')).toBe(
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('icon')).toBe(
       'switch-default',
     );
   });
 
   it('should render the correct icon size based on the size prop', async () => {
     await wrapper.setProps({ size: 'small' });
-    expect(wrapper.findComponent({ name: 'Icon' }).props('size')).toBe('sm');
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('size')).toBe('sm');
 
     await wrapper.setProps({ size: 'medium' });
-    expect(wrapper.findComponent({ name: 'Icon' }).props('size')).toBe('md');
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('size')).toBe('md');
   });
 
   it('should change the icon color based on the state', async () => {
-    expect(wrapper.findComponent({ name: 'Icon' }).props('scheme')).toBe(
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('scheme')).toBe(
       'neutral-soft',
     );
 
     await wrapper.setProps({ modelValue: true });
-    expect(wrapper.findComponent({ name: 'Icon' }).props('scheme')).toBe(
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('scheme')).toBe(
       'brand-weni',
     );
 
     await wrapper.setProps({ disabled: true });
-    expect(wrapper.findComponent({ name: 'Icon' }).props('scheme')).toBe(
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('scheme')).toBe(
       'neutral-soft',
     );
   });

package/src/components/TableNext/__test__/__snapshots__/TableNext.spec.js.snap

@@ -42,20 +42,20 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
     <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 1 of 1</p>
     <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center">
+        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
           <path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path>
-        </svg><span data-v-ceff2a60="" class="unnnic-button__label" data-testid="button-label"> </span>
+        </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
         <!--v-if-->
         <!--v-if-->
-        <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" data-testid="button-label"> 1</span>
+        <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> 1</span>
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center">
+        <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
           <path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path>
-        </svg><span data-v-ceff2a60="" class="unnnic-button__label" data-testid="button-label"> </span>
+        </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button></div>
   </section>

package/src/components/TableNext/__test__/__snapshots__/TablePagination.spec.js.snap

@@ -5,40 +5,40 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
   <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 10 of 100</p>
   <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center">
+      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean" data-testid="icon-center" style="visibility: visible;">
         <path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path>
-      </svg><span data-v-ceff2a60="" class="unnnic-button__label" data-testid="button-label"> </span>
+      </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
       <!--v-if-->
       <!--v-if-->
-      <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" data-testid="button-label"> 1</span>
+      <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> 1</span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary">
       <!--v-if-->
       <!--v-if-->
-      <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" data-testid="button-label"> 2</span>
+      <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> 2</span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary">
       <!--v-if-->
       <!--v-if-->
-      <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" data-testid="button-label"> 3</span>
+      <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> 3</span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary">
       <!--v-if-->
       <!--v-if-->
-      <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" data-testid="button-label"> ...</span>
+      <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> ...</span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary">
       <!--v-if-->
       <!--v-if-->
-      <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" data-testid="button-label"> 10</span>
+      <!--v-if--><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> 10</span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-dark" data-testid="icon-center">
+      <!--v-if--><svg data-v-26446d8e="" data-v-ceff2a60="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-dark" data-testid="icon-center" style="visibility: visible;">
         <path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path>
-      </svg><span data-v-ceff2a60="" class="unnnic-button__label" data-testid="button-label"> </span>
+      </svg><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button></div>
 </section>"

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

@@ -23,50 +23,64 @@ const handlerIconMouseDownUpTest = async (wrapper) => {
 };
 
 const commonTests = async (wrapper) => {
-  it('should emit click event when the icon is clicked if clickable prop its true', () => {
-    handlerIconClickTest(wrapper);
+  it('should emit click event when the icon is clicked if clickable prop its true', async () => {
+    await handlerIconClickTest(wrapper);
   });
 
-  it('should emit mousedown/mouseup when doing the action with the mouse', () => {
-    handlerIconMouseDownUpTest(wrapper);
+  it('should emit mousedown/mouseup when doing the action with the mouse', async () => {
+    await handlerIconMouseDownUpTest(wrapper);
   });
 };
 
 describe('Icon', () => {
-  it('should log warning because invalid props', () => {
-    const warningSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
-    createWrapper({ lineHeight: 'invalid' });
-
-    expect(warningSpy).toHaveBeenCalled();
+  it('should accept valid lineHeight props', () => {
+    const validValues = ['sm', 'md', 'lg', null];
+    
+    validValues.forEach(value => {
+      const wrapper = createWrapper({ lineHeight: value });
+      expect(wrapper.exists()).toBe(true);
+    });
   });
-  describe('OldMapIcon', () => {
-    let wrapper = createWrapper({ icon: 'search-1' });
 
-    commonTests(wrapper);
+  describe('OldMapIcon', () => {
+    let wrapper;
 
     beforeEach(() => {
       wrapper = createWrapper({ icon: 'search-1' });
     });
 
-    it('should render the icon from OldIconsMap', async () => {
+    it('should render the icon from OldIconsMap', () => {
       const hasOldIcon = wrapper.find('[data-testid="old-map-icons"]');
       expect(hasOldIcon.exists()).toBe(true);
     });
+
+    it('should emit click event when the icon is clicked if clickable prop its true', async () => {
+      await handlerIconClickTest(wrapper);
+    });
+
+    it('should emit mousedown/mouseup when doing the action with the mouse', async () => {
+      await handlerIconMouseDownUpTest(wrapper);
+    });
   });
 
   describe('Material Icons', () => {
-    let wrapper = createWrapper({ icon: 'done_all' });
-
-    commonTests(wrapper);
+    let wrapper;
 
     beforeEach(() => {
       wrapper = createWrapper({ icon: 'done_all' });
     });
 
-    it('should render the icon from Material Icons', async () => {
+    it('should render the icon from Material Icons', () => {
       const hasOldIcon = wrapper.find('[data-testid="material-icon"]');
       expect(hasOldIcon.exists()).toBe(true);
     });
+
+    it('should emit click event when the icon is clicked if clickable prop its true', async () => {
+      await handlerIconClickTest(wrapper);
+    });
+
+    it('should emit mousedown/mouseup when doing the action with the mouse', async () => {
+      await handlerIconMouseDownUpTest(wrapper);
+    });
   });
 });

package/src/components/index.ts

@@ -282,3 +282,96 @@ export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
 export const unnnicDataTable = DataTable as VueComponent;
 export const unnnicSelectTime = SelectTime as VueComponent;
+
+export const UnnnicFontSize = fontSize;
+export const UnnnicFormElement = formElement;
+export const UnnnicInput = input;
+export const UnnnicInputNext = inputNext;
+export const UnnnicInputDatePicker = inputDatePicker;
+export const UnnnicButton = button;
+export const UnnnicButtonIcon = buttonIcon;
+export const UnnnicSidebar = sidebar;
+export const UnnnicSidebarItem = sidebarItem;
+export const UnnnicTable = table;
+export const UnnnicTableRow = tableRow;
+export const UnnnicDropdown = dropdown as VueComponent;
+export const UnnnicDropdownItem = dropdownItem;
+export const UnnnicAvatarIcon = avatarIcon;
+export const UnnnicIcon = icon;
+export const UnnnicIconSvg = icon;
+export const UnnnicIconLoading = iconLoading;
+export const UnnnicToolTip = toolTip;
+export const UnnnicCard = card;
+export const UnnnicSimpleCard = cardSimple;
+export const UnnnicCardCompany = cardCompany;
+export const UnnnicCardData = cardData;
+export const UnnnicCardImage = cardImage as VueComponent;
+// export const UnnnicCardFlow = cardFlow;
+export const UnnnicCardProject = cardProject as VueComponent;
+export const UnnnicCardInformation = cardInformation;
+export const UnnnicCheckbox = checkbox;
+export const UnnnicCollapse = collapse;
+export const UnnnicRadio = radio;
+export const UnnniclanguageSelect = languageSelect as VueComponent;
+export const UnnnicModal = modal;
+export const UnnnicModalDialog = ModalDialog;
+export const UnnnicModalNext = ModalNext;
+export const UnnnicModalUpload = modalUpload;
+export const UnnnicSelectSmart = selectSmart as VueComponent;
+// export const UnnnicSelect = select;
+export const UnnnicSelectItem = selectItem;
+// export const UnnnicSelectListItem = selectListItem;
+export const UnnnicMultiSelect = multiSelect as VueComponent;
+export const UnnnicAlert = alert;
+export const UnnnicCallAlert = (props: any) => callAlert(props);
+export const UnnnicCallModal = (props: any) => callModal(props);
+// export const UnnnicAutocomplete = autocomplete;
+// export const UnnnicAutocompleteSelect = autocompleteSelect;
+export const UnnnicTag = tag;
+export const UnnnicAccordion = accordion;
+export const UnnnicIndicator = indicator;
+export const UnnnicSkeletonLoading = skeletonLoading;
+export const UnnnicCarousel = carousel;
+export const UnnnicLabel = label;
+export const UnnnicTab = tab;
+export const UnnnicTabsExpanded = tabsExpanded;
+export const UnnnicBanner = banner;
+export const UnnnicComment = comment;
+export const UnnnicDatePicker = datePicker;
+export const UnnnicBreadcrumb = breadcrumb;
+export const UnnnicSwitch = Switch;
+export const UnnnicSlider = Slider;
+export const UnnnicDataArea = DataArea;
+export const UnnnicPagination = Pagination;
+export const UnnnicDropArea = DropArea;
+export const UnnnicUploadArea = UploadArea;
+export const UnnnicImportCard = ImportCard;
+export const UnnnicDateFilter = DateFilter;
+export const UnnnicChatText = ChatText;
+export const UnnnicTextArea = TextArea;
+export const UnnnicCardNumber = CardNumber;
+export const UnnnicChartRainbow = chartRainbow;
+export const UnnnicChartBar = chartBar;
+export const UnnnicChartLine = chartLine;
+export const UnnnicMoodRating = moodRating;
+export const UnnnicStarRating = starRating;
+export const UnnnicAudioRecorder = audioRecorder;
+export const UnnnicCircleProgressBar = circleProgressBar;
+export const UnnnicProgressBar = progressBar;
+export const UnnnicChatsContact = ChatsContact;
+export const UnnnicChatsDashboardTagLive = ChatsDashboardTagLive;
+export const UnnnicChatsHeader = ChatsHeader as VueComponent;
+export const UnnnicChatsMessage = ChatsMessage;
+export const UnnnicReplyMessage = ReplyMessage;
+export const UnnnicChatsNavbar = ChatsNavbar;
+export const UnnnicChatsUserAvatar = ChatsUserAvatar;
+export const UnnnicChartMultiLine = ChartMultiLine;
+export const UnnnicEmojiPicker = EmojiPicker;
+export const UnnnicChartFunnel = ChartFunnel as VueComponent;
+export const UnnnicDisclaimer = Disclaimer;
+export const UnnnicDrawer = Drawer;
+export const UnnnicTableNext = TableNext;
+export const UnnnicTour = Tour;
+export const UnnnicNavigator = Navigator;
+export const UnnnicDataTable = DataTable as VueComponent;
+export const UnnnicSelectTime = SelectTime as VueComponent;

package/src/stories/ChatsMessage.stories.js

@@ -103,6 +103,13 @@ export default {
 
 export const Default = { args: {} };
 
+
+export const Automatic = {
+  args: {
+    automatic: true,
+  },
+};
+
 export const Sending = {
   args: {
     status: 'sending',