feat(ui): added summary-box to consolidate +x usecases

projects/components/src/public-api.ts

@@ -284,6 +284,10 @@ export * from './summary-value/summary-value.module';
 export * from './summary-values/summary-values.component';
 export * from './summary-values/summary-values.module';
 
+// X More
+export * from './x-more/x-more.component';
+export * from './x-more/x-more.module';
+
 // Table
 export * from './table/controls/table-controls-api';
 export * from './table/data/table-data-source';

projects/components/src/x-more/x-more.component.scss

@@ -0,0 +1,19 @@
+@import 'color-palette';
+
+.ht-x-more {
+  .summary-text {
+    padding: 0 6px;
+    margin-left: 8px;
+    border-radius: 4px;
+  }
+
+  .plain {
+    color: $gray-7;
+    margin-left: 0px;
+    background-color: white;
+  }
+
+  .gray {
+    background-color: $gray-2;
+  }
+}

projects/components/src/x-more/x-more.component.test.ts

@@ -0,0 +1,70 @@
+import { TooltipDirective } from '@hypertrace/components';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
+import { MockDirective } from 'ng-mocks';
+
+import { XMoreComponent, XMoreDisplay } from './x-more.component';
+
+describe('X-More Component', () => {
+  let spectator: SpectatorHost<XMoreComponent>;
+
+  const createHost = createHostFactory({
+    component: XMoreComponent,
+    shallow: true,
+    declarations: [MockDirective(TooltipDirective)]
+  });
+
+  test('should not display if count is 0', () => {
+    spectator = createHost(
+      `<ht-x-more [count]="count" [tooltip]="value" [displayStyle]="displayStyle">
+    </ht-x-more>`,
+      {
+        hostProps: {
+          count: 0,
+          value: 'tooltip value',
+          displayStyle: XMoreDisplay.Plain
+        }
+      }
+    );
+
+    expect(spectator.query('.summary-text')).not.toExist();
+    expect(spectator.query(TooltipDirective)).not.toExist();
+  });
+
+  test('should display if count greater than 0', () => {
+    spectator = createHost(
+      `<ht-x-more [count]="count" [tooltip] = "value" [displayStyle] = "displayStyle">
+    </ht-x-more>`,
+      {
+        hostProps: {
+          count: 1,
+          value: 'tooltip value',
+          displayStyle: XMoreDisplay.Plain
+        }
+      }
+    );
+
+    expect(spectator.query('.summary-text')).toExist();
+    expect(spectator.query('.summary-text')).toHaveText('+1');
+    expect(spectator.query(TooltipDirective)).toExist();
+  });
+
+  test('should contain suffix if provided', () => {
+    spectator = createHost(
+      `<ht-x-more [count]="count" [tooltip] = "value" [displayStyle] = "displayStyle" [suffix] = "suffix">
+    </ht-x-more>`,
+      {
+        hostProps: {
+          count: 1,
+          value: 'tooltip value',
+          displayStyle: XMoreDisplay.Plain,
+          suffix: 'more'
+        }
+      }
+    );
+
+    expect(spectator.query('.summary-text')).toExist();
+    expect(spectator.query('.summary-text')).toHaveText('+1');
+    expect(spectator.query('.summary-text')).toHaveText('more');
+    expect(spectator.query(TooltipDirective)).toExist();
+  });
+});

projects/components/src/x-more/x-more.component.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, TemplateRef } from '@angular/core';
+import { TypedSimpleChanges } from '@hypertrace/common';
+
+@Component({
+  selector: 'ht-x-more',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="ht-x-more">
+    <span class="summary-text" *ngIf="this.count > 0" [htTooltip]="this.tooltip" [ngClass]="this.displayStyle">{{
+      this.summaryText
+    }}</span>
+  </div>`,
+  styleUrls: ['./x-more.component.scss']
+})
+export class XMoreComponent implements OnChanges {
+  @Input()
+  public count!: number;
+
+  @Input()
+  public suffix?: string = '';
+
+  @Input()
+  public displayStyle: XMoreDisplay = XMoreDisplay.Plain;
+
+  @Input()
+  public tooltip!: string | number | TemplateRef<unknown>;
+
+  public summaryText!: string;
+
+  public ngOnChanges(changes: TypedSimpleChanges<this>): void {
+    if (changes.count || changes.suffix) {
+      this.summaryText =
+        this.suffix !== undefined && this.suffix !== '' ? `+${this.count} ${this.suffix}` : `+${this.count}`;
+    }
+  }
+}
+
+export const enum XMoreDisplay {
+  Plain = 'plain',
+  Gray = 'gray'
+}

projects/components/src/x-more/x-more.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TooltipModule } from '../tooltip/tooltip.module';
+import { XMoreComponent } from './x-more.component';
+
+@NgModule({
+  imports: [CommonModule, TooltipModule],
+  declarations: [XMoreComponent],
+  exports: [XMoreComponent]
+})
+export class XMoreModule {}