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

graycoreio · Sep 27, 2024 · 7ca68fd · 7ca68fd
1 parent dcf8f5c
commit 7ca68fd
Show file tree

Hide file tree

Showing 19 changed files with 109 additions and 23 deletions.
diff --git a/libs/design/notification/README.md b/libs/design/notification/README.md
@@ -7,6 +7,47 @@ Notifications are used to display short messages that provide context in close p
 ### Default Notification
 <design-land-example-viewer-container example="default-notification"></design-land-example-viewer-container>
 
+## Usage
+
+### Within a standalone component
+To use notification in a standalone component, import `DAFF_NOTIFICATION_COMPONENTS` directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_NOTIFICATION_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use notification in a module, import `DaffNotificationModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffNotificationModule } from '@daffodil/design/notification';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffNotificationModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Supported Content Types
 
 ### Icon

diff --git a/libs/design/notification/examples/src/default-notification/default-notification.component.ts b/libs/design/notification/examples/src/default-notification/default-notification.component.ts
@@ -8,7 +8,7 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { DaffPrefixSuffixModule } from '@daffodil/design';
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffNotificationModule } from '@daffodil/design/notification';
+import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -18,7 +18,7 @@ import { DaffNotificationModule } from '@daffodil/design/notification';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffNotificationModule,
+    DAFF_NOTIFICATION_COMPONENTS,
     FaIconComponent,
     DaffPrefixSuffixModule,
     DAFF_BUTTON_COMPONENTS,

diff --git a/.../notification/examples/src/dismissible-notification/dismissible-notification.component.ts b/.../notification/examples/src/dismissible-notification/dismissible-notification.component.ts
@@ -7,7 +7,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { DaffPrefixSuffixModule } from '@daffodil/design';
-import { DaffNotificationModule } from '@daffodil/design/notification';
+import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -22,7 +22,7 @@ import { DaffNotificationModule } from '@daffodil/design/notification';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffNotificationModule,
+    DAFF_NOTIFICATION_COMPONENTS,
     FaIconComponent,
     DaffPrefixSuffixModule,
     NgIf,

diff --git a/...otification/examples/src/notification-orientations/notification-orientations.component.ts b/...otification/examples/src/notification-orientations/notification-orientations.component.ts
@@ -15,7 +15,7 @@ import {
 
 import { DaffPrefixSuffixModule } from '@daffodil/design';
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffNotificationModule } from '@daffodil/design/notification';
+import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -25,7 +25,7 @@ import { DaffNotificationModule } from '@daffodil/design/notification';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffNotificationModule,
+    DAFF_NOTIFICATION_COMPONENTS,
     FaIconComponent,
     DaffPrefixSuffixModule,
     DAFF_BUTTON_COMPONENTS,

diff --git a/libs/design/notification/examples/src/notification-status/notification-status.component.ts b/libs/design/notification/examples/src/notification-status/notification-status.component.ts
@@ -16,7 +16,7 @@ import {
 
 import { DaffPrefixSuffixModule } from '@daffodil/design';
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffNotificationModule } from '@daffodil/design/notification';
+import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -26,7 +26,7 @@ import { DaffNotificationModule } from '@daffodil/design/notification';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffNotificationModule,
+    DAFF_NOTIFICATION_COMPONENTS,
     NgIf,
     FaIconComponent,
     DaffPrefixSuffixModule,

diff --git a/...otification/examples/src/notification-with-actions/notification-with-actions.component.ts b/...otification/examples/src/notification-with-actions/notification-with-actions.component.ts
@@ -6,7 +6,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffNotificationModule } from '@daffodil/design/notification';
+import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -23,7 +23,7 @@ import { DaffNotificationModule } from '@daffodil/design/notification';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffNotificationModule,
+    DAFF_NOTIFICATION_COMPONENTS,
     FontAwesomeModule,
     DAFF_BUTTON_COMPONENTS,
   ],

diff --git a/libs/design/notification/src/notification-actions/notification-actions.directive.spec.ts b/libs/design/notification/src/notification-actions/notification-actions.directive.spec.ts
@@ -15,6 +15,10 @@ import { DaffNotificationActionsDirective } from './notification-actions.directi
   template: `
     <h3 daffNotificationActions>Lorem Ipsum</h3>
   `,
+  standalone: true,
+  imports: [
+    DaffNotificationActionsDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +29,7 @@ describe('@daffodil/design/notification | DaffNotificationActionsDirective', ()
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffNotificationActionsDirective,
+      imports: [
         WrapperComponent,
       ],
     })

diff --git a/libs/design/notification/src/notification-actions/notification-actions.directive.ts b/libs/design/notification/src/notification-actions/notification-actions.directive.ts
@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffNotificationActions]',
+  standalone: true,
 })
 
 export class DaffNotificationActionsDirective {

diff --git a/libs/design/notification/src/notification-message/notification-message.directive.spec.ts b/libs/design/notification/src/notification-message/notification-message.directive.spec.ts
@@ -15,6 +15,10 @@ import { DaffNotificationMessageDirective } from './notification-message.directi
   template: `
     <h3 daffNotificationMessage>Lorem Ipsum</h3>
   `,
+  standalone: true,
+  imports: [
+    DaffNotificationMessageDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +29,7 @@ describe('@daffodil/design/notification | DaffNotificationMessageDirective', ()
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffNotificationMessageDirective,
+      imports: [
         WrapperComponent,
       ],
     })

diff --git a/libs/design/notification/src/notification-message/notification-message.directive.ts b/libs/design/notification/src/notification-message/notification-message.directive.ts
@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffNotificationMessage]',
+  standalone: true,
 })
 
 export class DaffNotificationMessageDirective {

diff --git a/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.spec.ts b/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.spec.ts
@@ -15,6 +15,10 @@ import { DaffNotificationSubtitleDirective } from './notification-subtitle.direc
   template: `
     <h3 daffNotificationSubtitle>Subtitle</h3>
   `,
+  standalone: true,
+  imports: [
+    DaffNotificationSubtitleDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +29,7 @@ describe('@daffodil/design/notification | DaffNotificationSubtitleDirective', ()
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffNotificationSubtitleDirective,
+      imports: [
         WrapperComponent,
       ],
     })

diff --git a/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.ts b/libs/design/notification/src/notification-subtitle/notification-subtitle.directive.ts
@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffNotificationSubtitle]',
+  standalone: true,
 })
 
 export class DaffNotificationSubtitleDirective {

diff --git a/libs/design/notification/src/notification-title/notification-title.directive.spec.ts b/libs/design/notification/src/notification-title/notification-title.directive.spec.ts
@@ -15,6 +15,10 @@ import { DaffNotificationTitleDirective } from './notification-title.directive';
   template: `
     <h3 daffNotificationTitle>Title</h3>
   `,
+  standalone: true,
+  imports: [
+    DaffNotificationTitleDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +29,7 @@ describe('@daffodil/design/notification | DaffNotificationTitleDirective', () =>
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffNotificationTitleDirective,
+      imports: [
         WrapperComponent,
       ],
     })

diff --git a/libs/design/notification/src/notification-title/notification-title.directive.ts b/libs/design/notification/src/notification-title/notification-title.directive.ts
@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffNotificationTitle]',
+  standalone: true,
 })
 
 export class DaffNotificationTitleDirective {

diff --git a/libs/design/notification/src/notification.module.ts b/libs/design/notification/src/notification.module.ts
@@ -10,14 +10,14 @@ import { DaffNotificationMessageDirective } from './notification-message/notific
 import { DaffNotificationSubtitleDirective } from './notification-subtitle/notification-subtitle.directive';
 import { DaffNotificationTitleDirective } from './notification-title/notification-title.directive';
 
-
+/**
+ * @deprecated in favor of {@link DAFF_NOTIFICATION_COMPONENTS}
+ */
 @NgModule({
   imports: [
     CommonModule,
     DaffPrefixSuffixModule,
     FontAwesomeModule,
-  ],
-  declarations: [
     DaffNotificationComponent,
     DaffNotificationActionsDirective,
     DaffNotificationMessageDirective,

diff --git a/libs/design/notification/src/notification.ts b/libs/design/notification/src/notification.ts
@@ -0,0 +1,16 @@
+import { DaffPrefixSuffixModule } from '@daffodil/design';
+
+import { DaffNotificationComponent } from './notification/notification.component';
+import { DaffNotificationActionsDirective } from './notification-actions/notification-actions.directive';
+import { DaffNotificationMessageDirective } from './notification-message/notification-message.directive';
+import { DaffNotificationSubtitleDirective } from './notification-subtitle/notification-subtitle.directive';
+import { DaffNotificationTitleDirective } from './notification-title/notification-title.directive';
+
+export const DAFF_NOTIFICATION_COMPONENTS = <const> [
+  DaffNotificationComponent,
+  DaffNotificationActionsDirective,
+  DaffNotificationMessageDirective,
+  DaffNotificationTitleDirective,
+  DaffNotificationSubtitleDirective,
+  DaffPrefixSuffixModule,
+];
diff --git a/libs/design/notification/src/notification/notification.component.spec.ts b/libs/design/notification/src/notification/notification.component.spec.ts
@@ -25,6 +25,10 @@ import {
       (closeNotification)="closeNotificationFunction()">
     </daff-notification>
   `,
