Merge branch 'main' into nav-hyperlinks

Author: anandtiwary

projects/assets-library/assets/styles/_color-palette.scss

@@ -98,6 +98,7 @@ $color-health-red: $red-5;
 $color-health-unknown: $gray-7;
 
 // Risk
+$color-risk-critical: $purple-6;
 $color-risk-high: $red-5;
 $color-risk-medium: $brown-1;
 $color-risk-low: $gray-6;

projects/common/src/color/color.ts

@@ -14,6 +14,7 @@ export const enum Color {
   Gray9 = '#080909',
   Green2 = '#c3f3db',
   Green3 = '#95eabe',
+  Green5 = '#27C675',
   Orange3 = '#FDC088',
   Orange5 = '#fb8b24',
   Purple2 = '#f2d0f5',

projects/components/src/select/select.component.test.ts

@@ -1,8 +1,11 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, flush } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { IconLibraryTestingModule, IconType } from '@hypertrace/assets-library';
 import { NavigationService } from '@hypertrace/common';
+import { IconComponent } from '@hypertrace/components';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
 import { EMPTY } from 'rxjs';
 import { SelectControlOptionPosition } from './select-control-option.component';
 import { SelectJustify } from './select-justify';
@@ -14,6 +17,7 @@ describe('Select Component', () => {
     component: SelectComponent,
     imports: [SelectModule, HttpClientTestingModule, IconLibraryTestingModule],
     declareComponent: false,
+    declarations: [MockComponent(IconComponent)],
     providers: [
       mockProvider(NavigationService, {
         navigation$: EMPTY,
@@ -27,7 +31,7 @@ describe('Select Component', () => {
   const selectionOptions = [
     { label: 'first', value: 'first-value' },
     { label: 'second', value: 'second-value' },
-    { label: 'third', value: 'third-value', selectedLabel: 'Third Value!!!' }
+    { label: 'third', value: 'third-value', selectedLabel: 'Third Value!!!', icon: 'test-icon', iconColor: 'red' }
   ];
 
   test('should display initial selection', fakeAsync(() => {
@@ -146,12 +150,56 @@ describe('Select Component', () => {
     const optionElements = spectator.queryAll('.select-option', { root: true });
     spectator.click(optionElements[2]);
 
-    expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith(selectionOptions[2].value);
     expect(spectator.query('.trigger-content')).toHaveText(selectionOptions[2].selectedLabel!);
     flush();
   }));
 
+  test('should set trigger-prefix-icon correctly', fakeAsync(() => {
+    spectator = hostFactory(
+      `
+    <ht-select [icon]="icon">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value" [icon]="option.icon" [iconColor]="option.iconColor">
+      </ht-select-option>
+    </ht-select>`,
+      {
+        hostProps: {
+          options: selectionOptions,
+          icon: 'select-level-icon'
+        }
+      }
+    );
+    spectator.tick();
+
+    // No selection -> select component level icon and no color
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.icon).toBe(
+      'select-level-icon'
+    );
+    // tslint:disable-next-line:no-null-keyword
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.color).toBe(null);
+
+    // Selection with no icon -> default icon and no color
+    spectator.click('.trigger-content');
+    let optionElements = spectator.queryAll('.select-option', { root: true });
+    spectator.click(optionElements[1]);
+    spectator.tick();
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.icon).toBe(
+      'select-level-icon'
+    );
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.color).toBe(undefined);
+
+    // Selection with icon and color
+    spectator.click('.trigger-content');
+    optionElements = spectator.queryAll('.select-option', { root: true });
+    spectator.click(optionElements[2]);
+    spectator.tick();
+
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.icon).toBe('test-icon');
+    expect(spectator.debugElement.query(By.css('.trigger-prefix-icon')).componentInstance.color).toBe('red');
+
+    flush();
+  }));
+
   test('should set correct label alignment', fakeAsync(() => {
     spectator = hostFactory(
       `

projects/components/src/select/select.component.ts

@@ -55,7 +55,13 @@ import { SelectSize } from './select-size';
               class="trigger-content menu-with-border"
               [ngClass]="[this.justifyClass]"
             >
-              <ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" [size]="this.iconSize">
+              <ht-icon
+                *ngIf="this.getPrefixIcon(selected)"
+                class="trigger-prefix-icon"
+                [icon]="this.getPrefixIcon(selected)"
+                [size]="this.iconSize"
+                [color]="selected?.iconColor"
+              >
               </ht-icon>
               <ht-label class="trigger-label" [label]="selected?.selectedLabel || selected?.label || this.placeholder">
               </ht-label>
@@ -204,6 +210,10 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
     }
   }
 
+  public getPrefixIcon(selectedOption: SelectOption<V> | undefined): string | undefined {
+    return selectedOption?.icon ?? this.icon;
+  }
+
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
     if (this.items !== undefined && changes.selected !== undefined) {
       this.selected$ = this.buildObservableOfSelected();

projects/components/src/summay-card/summary-card.component.scss

@@ -42,6 +42,10 @@
       &.gray {
         background-color: $gray-6;
       }
+
+      &.purple {
+        background-color: $purple-6;
+      }
     }
   }
 
@@ -67,6 +71,10 @@
       &.gray {
         color: $gray-6;
       }
+
+      &.purple {
+        color: $purple-6;
+      }
     }
 
     .footer {

projects/components/src/summay-card/summary-card.ts

@@ -2,7 +2,8 @@
 export const enum SummaryCardColor {
   Red = 'red',
   Brown = 'brown',
-  Gray = 'gray'
+  Gray = 'gray',
+  Purple = 'purple'
 }
 
 export interface SummaryValue {