@weni/unnnic-system 3.2.5-alpha.1 → 3.2.5

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

@@ -0,0 +1,164 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import Chip from '../Chip.vue';
+
+const createWrapper = (props) => {
+  return mount(Chip, {
+    props,
+    global: {
+      stubs: {
+        UnnnicIcon: true,
+      },
+    },
+  });
+};
+
+describe('Chip', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createWrapper({ text: 'Test Chip', type: 'single' });
+  });
+
+  describe('Basic rendering', () => {
+    it('should render the chip with text', () => {
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.text()).toContain('Test Chip');
+      expect(wrapper.classes()).toContain('chip');
+    });
+
+    it('should render with default unselected state', () => {
+      expect(wrapper.classes()).toContain('chip--border');
+      expect(wrapper.classes()).not.toContain('chip--is-selected');
+    });
+  });
+
+  describe('Selection state', () => {
+    it('should apply selected styling when isSelected is true', async () => {
+      await wrapper.setProps({ isSelected: true });
+      
+      expect(wrapper.classes()).toContain('chip--is-selected');
+      expect(wrapper.classes()).not.toContain('chip--border');
+      
+      const textElement = wrapper.find('.chip__text');
+      expect(textElement.classes()).toContain('chip__text--is-selected');
+    });
+  });
+
+  describe('Count functionality', () => {
+    it('should render count when provided', async () => {
+      await wrapper.setProps({ count: 5 });
+      
+      const countElement = wrapper.find('.chip__count');
+      expect(countElement.exists()).toBe(true);
+      expect(countElement.text()).toBe('5');
+    });
+
+    it('should not render count when not provided or zero', async () => {
+      expect(wrapper.find('.chip__count').exists()).toBe(false);
+      
+      await wrapper.setProps({ count: 0 });
+      expect(wrapper.find('.chip__count').exists()).toBe(false);
+    });
+
+    it('should apply selected styling to count when chip is selected', async () => {
+      await wrapper.setProps({ count: 3, isSelected: true });
+      
+      const countElement = wrapper.find('.chip__count');
+      expect(countElement.classes()).toContain('chip__count--is-selected');
+    });
+  });
+
+  describe('Type functionality', () => {
+    it('should not render icon for single type', () => {
+      const icon = wrapper.findComponent({ name: 'UnnnicIcon' });
+      expect(icon.exists()).toBe(false);
+    });
+
+    it('should render correct icons for multiple type', async () => {
+      await wrapper.setProps({ type: 'multiple', isSelected: false });
+      
+      let icon = wrapper.findComponent({ name: 'UnnnicIcon' });
+      expect(icon.exists()).toBe(true);
+      expect(icon.props('icon')).toBe('add');
+      expect(icon.props('scheme')).toBe('feedback-grey');
+      expect(icon.props('size')).toBe('sm');
+
+      await wrapper.setProps({ isSelected: true });
+      
+      icon = wrapper.findComponent({ name: 'UnnnicIcon' });
+      expect(icon.props('icon')).toBe('close');
+      expect(icon.props('scheme')).toBe('teal-600');
+    });
+  });
+
+  describe('Combined functionality', () => {
+    it('should render all elements correctly when combined', async () => {
+      await wrapper.setProps({ 
+        text: 'Complete Chip',
+        count: 42,
+        type: 'multiple',
+        isSelected: true
+      });
+
+      expect(wrapper.text()).toContain('Complete Chip');
+      expect(wrapper.classes()).toContain('chip--is-selected');
+      
+      const countElement = wrapper.find('.chip__count');
+      expect(countElement.exists()).toBe(true);
+      expect(countElement.text()).toBe('42');
+      expect(countElement.classes()).toContain('chip__count--is-selected');
+      
+      const icon = wrapper.findComponent({ name: 'UnnnicIcon' });
+      expect(icon.exists()).toBe(true);
+      expect(icon.props('icon')).toBe('close');
+    });
+  });
+
+  describe('Click functionality', () => {
+    it('should emit click event when clicked', async () => {
+      await wrapper.setProps({ isClickable: true });
+      
+      await wrapper.trigger('click');
+      
+      expect(wrapper.emitted().click).toBeTruthy();
+      expect(wrapper.emitted().click).toHaveLength(1);
+    });
+
+    it('should apply clickable styling when isClickable is true', async () => {
+      await wrapper.setProps({ isClickable: true });
+      
+      expect(wrapper.classes()).toContain('chip--is-clickable');
+    });
+
+    it('should not apply clickable styling when isClickable is false', () => {
+      expect(wrapper.classes()).not.toContain('chip--is-clickable');
+    });
+
+    it('should emit click event even when not marked as clickable', async () => {
+      await wrapper.trigger('click');
+      
+      expect(wrapper.emitted().click).toBeTruthy();
+      expect(wrapper.emitted().click).toHaveLength(1);
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle negative count', async () => {
+      await wrapper.setProps({ count: -5 });
+      
+      const countElement = wrapper.find('.chip__count');
+      expect(countElement.exists()).toBe(true);
+      expect(countElement.text()).toBe('-5');
+    });
+
+    it('should handle empty text', async () => {
+      await wrapper.setProps({ text: '' });
+      
+      const textElement = wrapper.find('.chip__text');
+      expect(textElement.exists()).toBe(true);
+      expect(textElement.text()).toBe('');
+    });
+  });
+});

