feat: add status property to chat message component and updated examp…

…les (#1868)
momentum-design · Jan 28, 2025 · 6d50f06 · 6d50f06
1 parent a6cc562
commit 6d50f06
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/web-components/src/[sandbox]/examples/chat-message.ts b/web-components/src/[sandbox]/examples/chat-message.ts
@@ -6,16 +6,17 @@ import "@/components/icon/Icon";
 import "@/components/alert-banner/AlertBanner";
 
 export const chatMessageTemplate = html`
-  <md-chat-message title="John Doe" time="11:27AM">
+  <md-chat-message title="John Doe" time="11:27AM" status="Sent">
     <p slot="message">I have issue with my silencer</p>
   </md-chat-message>
-  <md-chat-message self time="11:27AM">
+  <md-chat-message self time="11:27AM" status="Failed">
     <p slot="message">Sure. I will help with that.</p>
   </md-chat-message>
   <md-chat-message
     title="Barbara"
     time="11:27AM"
     src="https://static.skillshare.com/uploads/users/7330753/user-image-large.png"
+    status=""
   >
     <p slot="message">
       <md-alert message="Who's awesome? You are!" show closable>
@@ -25,7 +26,7 @@ export const chatMessageTemplate = html`
       </md-alert>
     </p>
   </md-chat-message>
-  <md-chat-message self time="11:27AM">
+  <md-chat-message self time="11:27AM" status="Delivered">
     <p slot="message">
       <img src="https://static.skillshare.com/uploads/users/7330753/user-image-large.png" alt="" />
     </p>

diff --git a/web-components/src/components/chat-message/ChatMessage.stories.ts b/web-components/src/components/chat-message/ChatMessage.stories.ts
@@ -7,6 +7,7 @@
  */
 
 import "@/components/chat-message/ChatMessage";
+import { statusType } from "@/components/chat-message/ChatMessage";
 import { Args, StoryObj } from "@storybook/web-components";
 import { html } from "lit-html";
 
@@ -16,7 +17,8 @@ export default {
   argTypes: {
     title: { control: "text" },
     message: { control: "text" },
-    selfMode: { control: "boolean" }
+    selfMode: { control: "boolean" },
+    status: { control: { type: "select" }, options: statusType }
   },
   parameters: {
     a11y: {
@@ -29,11 +31,12 @@ export const ChatMessage: StoryObj = {
   args: {
     title: "John Doe",
     message: "I have issue with my silencer",
-    selfMode: false
+    selfMode: false,
+    status: "Sent"
   },
   render: (args: Args) => {
     return html`
-      <md-chat-message .self=${args.selfMode} title=${args.title} time="11:27AM">
+      <md-chat-message .self=${args.selfMode} title=${args.title} time="11:27AM" status=${args.status}>
         <p slot="message">${args.message}</p>
       </md-chat-message>
     `;

diff --git a/web-components/src/components/chat-message/ChatMessage.ts b/web-components/src/components/chat-message/ChatMessage.ts
@@ -5,6 +5,8 @@ import styles from "./scss/module.scss";
 import "@/components/avatar/Avatar";
 import { ifDefined } from "lit-html/directives/if-defined";
 
+export const statusType = ["Delivered", "Failed", "Read", "Seen", "Sent", ""] as const;
+
 export namespace ChatMessage {
   @customElementWithCheck("md-chat-message")
   export class ELEMENT extends LitElement {
@@ -13,6 +15,7 @@ export namespace ChatMessage {
     @property({ type: String }) time = "";
     @property({ type: String }) label = "Avatar";
     @property({ type: Boolean }) self = false;
+    @property({ type: String }) status: (typeof statusType)[number] = "";
 
     static get styles() {
       return [reset, styles];
@@ -34,6 +37,7 @@ export namespace ChatMessage {
                 <span>${this.self ? "You" : this.title}</span>
               </div>
               <div class="md-chat-message_time">${this.time}</div>
+              <div class="md-chat-message_status">${this.status}</div>
             </div>
             <div class="md-chat-message_text">
               <slot name="message"></slot>

diff --git a/web-components/src/components/chat-message/scss/chat-message.scss b/web-components/src/components/chat-message/scss/chat-message.scss
@@ -29,7 +29,7 @@
     &_title {
       @include flex();
       flex: 0 1 auto;
-      
+
       span {
         @include text-dots;
         display: block;
@@ -39,11 +39,15 @@
     &_time {
       margin-left: calc(#{$chat-message-indent} * 1.5);
     }
+
+    &_status {
+      margin-left: calc(#{$chat-message-indent} * 1.5);
+    }
   }
 }
 
 @media (forced-colors: active) {
-  .md-alert__icon{
+  .md-alert__icon {
     background-color: Canvas;
   }
-}
+}