feat(design): convert sidebar component to standalone (#3054)

Author: xelaint

libs/design/sidebar/README.md

@@ -4,12 +4,53 @@ Sidebar is a component used to display additional information to the side of a p
 ## Overview
 Sidebars are often used for navigation, but it's built to be flexible and extensible so that it can be used for any content. Sidebar supports a header and footer component with minimal default styling.
 
-### Basic sidebar
+## Usage
+
+### Within a standalone component
+To use sidebar in a standalone component, import `DAFF_SIDEBAR_COMPONENTS` directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_SIDEBAR_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use sidebar in a module, import `DaffSidebarModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffSidebarModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
+## Basic sidebar
 The default setting for sidebar is `mode="side"` and `side="left"`.
 
 <design-land-example-viewer-container example="basic-sidebar"></design-land-example-viewer-container>
 
-### Implementing the main and sidebar content
+## Implementing the main and sidebar content
 The main and sidebar content should be placed inside of the `<daff-sidebar-viewport>`. The sidebar content should be placed inside of the `<daff-sidebar>`.
 
 A viewport navigation can either be:
@@ -50,17 +91,17 @@ A viewport navigation can either be:
 </daff-sidebar-viewport>
 ```
 
-#### Required Imports
+### Required Imports
 The `BrowserAnimationsModule` or `NoopAnimationsModule` must be imported in the particular Angular `@NgModule` the sidebar is used in for the sidebar to render and work properly.
 
-### Header and footer
+## Header and footer
 The `<daff-sidebar-header>` includes optional title (`[daffSidebarHeaderTitle]`) and action (`[daffSidebarHeaderAction]`) selectors, and a slot to render custom content. The action selector should be used along with the `<daff-icon-button>` (view [Button Documentation](/libs/design/button/README.md)) to make sure that the action is positioned correctly and it passes WCAG guidelines.
 
 The `<daff-sidebar-footer>` is a "holder" component with minimal default styling. Its main purpose is to position the footer at the bottom of the sidebar, allowing the sidebar's content to overflow and scroll while ensuring that the footer remains constantly visible.
 
 Both the header and footer are optional components that will not render in the DOM if they are not used.
 
-### Opening and closing a sidebar
+## Opening and closing a sidebar
 THe `open` property is used to set the open state for a sidebar.
 
 By default, sidebar supports two methods of closing itself: clicking on the backdrop of the sidebar viewport or pressing `ESC` when the sidebar has focus.
@@ -69,7 +110,7 @@ By default, sidebar supports two methods of closing itself: clicking on the back
 | `(backdropClicked)` | Set on the `<daff-sidebar-viewport>` |
 | `(escapePressed)`   | Set on the `<daff-sidebar>`          |
 
-### Modes
+## Modes
 `<daff-sidebar>` can be rendered four different ways by using the `mode` property. If `mode` is not specified, `side` is used by default.
 
 | Mode       | Description                                                                                          |
@@ -79,27 +120,27 @@ By default, sidebar supports two methods of closing itself: clicking on the back
 | over       | Sidebar slides over the rest of the content in the viewport and covering it with a backdrop          |
 | under      | Sidebar freezes in place and and the content slides above it, while also being covered by a backdrop |
 
-#### Over sidebar
+### Over sidebar
 <design-land-example-viewer-container example="over-sidebar"></design-land-example-viewer-container>
 
-#### Under sidebar
+### Under sidebar
 <design-land-example-viewer-container example="under-sidebar"></design-land-example-viewer-container>
 
-#### Two fixed sidebars on either side
+### Two fixed sidebars on either side
 <design-land-example-viewer-container example="two-fixed-sidebars-either-side"></design-land-example-viewer-container>
 
-#### Fixed and over sidebar
+### Fixed and over sidebar
 <design-land-example-viewer-container example="fixed-and-over-sidebar"></design-land-example-viewer-container>
 
-### Sides
+## Sides
 `<daff-sidebar>` can be positioned on either side of a screen by using the `side` property. If `side` is not specificed, `left` is used by default.
 
 | Side  | Description                                    |
 | ----- | ---------------------------------------------- |
 | left  | Places sidebar on the left side of the screen  |
 | right | Places sidebar on the right side of the screen |
 
-### Custom styles
+## Custom styles
 
 #### Setting a sidebar's width
 The default size of a sidebar is `240px`. The `--daff-sidebar-left-width` and `--daff-sidebar-right-width` variables can be used to change the width of a left or right sidebar. These variables need to be defined on `<daff-sidebar-viewport>` or on the shadow DOM.
@@ -127,7 +168,7 @@ daff-sidebar-viewport {
 }
 ```
 
-### Changing a side-fixed sidebar's top offset position
+## Changing a side-fixed sidebar's top offset position
 The default offset position of a sidebar is `0px`. The `--daff-sidebar-side-fixed-top-shift` variable can be used to adjust the top offset position for a primary sidebar and its viewport content.
 
 ```scss
@@ -136,17 +177,17 @@ body {
 }
 ```
 
-### Examples
+## Examples
 #### Over and under sidebars
 <design-land-example-viewer-container example="over-and-under-sidebars"></design-land-example-viewer-container>
 
-#### Side fixed sidebar
+### Side fixed sidebar
 <design-land-example-viewer-container example="side-fixed-sidebar"></design-land-example-viewer-container>
 
-### Accessibility
+## Accessibility
 A meaningful `role` should be set on all sidebars depending on how they are used.
 
 When the `<daff-sidebar-header>` is not used or there is no title for the sidebar, a meaningful `aria-label` should be set to describe the sidebar.
 
-#### Focus
+### Focus
 Focus trapping is enabled for `over` and `under` modes, and disabled for `side` and `side-fixed` modes. When a sidebar is opened, the first tabbable element within the will receive focus. When a sidebar is opened, the first tabbable element within the will receive focus. When a sidebar is closed, the element that was focused before the sidebar was opened will be re-focused.

libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.ts

@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffSidebarModule } from '@daffodil/design/sidebar';
+import { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -12,8 +12,8 @@ import { DaffSidebarModule } from '@daffodil/design/sidebar';
   styleUrls: ['./basic-sidebar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffSidebarModule],
+  imports: [
+    DAFF_SIDEBAR_COMPONENTS,
+  ],
 })
-export class BasicSidebarComponent {
-
-}
+export class BasicSidebarComponent {}

libs/design/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.ts

@@ -10,7 +10,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffSidebarModule } from '@daffodil/design/sidebar';
+import { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -20,8 +20,7 @@ import { DaffSidebarModule } from '@daffodil/design/sidebar';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffSidebarModule,
-    DaffButtonModule,
+    DAFF_SIDEBAR_COMPONENTS,
     FaIconComponent,
     ReactiveFormsModule,
     DAFF_BUTTON_COMPONENTS,

libs/design/sidebar/examples/src/side-fixed-sidebar/side-fixed-sidebar.component.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 
 import { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';
-import { DaffSidebarModule } from '@daffodil/design/sidebar';
+import { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -13,6 +13,6 @@ import { DaffSidebarModule } from '@daffodil/design/sidebar';
   styleUrls: ['side-fixed-sidebar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffSidebarModule, DAFF_NAVBAR_COMPONENTS],
+  imports: [DAFF_SIDEBAR_COMPONENTS, DAFF_NAVBAR_COMPONENTS],
 })
 export class SideFixedSidebarComponent {}

libs/design/sidebar/examples/src/sidebar-with-sticky-content/sidebar-with-sticky-content.component.ts

@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffSidebarModule } from '@daffodil/design/sidebar';
+import { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -12,6 +12,8 @@ import { DaffSidebarModule } from '@daffodil/design/sidebar';
   styleUrls: ['sidebar-with-sticky-content.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffSidebarModule],
+  imports: [
+    DAFF_SIDEBAR_COMPONENTS,
+  ],
 })
 export class SidebarWithStickyContentComponent {}

libs/design/sidebar/src/public_api.ts

@@ -18,3 +18,4 @@ export {
 } from './helper/sidebar-side';
 export * from './helper/is-docked-mode';
 export * from './helper/is-floating-mode';
+export { DAFF_SIDEBAR_COMPONENTS } from './sidebar';

libs/design/sidebar/src/sidebar-footer/sidebar-footer.component.spec.ts

@@ -11,22 +11,24 @@ import { By } from '@angular/platform-browser';
 
 import { DaffSidebarFooterComponent } from './sidebar-footer.component';
 
-@Component({ template: `
-  <daff-sidebar-footer>Footer</daff-sidebar-footer>
-` })
+@Component({
+  template: `<daff-sidebar-footer>Footer</daff-sidebar-footer>`,
+  standalone: true,
+  imports: [
+    DaffSidebarFooterComponent,
+  ],
+})
 class WrapperComponent {}
 
 describe('@daffodil/design/sidebar | DaffSidebarFooterComponent', () => {
   let wrapper: WrapperComponent;
   let fixture: ComponentFixture<WrapperComponent>;
-  let sidebarFooter: DaffSidebarFooterComponent;
-  let sidebarFooterDe: DebugElement;
+  let de: DebugElement;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         WrapperComponent,
-        DaffSidebarFooterComponent,
       ],
     })
       .compileComponents();
@@ -36,12 +38,17 @@ describe('@daffodil/design/sidebar | DaffSidebarFooterComponent', () => {
     fixture = TestBed.createComponent(WrapperComponent);
     wrapper = fixture.componentInstance;
 
-    sidebarFooterDe = fixture.debugElement.query(By.css('daff-sidebar-footer'));
-    sidebarFooter = sidebarFooterDe.componentInstance;
+    de = fixture.debugElement.query(By.css('daff-sidebar-footer'));
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(wrapper).toBeTruthy();
   });
+
+  it('should add a class of `daff-sidebar-footer` to its host element', () => {
+    expect(de.classes).toEqual(jasmine.objectContaining({
+      'daff-sidebar-footer': true,
+    }));
+  });
 });

libs/design/sidebar/src/sidebar-footer/sidebar-footer.component.ts

@@ -9,6 +9,7 @@ import {
   template: '<ng-content></ng-content>',
   styleUrls: ['./sidebar-footer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class DaffSidebarFooterComponent {
   @HostBinding('class.daff-sidebar-footer') class = true;

libs/design/sidebar/src/sidebar-header/sidebar-header-action/sidebar-header-action.directive.spec.ts

@@ -12,9 +12,11 @@ import { By } from '@angular/platform-browser';
 import { DaffSidebarHeaderActionDirective } from './sidebar-header-action.directive';
 
 @Component({
-  template: `
-    <div daffSidebarHeaderAction>Action</div>
-  `,
+  template: `<div daffSidebarHeaderAction>Action</div>`,
+  standalone: true,
+  imports: [
+    DaffSidebarHeaderActionDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +27,7 @@ describe('@daffodil/design/sidebar | DaffSidebarHeaderActionDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffSidebarHeaderActionDirective,
+      imports: [
         WrapperComponent,
       ],
     })
@@ -44,11 +45,9 @@ describe('@daffodil/design/sidebar | DaffSidebarHeaderActionDirective', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  describe('[daffSidebarHeaderAction]',() => {
-    it('should add a class of `daff-sidebar-header__action` to its host element', () => {
-      expect(de.classes).toEqual(jasmine.objectContaining({
-        'daff-sidebar-header__action': true,
-      }));
-    });
+  it('should add a class of `daff-sidebar-header__action` to the host element', () => {
+    expect(de.classes).toEqual(jasmine.objectContaining({
+      'daff-sidebar-header__action': true,
+    }));
   });
 });

libs/design/sidebar/src/sidebar-header/sidebar-header-action/sidebar-header-action.directive.ts

@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffSidebarHeaderAction]',
+  standalone: true,
 })
 export class DaffSidebarHeaderActionDirective {
   /**

libs/design/sidebar/src/sidebar-header/sidebar-header-title/sidebar-header-title.directive.spec.ts

@@ -12,9 +12,11 @@ import { By } from '@angular/platform-browser';
 import { DaffSidebarHeaderTitleDirective } from './sidebar-header-title.directive';
 
 @Component({
-  template: `
-    <h2 daffSidebarHeaderTitle>Title</h2>
-  `,
+  template: `<h2 daffSidebarHeaderTitle>Title</h2>`,
+  standalone: true,
+  imports: [
+    DaffSidebarHeaderTitleDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +27,7 @@ describe('@daffodil/design/sidebar | DaffSidebarHeaderTitleDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffSidebarHeaderTitleDirective,
+      imports: [
         WrapperComponent,
       ],
     })
@@ -44,11 +45,9 @@ describe('@daffodil/design/sidebar | DaffSidebarHeaderTitleDirective', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  describe('[daffSidebarHeaderTitle]',() => {
-    it('should add a class of `daff-sidebar-header__title` to its host element', () => {
-      expect(de.classes).toEqual(jasmine.objectContaining({
-        'daff-sidebar-header__title': true,
-      }));
-    });
+  it('should add a class of `daff-sidebar-header__title` to the host element', () => {
+    expect(de.classes).toEqual(jasmine.objectContaining({
+      'daff-sidebar-header__title': true,
+    }));
   });
 });

libs/design/sidebar/src/sidebar-header/sidebar-header-title/sidebar-header-title.directive.ts

@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffSidebarHeaderTitle]',
+  standalone: true,
 })
 export class DaffSidebarHeaderTitleDirective {
   /**