feat: header functionality for the list view (#806)

* feat: header functionality for the list view

Author: itssharmasandeep

projects/components/src/list-view/list-view.component.scss

@@ -1,46 +1,60 @@
+@import 'font';
 @import 'color-palette';
 
+$key-width: 40%;
+$value-width: 60%;
+$margin-left: 12px;
+
+@mixin grid-view {
+  width: 100%;
+  padding: 8px 0;
+  display: grid;
+  grid-template-columns: $key-width $value-width;
+  align-content: center;
+}
+
 .list-view {
   height: 100%;
   width: 100%;
   overflow: auto;
   display: flex;
   flex-direction: column;
 
+  .header-row,
   .data-row {
-    flex: 0 0 auto;
-    min-height: 40px;
-    width: 100%;
-    word-break: break-word;
-    padding: 8px 0;
+    @include grid-view();
+  }
 
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    font-size: 15px;
-    font-style: normal;
-    line-height: 18px;
+  .header-row {
+    height: 32px;
+    background: $gray-1;
+    box-shadow: inset 0px -1px 0px $gray-2;
+    border-radius: 6px 6px 0px 0px;
 
-    .key {
-      flex: 1 1 auto;
-      height: 100%;
-      width: 40%;
-      display: flex;
-      align-items: center;
-      margin-left: 12px;
-      font-weight: 500;
+    .header-key-label,
+    .header-value-label {
+      @include overline;
+      margin-left: $margin-left;
+      width: 100%;
     }
+  }
 
+  .data-row {
+    @include font-placeholder();
+    color: $gray-9;
+    min-height: 40px;
+    word-break: break-word;
+
+    .key,
     .value {
-      flex: 1 1 auto;
       height: 100%;
-      width: 60%;
+      width: 100%;
       display: flex;
       align-items: center;
-      margin-left: 12px;
-
-      /* identical to box height, or 120% */
-      letter-spacing: -0.01em;
+      margin-left: $margin-left;
+    }
+    .key {
+      font-weight: 500;
     }
   }
 

projects/components/src/list-view/list-view.component.test.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ListViewComponent, ListViewRecord } from './list-view.component';
+import { ListViewComponent, ListViewHeader, ListViewRecord } from './list-view.component';
 
 describe('List View Component', () => {
   @Component({
     selector: 'ht-test-host-component',
-    template: ` <ht-list-view [records]="this.records"></ht-list-view> `
+    template: ` <ht-list-view [records]="this.records" [header]="this.header"></ht-list-view> `
   })
   class TestHostComponent {
     public records: ListViewRecord[] = [
@@ -19,6 +19,11 @@ describe('List View Component', () => {
         value: 'Response 2'
       }
     ];
+
+    public header: ListViewHeader = {
+      keyLabel: 'key',
+      valueLabel: 'value'
+    };
   }
 
   let fixture: ComponentFixture<TestHostComponent>;
@@ -34,11 +39,22 @@ describe('List View Component', () => {
     hostComp = fixture.componentInstance;
   });
 
-  test('should display rows for each data', () => {
+  test('should display rows for each data and should display header', () => {
     fixture.detectChanges();
 
     const element: HTMLElement = fixture.nativeElement;
 
+    const headerElement = element.querySelector<HTMLElement>('.header-row');
+    expect(headerElement).not.toBeNull();
+
+    const headerKeyLabelElement = element.querySelector<HTMLElement>('.header-key-label');
+    expect(headerKeyLabelElement).not.toBeNull();
+    expect(headerKeyLabelElement?.textContent).toEqual(hostComp.header.keyLabel);
+
+    const headerValueLabelElement = element.querySelector<HTMLElement>('.header-value-label');
+    expect(headerValueLabelElement).not.toBeNull();
+    expect(headerValueLabelElement?.textContent).toEqual(hostComp.header.valueLabel);
+
     const rowElements = element.querySelectorAll<HTMLElement>('.data-row');
     expect(rowElements).not.toBeNull();
     expect(rowElements.length).toBe(2);

projects/components/src/list-view/list-view.component.ts

@@ -6,6 +6,14 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="list-view">
+      <div *ngIf="this.header" class="header-row">
+        <div class="header-key-label">
+          <span>{{ this.header.keyLabel }}</span>
+        </div>
+        <div class="header-value-label">
+          <span>{{ this.header.valueLabel }}</span>
+        </div>
+      </div>
       <div class="data-row" *ngFor="let record of this.records">
         <div class="key">
           <span>{{ record.key }}</span>
@@ -18,10 +26,18 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   `
 })
 export class ListViewComponent {
+  @Input()
+  public header?: ListViewHeader;
+
   @Input()
   public records?: ListViewRecord[];
 }
 
+export interface ListViewHeader {
+  keyLabel: string;
+  valueLabel: string;
+}
+
 export interface ListViewRecord {
   key: string;
   value: string | number;

projects/components/src/public-api.ts

@@ -152,7 +152,7 @@ export * from './link/link.component';
 export * from './link/link.module';
 
 // List View
-export { ListViewComponent, ListViewRecord } from './list-view/list-view.component';
+export { ListViewComponent, ListViewHeader, ListViewRecord } from './list-view/list-view.component';
 export { ListViewModule } from './list-view/list-view.module';
 
 // Load Async