diff --git a/apps/daffio/src/app/core/nav/sidebar-body/component.scss b/apps/daffio/src/app/core/nav/sidebar-body/component.scss
deleted file mode 100644
index cd42da5c54..0000000000
--- a/apps/daffio/src/app/core/nav/sidebar-body/component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-:host {
- display: block;
- margin: 16px 0 0;
-}
diff --git a/apps/daffio/src/app/core/nav/sidebar-body/component.ts b/apps/daffio/src/app/core/nav/sidebar-body/component.ts
index 9e144b03b3..a647c1af6a 100644
--- 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
index 7bfa9dc628..846aac8b49 100644
--- 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>
\ No newline at end of file
+<daff-sidebar-header [dismissible]="true" (closeSidebar)="close()"></daff-sidebar-header>
\ No newline at end of file
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
index eefbb38421..ee9de19546 100644
--- 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
index 7eec23ab12..0330ecae31 100644
--- 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/libs/design/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.html b/libs/design/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.html
index e176000f14..7fa4c38bd6 100644
--- a/libs/design/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.html
+++ b/libs/design/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
index 28d3dcc5fb..d8bd0c6302 100644
--- 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>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/libs/design/sidebar/src/sidebar-header/sidebar-header.component.scss b/libs/design/sidebar/src/sidebar-header/sidebar-header.component.scss
index 7a5b0eae90..34042e7dec 100644
--- 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
index 14f0388b39..cf3c54d3f9 100644
--- 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
index d730614800..b9bdc70f09 100644
--- 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
index e28c44bc8c..364572eb12 100644
--- a/libs/design/sidebar/src/sidebar/sidebar.component.scss
+++ b/libs/design/sidebar/src/sidebar/sidebar.component.scss
@@ -1,6 +1,8 @@
@use '../helper/variables';
@use '../../../scss/layout';
+$default-sidebar-width: 15rem;
+
// stylelint-disable selector-class-pattern
// stylelint-disable unit-no-unknown
:host {
@@ -8,14 +10,14 @@
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 {