@weni/unnnic-system 2.6.1-alpha.2 → 2.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.6.1-alpha.2",
+  "version": "2.6.2",
   "type": "commonjs",
   "files": [
     "dist",
@@ -82,4 +82,4 @@
     "vitest": "^1.6.0",
     "vue-eslint-parser": "^9.4.2"
   }
-}
+}

package/src/components/Button/Button.vue

@@ -19,7 +19,6 @@
       :style="{ position: 'absolute' }"
       class="rotation"
       :next="next"
-      data-testid="icon-loading"
     />
 
     <UnnnicIcon
@@ -30,7 +29,6 @@
       :class="{ 'unnnic-button__icon-left': hasText }"
       :style="{ visibility: loading ? 'hidden' : null }"
       :next="next"
-      data-testid="icon-left"
     />
 
     <UnnnicIcon
@@ -40,7 +38,6 @@
       :style="{ visibility: loading ? 'hidden' : null }"
       :size="iconSize"
       :next="next"
-      data-testid="icon-center"
     />
 
     <span
@@ -59,7 +56,6 @@
       :class="{ 'unnnic-button__icon-right': hasText }"
       :style="{ visibility: loading ? 'hidden' : null }"
       :next="next"
-      data-testid="icon-loading"
     />
   </button>
 </template>
@@ -68,7 +64,6 @@
 import UnnnicIcon from '../Icon.vue';
 
 export default {
-  name: 'UnnnicButton',
   components: {
     UnnnicIcon,
   },

package/src/components/Icon.vue

@@ -10,7 +10,6 @@
         'material-symbols-rounded--filled': filled,
       },
     ]"
-    data-testid="material-icon"
     @click="onClick"
     @mousedown="$emit('mousedown')"
     @mouseup="$emit('mouseup')"
@@ -28,7 +27,6 @@
       lineHeight ? `unnnic-icon__line-height--${lineHeight}` : '',
       scheme ? `unnnic-icon-scheme--${scheme}` : '',
     ]"
-    data-testid="old-map-icons"
     @click="onClick"
     @mousedown="$emit('mousedown')"
     @mouseup="$emit('mouseup')"

package/src/components/ImportCard/ImportCard.vue

@@ -1,12 +1,5 @@
 <template>
   <div class="unnnic-import-card">
-    <UnnnicIcon
-      class="unnnic-import-card__file-icon"
-      size="md"
-      scheme="weni-600"
-      :icon="fileIcon"
-    />
-
     <div class="unnnic-import-card__data">
       <div
         v-if="isImporting"
@@ -58,13 +51,12 @@
         />
       </UnnnicButton>
 
-      <UnnnicIcon
+      <UnnnicButton
         v-if="canDelete"
         class="unnnic-import-card__buttons__delete"
-        size="sm"
-        scheme="neutral-cloudy"
-        icon="delete"
-        clickable
+        size="small"
+        :iconCenter="`close-1`"
+        type="warning"
         @click="emitDeletion"
       />
     </div>
@@ -73,13 +65,11 @@
 
 <script>
 import UnnnicButton from '../Button/Button.vue';
