feat: prefix icon for label tag component (#1450)

Author: itssharmasandeep

projects/components/src/label-tag/label-tag.component.scss

@@ -12,6 +12,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
 
   // Default color. Could be overridden by the component
   background-color: $blue-1;

projects/components/src/label-tag/label-tag.component.test.ts

@@ -1,19 +1,25 @@
 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', () => {
   let spectator: Spectator<LabelTagComponent>;
 
   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');
   });
 });

projects/components/src/label-tag/label-tag.component.ts

@@ -1,12 +1,19 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Color } from '@hypertrace/common';
+import { IconSize } from '../icon/icon-size';
 
 @Component({
   selector: 'ht-label-tag',
   styleUrls: ['./label-tag.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="label-tag" [ngStyle]="{ backgroundColor: this.backgroundColor, color: this.labelColor }">
+      <ht-icon
+        *ngIf="this.prefixIcon"
+        [icon]="this.prefixIcon"
+        size="${IconSize.Small}"
+        [color]="this.labelColor"
+      ></ht-icon>
       {{ this.label }}
     </div>
   `
@@ -20,4 +27,7 @@ export class LabelTagComponent {
 
   @Input()
   public backgroundColor?: Color;
+
+  @Input()
+  public prefixIcon?: string;
 }

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 {}