feat(design): convert modal component to standalone (#3131)

Author: xelaint

apps/design-land/src/app/modal/modal.component.spec.ts

@@ -4,8 +4,6 @@ import {
   TestBed,
 } from '@angular/core/testing';
 
-import { DaffModalModule } from '@daffodil/design/modal';
-
 import { DesignLandModalComponent } from './modal.component';
 
 describe('DesignLandModalComponent', () => {
@@ -14,9 +12,8 @@ describe('DesignLandModalComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ DesignLandModalComponent ],
-      imports: [
-        DaffModalModule,
+      declarations: [
+        DesignLandModalComponent,
       ],
     })
       .compileComponents();

libs/design/modal/README.md

@@ -4,6 +4,47 @@ Modal is a dynamically rendered element that floats above the rest of a page's c
 ## Basic Modal
 <design-land-example-viewer-container example="basic-modal"></design-land-example-viewer-container>
 
+## Usage
+
+### Within a standalone component
+To use modal in a standalone component, import `DAFF_MODAL_COMPONENTS` directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_MODAL_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use modal in a module, import `DaffModalModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffModalModule } from '@daffodil/design/modal';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffModalModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Supported Content Types
 A modal includes minimally pre-styled components and directives to help structure the content in your modal.
 

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

@@ -6,7 +6,7 @@ import {
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
 import {
   DaffModalComponent,
-  DaffModalModule,
+  DAFF_MODAL_COMPONENTS,
   DaffModalService,
 } from '@daffodil/design/modal';
 
@@ -20,7 +20,10 @@ import { BasicModalContentComponent } from './modal-content.component';
   standalone: true,
   imports: [
     DAFF_BUTTON_COMPONENTS,
-    DaffModalModule,
+    DAFF_MODAL_COMPONENTS,
+  ],
+  providers: [
+    DaffModalService,
   ],
 })
 export class BasicModalComponent {

libs/design/modal/examples/src/basic-modal/modal-content.component.ts

@@ -3,16 +3,19 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffButtonModule } from '@daffodil/design/button';
-import { DaffModalModule } from '@daffodil/design/modal';
+import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DAFF_MODAL_COMPONENTS } from '@daffodil/design/modal';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'basic-modal-content',
   templateUrl: './modal-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffModalModule, DaffButtonModule],
+  imports: [
+    DAFF_MODAL_COMPONENTS,
+    DAFF_BUTTON_COMPONENTS,
+  ],
 })
 export class BasicModalContentComponent {
 

libs/design/modal/src/modal-actions/modal-actions.component.spec.ts

@@ -1,31 +1,61 @@
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
 import {
   waitForAsync,
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { DaffModalActionsComponent } from './modal-actions.component';
 
+@Component({
+  template: `
+    <daff-modal-actions>
+      <button>Close</button>
+      <button>Save</button>
+    </daff-modal-actions>
+  `,
+  standalone: true,
+  imports: [
+    DaffModalActionsComponent,
+  ],
+})
+class WrapperComponent {}
+
 describe('@daffodil/design/modal | DaffModalActionsComponent', () => {
+  let wrapper: WrapperComponent;
+  let fixture: ComponentFixture<WrapperComponent>;
   let component: DaffModalActionsComponent;
-  let fixture: ComponentFixture<DaffModalActionsComponent>;
+  let de: DebugElement;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffModalActionsComponent,
+      imports: [
+        WrapperComponent,
       ],
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DaffModalActionsComponent);
-    component = fixture.componentInstance;
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+
+    de = fixture.debugElement.query(By.css('daff-modal-actions'));
+    component = de.componentInstance;
     fixture.detectChanges();
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should add a class of "daff-modal-actions" to the host element', () => {
+    expect(de.classes).toEqual(jasmine.objectContaining({
+      'daff-modal-actions': true,
+    }));
   });
 });

libs/design/modal/src/modal-actions/modal-actions.component.ts

@@ -8,6 +8,7 @@ import {
   selector: 'daff-modal-actions',
   template: '<ng-content></ng-content>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class DaffModalActionsComponent {
   @HostBinding('class.daff-modal-actions') class = true;

libs/design/modal/src/modal-close/modal-close.directive.spec.ts

@@ -16,6 +16,13 @@ import { DaffModalService } from '../service/modal.service';
   template: `
     <button daffModalClose></button>
   `,
+  standalone: true,
+  imports: [
+    DaffModalCloseDirective,
+  ],
+  providers: [
+    DaffModalService,
+  ],
 })
 class WrapperComponent {}
 
@@ -26,13 +33,9 @@ describe('@daffodil/design/modal | DaffModalCloseDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffModalCloseDirective,
+      imports: [
         WrapperComponent,
       ],
-      providers: [
-        DaffModalService,
-      ],
     })
       .compileComponents();
   }));

libs/design/modal/src/modal-close/modal-close.directive.ts

@@ -16,6 +16,7 @@ import { DaffModalService } from '../service/modal.service';
  */
 @Directive({
   selector: 'button[daffModalClose]',
+  standalone: true,
 })
 
 export class DaffModalCloseDirective {

libs/design/modal/src/modal-content/modal-content.component.spec.ts

@@ -1,31 +1,60 @@
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
 import {
   waitForAsync,
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { DaffModalContentComponent } from './modal-content.component';
 
+@Component({
+  template: `
+    <daff-modal-content>
+      Content
+    </daff-modal-content>
+  `,
+  standalone: true,
+  imports: [
+    DaffModalContentComponent,
+  ],
+})
+class WrapperComponent {}
+
 describe('@daffodil/design/modal | DaffModalContentComponent', () => {
+  let wrapper: WrapperComponent;
+  let fixture: ComponentFixture<WrapperComponent>;
   let component: DaffModalContentComponent;
-  let fixture: ComponentFixture<DaffModalContentComponent>;
+  let de: DebugElement;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffModalContentComponent,
+      imports: [
+        WrapperComponent,
       ],
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DaffModalContentComponent);
-    component = fixture.componentInstance;
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+
+    de = fixture.debugElement.query(By.css('daff-modal-content'));
+    component = de.componentInstance;
     fixture.detectChanges();
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should add a class of "daff-modal-content" to the host element', () => {
+    expect(de.classes).toEqual(jasmine.objectContaining({
+      'daff-modal-content': true,
+    }));
   });
 });

libs/design/modal/src/modal-content/modal-content.component.ts

@@ -8,6 +8,7 @@ import {
   selector: 'daff-modal-content',
   template: '<ng-content></ng-content>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class DaffModalContentComponent {
   @HostBinding('class.daff-modal-content') class = true;

libs/design/modal/src/modal-header/modal-header.component.spec.ts

@@ -10,9 +10,17 @@ import {
 import { By } from '@angular/platform-browser';
 
 import { DaffModalHeaderComponent } from './modal-header.component';
+import { DaffModalService } from '../service/modal.service';
 
 @Component ({
   template: `<daff-modal-header [dismissible]="dismissible"></daff-modal-header>`,
+  standalone: true,
+  imports: [
+    DaffModalHeaderComponent,
+  ],
+  providers: [
+    DaffModalService,
+  ],
 })
 
 class WrapperComponent {
@@ -27,8 +35,7 @@ describe('@daffodil/design/modal | DaffModalHeaderComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffModalHeaderComponent,
+      imports: [
         WrapperComponent,
       ],
     })
@@ -59,5 +66,13 @@ describe('@daffodil/design/modal | DaffModalHeaderComponent', () => {
     it('should be set to true by default', () => {
       expect(component.dismissible).toBe(true);
     });
+
+    it('should hide the close button if dismissible is false', () => {
+      wrapper.dismissible = false;
+      fixture.detectChanges();
+
+      expect(component.dismissible).toBe(false);
+      expect(fixture.debugElement.query(By.css('.daff-modal-header__dismiss-button'))).toBeFalsy();
+    });
   });
 });

libs/design/modal/src/modal-header/modal-header.component.ts

@@ -1,17 +1,30 @@
+import { NgIf } from '@angular/common';
 import {
   Component,
   ViewEncapsulation,
   HostBinding,
   ChangeDetectionStrategy,
   Input,
 } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 
+import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+
+import { DaffModalCloseDirective } from '../modal-close/modal-close.directive';
+
 @Component({
   selector: 'daff-modal-header',
   templateUrl: './modal-header.component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    NgIf,
+    DAFF_BUTTON_COMPONENTS,
+    FaIconComponent,
+    DaffModalCloseDirective,
+  ],
 })
 export class DaffModalHeaderComponent {
   faXmark = faXmark;