Merge branch 'main' into confirmation-modal-styling

Author: anandtiwary

package-lock.json

@@ -107,7 +107,7 @@
     "jest-junit": "^13.0.0",
     "jest-preset-angular": "^8.4.0",
     "lodash": "^4.17.21",
-    "ng-mocks": "^13.2.0",
+    "ng-mocks": "^13.3.0",
     "ng-packagr": "^12.2.5",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.3",

package.json

@@ -4,7 +4,6 @@
   @include subtitle-2;
   display: inline-flex;
   align-items: center;
-  padding: 4px 8px;
   border-radius: 2px;
 
   .label {

projects/components/src/panel/header/title/panel-title.component.scss

@@ -2,7 +2,7 @@
 @import 'color-palette';
 
 .ht-panel {
-  padding: 4px;
+  padding: 12px 10px;
   display: flex;
   flex-direction: column;
 
@@ -23,6 +23,11 @@
     overflow: auto;
     height: 100%;
   }
+
+  &.bordered {
+    border: 1px solid $gray-2;
+    border-radius: 10px;
+  }
 }
 
 .disabled {

projects/components/src/panel/panel.component.scss

@@ -11,6 +11,7 @@ import {
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
+import { Color } from '@hypertrace/common';
 import { PanelBodyComponent } from './body/panel-body.component';
 import { PanelHeaderComponent } from './header/panel-header.component';
 
@@ -19,7 +20,12 @@ import { PanelHeaderComponent } from './header/panel-header.component';
   styleUrls: ['./panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="ht-panel fill-container" [htLayoutChangeTrigger]="this.expanded">
+    <div
+      class="ht-panel fill-container"
+      [htLayoutChangeTrigger]="this.expanded"
+      [style.backgroundColor]="this.backgroundColor"
+      [ngClass]="{ bordered: this.showBorder }"
+    >
       <div *ngIf="this.header" [ngClass]="{ disabled: this.disabled, expanded: this.expanded }" class="header">
         <ng-container #headerContainer></ng-container>
       </div>
@@ -36,6 +42,12 @@ export class PanelComponent implements AfterViewInit {
   @Input()
   public disabled: boolean = false;
 
+  @Input()
+  public backgroundColor: string = Color.White;
+
+  @Input()
+  public showBorder: boolean = false;
+
   @Output()
   public readonly expandedChange: EventEmitter<boolean> = new EventEmitter();
 

projects/components/src/panel/panel.component.ts

@@ -6,7 +6,7 @@ import {
   TooltipDirective
 } from '@hypertrace/components';
 import { createComponentFactory } from '@ngneat/spectator/jest';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import { MockDirective, MockPipe } from 'ng-mocks';
 import { tableCellDataProvider } from '../../test/cell-providers';
 import {
   RelativeTimestampTableCellRendererComponent,
@@ -24,7 +24,7 @@ describe('relative timestamp table cell renderer component', () => {
         new TableCellNoOpParser(undefined!)
       )
     ],
-    declarations: [MockComponent(TooltipDirective), MockPipe(DisplayDatePipe)],
+    declarations: [MockDirective(TooltipDirective), MockPipe(DisplayDatePipe)],
     shallow: true
   });
 

projects/components/src/table/cells/data-renderers/relative-timestamp/relative-timestamp-table-cell-renderer.component.test.ts

@@ -5,7 +5,7 @@ import {
   TooltipDirective
 } from '@hypertrace/components';
 import { createComponentFactory } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
+import { MockDirective } from 'ng-mocks';
 import { ExitCallsTableCellRendererComponent } from './exit-calls-table-cell-renderer.component';
 
 describe('Exit Calls table cell renderer component', () => {
@@ -19,7 +19,7 @@ describe('Exit Calls table cell renderer component', () => {
         new TableCellNoOpParser(undefined!)
       )
     ],
-    declarations: [MockComponent(TooltipDirective)],
+    declarations: [MockDirective(TooltipDirective)],
     shallow: true
   });