From c5148b0f2b776be06149dfd148365e64c4862003 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Fri, 30 Apr 2021 12:30:19 +0530 Subject: [PATCH 1/4] feat: header functionality in the list view --- .../src/list-view/list-view.component.scss | 27 +++++++++++++++++++ .../src/list-view/list-view.component.test.ts | 15 +++++++++-- .../src/list-view/list-view.component.ts | 8 ++++++ 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/projects/components/src/list-view/list-view.component.scss b/projects/components/src/list-view/list-view.component.scss index 279913e1a..e3857cce0 100644 --- a/projects/components/src/list-view/list-view.component.scss +++ b/projects/components/src/list-view/list-view.component.scss @@ -7,6 +7,33 @@ display: flex; flex-direction: column; + .header { + flex: 0 0 auto; + height: 32px; + width: 100%; + padding: 8px 0; + background: $gray-1; + box-shadow: inset 0px -1px 0px $gray-2; + border-radius: 6px 6px 0px 0px; + display: flex; + align-items: center; + + .header-key { + flex: 1 1 auto; + font-weight: 600; + font-size: 12px; + line-height: 14px; + margin-left: 12px; + text-transform: uppercase; + } + .header-key:nth-child(1) { + width: 40%; + } + .header-key:nth-child(2) { + width: 60%; + } + } + .data-row { flex: 0 0 auto; min-height: 40px; diff --git a/projects/components/src/list-view/list-view.component.test.ts b/projects/components/src/list-view/list-view.component.test.ts index 5646d3ace..41310109f 100644 --- a/projects/components/src/list-view/list-view.component.test.ts +++ b/projects/components/src/list-view/list-view.component.test.ts @@ -6,7 +6,7 @@ import { ListViewComponent, ListViewRecord } from './list-view.component'; describe('List View Component', () => { @Component({ selector: 'ht-test-host-component', - template: ` ` + template: ` ` }) class TestHostComponent { public records: ListViewRecord[] = [ @@ -19,6 +19,8 @@ describe('List View Component', () => { value: 'Response 2' } ]; + + public headerKeys: [string, string] = ['key1', 'key2']; } let fixture: ComponentFixture; @@ -34,11 +36,20 @@ 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('.header'); + expect(headerElement).not.toBeNull(); + + const headerKeyElements = element.querySelectorAll('.header-key'); + expect(headerKeyElements).not.toBeNull(); + expect(headerKeyElements.length).toBe(2); + expect(headerKeyElements[0].textContent).toEqual(hostComp.headerKeys[0]); + expect(headerKeyElements[1].textContent).toEqual(hostComp.headerKeys[1]); + const rowElements = element.querySelectorAll('.data-row'); expect(rowElements).not.toBeNull(); expect(rowElements.length).toBe(2); diff --git a/projects/components/src/list-view/list-view.component.ts b/projects/components/src/list-view/list-view.component.ts index cb099c86f..bd8850e0f 100644 --- a/projects/components/src/list-view/list-view.component.ts +++ b/projects/components/src/list-view/list-view.component.ts @@ -6,6 +6,11 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; changeDetection: ChangeDetectionStrategy.OnPush, template: `
+
+
+ {{ this.headerKey }} +
+
{{ record.key }} @@ -18,6 +23,9 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; ` }) export class ListViewComponent { + @Input() + public headerKeys?: [string, string]; + @Input() public records?: ListViewRecord[]; } From f1403f037f5bd99d33ec7979484094c3567b7847 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Fri, 30 Apr 2021 19:39:32 +0530 Subject: [PATCH 2/4] fix: addressing review comments --- .../src/list-view/list-view.component.scss | 74 ++++++++----------- .../src/list-view/list-view.component.test.ts | 23 +++--- .../src/list-view/list-view.component.ts | 16 +++- projects/components/src/public-api.ts | 2 +- 4 files changed, 56 insertions(+), 59 deletions(-) diff --git a/projects/components/src/list-view/list-view.component.scss b/projects/components/src/list-view/list-view.component.scss index e3857cce0..9a4a8ecb8 100644 --- a/projects/components/src/list-view/list-view.component.scss +++ b/projects/components/src/list-view/list-view.component.scss @@ -1,5 +1,18 @@ +@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%; @@ -7,67 +20,38 @@ display: flex; flex-direction: column; - .header { - flex: 0 0 auto; + .header-row { + @include grid-view(); height: 32px; - width: 100%; - padding: 8px 0; background: $gray-1; box-shadow: inset 0px -1px 0px $gray-2; border-radius: 6px 6px 0px 0px; - display: flex; - align-items: center; - .header-key { - flex: 1 1 auto; - font-weight: 600; - font-size: 12px; - line-height: 14px; - margin-left: 12px; - text-transform: uppercase; - } - .header-key:nth-child(1) { - width: 40%; - } - .header-key:nth-child(2) { - width: 60%; + .header-key-label, + .header-value-label { + @include overline; + margin-left: $margin-left; + width: 100%; } } .data-row { - flex: 0 0 auto; + @include grid-view(); + @include font-placeholder(); + color: $gray-9; min-height: 40px; - width: 100%; word-break: break-word; - padding: 8px 0; - - display: flex; - flex-direction: row; - align-items: center; - font-size: 15px; - font-style: normal; - line-height: 18px; - - .key { - flex: 1 1 auto; - height: 100%; - width: 40%; - display: flex; - align-items: center; - margin-left: 12px; - font-weight: 500; - } + .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; } } diff --git a/projects/components/src/list-view/list-view.component.test.ts b/projects/components/src/list-view/list-view.component.test.ts index 41310109f..f4343f829 100644 --- a/projects/components/src/list-view/list-view.component.test.ts +++ b/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: ` ` + template: ` ` }) class TestHostComponent { public records: ListViewRecord[] = [ @@ -20,7 +20,10 @@ describe('List View Component', () => { } ]; - public headerKeys: [string, string] = ['key1', 'key2']; + public header: ListViewHeader = { + keyLabel: 'key', + valueLabel: 'value' + }; } let fixture: ComponentFixture; @@ -41,14 +44,16 @@ describe('List View Component', () => { const element: HTMLElement = fixture.nativeElement; - const headerElement = element.querySelector('.header'); + const headerElement = element.querySelector('.header-row'); expect(headerElement).not.toBeNull(); - const headerKeyElements = element.querySelectorAll('.header-key'); - expect(headerKeyElements).not.toBeNull(); - expect(headerKeyElements.length).toBe(2); - expect(headerKeyElements[0].textContent).toEqual(hostComp.headerKeys[0]); - expect(headerKeyElements[1].textContent).toEqual(hostComp.headerKeys[1]); + const headerKeyLabelElement = element.querySelector('.header-key-label'); + expect(headerKeyLabelElement).not.toBeNull(); + expect(headerKeyLabelElement?.textContent).toEqual(hostComp.header.keyLabel); + + const headerValueLabelElement = element.querySelector('.header-value-label'); + expect(headerValueLabelElement).not.toBeNull(); + expect(headerValueLabelElement?.textContent).toEqual(hostComp.header.valueLabel); const rowElements = element.querySelectorAll('.data-row'); expect(rowElements).not.toBeNull(); diff --git a/projects/components/src/list-view/list-view.component.ts b/projects/components/src/list-view/list-view.component.ts index bd8850e0f..a25c37bca 100644 --- a/projects/components/src/list-view/list-view.component.ts +++ b/projects/components/src/list-view/list-view.component.ts @@ -6,9 +6,12 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; changeDetection: ChangeDetectionStrategy.OnPush, template: `
-
-
- {{ this.headerKey }} +
+
+ {{ this.header.keyLabel }} +
+
+ {{ this.header.valueLabel }}
@@ -24,12 +27,17 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; }) export class ListViewComponent { @Input() - public headerKeys?: [string, string]; + public header?: ListViewHeader; @Input() public records?: ListViewRecord[]; } +export interface ListViewHeader { + keyLabel: string; + valueLabel: string; +} + export interface ListViewRecord { key: string; value: string | number; diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts index 1813880a5..faad798b1 100644 --- a/projects/components/src/public-api.ts +++ b/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 From d547d834a943857211e4a8a686dd747b8de44d84 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Mon, 3 May 2021 18:07:02 +0530 Subject: [PATCH 3/4] fix: addressing review comments --- projects/components/src/list-view/list-view.component.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/projects/components/src/list-view/list-view.component.scss b/projects/components/src/list-view/list-view.component.scss index 9a4a8ecb8..e7bf8bd65 100644 --- a/projects/components/src/list-view/list-view.component.scss +++ b/projects/components/src/list-view/list-view.component.scss @@ -20,8 +20,11 @@ $margin-left: 12px; display: flex; flex-direction: column; - .header-row { + & > * { @include grid-view(); + } + + .header-row { height: 32px; background: $gray-1; box-shadow: inset 0px -1px 0px $gray-2; @@ -36,7 +39,6 @@ $margin-left: 12px; } .data-row { - @include grid-view(); @include font-placeholder(); color: $gray-9; min-height: 40px; From cd27f4fff731d2dd064d0ce8c30e5fff6dd7e360 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 4 May 2021 11:33:29 +0530 Subject: [PATCH 4/4] fix: addressing review comment q --- projects/components/src/list-view/list-view.component.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/components/src/list-view/list-view.component.scss b/projects/components/src/list-view/list-view.component.scss index e7bf8bd65..f55fd0ca5 100644 --- a/projects/components/src/list-view/list-view.component.scss +++ b/projects/components/src/list-view/list-view.component.scss @@ -20,7 +20,8 @@ $margin-left: 12px; display: flex; flex-direction: column; - & > * { + .header-row, + .data-row { @include grid-view(); }