From 990f802f4baaba32c9cc5b5321ae9ad339048f89 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 22 Feb 2022 12:27:30 +0530
Subject: [PATCH 1/3] feat: prefix icon for label tag component

---
 .../components/src/label-tag/label-tag.component.scss |  4 ++++
 .../components/src/label-tag/label-tag.component.ts   | 11 +++++++++++
 projects/components/src/label-tag/label-tag.module.ts |  3 ++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/projects/components/src/label-tag/label-tag.component.scss b/projects/components/src/label-tag/label-tag.component.scss
index 61f082026..ca4f3efe7 100644
--- a/projects/components/src/label-tag/label-tag.component.scss
+++ b/projects/components/src/label-tag/label-tag.component.scss
@@ -16,4 +16,8 @@
   // Default color. Could be overridden by the component
   background-color: $blue-1;
   border-radius: 2px;
+
+  .prefix-icon {
+    margin-right: 4px;
+  }
 }
diff --git a/projects/components/src/label-tag/label-tag.component.ts b/projects/components/src/label-tag/label-tag.component.ts
index cbfdff5e5..da605b5ae 100644
--- a/projects/components/src/label-tag/label-tag.component.ts
+++ b/projects/components/src/label-tag/label-tag.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Color } from '@hypertrace/common';
+import { IconSize } from '../icon/icon-size';
 
 @Component({
   selector: 'ht-label-tag',
@@ -7,6 +8,13 @@ import { Color } from '@hypertrace/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="label-tag" [ngStyle]="{ backgroundColor: this.backgroundColor, color: this.labelColor }">
+      <ht-icon
+        class="prefix-icon"
+        *ngIf="this.prefixIcon"
+        [icon]="this.prefixIcon"
+        size="${IconSize.Small}"
+        [color]="this.labelColor"
+      ></ht-icon>
       {{ this.label }}
     </div>
   `
@@ -20,4 +28,7 @@ export class LabelTagComponent {
 
   @Input()
   public backgroundColor?: Color;
+
+  @Input()
+  public prefixIcon?: string;
 }
diff --git a/projects/components/src/label-tag/label-tag.module.ts b/projects/components/src/label-tag/label-tag.module.ts
index 25e8c98b8..c3fdba975 100644
--- a/projects/components/src/label-tag/label-tag.module.ts
+++ b/projects/components/src/label-tag/label-tag.module.ts
@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { IconModule } from '../icon/icon.module';
 import { LabelTagComponent } from './label-tag.component';
 
 @NgModule({
   declarations: [LabelTagComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, IconModule],
   exports: [LabelTagComponent]
 })
 export class LabelTagModule {}

From b61180ef13f4ce1d5b65d8fde7d8df82fec06578 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 22 Feb 2022 12:29:07 +0530
Subject: [PATCH 2/3] fix: add tests

---
 .../src/label-tag/label-tag.component.test.ts          | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/label-tag/label-tag.component.test.ts b/projects/components/src/label-tag/label-tag.component.test.ts
index 8391f42d9..0fd2b94c9 100644
--- a/projects/components/src/label-tag/label-tag.component.test.ts
+++ b/projects/components/src/label-tag/label-tag.component.test.ts
@@ -1,4 +1,6 @@
 import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { IconComponent } from '../icon/icon.component';
 import { LabelTagComponent } from './label-tag.component';
 
 describe('Label Tag Component', () => {
@@ -6,14 +8,18 @@ describe('Label Tag Component', () => {
 
   const createHost = createHostFactory({
     component: LabelTagComponent,
-    shallow: true
+    shallow: true,
+    declarations: [MockComponent(IconComponent)]
   });
 
   test('renders the beta tag with given parameters', () => {
-    spectator = createHost('<ht-label-tag label="Beta" backgroundColor="#f2d0f5" labelColor="#94209f"></ht-label-tag>');
+    spectator = createHost(
+      '<ht-label-tag label="Beta" backgroundColor="#f2d0f5" labelColor="#94209f" prefixIcon="test-icon"></ht-label-tag>'
+    );
     const labelElement = spectator.query('.label-tag') as HTMLElement;
     expect(labelElement).toHaveText('Beta');
     expect(labelElement.style.backgroundColor).toEqual('rgb(242, 208, 245)');
     expect(labelElement.style.color).toEqual('rgb(148, 32, 159)');
+    expect(spectator.query(IconComponent)?.icon).toBe('test-icon');
   });
 });

From a1c82655b3d12dce771449ce19da0fab9c7839da Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Tue, 22 Feb 2022 14:24:37 +0530
Subject: [PATCH 3/3] fix: addressing review comments

---
 projects/components/src/label-tag/label-tag.component.scss | 5 +----
 projects/components/src/label-tag/label-tag.component.ts   | 1 -
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/projects/components/src/label-tag/label-tag.component.scss b/projects/components/src/label-tag/label-tag.component.scss
index ca4f3efe7..958522565 100644
--- a/projects/components/src/label-tag/label-tag.component.scss
+++ b/projects/components/src/label-tag/label-tag.component.scss
@@ -12,12 +12,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
 
   // Default color. Could be overridden by the component
   background-color: $blue-1;
   border-radius: 2px;
-
-  .prefix-icon {
-    margin-right: 4px;
-  }
 }
diff --git a/projects/components/src/label-tag/label-tag.component.ts b/projects/components/src/label-tag/label-tag.component.ts
index da605b5ae..88f411680 100644
--- a/projects/components/src/label-tag/label-tag.component.ts
+++ b/projects/components/src/label-tag/label-tag.component.ts
@@ -9,7 +9,6 @@ import { IconSize } from '../icon/icon-size';
   template: `
     <div class="label-tag" [ngStyle]="{ backgroundColor: this.backgroundColor, color: this.labelColor }">
       <ht-icon
-        class="prefix-icon"
         *ngIf="this.prefixIcon"
         [icon]="this.prefixIcon"
         size="${IconSize.Small}"