feat: adding icon support to toggle group

Author: Patricio Albizu

projects/components/src/toggle-group/toggle-group.component.test.ts

@@ -1,4 +1,5 @@
 import { fakeAsync } from '@angular/core/testing';
+import { IconType } from '@hypertrace/assets-library';
 import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { LabelComponent } from '../label/label.component';
@@ -23,6 +24,7 @@ describe('Toggle Group Component', () => {
       },
       {
         label: 'Second',
+        icon: IconType.Add, 
         value: 'second-value'
       }
     ];

projects/components/src/toggle-group/toggle-group.component.ts

@@ -28,7 +28,12 @@ import { ToggleItemComponent } from './toggle-item.component';
         ></div>
         <div class="container" *ngFor="let item of this.items; let index = index">
           <div class="divider" *ngIf="index !== 0" [class.hide-divider]="this.shouldHideDivider(index)"></div>
-          <ht-toggle-item class="tab" [label]="item.label" (click)="this.setActiveItem(item)"></ht-toggle-item>
+          <ht-toggle-item
+            class="tab"
+            [label]="item.label"
+            [icon]="item.icon"
+            (click)="this.setActiveItem(item)"
+          ></ht-toggle-item>
         </div>
       </div>
     </div>

projects/components/src/toggle-group/toggle-group.module.ts

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { IconModule } from '../icon/icon.module';
 import { LabelModule } from '../label/label.module';
 import { ToggleGroupComponent } from './toggle-group.component';
 import { ToggleItemComponent } from './toggle-item.component';
 
 @NgModule({
-  imports: [CommonModule, LabelModule],
+  imports: [CommonModule, LabelModule, IconModule],
   exports: [ToggleGroupComponent],
   declarations: [ToggleGroupComponent, ToggleItemComponent]
 })

projects/components/src/toggle-group/toggle-item.component.scss

@@ -8,7 +8,8 @@
   padding: 0 12px;
   cursor: pointer;
 
-  .label {
+  .label,
+  .icon {
     z-index: 1; // Needs to stack above the active element
     pointer-events: none; // Make this label ignore hover so active element gets it
   }

projects/components/src/toggle-group/toggle-item.component.ts

@@ -1,18 +1,26 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';
+import { IconType } from '@hypertrace/assets-library';
+import { IconSize } from '../icon/icon-size';
 
 @Component({
   selector: 'ht-toggle-item',
   styleUrls: ['./toggle-item.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="toggle-item">
-      <ht-label class="label" [label]="this.label"></ht-label>
+      <ht-icon *ngIf="this.icon; else labelBlock" class="icon" [icon]="this.icon" size="${IconSize.Medium}"></ht-icon>
+      <ng-template #labelBlock>
+        <ht-label class="label" [label]="this.label"></ht-label>
+      </ng-template>
     </div>
   `
 })
 export class ToggleItemComponent {
   @Input()
   public label?: string;
 
+  @Input()
+  public icon?: IconType;
+
   public constructor(public readonly elementRef: ElementRef) {}
 }

projects/components/src/toggle-group/toggle-item.ts

@@ -1,4 +1,7 @@
+import { IconType } from '@hypertrace/assets-library';
+
 export interface ToggleItem<TValue = unknown> {
-  label: string;
+  label?: string;
+  icon?: IconType;
   value?: TValue;
 }