diff --git a/projects/components/src/label-tag/label-tag.component.scss b/projects/components/src/label-tag/label-tag.component.scss index 61f082026..958522565 100644 --- a/projects/components/src/label-tag/label-tag.component.scss +++ b/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; 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(''); + spectator = createHost( + '' + ); 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'); }); }); diff --git a/projects/components/src/label-tag/label-tag.component.ts b/projects/components/src/label-tag/label-tag.component.ts index cbfdff5e5..88f411680 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,12 @@ import { Color } from '@hypertrace/common'; changeDetection: ChangeDetectionStrategy.OnPush, template: `
+ {{ this.label }}
` @@ -20,4 +27,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 {}