@weni/unnnic-system 3.1.4-alpha.2 → 3.1.4-alpha.4

package/src/assets/tokens/radii.json

@@ -0,0 +1,28 @@
+{
+    "radius": {
+        "0": {
+            "value": "0 /* 0px */",
+            "type": "size"
+        },
+        "1": {
+            "value": "0.25 * {font.size} /* 4px */",
+            "type": "size"
+        },
+        "2": {
+            "value": "0.5 * {font.size} /* 8px */",
+            "type": "size"
+        },
+        "3": {
+            "value": "0.75 * {font.size} /* 12px */",
+            "type": "size"
+        },
+        "4": {
+            "value": "1 * {font.size} /* 16px */",
+            "type": "size"
+        },
+        "full": {
+            "value": "100%",
+            "type": "size"
+        }
+    }
+}

package/src/assets/tokens/shadows.json

@@ -0,0 +1,10 @@
+{
+    "shadow": {
+        "1": {
+            "value": "0px 0.25 * {font.size} /* 4px */ {font.size} /* 16px */ 0px rgba(0, 0, 0, 0.16)"
+        },
+        "2": {
+            "value": "0px 1.5 * {font.size} /* 24px */ 3 * {font.size} /* 48px */ 0px rgba(0, 0, 0, 0.16)"
+        }
+    }
+}

package/src/assets/tokens/spaces.json

@@ -0,0 +1,46 @@
+{
+  "space": {
+    "0": {
+      "value": "0 /* 0px */"
+    },
+    "05": {
+      "value": "0.125 * {font.size} /* 2px */"
+    },
+    "1": {
+      "value": "0.25 * {font.size} /* 4px */"
+    },
+    "2": {
+      "value": "0.5 * {font.size} /* 8px */"
+    },
+    "3": {
+      "value": "0.75 * {font.size} /* 12px */"
+    },
+    "4": {
+      "value": "1 * {font.size} /* 16px */"
+    },
+    "5": {
+      "value": "1.25 * {font.size} /* 20px */"
+    },
+    "6": {
+      "value": "1.5 * {font.size} /* 24px */"
+    },
+    "7": {
+      "value": "1.75 * {font.size} /* 28px */"
+    },
+    "8": {
+      "value": "2 * {font.size} /* 32px */"
+    },
+    "10": {
+      "value": "2.5 * {font.size} /* 40px */"
+    },
+    "12": {
+      "value": "3 * {font.size} /* 48px */"
+    },
+    "16": {
+      "value": "4 * {font.size} /* 64px */"
+    },
+    "20": {
+      "value": "5 * {font.size} /* 80px */"
+    }
+  }
+}

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/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"
@@ -26,7 +29,7 @@ import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { get } from 'lodash'
 import i18n from '../../utils/plugins/i18n'
 import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
-import data from 'emoji-mart-vue-fast/data/apple.json'
+import data from 'emoji-mart-vue-fast/data/all.json'
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
 import UnnnicI18n from '../../mixins/i18n'
 
@@ -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'),
@@ -158,7 +163,7 @@ const onEmojiSelect = (emoji: Emoji) => {
   }
 
   :deep(.emoji-type-image.emoji-set-apple) {
-    background-image: url('/apple-64.png') !important;
+    background-image: url('./apple-64.png') !important;
   }
 
   :deep(.emoji-type-image.emoji-set-facebook),

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

@@ -12,7 +12,7 @@ vi.mock('emoji-mart-vue-fast/src', () => ({
   EmojiIndex: vi.fn().mockImplementation(() => ({}))
 }));
 
