feat(design): clean up sidebar header UI (#3453)

graycoreio · Jan 17, 2025 · 814c33f · 814c33f
1 parent 0fda495
commit 814c33f
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 48 deletions.
diff --git a/apps/daffio/src/app/core/nav/sidebar-body/component.scss b/apps/daffio/src/app/core/nav/sidebar-body/component.scss
diff --git a/apps/daffio/src/app/core/nav/sidebar-body/component.ts b/apps/daffio/src/app/core/nav/sidebar-body/component.ts
@@ -19,7 +19,6 @@ import { DaffioNavLink } from '../link/type';
 @Component({
   selector: 'daffio-nav-links-sidebar-body',
   templateUrl: './component.html',
-  styleUrls: ['./component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [

diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.html b/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.html
@@ -1,5 +1 @@
-<daff-sidebar-header>
-	<button daff-icon-button color="theme-contrast" daffSidebarHeaderAction (click)="close()">
-		<fa-icon [icon]="faTimes"></fa-icon>
-	</button>
-</daff-sidebar-header>
+<daff-sidebar-header [dismissible]="true" (closeSidebar)="close()"></daff-sidebar-header>
diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.ts b/apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.ts
@@ -2,7 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
 import { DaffioSidebarService } from '../../services/sidebar.service';
 
@@ -12,8 +11,6 @@ import { DaffioSidebarService } from '../../services/sidebar.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffioSidebarHeaderComponent {
-  faTimes = faTimes;
-
   constructor(
     private sidebarService: DaffioSidebarService,
   ) {}

diff --git a/libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.html b/libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.html
@@ -1,5 +1,8 @@
 <daff-sidebar-viewport>
   <daff-sidebar class="basic-sidebar">
+    <daff-sidebar-header [dismissible]="true">
+      Sidebar Title
+    </daff-sidebar-header>
     Sidebar content
   </daff-sidebar>
   <div class="basic-sidebar__content">

diff --git a/...esign/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.html b/...esign/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.html
@@ -1,9 +1,6 @@
 <daff-sidebar-viewport (backdropClicked)="closeSidebar()">
   <daff-sidebar class="over-sidebar" [mode]="modeControl.value" [side]="sideControl.value" [open]="open" (escapePressed)="closeSidebar()">
-    <daff-sidebar-header>
-      <button daff-icon-button color="theme-contrast" daffSidebarHeaderAction (click)="closeSidebar()">
-        <fa-icon [icon]="faTimes" size="sm"></fa-icon>
-      </button>
+    <daff-sidebar-header [dismissible]="true">
       <div daffSidebarHeaderTitle>Title</div>
     </daff-sidebar-header>
     <div class="over-and-under-sidebars__sidebar-content">

diff --git a/libs/design/sidebar/src/sidebar-header/sidebar-header.component.html b/libs/design/sidebar/src/sidebar-header/sidebar-header.component.html
@@ -1,3 +1,6 @@
-<ng-content select="[daffSidebarHeaderAction]"></ng-content>
-<ng-content select="[daffSidebarHeaderTitle]"></ng-content>
-<ng-content></ng-content>
+<button class="daff-sidebar-header__close-icon" aria-label="Close Sidebar" *ngIf="dismissible" (click)="onCloseSidebar($event)">
+  <fa-icon [icon]="faTimes" [fixedWidth]="true" size="lg"></fa-icon>
+</button>
+<div class="daff-sidebar-header__content">
+  <ng-content></ng-content>
+</div>
diff --git a/libs/design/sidebar/src/sidebar-header/sidebar-header.component.scss b/libs/design/sidebar/src/sidebar-header/sidebar-header.component.scss
@@ -1,48 +1,57 @@
 @use '../../../scss/typography' as t;
+@use '../../../scss/interactions';
 
 .daff-sidebar-header {
 	display: flex;
 	align-items: center;
 	position: relative;
+	padding: 0 1rem;
+	min-height: 3rem;
+	max-height: 3rem;
 	width: 100%;
 
-	&__action {
+	&__close-icon {
+		@include interactions.clickable();
 		position: absolute;
+		appearance: none;
+		background: none;
+		border: none;
+		color: currentColor;
+		height: 3rem;
+		margin: 0;
+		min-height: 3rem;
+		min-width: 3rem;
+		padding: 0;
+		width: 3rem;
+		left: initial;
+		right: 0;
+		top: 0;
 	}
 
-	&__title {
+	&__title,
+	&__content {
 		@include t.text-truncate();
 		font-size: 1rem;
 		line-height: 1rem;
 		font-weight: 500;
 	}
 
-	&__action + &__title {
-		margin: 0 0 0 29px;
+	&__close-icon + &__content {
+		margin: 0 1.75rem 0 0;
 	}
 }
 
 .daff-sidebar {
-	.daff-sidebar-header {
-		padding: 16px;
-
-		&__action {
-			position: absolute;
-			left: 0;
-			right: initial;
-			top: 0;
-		}
-	}
-
 	&.right {
 		.daff-sidebar-header {
-			&__action {
-				left: initial;
-				right: 0;
-			}
-
-			&__title {
-				margin: 0 29px 0 0;
+			&__close-icon {
+				left: 0;
+				right: initial;
+
+				+ .daff-sidebar-header__title,
+				+ .daff-sidebar-header__content {
+					margin: 0 0 0 1.75rem;
+				}
 			}
 		}
 	}

diff --git a/libs/design/sidebar/src/sidebar-header/sidebar-header.component.spec.ts b/libs/design/sidebar/src/sidebar-header/sidebar-header.component.spec.ts
@@ -12,13 +12,17 @@ import { By } from '@angular/platform-browser';
 import { DaffSidebarHeaderComponent } from './sidebar-header.component';
 
 @Component({
-  template: `<daff-sidebar-header>Header</daff-sidebar-header>`,
+  template: `
+    <daff-sidebar-header [dismissible]="dismissible" (closeSidebar)="closeSidebarFunction()">Header</daff-sidebar-header>`,
   standalone: true,
   imports: [
     DaffSidebarHeaderComponent,
   ],
 })
-class WrapperComponent {}
+class WrapperComponent {
+  dismissible: boolean;
+  closeSidebarFunction = () => {};
+}
 
 describe('@daffodil/design/sidebar | DaffSidebarHeaderComponent', () => {
   let wrapper: WrapperComponent;
@@ -53,4 +57,32 @@ describe('@daffodil/design/sidebar | DaffSidebarHeaderComponent', () => {
       'daff-sidebar-header': true,
     }));
   });
+
+  describe('when dismissible is set to true', () => {
+    beforeEach(() => {
+      wrapper.dismissible = true;
+      fixture.detectChanges();
+    });
+
+    it('should add a class of "dismissible" to the host element', () => {
+      expect(de.classes['dismissible']).toBeTrue();
+    });
+
+    it('should show the close icon button', () => {
+      expect(fixture.debugElement.query(By.css('.daff-sidebar-header__close-icon'))).toBeTruthy();
+    });
+  });
+
+  describe('when the close icon button is clicked', () => {
+    it('should emit closeNotification', () => {
+      wrapper.dismissible = true;
+      fixture.detectChanges();
+
+      spyOn(component.closeSidebar, 'emit');
+
+      fixture.debugElement.query(By.css('.daff-sidebar-header__close-icon')).nativeElement.click();
+
+      expect(component.closeSidebar.emit).toHaveBeenCalledWith();
+    });
+  });
 });
diff --git a/libs/design/sidebar/src/sidebar-header/sidebar-header.component.ts b/libs/design/sidebar/src/sidebar-header/sidebar-header.component.ts
@@ -1,9 +1,15 @@
+import { NgIf } from '@angular/common';
 import {
   Component,
   HostBinding,
   ChangeDetectionStrategy,
   ViewEncapsulation,
+  Input,
+  Output,
+  EventEmitter,
 } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'daff-sidebar-header',
@@ -12,8 +18,25 @@ import {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-
+  imports: [
+    FaIconComponent,
+    NgIf,
+  ],
 })
 export class DaffSidebarHeaderComponent {
+  faTimes = faTimes;
+
   @HostBinding('class.daff-sidebar-header') class = true;
+
+  /** Whether or not a sidebar header displays the close icon */
+  @Input() @HostBinding('class.dismissible') dismissible = false;
+
+  /**
+   * Output event triggered when the close icon is clicked.
+   */
+  @Output() closeSidebar: EventEmitter<void> = new EventEmitter();
+
+  onCloseSidebar(event: Event) {
+    this.closeSidebar.emit();
+  }
 }
diff --git a/libs/design/sidebar/src/sidebar/sidebar.component.scss b/libs/design/sidebar/src/sidebar/sidebar.component.scss
@@ -1,21 +1,23 @@
 @use '../helper/variables';
 @use '../../../scss/layout';
 
+$default-sidebar-width: 15rem;
+
 // stylelint-disable selector-class-pattern
 // stylelint-disable unit-no-unknown
 :host {
 	display: flex;
 	flex-direction: column;
 	flex-shrink: 0;
 	overflow-y: auto;
-	width: 240px;
+	width: $default-sidebar-width;
 
 	&.left {
-		width: var(--daff-sidebar-left-width, 240px);
+		width: var(--daff-sidebar-left-width, $default-sidebar-width);
 	}
 
 	&.right {
-		width: var(--daff-sidebar-right-width, 240px);
+		width: var(--daff-sidebar-right-width, $default-sidebar-width);
 	}
 
 	&.side-fixed {