fix: comments issues

src/common/styles/global.css

@@ -1,4 +1,4 @@
-@import url('https://unpkg.com/@superviz/sv-icons@0.8.12/css/style.css');
+@import url('https://unpkg.com/@superviz/sv-icons@0.8.13/css/style.css');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
 
 :root {

src/web-components/comments/comments.test.ts

@@ -63,11 +63,6 @@ describe('comments', () => {
     expect(app?.classList.contains('superviz-comments')).toBe(true);
   });
 
-  // FIXME: Need refactor should listen event toggle
-  test('should toggle superviz comments', async () => {
-    // ! WIP !
-  });
-
   test('should update annotations', async () => {
     const annotations = [{ id: '1', x: 0, y: 0, width: 0, height: 0, text: 'test' }];
 

src/web-components/comments/components/annotation-item.ts

@@ -131,7 +131,7 @@ export class CommentsAnnotationItem extends WebComponentsBaseElement {
     }
   }
 
-  private selectAnnotation = () => {
+  private selectAnnotation = (event: PointerEvent): void => {
     const { uuid } = this.annotation;
     document.body.dispatchEvent(new CustomEvent('select-annotation', { detail: { uuid } }));
   };

src/web-components/comments/components/comment-input.ts

@@ -393,7 +393,7 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
       </button>
       <button
         id="confirm"
-        class="icon-button icon-button--medium icon-button--clickable comments__input__button comments__input__send-button"
+        class="icon-button icon-button--medium icon-button--clickable icon-button--no-hover comments__input__button comments__input__send-button"
         disabled
         @click=${this.send}
       >

src/web-components/comments/components/comment-item.test.ts

@@ -50,11 +50,11 @@ describe('CommentsCommentItem', () => {
     const createdAt = element.shadowRoot!.querySelector(
       '.comments__comment-item__date',
     ) as HTMLSpanElement;
-    expect(createdAt.textContent).toEqual(DateTime.now().toFormat('yyyy-dd-MM'));
+    expect(createdAt.innerText).toEqual(DateTime.now().toFormat('yyyy-dd-MM'));
 
     const text = element.shadowRoot!.querySelector(
       '.comments__comment-item__content',
-    ) as HTMLSpanElement;
+    ) as HTMLParagraphElement;
 
     expect(text.innerText).toEqual('This is a comment');
   });
@@ -209,35 +209,44 @@ describe('CommentsCommentItem', () => {
     expect(element.dispatchEvent).toHaveBeenCalledWith(new CustomEvent('delete-annotation'));
   });
 
-  test('when click in text should expand elipis when text is bigger than 120', async () => {
+  test('when text is bigger than 120 and annotation is not selected should add line-clamp class to text', async () => {
     element = await createElement({
       ...DEFAULT_ELEMENT_OPTIONS,
       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget aliquam lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl eget.',
     });
 
     await element['updateComplete'];
 
-    const text = element.shadowRoot!.querySelector('.annotation-content') as HTMLElement;
-    text.click();
-
-    await element['updateComplete'];
+    const paragraph = element.shadowRoot!.getElementById('comment-text') as HTMLParagraphElement;
 
-    expect(element['expandElipsis']).toBeTruthy();
+    expect(paragraph.classList.contains('line-clamp')).toBeTruthy();
   });
 
-  test('when click in text should not expand elipis when text is smaller than 120', async () => {
+  test('when text is bigger than 120 and annotation is selected should not have line-clamp to text', async () => {
     element = await createElement({
       ...DEFAULT_ELEMENT_OPTIONS,
-      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget aliquam lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl eget.',
     });
 
     await element['updateComplete'];
 
-    const text = element.shadowRoot!.querySelector('.annotation-content') as HTMLElement;
-    text.click();
+    const paragraph = element.shadowRoot!.getElementById('comment-text') as HTMLParagraphElement;
+    paragraph.click();
+
+    element['isSelected'] = true;
+    await element['updateComplete'];
+
+    expect(paragraph.classList.contains('line-clamp')).toBeFalsy();
+  });
+
+  test('should not add line-clamp class when text is smaller than 120', async () => {
+    element = await createElement({
+      ...DEFAULT_ELEMENT_OPTIONS,
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    });
 
     await element['updateComplete'];
 
-    expect(element['expandElipsis']).toBeFalsy();
+    expect(element['line-clamp']).toBeFalsy();
   });
 });

src/web-components/comments/components/comment-item.ts

@@ -32,7 +32,7 @@ export class CommentsCommentItem extends WebComponentsBaseElement {
   declare mode: CommentMode;
   declare deleteCommentModalOpen: boolean;
   declare primaryComment: boolean;
-  declare expandElipsis: boolean;
+  declare isSelected: boolean;
   declare annotationFilter: string;
   declare participantsList: ParticipantByGroupApi[];
   declare mentions: ParticipantByGroupApi[];
@@ -51,7 +51,7 @@ export class CommentsCommentItem extends WebComponentsBaseElement {
     mode: { type: String },
     deleteCommentModalOpen: { type: Boolean },
     primaryComment: { type: Boolean },
-    expandElipsis: { type: Boolean },
+    isSelected: { type: Boolean },
     annotationFilter: { type: String },
     participantsList: { type: Object },
     mentions: { type: Array },
@@ -65,8 +65,47 @@ export class CommentsCommentItem extends WebComponentsBaseElement {
     this.updateComplete.then(() => {
       importStyle.call(this, ['comments']);
     });
+
+    document.body.addEventListener('select-annotation', this.selectAnnotation);
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    window.document.body.addEventListener('select-annotation', this.selectAnnotation);
+    window.document.body.addEventListener('keyup', this.unselectAnnotationEsc);
+    window.document.body.addEventListener('unselect-annotation', this.unselectAnnotation);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    window.document.body.removeEventListener('select-annotation', this.selectAnnotation);
+    window.document.body.removeEventListener('keyup', this.unselectAnnotationEsc);
+    window.document.body.removeEventListener('unselect-annotation', this.unselectAnnotation);
   }
 
+  private unselectAnnotationEsc = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      this.isSelected = false;
+    }
+  };
+
+  private unselectAnnotation = () => {
+    this.isSelected = false;
+  };
+
+  private selectAnnotation = ({ detail }: CustomEvent) => {
+    const { uuid } = detail;
+
+    if (this.isSelected) {
+      this.isSelected = false;
+      return;
+    }
+
+    this.isSelected = uuid === this.annotationId;
+  };
+
   private updateComment = ({ detail }: CustomEvent) => {
     const { text, mentions } = detail;
     this.text = text;
@@ -159,12 +198,6 @@ export class CommentsCommentItem extends WebComponentsBaseElement {
       }
     };
 
-    const expandElipsis = () => {
-      if (this.text.length < 120) return;
-
-      this.expandElipsis = true;
-    };
-
     const textareaHtml = () => {
       const classes = {
         'comments__comment-item--editable': true,
@@ -189,20 +222,16 @@ export class CommentsCommentItem extends WebComponentsBaseElement {
 
     const commentText = () => {
       const textClasses = {
-        editing: this.mode === CommentMode.EDITABLE,
-        'annotation-content': true,
         text: true,
         'text-big': true,
         'sv-gray-700': true,
+        'annotation-content': true,
         [this.getClasses('content')]: true,
-        'line-clamp': !this.expandElipsis && this.text.length > 120,
+        editing: this.mode === CommentMode.EDITABLE,
+        'line-clamp': !this.isSelected && this.text.length > 120,
       };
 
-      return html`
-        <span id="comment-text" @click=${expandElipsis} class="${classMap(textClasses)}"
-          >${this.text}</span
-        >
-      `;
+      return html` <p id="comment-text" class="${classMap(textClasses)}">${this.text}</p> `;
     };
 
     const closeModal = () => {
@@ -225,12 +254,12 @@ export class CommentsCommentItem extends WebComponentsBaseElement {
         <div class=${this.getClasses('header')}>
           <div class=${this.getClasses('metadata')}>
             ${this.getAvatar()}
-            <span class="text text-big text-bold sv-gray-700 ${this.getClasses('username')}"
-              >${this.username}</span
-            >
-            <span class="text text-small sv-gray-500 ${this.getClasses('date')}"
-              >${humanizeDate(this.createdAt)}</span
-            >
+            <span class="text text-big text-bold sv-gray-700 ${this.getClasses('username')}">
+              ${this.username}
+            </span>
+            <span class="text text-small sv-gray-500 ${this.getClasses('date')}">
+              ${humanizeDate(this.createdAt)}
+            </span>
           </div>
           <div class=${this.getClasses('actions')}>
             <button
@@ -239,19 +268,18 @@ export class CommentsCommentItem extends WebComponentsBaseElement {
                 'resolve-icon',
               )} icon-button icon-button--clickable icon-button--xsmall ${isResolvable}"
             >
-              <superviz-icon
-                name=${resolveIcon}
-                size="sm"
-                suffix=${resolveIcon === 'undo' ? 'md' : undefined}
-              ></superviz-icon>
+              <!-- TODO: Add undo icon in sm format -->
+              <superviz-icon name=${resolveIcon} size="sm"></superviz-icon>
             </button>
             <superviz-dropdown
               options=${JSON.stringify(options)}
               label="label"
               returnTo="label"
               position="bottom-left"
               @selected=${dropdownOptionsHandler}
-              @click=${(event: Event) => event.stopPropagation()}
+              @click=${(event: Event) => {
+                event.stopPropagation();
+              }}
               classesPrefix="comments__dropdown"
               parentComponent="comments"
             >

src/web-components/comments/css/annotation-item.style.ts

@@ -82,6 +82,7 @@ export const annotationItemStyle = css`
 
   .hidden {
     overflow: hidden;
+    opacity: 0;
   }
 
   .comments__thread {
@@ -111,7 +112,6 @@ export const annotationItemStyle = css`
     grid-template-rows: 0fr;
     opacity: 0;
     width: 100%;
-    overflow: hidden;
     transition: grid-template-rows 0.3s linear, opacity 0.3s linear;
   }
 

src/web-components/comments/css/comment-item.style.ts

@@ -66,6 +66,7 @@ export const commentItemStyle = css`
 
   .comments__comment-item__content {
     width: 100%;
+    word-wrap: break-word;
   }
 
   .line-clamp {