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

Author: xelaint

libs/design/navbar/README.md

@@ -7,6 +7,47 @@ The navbar contains minimal layout styles, allowing the content within it to be
 ## Basic Navbar
 <design-land-example-viewer-container example="basic-navbar"></design-land-example-viewer-container>
 
+## Usage
+
+### Within a standalone component
+To use navbar in a standalone component, import `DAFF_NAVBAR_COMPONENTS` directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_NAVBAR_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use navbar in a module, import `DaffNavbarModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffNavbarModule } from '@daffodil/design/navbar';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffNavbarModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Theming
 The default background color of a navbar is light gray, but it can be updated to one of the supported colors by using the `color` property.
 

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

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffNavbarModule } from '@daffodil/design/navbar';
+import { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -14,7 +14,7 @@ import { DaffNavbarModule } from '@daffodil/design/navbar';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffNavbarModule,
+    DAFF_NAVBAR_COMPONENTS,
     DAFF_BUTTON_COMPONENTS,
   ],
 })

libs/design/navbar/examples/src/contained-navbar/contained-navbar.component.ts

@@ -5,7 +5,7 @@ import {
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
 import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
-import { DaffNavbarModule } from '@daffodil/design/navbar';
+import { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -15,7 +15,7 @@ import { DaffNavbarModule } from '@daffodil/design/navbar';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffNavbarModule,
+    DAFF_NAVBAR_COMPONENTS,
     DAFF_CONTAINER_COMPONENTS,
     DAFF_BUTTON_COMPONENTS,
   ],

libs/design/navbar/examples/src/navbar-theming/navbar-theming.component.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/forms';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffNavbarModule } from '@daffodil/design/navbar';
+import { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -19,7 +19,7 @@ import { DaffNavbarModule } from '@daffodil/design/navbar';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffNavbarModule,
+    DAFF_NAVBAR_COMPONENTS,
     DAFF_BUTTON_COMPONENTS,
     ReactiveFormsModule,
     NgFor,

libs/design/navbar/examples/src/raised-navbar/raised-navbar.component.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffNavbarModule } from '@daffodil/design/navbar';
+import { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -14,7 +14,7 @@ import { DaffNavbarModule } from '@daffodil/design/navbar';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffNavbarModule,
+    DAFF_NAVBAR_COMPONENTS,
     DAFF_BUTTON_COMPONENTS,
   ],
 })

libs/design/navbar/src/navbar.module.ts

@@ -1,9 +1,14 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { DaffNavbarComponent } from './navbar/navbar.component';
 
+/**
+ * @deprecated in favor of {@link DAFF_NAVBAR_COMPONENTS}
+ */
 @NgModule({
-  declarations: [
+  imports: [
+    CommonModule,
     DaffNavbarComponent,
   ],
   exports: [

libs/design/navbar/src/navbar.ts

@@ -0,0 +1,5 @@
+import { DaffNavbarComponent } from './navbar/navbar.component';
+
+export const DAFF_NAVBAR_COMPONENTS = <const> [
+  DaffNavbarComponent,
+];

libs/design/navbar/src/navbar/navbar.component.spec.ts

@@ -13,7 +13,13 @@ import { DaffPalette } from '@daffodil/design';
 
 import { DaffNavbarComponent } from './navbar.component';
 
-@Component({ template: '<nav daff-navbar [color]="color" [raised]="raised"></ nav>' })
+@Component({
+  template: '<nav daff-navbar [color]="color" [raised]="raised"></ nav>',
+  standalone: true,
+  imports: [
+    DaffNavbarComponent,
+  ],
+})
 class WrapperComponent {
   color: DaffPalette;
   raised = false;
@@ -26,9 +32,8 @@ describe('@daffodil/design/navbar | DaffNavbarComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         WrapperComponent,
-        DaffNavbarComponent,
       ],
     })
       .compileComponents();
@@ -45,10 +50,8 @@ describe('@daffodil/design/navbar | DaffNavbarComponent', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  describe('<nav daff-navbar>', () => {
-    it('should add a class of "daff-navbar" to the host element', () => {
-      expect(de.nativeElement.classList.contains('daff-navbar')).toBeTruthy();
-    });
+  it('should add a class of "daff-navbar" to the host element', () => {
+    expect(de.nativeElement.classList.contains('daff-navbar')).toBeTruthy();
   });
 
   describe('using the color property of navbar', () => {

libs/design/navbar/src/navbar/navbar.component.ts

@@ -10,9 +10,6 @@ import {
   DaffManageContainerLayoutDirective,
 } from '@daffodil/design';
 
-/**
- * @inheritdoc
- */
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'nav[daff-navbar]',
@@ -26,6 +23,7 @@ import {
     },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class DaffNavbarComponent {
 

libs/design/navbar/src/public_api.ts

@@ -1,2 +1,3 @@
 export { DaffNavbarModule } from './navbar.module';
 export * from './navbar/navbar.component';
+export { DAFF_NAVBAR_COMPONENTS } from './navbar';

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

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