@weni/unnnic-system 2.30.1 → 2.31.0

package/package.json

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

package/src/components/ChatsContact/ChatsContact.vue

@@ -36,13 +36,22 @@
     />
 
     <div class="chats-contact__infos">
-      <h1
-        class="chats-contact__infos__title ellipsis"
-        :title="title"
-        :class="{ bold: unreadMessages }"
-      >
-        {{ title }}
-      </h1>
+      <section class="chats-contact__infos__title-container">
+        <h1
+          class="chats-contact__infos__title ellipsis"
+          :title="title"
+          :class="{ bold: unreadMessages }"
+        >
+          {{ title }}
+        </h1>
+
+        <UnnnicTag
+          v-if="projectName"
+          class="chats-contact__infos__project-tag"
+          :text="projectName"
+          scheme="neutral-white"
+        />
+      </section>
       <div
         class="chats-contact__infos__additional-information"
         :class="{ bold: unreadMessages || (checkboxWhenSelect && selected) }"
@@ -77,7 +86,6 @@
         </p>
       </div>
     </div>
-
     <section
       v-if="!checkboxWhenSelect"
       class="chats-contact__infos__unread-messages-container"
@@ -100,7 +108,6 @@
         {{ unreadMessages }}
       </p>
     </section>
-
     <Checkbox
       v-else-if="selected && checkboxWhenSelect"
       class="chats-contact__infos__checkbox"
@@ -119,6 +126,7 @@ import UnnnicIcon from '../Icon.vue';
 import TransitionRipple from '../TransitionRipple/TransitionRipple.vue';
 import UnnnicI18n from '../../mixins/i18n';
 import Checkbox from '../Checkbox/Checkbox.vue';
+import UnnnicTag from '../Tag/Tag.vue';
 
 import('moment/dist/locale/es.js');
 import('moment/dist/locale/pt-br.js');
@@ -133,6 +141,7 @@ export default {
     UnnnicIcon,
     TransitionRipple,
     Checkbox,
+    UnnnicTag,
   },
 
   mixins: [UnnnicI18n],
@@ -148,8 +157,8 @@ export default {
       required: true,
     },
     lastMessage: {
-      type: String || Object,
-      default: '',
+      type: Object,
+      default: () => ({}),
     },
     lastInteractionTime: {
       type: String,
@@ -183,6 +192,10 @@ export default {
       type: String,
       default: '',
     },
+    projectName: {
+      type: String,
+      default: '',
+    },
   },
 
   emits: ['click'],
@@ -414,6 +427,21 @@ export default {
     overflow: hidden;
     gap: $unnnic-spacing-nano;
 
+    &__title-container {
+      display: flex;
+      align-items: center;
+      gap: $unnnic-spacing-xs;
+      justify-content: flex-start;
+      white-space: nowrap;
+      width: 100%;
+    }
+
+    &__project-tag {
+      display: block;
+      flex-shrink: 1;
+      border: 1px solid $unnnic-color-neutral-cleanest;
+    }
+
     &__media {
       display: flex;
       align-items: center;
@@ -479,8 +507,6 @@ export default {
     }
 
     .ellipsis {
-      width: 100%;
-
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

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

@@ -4,7 +4,10 @@ exports[`UnnnicChatsContact > should match snapshot 1`] = `
 "<div data-v-8ce6efd5="" class="chats-contact" tabindex="0" style="position: relative; overflow: hidden;">
   <section data-v-c735998e="" data-v-8ce6efd5="" class="user-avatar user-avatar--xl"><span data-v-c735998e="">C</span></section>
   <div data-v-8ce6efd5="" class="chats-contact__infos">
-    <h1 data-v-8ce6efd5="" class="chats-contact__infos__title ellipsis" title="Contact Name">Contact Name</h1>
+    <section data-v-8ce6efd5="" class="chats-contact__infos__title-container">
+      <h1 data-v-8ce6efd5="" class="chats-contact__infos__title ellipsis" title="Contact Name">Contact Name</h1>
+      <!--v-if-->
+    </section>
     <div data-v-8ce6efd5="" class="chats-contact__infos__additional-information">
       <!--v-if-->
     </div>

package/src/stories/ChatsContact.stories.js

@@ -68,8 +68,9 @@ export default {
 
 const defaultArgs = {
   title: 'John Doe',
-  lastMessage:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel.',
+  lastMessage: {
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel.',
+  },
 };
 const unreadMessages = 5;
 const waitingTime = 10;
@@ -147,6 +148,23 @@ export const ContactList = {
   }),
 };
 
+export const WithProjectInfo = {
+  args: {
+    ...defaultArgs,
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { unnnicChatsContact },
+    template: `
+    <div style="display: grid;">
+      <unnnic-chats-contact v-for="(project, index) in ['Project A', 'Project B', 'Project C']" v-bind="args" :projectName="project" />
+    </div>
+  `,
+  }),
+};
+
 export const MediaLastMessage = {
   args: {
     ...defaultArgs,