@weni/unnnic-system 3.2.0 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "type": "commonjs",
   "files": [
     "dist",
@@ -100,4 +100,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/assets/scss/fonts.scss

@@ -6,12 +6,12 @@ $unnnic-font-family: Lato;
 $unnnic-font-weight-bold: 700;
 $unnnic-font-weight-medium: 500;
 $unnnic-font-weight-regular: 400;
-$unnnic-font-display-1: Lato 1.5 * 16px /* 24px */ 700 2 * 16px /* 32px */;
-$unnnic-font-display-2: Lato 1.25 * 16px /* 20px */ 700 1.6875 * 16px /* 27px */;
-$unnnic-font-display-3: Lato 1 * 16px /* 16px */ 700 1.375 * 16px /* 22px */;
-$unnnic-font-display-4: Lato 1 * 16px /* 16px */ 400 1.375 * 16px /* 22px */;
-$unnnic-font-body: Lato 0.875 * 16px /* 14px */ 400 1.3125 * 16px /* 21px */;
-$unnnic-font-emphasis: Lato 0.875 * 16px /* 14px */ 500 1.3125 * 16px /* 21px */;
-$unnnic-font-action: Lato 0.875 * 16px /* 14px */ 700 1.3125 * 16px /* 21px */;
-$unnnic-font-caption-1: Lato 0.75 * 16px /* 12px */ 500 1.125 * 16px /* 18px */;
-$unnnic-font-caption-2: Lato 0.75 * 16px /* 12px */ 400 1.125 * 16px /* 18px */;
+$unnnic-font-display-1: 700 calc(1.5 * 16px) /* 24px */ / calc(2 * 16px) /* 32px */ Lato;
+$unnnic-font-display-2: 700 calc(1.25 * 16px) /* 20px */ / calc(1.6875 * 16px) /* 27px */ Lato;
+$unnnic-font-display-3: 700 calc(1 * 16px) /* 16px */ / calc(1.375 * 16px) /* 22px */ Lato;
+$unnnic-font-display-4: 400 calc(1 * 16px) /* 16px */ / calc(1.375 * 16px) /* 22px */ Lato;
+$unnnic-font-body: 400 calc(0.875 * 16px) /* 14px */ / calc(1.3125 * 16px) /* 21px */ Lato;
+$unnnic-font-emphasis: 500 calc(0.875 * 16px) /* 14px */ / calc(1.3125 * 16px) /* 21px */ Lato;
+$unnnic-font-action: 700 calc(0.875 * 16px) /* 14px */ / calc(1.3125 * 16px) /* 21px */ Lato;
+$unnnic-font-caption-1: 500 calc(0.75 * 16px) /* 12px */ / calc(1.125 * 16px) /* 18px */ Lato;
+$unnnic-font-caption-2: 400 calc(0.75 * 16px) /* 12px */ / calc(1.125 * 16px) /* 18px */ Lato;

package/src/assets/tokens/fonts.json

@@ -19,33 +19,33 @@
     },
     "display": {
       "1": {
-        "value": "{font.family} 1.5 * {font.size} /* 24px */ {font.weight.bold} 2 * {font.size} /* 32px */"
+        "value": "{font.weight.bold} calc(1.5 * {font.size}) /* 24px */ / calc(2 * {font.size}) /* 32px */ {font.family}"
       },
       "2": {
-        "value": "{font.family} 1.25 * {font.size} /* 20px */ {font.weight.bold} 1.6875 * {font.size} /* 27px */"
+        "value": "{font.weight.bold} calc(1.25 * {font.size}) /* 20px */ / calc(1.6875 * {font.size}) /* 27px */ {font.family}"
       },
       "3": {
-        "value": "{font.family} 1 * {font.size} /* 16px */ {font.weight.bold} 1.375 * {font.size} /* 22px */"
+        "value": "{font.weight.bold} calc(1 * {font.size}) /* 16px */ / calc(1.375 * {font.size}) /* 22px */ {font.family}"
       },
       "4": {
-        "value": "{font.family} 1 * {font.size} /* 16px */ {font.weight.regular} 1.375 * {font.size} /* 22px */"
+        "value": "{font.weight.regular} calc(1 * {font.size}) /* 16px */ / calc(1.375 * {font.size}) /* 22px */ {font.family}"
       }
     },
     "body": {
-      "value": "{font.family} 0.875 * {font.size} /* 14px */ {font.weight.regular} 1.3125 * {font.size} /* 21px */"
+      "value": "{font.weight.regular} calc(0.875 * {font.size}) /* 14px */ / calc(1.3125 * {font.size}) /* 21px */ {font.family}"
     },
     "emphasis": {
-      "value": "{font.family} 0.875 * {font.size} /* 14px */ {font.weight.medium} 1.3125 * {font.size} /* 21px */"
+      "value": "{font.weight.medium} calc(0.875 * {font.size}) /* 14px */ / calc(1.3125 * {font.size}) /* 21px */ {font.family}"
     },
     "action": {
-      "value": "{font.family} 0.875 * {font.size} /* 14px */ {font.weight.bold} 1.3125 * {font.size} /* 21px */"
+      "value": "{font.weight.bold} calc(0.875 * {font.size}) /* 14px */ / calc(1.3125 * {font.size}) /* 21px */ {font.family}"
     },
     "caption": {
       "1": {
-        "value": "{font.family} 0.75 * {font.size} /* 12px */ {font.weight.medium} 1.125 * {font.size} /* 18px */"
+        "value": "{font.weight.medium} calc(0.75 * {font.size}) /* 12px */ / calc(1.125 * {font.size}) /* 18px */ {font.family}"
       },
       "2": {
-        "value": "{font.family} 0.75 * {font.size} /* 12px */ {font.weight.regular} 1.125 * {font.size} /* 18px */"
+        "value": "{font.weight.regular} calc(0.75 * {font.size}) /* 12px */ / calc(1.125 * {font.size}) /* 18px */ {font.family}"
       }
     }
   }

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/stories/ChatsMessage.stories.js

@@ -103,6 +103,13 @@ export default {
 
 export const Default = { args: {} };
 
+
+export const Automatic = {
+  args: {
+    automatic: true,
+  },
+};
+
 export const Sending = {
   args: {
     status: 'sending',