-import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'ImportCard',
   components: {
     UnnnicButton,
-    UnnnicIcon,
   },
   props: {
     title: {
@@ -115,22 +105,6 @@ export default {
       default: 'upload-bottom-1',
     },
   },
-  computed: {
-    fileIcon() {
-      const extension = this.title.slice(this.title.lastIndexOf('.') + 1);
-
-      return (
-        {
-          pdf: 'picture_as_pdf',
-          txt: 'text_snippet',
-          xls: 'table',
-          xlsx: 'table',
-          doc: 'draft',
-          docx: 'draft',
-        }[extension] || 'draft'
-      );
-    },
-  },
   methods: {
     importFile() {
       this.$refs.file.click();
@@ -159,23 +133,15 @@ export default {
 
 .unnnic-import-card {
   display: flex;
-  column-gap: $unnnic-spacing-xs;
-  align-items: center;
 
   border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-  border-radius: $unnnic-border-radius-sm;
+  border-radius: $unnnic-border-radius-md;
 
-  background-color: $unnnic-color-neutral-white;
-  padding: $unnnic-spacing-xs - $unnnic-border-width-thinner;
-
-  &__file-icon {
-    user-select: none;
-    margin: $unnnic-spacing-xs;
-  }
+  background-color: $unnnic-color-background-snow;
+  padding: $unnnic-squish-md;
 
   &__data {
     align-self: center;
-    overflow: hidden;
 
     flex: 1;
     gap: $unnnic-spacing-stack-nano;
@@ -183,14 +149,10 @@ export default {
     font-family: $unnnic-font-family-secondary;
 
     &__title {
-      color: $unnnic-color-neutral-dark;
+      color: $unnnic-color-neutral-darkest;
       font-size: $unnnic-font-size-body-gt;
       line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-      font-weight: $unnnic-font-weight-regular;
-
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
+      font-weight: $unnnic-font-weight-bold;
     }
 
     &__subtitle {
@@ -219,9 +181,8 @@ export default {
   &__buttons {
     display: flex;
     gap: $unnnic-spacing-inline-xs;
-    align-items: center;
 
-    margin-right: $unnnic-spacing-xs;
+    margin-left: $unnnic-spacing-inline-xs;
 
     align-self: center;
 
@@ -239,10 +200,6 @@ export default {
         }
       }
     }
-
-    &__delete {
-      user-select: none;
-    }
   }
 }
 </style>

package/src/components/UploadArea/UploadArea.vue

@@ -1,17 +1,64 @@
 <template>
   <div>
-    <UnnnicDropArea
-      v-model:currentFiles="currentFiles"
-      :acceptMultiple="acceptMultiple"
-      :supportedFormats="supportedFormats"
-      :maxFileSize="maxFileSize"
-      :shouldReplace="shouldReplace"
-      :maximumUploads="maximumUploads"
-      :subtitle="subtitle"
-      rato="oi"
-      @file-change="$emit('fileChange', $event)"
-    />
+    <div
+      ref="dropzone"
+      :class="{
+        'unnnic-upload-area__dropzone': true,
+        'unnnic-upload-area__dropzone__is-dragover': isDragging,
+        'unnnic-upload-area__dropzone__has-error': hasError,
+      }"
+      @dragenter.stop.prevent="dragenter"
+      @dragover.stop.prevent="dragover"
+      @dragleave.stop.prevent="dragleave"
+      @dragend.stop.prevent="dragend"
+      @drop.stop.prevent="drop"
+      @click="() => $refs.file.click()"
+    >
+      <UnnnicIcon
+        class="unnnic-upload-area__dropzone__icon"
+        icon="upload-bottom-1"
+        :scheme="hasError ? 'feedback-red' : 'brand-weni'"
+        size="xl"
+      />
 
+      <div class="unnnic-upload-area__dropzone__content">
+        <span class="unnnic-upload-area__dropzone__content__title">
+          {{ $t('upload_area.title.text') }}
+          <span
+            :class="`unnnic-upload-area__dropzone__content__title__${
+              hasError ? 'error' : 'search'
+            }`"
+          >
+            {{ $t('upload_area.title.highlight') }}
+          </span>
+        </span>
+        <span
+          :class="[
+            'unnnic-upload-area__dropzone__content__subtitle',
+            {
+              'unnnic-upload-area__dropzone__content__subtitle__error':
+                hasError,
+            },
+          ]"
+          :title="formattedSupportedFormats"
+        >
+          {{
+            subtitle ||
+            `${$t(
+              `upload_area${hasError ? '.invalid' : ''}.subtitle`,
+            )} ${formattedSupportedFormats}`
+          }}
+        </span>
+      </div>
+      <input
+        ref="file"
+        type="file"
+        :accept="supportedFormats"
+        :multiple="acceptMultiple"
+        style="display: none"
+        @input="handleFileChange"
+      />
+    </div>
     <div
       v-if="currentFiles.length > 0"
       class="unnnic-upload-area__cards"
@@ -35,13 +82,15 @@
 </template>
 
 <script>
-import UnnnicDropArea from '../DropArea/DropArea.vue';
+import mime from 'mime';
+
+import UnnnicIcon from '../Icon.vue';
 import UnnnicImportCard from '../ImportCard/ImportCard.vue';
 
 export default {
   name: 'UnnnicUploadArea',
   components: {
-    UnnnicDropArea,
+    UnnnicIcon,
     UnnnicImportCard,
   },
   model: {
@@ -95,26 +144,156 @@ export default {
       default: '',
     },
   },
-
-  emits: ['fileChange'],
-
   data() {
     return {
+      hasError: false,
+      isDragging: false,
+      dragEnterCounter: 0, // to handle dragenter/dragleave on child elements
       currentFiles: this.files,
     };
   },
+  computed: {
+    formattedSupportedFormats() {
+      const formats = this.supportedFormats
+        .split(',')
+        .map((format) => format.toUpperCase());
 
+      return formats.join(', ');
+    },
+  },
   watch: {
     files(newValue) {
       this.currentFiles = newValue;
     },
   },
-
   methods: {
+    dragenter() {
+      this.dragEnterCounter += 1;
+      this.isDragging = true;
+    },
+    dragover() {
+      this.isDragging = true;
+    },
+    dragleave() {
+      this.dragEnterCounter -= 1;
+      if (this.dragEnterCounter === 0) {
+        this.isDragging = false;
+      }
+    },
+    dragend() {
+      this.isDragging = false;
+    },
+    drop(event) {
+      this.isDragging = false;
+
+      const { files } = event.dataTransfer;
+
+      if (this.validateFiles(files)) {
+        this.addFiles(files);
+      }
+    },
+    handleFileChange(event) {
+      const { files } = event.target;
+
+      if (this.validateFiles(files)) {
+        this.addFiles(files);
+      }
+      this.$refs.file.value = '';
+    },
+    validateFiles(files) {
+      if (!this.acceptMultiple && files.length > 1) {
+        this.setErrorState();
+        return false;
+      }
+
+      if (!this.validFormat(files)) {
+        this.setErrorState();
+        return false;
+      }
+
+      if (!this.validSize(files)) {
+        this.setErrorState();
+        return false;
+      }
+
+      return true;
+    },
+    validFormat(files) {
+      if (this.supportedFormats === '*') {
+        return true;
+      }
+
+      const formats = this.supportedFormats
+        .split(',')
+        .map((format) => format.trim());
+
+      const isValid = Array.from(files).find((file) => {
+        const fileName = file.name.toLowerCase();
+        const fileType = file.type.toLowerCase();
+        const fileExtension = `.${fileName.split('.').pop()}`;
+
+        const isValidFileExtension = formats.includes(fileExtension);
+        const isValidFileType = fileType === mime.getType(fileName);
+
+        return isValidFileExtension && isValidFileType;
+      });
+
+      return isValid;
+    },
+
+    validSize(files) {
+      if (!this.maxFileSize) {
+        return true;
+      }
+
+      const isValid = Array.from(files).find((file) => {
+        const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
+
+        return sizeInMB <= this.maxFileSize;
+      });
+
+      return isValid;
+    },
+
+    setErrorState() {
+      this.hasError = true;
+
+      setTimeout(() => {
+        this.hasError = false;
+      }, 5000);
+    },
+
     emitFileChange() {
       this.$emit('fileChange', this.currentFiles);
     },
 
+    addFiles(files) {
+      let totalLength = files.length;
+
+      if (!this.shouldReplace) {
+        totalLength += this.currentFiles.length;
+      }
+
+      if (totalLength > this.maximumUploads) {
+        this.setErrorState();
+        return;
+      }
+
+      const validFiles = Array.from(files).filter((file) => {
+        if (this.validFormat([file]) && this.validSize([file])) {
+          return true;
+        }
+        return false;
+      });
+
+      if (this.shouldReplace) {
+        this.currentFiles = validFiles;
+      } else {
+        this.currentFiles = this.currentFiles.concat(validFiles);
+      }
+      this.emitFileChange();
+    },
+
     modifyFile(index, file) {
       this.currentFiles.splice(index, 1, file);
       this.emitFileChange();
@@ -124,6 +303,15 @@ export default {
       this.currentFiles.splice(index, 1);
       this.emitFileChange();
     },
+
+    checkDragAndDropSupport() {
+      const { dropzone } = this.$refs;
+      return (
+        'FileReader' in window &&
+        ('draggable' in dropzone ||
+          ('ondragstart' in dropzone && 'ondrop' in dropzone))
+      );
+    },
   },
 };
 </script>
@@ -131,7 +319,73 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/scss/unnnic.scss';
 
+@function borderDashed($color) {
+  $colorString: unquote('' + $color);
+  $cleanColor: str-slice($colorString, 2);
+  @return url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23#{$cleanColor}' stroke-width='4' stroke-dasharray='4%2c 12' stroke-dashoffset='9' stroke-linecap='square'/%3e%3c/svg%3e");
+}
+
 .unnnic-upload-area {
+  &__dropzone {
+    border-radius: $unnnic-border-radius-lg;
+    background-color: $unnnic-color-background-carpet;
+    padding: $unnnic-spacing-inset-lg;
+
+    // Dashed border with increased dashes spacing and color neutral clean
+    background-image: borderDashed($unnnic-color-neutral-cleanest);
+
+    &__has-error {
+      background-image: borderDashed($unnnic-color-feedback-red);
+    }
+
+    &__is-dragover {
+      background-color: $unnnic-color-background-sky;
+      background-image: borderDashed($unnnic-color-brand-weni);
+    }
+
+    &__icon {
+      display: block;
+      margin: 0 auto;
+
+      margin-bottom: $unnnic-spacing-stack-sm;
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: $unnnic-spacing-stack-nano;
+
+      text-align: center;
+      font-family: $unnnic-font-family-secondary;
+
+      &__title {
+        color: $unnnic-color-neutral-darkest;
+        font-weight: $unnnic-font-weight-bold;
+        font-size: $unnnic-font-size-body-gt;
+        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+
+        &__search {
+          color: $unnnic-color-brand-weni;
+        }
+
+        &__error {
+          color: $unnnic-color-feedback-red;
+        }
+      }
+
+      &__subtitle {
+        color: $unnnic-color-neutral-cloudy;
+        font-weight: $unnnic-font-weight-regular;
+        font-size: $unnnic-font-size-body-md;
+        line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+
+        &__error {
+          color: $unnnic-color-feedback-red;
+        }
+      }
+    }
+  }
+
   &__cards {
     margin-top: $unnnic-spacing-stack-md;
     display: flex;
@@ -139,4 +393,11 @@ export default {
     gap: $unnnic-spacing-stack-xs;
   }
 }
+
+.unnnic-upload-area__dropzone__dragndrop,
+.unnnic-upload-area__dropzone__uploading,
+.unnnic-upload-area__dropzone__success,
+.unnnic-upload-area__dropzone__error {
+  display: none;
+}
 </style>

package/src/components/index.js

@@ -54,7 +54,6 @@ import Switch from './Switch/Switch.vue';
 import Slider from './Slider/Slider.vue';
 import DataArea from './DataArea/DataArea.vue';
 import Pagination from './Pagination/Pagination.vue';
-import DropArea from './DropArea/DropArea.vue';
 import UploadArea from './UploadArea/UploadArea.vue';
 import ImportCard from './ImportCard/ImportCard.vue';
 import DateFilter from './DateFilter/DateFilter.vue';
@@ -144,7 +143,6 @@ export const components = {
   unnnicSlider: Slider,
   unnnicDataArea: DataArea,
   unnnicPagination: Pagination,
-  unnnicDropArea: DropArea,
   unnnicUploadArea: UploadArea,
   unnnicImportCard: ImportCard,
   unnnicDateFilter: DateFilter,
@@ -233,7 +231,6 @@ 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;

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

@@ -1,94 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { mount } from '@vue/test-utils';
-
-import Button from '../Button.vue';
-
-const createWrapper = (props) => {
-  return mount(Button, { props });
-};
-
-describe('Button', () => {
-  it('should render text and default props', () => {
-    const wrapper = createWrapper({ text: 'Button' });
-    expect(wrapper.text()).contain('Button');
-    expect(wrapper.classes()).toContain('unnnic-button');
-    expect(wrapper.classes()).toContain('unnnic-button--size-large');
-    expect(wrapper.classes()).toContain('unnnic-button--primary');
-  });
-
-  it('should render left icon and text', () => {
-    const wrapper = createWrapper({ iconLeft: 'search-1', text: 'Search' });
-
-    const buttonChildren = wrapper.findComponent({
-      name: 'UnnnicButton',
-    }).element.children;
-
-    expect(
-      buttonChildren[0].classList.contains('unnnic-button__icon-left'),
-    ).toBe(true);
-    expect(buttonChildren[1].classList.contains('unnnic-button__label')).toBe(
-      true,
-    );
-  });
-
-  it('should render right icon', () => {
-    const wrapper = createWrapper({ iconRight: 'search-1', text: 'Search' });
-
-    const buttonChildren = wrapper.findComponent({
-      name: 'UnnnicButton',
-    }).element.children;
-
-    expect(buttonChildren[0].classList.contains('unnnic-button__label')).toBe(
-      true,
-    );
-
-    expect(
-      buttonChildren[1].classList.contains('unnnic-button__icon-right'),
-    ).toBe(true);
-  });
-
-  it('should render button only icon and float variation', async () => {
-    const wrapper = createWrapper({ iconCenter: 'search-1' });
-
-    expect(wrapper.classes()).toContain('unnnic-button--icon-on-center');
-
-    const buttonChildren = wrapper.findComponent({
-      name: 'UnnnicButton',
-    }).element.children;
-
-    expect(buttonChildren[0].classList.contains('unnnic-icon')).toBe(true);
-    expect(wrapper.text()).toBe('');
-
-    await wrapper.setProps({ float: true, size: 'extra-large' });
-
-    expect(wrapper.classes()).toContain('unnnic-button--float');
-  });
-
-  it('should emit click event', async () => {
-    const wrapper = createWrapper({ text: 'Button' });
-    await wrapper.trigger('click');
-
-    expect(wrapper.emitted('click')).toBeTruthy();
-  });
-
-  it('should disable click event', async () => {
-    const wrapper = createWrapper({ text: 'Button', disabled: true });
-    await wrapper.trigger('click');
-    expect(wrapper.emitted('click')).toBe(undefined);
-  });
-
-  it('should show loading variation and disable click', async () => {
-    const wrapper = createWrapper({ loading: true });
-    await wrapper.trigger('click');
-    expect(wrapper.emitted('click')).toBe(undefined);
-
-    const loadingIcon = wrapper.findComponent('[data-testid="icon-loading"]');
-    expect(loadingIcon.exists()).toBe(true);
-  });
-  it('should show errors because invalid props', () => {
-    const invalidSize = () => createWrapper({ size: 'invalid-size' });
-    expect(invalidSize).toThrow(Error);
-    const invalidType = () => createWrapper({ type: 'invalid-type' });
-    expect(invalidType).toThrow(Error);
-  });
-});