@weni/unnnic-system 3.1.3 → 3.1.4-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.1.3",
+  "version": "3.1.4-alpha.3",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/ChatsMessage/ChatsMessage.vue

@@ -3,6 +3,7 @@
     class="unnnic-chats-message"
     :class="{
       sent: type === 'sent',
+      automatic: automatic,
       sending: status === 'sending',
       'is-document': isDocument,
       'is-media': isMedia,
@@ -45,7 +46,9 @@
       />
       <UnnnicChatsMessageText
         v-if="isText"
+        :locale="locale"
         :text="slotText"
+        :isAutomatic="automatic"
       />
       <div
         v-if="isDocument"
@@ -156,6 +159,10 @@ export default {
   },
   mixins: [UnnnicI18n],
   props: {
+    locale: {
+      type: String,
+      default: 'en',
+    },
     enableReply: {
       type: Boolean,
       default: false,
@@ -171,6 +178,10 @@ export default {
         return ['received', 'sent'].includes(type);
       },
     },
+    automatic: {
+      type: Boolean,
+      default: false,
+    },
     time: {
       type: Date,
       required: true,
@@ -323,6 +334,10 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
 
   &.sent {
     background-color: #cff8f4;
+
+    &.automatic {
+      background-color: $unnnic-color-aux-blue-50;
+    }
   }
 
   &.sending {

package/src/components/ChatsMessage/ChatsMessageText.vue

@@ -1,18 +1,45 @@
 <template>
-  <p
-    class="unnnic-chats-message__text"
-    v-html="formattedText"
-  />
+  <section class="unnnic-chats-message__text__container">
+    <p
+      class="unnnic-chats-message__text"
+      v-html="formattedText"
+    />
+    <p v-if="isAutomatic" class="unnnic-chats-message__text--automatic">
+      {{ i18n('automatic_message') }}
+    </p>
+  </section>
 </template>
 
 <script>
+import UnnnicI18n from '../../mixins/i18n';
+
 export default {
   name: 'ChatsMessageText',
+  mixins: [UnnnicI18n],
   props: {
+    locale: {
+      type: String,
+      default: 'en',
+    },
     text: {
       type: String,
       required: true,
     },
+    isAutomatic: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      defaultTranslations: {
+        automatic_message: {
+          'pt-br': 'Mensagem de abertura automática',
+          en: 'Automatic Opening Message',
+          es: 'Mensaje de apertura automático',
+        },
+      },
+    };
   },
   computed: {
     formattedText() {
@@ -78,3 +105,30 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.unnnic-chats-message__text {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-sm;
+    padding: $unnnic-spacing-nano 0;
+    font-size: $unnnic-font-size-body-gt;
+    color: $unnnic-color-neutral-dark;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+    word-break: break-word;
+  }
+  &--automatic {
+    font-size: $unnnic-font-size-body-md;
+    line-height: $unnnic-line-height-caption-1;
+    color: $unnnic-color-aux-blue-500;
+  }
+}
+</style>

package/src/components/DropArea/DropArea.vue

@@ -11,7 +11,7 @@
     @dragleave.stop.prevent="dragleave"
     @dragend.stop.prevent="dragend"
     @drop.stop.prevent="drop"
-    @click="() => $refs.file.click()"
+    @click="handleDropzoneClick"
   >
     <UnnnicIcon
       class="unnnic-upload-area__dropzone__icon"
@@ -64,7 +64,7 @@
 </template>
 
 <script setup>
-import { ref, computed, getCurrentInstance } from 'vue';
+import { ref, computed, getCurrentInstance, useTemplateRef } from 'vue';
 import mime from 'mime';
 
 import UnnnicIcon from '../Icon.vue';
@@ -73,6 +73,7 @@ const isDragging = ref(false);
 const hasError = ref(false);
 const dragEnterCounter = ref(0);
 const file = ref();
+const fileRef = useTemplateRef('file');
 
 const props = defineProps({
   acceptMultiple: {
@@ -111,6 +112,11 @@ const props = defineProps({
     type: String,
     default: '',
   },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 const emit = defineEmits([
@@ -135,15 +141,21 @@ 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;
@@ -151,10 +163,14 @@ 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;
@@ -164,7 +180,15 @@ 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/EmojiPicker/EmojiPicker.vue

@@ -9,7 +9,10 @@
       :data="emojiIndex"
       set="apple"
       theme="light"
-      :preview="false"
+      emoji="point_up"
+      :title="title"
+      :showPreview="true"
+      showSkinTones
       :search="true"
       nav-position="bottom"
       no-results-emoji="cry"
@@ -71,6 +74,8 @@ const translation = (key: string) => {
   return get(localeMsgs, key) || get(enMsgs, key) || key
 }
 
+const title = computed(() => translation('emoji_picker.title'))
+
 const translations = computed(() => ({
   search: translation('emoji_picker.search'),
   notfound: translation('emoji_picker.notfound'),
@@ -156,6 +161,16 @@ const onEmojiSelect = (emoji: Emoji) => {
   :deep(.emoji-mart-anchor-bar) {
     background-color: #00A49F; // $unnnic-color-weni-600
   }
+
+  :deep(.emoji-type-image.emoji-set-apple) {
+    background-image: url('./apple-64.png') !important;
+  }
+
+  :deep(.emoji-type-image.emoji-set-facebook),
+  :deep(.emoji-type-image.emoji-set-google),
+  :deep(.emoji-type-image.emoji-set-twitter) {
+    background-image: none !important;
+  }
 }
 
 @keyframes slideInUp {

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

@@ -50,7 +50,7 @@ describe('UnnnicEmojiPicker', () => {
         stubs: {
           Picker: {
             name: 'Picker',
-            props: ['data', 'set', 'theme', 'preview', 'search', 'navPosition', 'noResultsEmoji', 'maxFrequentRows', 'i18n', 'color'],
+            props: ['data', 'set', 'theme', 'emoji', 'title', 'showPreview', 'search', 'navPosition', 'noResultsEmoji', 'maxFrequentRows', 'i18n', 'color'],
             emits: ['select', 'click-outside'],
             template: '<div class="emoji-mart-picker" @select="$emit(\'select\', $event)" @click-outside="$emit(\'click-outside\')"></div>'
           }
@@ -69,7 +69,9 @@ describe('UnnnicEmojiPicker', () => {
     expect(picker.exists()).toBe(true);
     expect(picker.props('set')).toBe('apple');
     expect(picker.props('theme')).toBe('light');
-    expect(picker.props('preview')).toBe(false);
+    expect(picker.props('emoji')).toBe('point_up');
+    expect(picker.props('title')).toBe('Escolha seu emoji...');
+    expect(picker.props('showPreview')).toBe(true);
     expect(picker.props('search')).toBe(true);
     expect(picker.props('navPosition')).toBe('bottom');
     expect(picker.props('noResultsEmoji')).toBe('cry');
@@ -94,7 +96,7 @@ describe('UnnnicEmojiPicker', () => {
         stubs: {
           Picker: {
             name: 'Picker',
-            props: ['data', 'set', 'theme', 'preview', 'search', 'navPosition', 'noResultsEmoji', 'maxFrequentRows', 'i18n', 'color'],
+            props: ['data', 'set', 'theme', 'emoji', 'title', 'showPreview', 'search', 'navPosition', 'noResultsEmoji', 'maxFrequentRows', 'i18n', 'color'],
             emits: ['select', 'click-outside'],
             template: '<div class="emoji-mart-picker" @select="$emit(\'select\', $event)"></div>'
           }
@@ -131,7 +133,7 @@ describe('UnnnicEmojiPicker', () => {
   it('renders bottom position class when position is bottom', async () => {
     const custom = mount(UnnnicEmojiPicker, {
       props: { position: 'bottom' },
-      global: { stubs: { Picker: { name: 'Picker', props: ['data','set','theme','preview','search','navPosition','noResultsEmoji','maxFrequentRows','i18n','color'], template: '<div />' } } }
+      global: { stubs: { Picker: { name: 'Picker', props: ['data','set','theme','emoji','title','showPreview','search','navPosition','noResultsEmoji','maxFrequentRows','i18n','color'], template: '<div />' } } }
     });
     expect(custom.classes()).toContain('emoji-picker--bottom');
     custom.unmount();

package/src/components/ModalDialog/ModalDialog.vue

@@ -24,10 +24,7 @@
       </section>
 
       <section class="unnnic-modal-dialog__container__body">
-        <header
-          v-if="title"
-          class="unnnic-modal-dialog__container__header"
-        >
+        <header v-if="title" class="unnnic-modal-dialog__container__header">
           <section class="unnnic-modal-dialog__container__title-container">
             <UnnnicIcon
               v-if="icon || type"
@@ -49,6 +46,7 @@
             data-testid="close-icon"
             icon="close"
             clickable
+            scheme="neutral-cloudy"
             @click="close()"
           />
         </header>
@@ -98,12 +96,12 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon.vue';
-import UnnnicButton from '../Button/Button.vue';
-import UnnnicI18n from '../../mixins/i18n';
+import UnnnicIcon from "../Icon.vue";
+import UnnnicButton from "../Button/Button.vue";
+import UnnnicI18n from "../../mixins/i18n";
 
 export default {
-  name: 'UnnnicModalDialog',
+  name: "UnnnicModalDialog",
   components: {
     UnnnicIcon,
     UnnnicButton,
@@ -120,29 +118,29 @@ export default {
     },
     type: {
       type: String,
-      default: '',
+      default: "",
       validate(type) {
-        return ['success', 'warning', 'attention'].includes(type);
+        return ["success", "warning", "attention"].includes(type);
       },
     },
     size: {
       type: String,
-      default: 'md',
+      default: "md",
       validate(size) {
-        return ['sm', 'md', 'lg'].includes(size);
+        return ["sm", "md", "lg"].includes(size);
       },
     },
     title: {
       type: String,
-      default: '',
+      default: "",
     },
     icon: {
       type: String,
-      default: '',
+      default: "",
     },
     iconScheme: {
       type: String,
-      default: '',
+      default: "",
     },
     showCloseIcon: {
       type: Boolean,
@@ -165,26 +163,26 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['primaryButtonClick', 'secondaryButtonClick', 'update:modelValue'],
+  emits: ["primaryButtonClick", "secondaryButtonClick", "update:modelValue"],
 
   data() {
     return {
       defaultTranslations: {
         cancel: {
-          'pt-br': 'Cancelar',
-          en: 'Cancel',
-          es: 'Cancelar',
+          "pt-br": "Cancelar",
+          en: "Cancel",
+          es: "Cancelar",
         },
       },
       iconsMapper: {
-        success: { icon: 'check_circle', scheme: 'aux-green-500' },
-        warning: { icon: 'warning', scheme: 'aux-red-500' },
-        attention: { icon: 'error', scheme: 'aux-yellow-500' },
+        success: { icon: "check_circle", scheme: "aux-green-500" },
+        warning: { icon: "warning", scheme: "aux-red-500" },
+        attention: { icon: "error", scheme: "aux-yellow-500" },
       },
       primaryButtonTypeMapper: {
-        success: 'primary',
-        warning: 'warning',
-        attention: 'attention',
+        success: "primary",
+        warning: "warning",
+        attention: "attention",
       },
     };
   },
@@ -195,17 +193,17 @@ export default {
   },
   methods: {
     close() {
-      this.$emit('update:modelValue', false);
+      this.$emit("update:modelValue", false);
     },
     updateBodyOverflow(isHidden) {
-      document.body.style.overflow = isHidden ? 'hidden' : '';
+      document.body.style.overflow = isHidden ? "hidden" : "";
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
+@use "@/assets/scss/unnnic" as *;
 * {
   margin: 0;
   padding: 0;
@@ -312,7 +310,7 @@ export default {
   &__actions {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-areas: 'secondary-button primary-button';
+    grid-template-areas: "secondary-button primary-button";
     gap: $unnnic-spacing-sm;
     padding: $unnnic-spacing-md;
     flex-shrink: 0;

package/src/components/ModalDialog/__tests__/__snapshots__/ModalDialog.spec.js.snap

@@ -11,7 +11,7 @@ exports[`ModalDialog.vue > Elements rendering > matches the snapshot 1`] = `
           <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="test-icon" clickable="false" size="md" scheme="neutral-darkest" data-testid="title-icon" class="unnnic-modal-dialog__container__title-icon"></unnnic-icon-stub>
           <h1 data-v-68ebadeb="" class="unnnic-modal-dialog__container__title-text" data-testid="title-text">Test Title</h1>
         </section>
-        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-darkest" data-testid="close-icon"></unnnic-icon-stub>
+        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-cloudy" data-testid="close-icon"></unnnic-icon-stub>
       </header>
       <section data-v-68ebadeb="" class="unnnic-modal-dialog__container__content"></section>
       <section data-v-68ebadeb="" data-testid="actions-section" class="unnnic-modal-dialog__container__actions">