From 0718d96c6e9376d814203eb01b42ebb41d4d457f Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Wed, 9 Feb 2022 20:47:39 +0530
Subject: [PATCH 1/3] feat: collapsible sidebar

---
 .../collapsible-sidebar.component.scss        |  0
 .../collapsible-sidebar.component.test.ts     |  0
 .../collapsible-sidebar.component.ts          | 40 +++++++++++++++++++
 .../collapsible-sidebar.module.ts             |  8 ++++
 4 files changed, 48 insertions(+)
 create mode 100644 projects/components/src/collapsible-sidebar/collapsible-sidebar.component.scss
 create mode 100644 projects/components/src/collapsible-sidebar/collapsible-sidebar.component.test.ts
 create mode 100644 projects/components/src/collapsible-sidebar/collapsible-sidebar.component.ts
 create mode 100644 projects/components/src/collapsible-sidebar/collapsible-sidebar.module.ts

diff --git a/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.scss b/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.test.ts b/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.test.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.ts b/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.ts
new file mode 100644
index 000000000..5d8629c25
--- /dev/null
+++ b/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.ts
@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';
+import { IconType } from '@hypertrace/assets-library';
+import { IconSize } from '../icon/icon-size';
+
+@Component({
+  selector: 'ht-collapsible-sidebar',
+  styleUrls: ['./collapsible-sidebar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="collapsible-sidebar">
+      <div class="label" [ngClass]="{ string: !this.isLabelATemplate }">
+        <ng-template #stringLabelTemplate>{{ this.label }}</ng-template>
+        <ng-container *ngTemplateOutlet="this.isLabelATemplate ? this.label : stringLabelTemplate"><ng-container>
+      </div>
+      <div class="content"><ng-content></ng-content></div>
+      <ht-icon class="toggle-icon" [icon]="this.isExpanded ? '${IconType.TriangleLeft}' : '${IconType.TriangleRight}'" size="${IconSize.Small}"></ht-icon>
+    </div>
+  `
+})
+export class CollapsibleSidebarComponent {
+  @Input()
+  public label: string | TemplateRef<unknown> = '';
+
+  @Input()
+  public expanded: boolean = false;
+
+  public isExpanded: boolean = false;
+
+  public ngOnChanges(): void {
+    this.isExpanded = this.expanded;
+  }
+
+  public get isLabelATemplate(): boolean {
+    return typeof this.label !== 'string';
+  }
+
+  public toggleExpanded(): void {
+    this.isExpanded = !this.isExpanded;
+  }
+}
diff --git a/projects/components/src/collapsible-sidebar/collapsible-sidebar.module.ts b/projects/components/src/collapsible-sidebar/collapsible-sidebar.module.ts
new file mode 100644
index 000000000..d79884e1b
--- /dev/null
+++ b/projects/components/src/collapsible-sidebar/collapsible-sidebar.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class CollapsibleSidebarModule {}

From fc1662a66bdbbdf917993bf24e4366a977bce7d3 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Thu, 10 Feb 2022 17:20:45 +0530
Subject: [PATCH 2/3] feat: collapsible side bar component

---
 .../collapsible-sidebar.component.scss        | 51 +++++++++++++++++++
 .../collapsible-sidebar.component.ts          | 28 ++++++----
 .../collapsible-sidebar.module.ts             |  9 ++--
 projects/components/src/public-api.ts         |  4 ++
 4 files changed, 80 insertions(+), 12 deletions(-)

diff --git a/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.scss b/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.scss
index e69de29bb..0cd40579e 100644
--- a/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.scss
+++ b/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.scss
@@ -0,0 +1,51 @@
+@import 'mixins';
+
+.collapsible-sidebar {
+  height: inherit;
+  width: 220px;
+  position: relative;
+  border: 1px solid $gray-2;
+  border-radius: 8px;
+  padding: 8px;
+
+  .content {
+    @include fill-container;
+  }
+
+  &.collapsed {
+    width: 40px;
+
+    .content {
+      @include center-contents;
+
+      * {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
+  .string-label {
+    @include body-1-medium($gray-7);
+  }
+
+  .toggle {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    bottom: clamp(10px, 10%, 72px);
+    right: -12px;
+    height: 28px;
+    width: 12px;
+    border: 1px solid $gray-2;
+    border-left-color: white;
+    border-radius: 0 6px 6px 0;
+    cursor: pointer;
+    background: white;
+    padding-right: 4px;
+
+    .icon {
+      position: relative;
+      right: 6px;
+    }
+  }
+}
diff --git a/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.ts b/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.ts
index 5d8629c25..ee0ca4918 100644
--- a/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.ts
+++ b/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, TemplateRef } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import { IconSize } from '../icon/icon-size';
 
@@ -7,17 +7,27 @@ import { IconSize } from '../icon/icon-size';
   styleUrls: ['./collapsible-sidebar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="collapsible-sidebar">
-      <div class="label" [ngClass]="{ string: !this.isLabelATemplate }">
-        <ng-template #stringLabelTemplate>{{ this.label }}</ng-template>
-        <ng-container *ngTemplateOutlet="this.isLabelATemplate ? this.label : stringLabelTemplate"><ng-container>
+    <div class="collapsible-sidebar" [ngClass]="{ collapsed: !this.isExpanded }">
+      <div class="content">
+        <ng-container *ngIf="this.isExpanded; else labelTemplate"><ng-content></ng-content></ng-container>
+      </div>
+      <ng-template #stringLabelTemplate
+        ><span class="string-label">{{ this.label }}</span></ng-template
+      >
+      <ng-template #labelTemplate
+        ><ng-container *ngTemplateOutlet="this.isLabelATemplate ? this.label : stringLabelTemplate"></ng-container
+      ></ng-template>
+      <div class="toggle" (click)="this.toggleCollapseExpand()">
+        <ht-icon
+          class="icon"
+          [icon]="this.isExpanded ? '${IconType.TriangleLeft}' : '${IconType.TriangleRight}'"
+          size="${IconSize.Small}"
+        ></ht-icon>
       </div>
-      <div class="content"><ng-content></ng-content></div>
-      <ht-icon class="toggle-icon" [icon]="this.isExpanded ? '${IconType.TriangleLeft}' : '${IconType.TriangleRight}'" size="${IconSize.Small}"></ht-icon>
     </div>
   `
 })
-export class CollapsibleSidebarComponent {
+export class CollapsibleSidebarComponent implements OnChanges {
   @Input()
   public label: string | TemplateRef<unknown> = '';
 
@@ -34,7 +44,7 @@ export class CollapsibleSidebarComponent {
     return typeof this.label !== 'string';
   }
 
-  public toggleExpanded(): void {
+  public toggleCollapseExpand(): void {
     this.isExpanded = !this.isExpanded;
   }
 }
diff --git a/projects/components/src/collapsible-sidebar/collapsible-sidebar.module.ts b/projects/components/src/collapsible-sidebar/collapsible-sidebar.module.ts
index d79884e1b..142a125db 100644
--- a/projects/components/src/collapsible-sidebar/collapsible-sidebar.module.ts
+++ b/projects/components/src/collapsible-sidebar/collapsible-sidebar.module.ts
@@ -1,8 +1,11 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { IconModule } from '../icon/icon.module';
+import { CollapsibleSidebarComponent } from './collapsible-sidebar.component';
 
 @NgModule({
-  declarations: [],
-  imports: [],
-  exports: []
+  imports: [CommonModule, IconModule],
+  declarations: [CollapsibleSidebarComponent],
+  exports: [CollapsibleSidebarComponent]
 })
 export class CollapsibleSidebarModule {}
diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts
index b1811f15a..cbdafa48e 100644
--- a/projects/components/src/public-api.ts
+++ b/projects/components/src/public-api.ts
@@ -20,6 +20,10 @@ export { ButtonRole, ButtonSize, ButtonStyle } from './button/button';
 export * from './checkbox/checkbox.component';
 export * from './checkbox/checkbox.module';
 
+// Collapsible sidebar
+export * from './collapsible-sidebar/collapsible-sidebar.component';
+export * from './collapsible-sidebar/collapsible-sidebar.module';
+
 // Combo Box
 export * from './combo-box/combo-box.module';
 export * from './combo-box/combo-box.component';

From bed4ec48302ad6c90002b5620d6cfc42a1aeeea6 Mon Sep 17 00:00:00 2001
From: Sandeep Kumar Sharma <sandeep.sharma@traceable.ai>
Date: Thu, 10 Feb 2022 17:22:19 +0530
Subject: [PATCH 3/3] fix: add tests

---
 .../collapsible-sidebar.component.test.ts     | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.test.ts b/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.test.ts
index e69de29bb..a251c8840 100644
--- a/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.test.ts
+++ b/projects/components/src/collapsible-sidebar/collapsible-sidebar.component.test.ts
@@ -0,0 +1,31 @@
+import { fakeAsync } from '@angular/core/testing';
+import { IconType } from '@hypertrace/assets-library';
+import { createHostFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { IconComponent } from '../icon/icon.component';
+import { CollapsibleSidebarComponent } from './collapsible-sidebar.component';
+
+describe('Collapsible Sidebar Component', () => {
+  const createHost = createHostFactory({
+    component: CollapsibleSidebarComponent,
+    shallow: true,
+    declarations: [MockComponent(IconComponent)]
+  });
+
+  test('should render content correclty', fakeAsync(() => {
+    const spectator = createHost(
+      `<ht-collapsible-sidebar label="test-label"><div class="test-content"></div></ht-collapsible-sidebar>`
+    );
+
+    expect(spectator.query(IconComponent)?.icon).toBe(IconType.TriangleRight);
+    expect(spectator.query('.test-content')).not.toExist();
+    expect(spectator.query('.string-label')).toHaveText('test-label');
+
+    spectator.click(spectator.query('.toggle') as Element);
+    spectator.tick();
+
+    expect(spectator.query(IconComponent)?.icon).toBe(IconType.TriangleLeft);
+    expect(spectator.query('.test-content')).toExist();
+    expect(spectator.query('.string-label')).not.toExist();
+  }));
+});