Add ht-description component

projects/components/src/description/description.component.scss

@@ -0,0 +1,23 @@
+:host {
+  min-width: 0;
+}
+
+.description {
+  display: flex;
+}
+
+.description-text {
+  margin-right: 6px;
+}
+
+.description-button {
+  cursor: pointer;
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+.truncated-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

projects/components/src/description/description.component.test.ts

@@ -0,0 +1,33 @@
+import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
+import { DescriptionComponent } from './description.component';
+
+describe('Divider Component', () => {
+  let spectator: Spectator<DescriptionComponent>;
+
+  const createHost = createHostFactory<DescriptionComponent>({
+    component: DescriptionComponent,
+    shallow: true
+  });
+
+  test('should render the description', () => {
+    spectator = createHost('<ht-description [description] = "description"> </ht-description>', {
+      hostProps: {
+        description: 'Description text'
+      }
+    });
+    expect(spectator.query('.description')).toExist();
+    expect(spectator.query('.description-text')).toHaveText('Description text');
+  });
+
+  test('should show full description text if pressed button show more', () => {
+    spectator = createHost('<ht-description [description] = "description"> </ht-description>', {
+      hostProps: {
+        description: 'Description text'
+      }
+    });
+
+    expect(spectator.component.isDescriptionTextToggled).toBeFalsy();
+    spectator.component.toggleDescriptionText();
+    expect(spectator.component.isDescriptionTextToggled).toBeTruthy();
+  });
+});

projects/components/src/description/description.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ht-description',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./description.component.scss'],
+  template: `
+    <div class="description">
+      <div
+        class="description-text"
+        [ngClass]="{ 'truncated-text': !this.isDescriptionTextToggled }"
+        data-sensitive-pii
+        #eventDescription
+      >
+        {{ description }}
+        <span *ngIf="this.isDescriptionTextToggled" (click)="this.toggleDescriptionText()" class="description-button"
+          >show less</span
+        >
+      </div>
+      <div
+        class="description-button"
+        *ngIf="eventDescription.offsetWidth < eventDescription.scrollWidth && !this.isDescriptionTextToggled"
+        (click)="this.toggleDescriptionText()"
+      >
+        show more
+      </div>
+    </div>
+  `
+})
+export class DescriptionComponent {
+  public isDescriptionTextToggled: boolean = false;
+
+  @Input()
+  public description!: string;
+
+  public toggleDescriptionText(): void {
+    this.isDescriptionTextToggled = !this.isDescriptionTextToggled;
+  }
+}

projects/components/src/description/description.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DescriptionComponent } from './description.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [DescriptionComponent],
+  exports: [DescriptionComponent]
+})
+export class DescriptionModule {}

projects/components/src/public-api.ts

@@ -304,3 +304,7 @@ export * from './confirmation/confirmation.service';
 // Notification
 export * from './notification/notification.service';
 export * from './notification/notification.module';
+
+// Description
+export * from './description/description.component';
+export * from './description/description.module';