-vi.mock('emoji-mart-vue-fast/data/apple.json', () => ({
+vi.mock('emoji-mart-vue-fast/data/all.json', () => ({
   default: {}
 }));
 
@@ -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/SkeletonLoading/skeletonTheme.vue

@@ -12,7 +12,7 @@
 
 <script>
 import { ref, provide } from 'vue';
-import colors from '@/assets/scss/colors.scss?inline';
+import colors from '@/assets/scss/deprecated/colors.scss?inline';
 
 // eslint-disable-next-line no-useless-escape
 const backgroundValueRegex = /unnnicColorBackgroundSolo:\s*(.*)\;/;

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": {

package/src/utils/colorTokens.js

@@ -1,2 +1,2 @@
-import colors from '@/assets/scss/colors.scss?inline';
+import colors from '@/assets/scss/deprecated/colors.scss?inline';
 export default colors;

package/src/assets/scss/spacing.scss

@@ -1,141 +0,0 @@
-@use "fonts";
-
-// Icon size
-$unnnic-icon-size-xl: 2.5 * fonts.$unnnic-font-size;
-$unnnic-icon-size-lg: 2 * fonts.$unnnic-font-size;
-$unnnic-icon-size-md: 1.5 * fonts.$unnnic-font-size;
-$unnnic-icon-size-ant: 1.25 * fonts.$unnnic-font-size;
-$unnnic-icon-size-sm: 1 * fonts.$unnnic-font-size;
-$unnnic-icon-size-xs: 0.75 * fonts.$unnnic-font-size;
-
-// New icon size tokens
-$unnnic-icon-size-3: 0.75 * fonts.$unnnic-font-size; // 12px
-$unnnic-icon-size-4: 1 * fonts.$unnnic-font-size; // 16px
-$unnnic-icon-size-5: 1.25 * fonts.$unnnic-font-size; // 20px
-$unnnic-icon-size-6: 1.5 * fonts.$unnnic-font-size; // 24px
-$unnnic-icon-size-7: 2 * fonts.$unnnic-font-size; // 32px
-$unnnic-icon-size-10: 2.5 * fonts.$unnnic-font-size; // 40px
-
-// Avatar size
-$unnnic-avatar-size-lg: 6.5 * fonts.$unnnic-font-size;
-$unnnic-avatar-size-md: 4.5 * fonts.$unnnic-font-size;
-$unnnic-avatar-size-sm: 2.5 * fonts.$unnnic-font-size;
-$unnnic-avatar-size-xs: 2 * fonts.$unnnic-font-size;
-$unnnic-avatar-size-nano: 1.25 * fonts.$unnnic-font-size;
-
-// Border radius
-$unnnic-border-radius-sm: 0.25 * fonts.$unnnic-font-size;
-$unnnic-border-radius-md: 0.5 * fonts.$unnnic-font-size;
-$unnnic-border-radius-lg: 1 * fonts.$unnnic-font-size;
-$unnnic-border-radius-pill: 37.5 * fonts.$unnnic-font-size;
-
-// New border radius tokens
-$unnnic-border-radius-0: 0;
-$unnnic-border-radius-2: 0.25 * fonts.$unnnic-font-size;   // 4px
-$unnnic-border-radius-4: 0.5 * fonts.$unnnic-font-size;    // 8px
-$unnnic-border-radius-6: 0.75 * fonts.$unnnic-font-size;   // 12px
-$unnnic-border-radius-8: 1 * fonts.$unnnic-font-size;      // 16px
-$unnnic-border-radius-full: 100%; // 100% rounded
-
-// Border width
-$unnnic-border-width-thinner: 0.0625 * fonts.$unnnic-font-size;
-$unnnic-border-width-thin: 0.125 * fonts.$unnnic-font-size;
-$unnnic-border-width-thick: 0.25 * fonts.$unnnic-font-size;
-
-// Shadow levels
-$unnnic-shadow-level-near: 0 * fonts.$unnnic-font-size 0.25 * fonts.$unnnic-font-size 8px rgba(0, 0, 0, .12);
-$unnnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
-$unnnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .04);
-$unnnic-shadow-level-distant: 0px 20px 40px rgba(0, 0, 0, .06);
-
-// New shadow levels
-$unnnic-shadow-1: 0px 4px 8px rgba(0, 0, 0, .16);
-$unnnic-shadow-2: 0px 24px 48px rgba(0, 0, 0, .16);
-
-// Opacity levels
-$unnnic-opacity-level-darkest: 0.8;
-$unnnic-opacity-level-dark: 0.64;
-$unnnic-opacity-level-clarifying: 0.48;
-$unnnic-opacity-level-overlay: 0.4;
-$unnnic-opacity-level-clear: 0.32;
-$unnnic-opacity-level-light: 0.16;
-$unnnic-opacity-level-extra-light: 0.08;
-
-// Spacing
-$unnnic-spacing-nano: 0.25 * fonts.$unnnic-font-size;
-$unnnic-spacing-xs: 0.5 * fonts.$unnnic-font-size;
-$unnnic-spacing-ant: 0.75 * fonts.$unnnic-font-size;
-$unnnic-spacing-sm: fonts.$unnnic-font-size;
-$unnnic-spacing-md: 1.5 * fonts.$unnnic-font-size;
-$unnnic-spacing-lg: 2 * fonts.$unnnic-font-size;
-$unnnic-spacing-xl: 2.5 * fonts.$unnnic-font-size;
-$unnnic-spacing-giant: 3 * fonts.$unnnic-font-size;
-$unnnic-spacing-xgiant: 4 * fonts.$unnnic-font-size;
-$unnnic-spacing-awesome: 5 * fonts.$unnnic-font-size;
-
-// New spacing tokens
-$unnnic-space-0: 0;
-$unnnic-space-05: 0.125 * fonts.$unnnic-font-size; // 2px
-$unnnic-space-1: 0.25 * fonts.$unnnic-font-size; // 4px
-$unnnic-space-2: 0.5 * fonts.$unnnic-font-size; // 8px
-$unnnic-space-3: 0.75 * fonts.$unnnic-font-size; // 12px
-$unnnic-space-4: 1 * fonts.$unnnic-font-size; // 16px
-$unnnic-space-5: 1.25 * fonts.$unnnic-font-size; // 20px
-$unnnic-space-6: 1.5 * fonts.$unnnic-font-size; // 24px
-$unnnic-space-7: 1.75 * fonts.$unnnic-font-size; // 28px
-$unnnic-space-8: 2 * fonts.$unnnic-font-size; // 32px
-$unnnic-space-10: 2.5 * fonts.$unnnic-font-size; // 40px
-$unnnic-space-12: 3 * fonts.$unnnic-font-size; // 48px
-$unnnic-space-16: 4 * fonts.$unnnic-font-size; // 64px
-$unnnic-space-20: 5 * fonts.$unnnic-font-size; // 80px
-
-$unnnic-inset-nano: $unnnic-spacing-xs;
-$unnnic-inset-xs: $unnnic-spacing-ant;
-$unnnic-inset-sm: $unnnic-spacing-sm;
-$unnnic-inset-md: $unnnic-spacing-md;
-$unnnic-inset-lg: $unnnic-spacing-lg;
-$unnnic-spacing-inset-nano: $unnnic-inset-nano;
-$unnnic-spacing-inset-xs: $unnnic-inset-xs;
-$unnnic-spacing-inset-sm: $unnnic-inset-sm;
-$unnnic-spacing-inset-md: $unnnic-inset-md;
-$unnnic-spacing-inset-lg: $unnnic-inset-lg;
-
-// Squish
-$unnnic-squish-nano: $unnnic-spacing-xs $unnnic-spacing-sm;
-$unnnic-squish-xs: $unnnic-spacing-ant $unnnic-spacing-sm;
-$unnnic-squish-sm: $unnnic-spacing-ant $unnnic-spacing-md;
-$unnnic-squish-md: $unnnic-spacing-sm $unnnic-spacing-md;
-$unnnic-squish-lg: $unnnic-spacing-md $unnnic-spacing-lg;
-
-// Inline
-$unnnic-inline-nano: $unnnic-spacing-nano;
-$unnnic-inline-xs: $unnnic-spacing-xs;
-$unnnic-inline-ant: $unnnic-spacing-ant;
-$unnnic-inline-sm: $unnnic-spacing-sm;
-$unnnic-inline-md: $unnnic-spacing-md;
-$unnnic-inline-lg: $unnnic-spacing-lg;
-$unnnic-inline-xl: $unnnic-spacing-xl;
-$unnnic-inline-giant: $unnnic-spacing-giant;
-$unnnic-inline-xgiant: $unnnic-spacing-xgiant;
-$unnnic-inline-awesome: $unnnic-spacing-awesome;
-$unnnic-spacing-inline-nano: $unnnic-inline-nano;
-$unnnic-spacing-inline-xs: $unnnic-inline-xs;
-$unnnic-spacing-inline-ant: $unnnic-inline-ant;
-$unnnic-spacing-inline-sm: $unnnic-inline-sm;
-$unnnic-spacing-inline-md: $unnnic-inline-md;
-$unnnic-spacing-inline-lg: $unnnic-inline-lg;
-$unnnic-spacing-inline-xl: $unnnic-inline-xl;
-$unnnic-spacing-inline-giant: $unnnic-inline-giant;
-$unnnic-spacing-inline-xgiant: $unnnic-inline-xgiant;
-$unnnic-spacing-inline-awesome: $unnnic-inline-awesome;
-
-// Stack
-$unnnic-spacing-stack-nano: $unnnic-spacing-nano;
-$unnnic-spacing-stack-xs: $unnnic-spacing-xs;
-$unnnic-spacing-stack-sm: $unnnic-spacing-sm;
-$unnnic-spacing-stack-md: $unnnic-spacing-md;
-$unnnic-spacing-stack-lg: $unnnic-spacing-lg;
-$unnnic-spacing-stack-xl: $unnnic-spacing-xl;
-$unnnic-spacing-stack-giant: $unnnic-spacing-giant;
-$unnnic-spacing-stack-xgiant: $unnnic-spacing-xgiant;
-$unnnic-spacing-stack-awesome: $unnnic-spacing-awesome;