+  standalone: true,
+  imports: [
+    DaffNotificationComponent,
+  ],
 })
 
 class WrapperComponent {
@@ -42,8 +46,7 @@ describe('@daffodil/design/notification | DaffNotificationComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffNotificationComponent,
+      imports: [
         WrapperComponent,
       ],
     })

diff --git a/libs/design/notification/src/notification/notification.component.ts b/libs/design/notification/src/notification/notification.component.ts
@@ -1,3 +1,4 @@
+import { NgIf } from '@angular/common';
 import {
   Component,
   Input,
@@ -10,12 +11,14 @@ import {
   Output,
   EventEmitter,
 } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
 import {
   DaffArticleEncapsulatedDirective,
   DaffPrefixable,
   DaffPrefixDirective,
+  DaffPrefixSuffixModule,
   DaffStatusableDirective,
   DaffStatusEnum,
 } from '@daffodil/design';
@@ -46,6 +49,12 @@ enum DaffNotificationOrientationEnum {
   ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    NgIf,
+    FaIconComponent,
+    DaffPrefixSuffixModule,
+  ],
 })
 export class DaffNotificationComponent implements DaffPrefixable {
   faTimes = faTimes;

diff --git a/libs/design/notification/src/public_api.ts b/libs/design/notification/src/public_api.ts
@@ -4,3 +4,4 @@ export * from './notification-actions/notification-actions.directive';
 export * from './notification-title/notification-title.directive';
 export * from './notification-subtitle/notification-subtitle.directive';
 export * from './notification-message/notification-message.directive';
+export { DAFF_NOTIFICATION_COMPONENTS } from './notification';