@weni/unnnic-system 3.1.3 → 3.1.4

package/package.json

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

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/locales/en.json

@@ -24,6 +24,7 @@
     }
   },
   "emoji_picker": {
+    "title": "Pick your emoji...",
     "search": "Search",
     "notfound": "No Emoji Found",
     "categories": {

package/src/locales/es.json

@@ -24,6 +24,7 @@
     }
   },
   "emoji_picker": {
+    "title": "Elige tu emoji...",
     "search": "Buscar",
     "notfound": "No se encontró ningún emoji",
     "categories": {

package/src/locales/pt_br.json

@@ -24,6 +24,7 @@
     }
   },
   "emoji_picker": {
+    "title": "Escolha seu emoji...",
     "search": "Buscar",
     "notfound": "Nenhum emoji encontrado",
     "categories": {