package/src/components/Chip/types.ts

@@ -0,0 +1,8 @@
+export interface ChipProps {
+  isSelected?: boolean;
+  text?: string;
+  count?: number;
+  type: 'single' | 'multiple';
+  isClickable?: boolean;
+  onClick?: (event: Event) => void;
+}

package/src/components/Disclaimer/types.ts

@@ -1,4 +1,4 @@
-import type { SchemeColor } from '../Icon/types';
+import type { SchemeColor } from '@/types/scheme-colors';
 
 export interface DisclaimerProps {
   text: string;

package/src/components/DropArea/DropArea.vue

@@ -11,7 +11,7 @@
     @dragleave.stop.prevent="dragleave"
     @dragend.stop.prevent="dragend"
     @drop.stop.prevent="drop"
-    @click="handleDropzoneClick"
+    @click="() => $refs.file.click()"
   >
     <UnnnicIcon
       class="unnnic-upload-area__dropzone__icon"
@@ -64,7 +64,7 @@
 </template>
 
 <script setup>
-import { ref, computed, getCurrentInstance, useTemplateRef } from 'vue';
+import { ref, computed, getCurrentInstance } from 'vue';
 import mime from 'mime';
 
 import UnnnicIcon from '../Icon.vue';
@@ -73,7 +73,6 @@ const isDragging = ref(false);
 const hasError = ref(false);
 const dragEnterCounter = ref(0);
 const file = ref();
-const fileRef = useTemplateRef('file');
 
 const props = defineProps({
   acceptMultiple: {
@@ -112,11 +111,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  }
 });
 
 const emit = defineEmits([
@@ -141,21 +135,15 @@ const formattedSupportedFormats = computed(() => {
 });
 
 function dragenter() {
-  if (props.disabled) return;
-
   dragEnterCounter.value += 1;
   isDragging.value = true;
 }
 
 function dragover() {
-  if (props.disabled) return;
-
   isDragging.value = true;
 }
 
 function dragleave() {
-  if (props.disabled) return;
-
   dragEnterCounter.value -= 1;
   if (dragEnterCounter.value === 0) {
     isDragging.value = false;
@@ -163,14 +151,10 @@ function dragleave() {
 }
 
 function dragend() {
-  if (props.disabled) return;
-
   isDragging.value = false;
 }
 
 function drop(event) {
-  if (props.disabled) return;
-
   isDragging.value = false;
 
   const { files } = event.dataTransfer;
@@ -180,15 +164,7 @@ function drop(event) {
   }
 }
 
-function handleDropzoneClick() {
-  if (props.disabled) return;
-
-  fileRef.value.click();
-}
-
 function handleFileChange(event) {
-  if (props.disabled) return;
-
   const { files } = event.target;
 
   if (validateFiles(files)) {

package/src/components/FormElement/FormElement.vue

@@ -17,28 +17,51 @@
 
     <slot></slot>
 
-    <section class="unnnic-form-element__hints-container">
-      <section class="unnnic-form-element__message-container">
-        <p
-          v-if="message"
-          class="unnnic-form-element__message"
-        >
-          {{ fullySanitize(message) }}
-        </p>
-        <p v-if="!!error.length" class="unnnic-form-element__message error">
-          {{ Array.isArray(error) ? error.join(', ') : error }}
-        </p>
-      </section>
-      <p v-if="!!$slots.rightMessage">
+    <p
+      v-if="shouldShowErrorSection"
+      class="unnnic-form-element__error"
+    >
+      <template v-if="error !== true">
+        <UnnnicIcon
+          size="sm"
+          icon="warning"
+          scheme="aux-red-500"
+        />
+
+        {{ fullySanitize(error) }}
+      </template>
+
+      <span
+        v-if="!!$slots.rightMessage"
+        class="unnnic-form-element__right-message"
+      >
+        <slot name="rightMessage"></slot>
+      </span>
+    </p>
+
+    <p
+      v-if="message || !!$slots.rightMessage"
+      class="unnnic-form-element__message"
+    >
+      {{ fullySanitize(message) }}
+
+      <span
+        v-if="!shouldShowErrorSection && !!$slots.rightMessage"
+        class="unnnic-form-element__right-message"
+      >
         <slot name="rightMessage"></slot>
-      </p>
-    </section>
+      </span>
+    </p>
   </section>
 </template>
 
 <script>
+import UnnnicIcon from '../../components/Icon.vue';
 import { fullySanitize } from '../../utils/sanitize';
 export default {
+  components: {
+    UnnnicIcon,
+  },
 
   props: {
     size: {
@@ -47,18 +70,28 @@ export default {
       validator: (size) => ['md', 'sm'].includes(size),
     },
 
-    label: { type: String, default: '' },
+    label: String,
 
-    fixedLabel: { type: Boolean, default: false },
+    fixedLabel: Boolean,
 
     error: {
       type: [Boolean, String],
       default: false,
     },
 
-    message: { type: String, default: '' },
+    message: String,
+
+    disabled: Boolean,
+  },
 
-    disabled: { type: Boolean, default: false },
+  data() {
+    return {};
+  },
+
+  computed: {
+    shouldShowErrorSection() {
+      return this.error && (this.error !== true || !!this.$slots.rightMessage);
+    },
   },
   methods: {
     fullySanitize,
@@ -69,68 +102,75 @@ export default {
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
-* {
-  margin: $unnnic-space-0;
-  padding: $unnnic-space-0;
-  box-sizing: border-box;
-}
-
 .unnnic-form-element {
   &__label {
-    font: $unnnic-font-body;
+    margin: 0;
+    margin-bottom: $unnnic-spacing-nano;
+
     color: $unnnic-color-neutral-cloudy;
-    margin-bottom: $unnnic-space-1;
-    display: flex;
-    align-items: center;
-    gap: $unnnic-space-2;
+    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;
+
+    $label-bottom-spacing: 3px;
 
     &--fixed {
-      margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 +
-        $unnnic-space-1;
+      margin-top: -$unnnic-font-size-body-gt - $unnnic-line-height-md +
+        $label-bottom-spacing;
     }
 
     &--fixed {
-      margin-bottom: $unnnic-space-0;
+      margin-bottom: 0;
       position: absolute;
-      padding: $unnnic-space-0 $unnnic-space-1;
-      margin-left: $unnnic-space-2;
+      padding: 0 $unnnic-spacing-nano;
+      margin-left: $unnnic-spacing-xs;
 
       &:after {
         content: ' ';
         position: absolute;
-        left: $unnnic-space-0;
-        bottom: $unnnic-space-1 - $unnnic-border-width-thinner;
+        left: 0;
+        bottom: $label-bottom-spacing - $unnnic-border-width-thinner;
         width: 100%;
         height: $unnnic-border-width-thinner;
-        background-color: $unnnic-color-white;
+        background-color: $unnnic-color-neutral-white;
       }
     }
   }
 
+  &__error,
   &__message {
-    &.error {
-      color: $unnnic-color-fg-critical;
-    }
+    margin: 0;
+    margin-top: $unnnic-spacing-stack-nano;
+
+    color: $unnnic-color-neutral-cloudy;
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-md;
+    line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
   }
 
-  &__hints-container {
+  &__message {
     display: flex;
-    justify-content: space-between;
-    margin-top: $unnnic-space-1;
-    font: $unnnic-font-caption-2;
-    color: $unnnic-color-fg-base;
+    column-gap: $unnnic-spacing-nano;
   }
 
-  &__message-container {
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-space-1;
+  &__right-message {
+    margin-left: auto;
   }
 
+  &__error {
+    display: flex;
+    column-gap: $unnnic-spacing-nano;
+    align-items: center;
+
+    color: $unnnic-color-aux-red-500;
+  }
 
   &--disabled .unnnic-form-element__label,
   &--disabled .unnnic-form-element__message {
     user-select: none;
+    color: $unnnic-color-neutral-cleanest;
   }
 }
 </style>

package/src/components/Icon/types.ts

@@ -1,98 +1,7 @@
-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'
-  | 'fg-base'
-  | 'fg-emphasized'
-  | 'fg-muted'
-  | 'fg-critical'
-  | 'fg-success'
-  | 'fg-warning'
-  | 'fg-info'
-  | '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';
+import type { SchemeColor } from "@/types/scheme-colors";
+
+// Re-export SchemeColor for backward compatibility
+export type { SchemeColor };
 
 export type IconSize = 
   | 'nano'