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

libs/design/callout/README.md

@@ -4,6 +4,48 @@ Callout is a versatile component that can be used to easily highlight a piece of
 ## Overview
 Callouts can be used multiple times on a page. It's a flexible and extensible component that includes pre-styled content containers. It can be used alongside a product list to highlight a set of products, quickly lay out an accordion, showcase a set of features, etc.
 
+## Usage
+
+### Within a standalone component
+To use callout in a standalone component, import it directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_CALLOUT_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use callout in a module, import `DaffCalloutModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffCalloutModule } from '@daffodil/design/callout';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffCalloutModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
+
 ## Supported Content Types
 A `<daff-callout>` supports transclusion of any content and includes stylized `icon`, `tagline`, `title`, `subtitle`, and `body` content containers.
 

libs/design/callout/examples/src/callout-text-alignment/callout-text-alignment.component.ts

@@ -11,8 +11,8 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMobile } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffCalloutModule } from '@daffodil/design/callout';
-import { DaffContainerModule } from '@daffodil/design/container';
+import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -22,8 +22,8 @@ import { DaffContainerModule } from '@daffodil/design/container';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffCalloutModule,
-    DaffContainerModule,
+    DAFF_CALLOUT_COMPONENTS,
+    DAFF_CONTAINER_COMPONENTS,
     FaIconComponent,
     DAFF_BUTTON_COMPONENTS,
     ReactiveFormsModule,

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

@@ -11,7 +11,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMobile } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffCalloutModule } from '@daffodil/design/callout';
+import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -21,7 +21,7 @@ import { DaffCalloutModule } from '@daffodil/design/callout';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffCalloutModule,
+    DAFF_CALLOUT_COMPONENTS,
     FaIconComponent,
     DAFF_BUTTON_COMPONENTS,
     ReactiveFormsModule,

libs/design/callout/examples/src/callout-with-grid/callout-with-grid.component.ts

@@ -6,8 +6,8 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMobile } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffCalloutModule } from '@daffodil/design/callout';
-import { DaffContainerModule } from '@daffodil/design/container';
+import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -17,8 +17,8 @@ import { DaffContainerModule } from '@daffodil/design/container';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffCalloutModule,
-    DaffContainerModule,
+    DAFF_CALLOUT_COMPONENTS,
+    DAFF_CONTAINER_COMPONENTS,
     FaIconComponent,
     DAFF_BUTTON_COMPONENTS,
   ],

libs/design/callout/examples/src/compact-callout/compact-callout.component.ts

@@ -6,8 +6,8 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMobile } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffCalloutModule } from '@daffodil/design/callout';
-import { DaffContainerModule } from '@daffodil/design/container';
+import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -17,8 +17,8 @@ import { DaffContainerModule } from '@daffodil/design/container';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffCalloutModule,
-    DaffContainerModule,
+    DAFF_CALLOUT_COMPONENTS,
+    DAFF_CONTAINER_COMPONENTS,
     FaIconComponent,
     DAFF_BUTTON_COMPONENTS,
   ],

libs/design/callout/src/callout-body/callout-body.directive.spec.ts

@@ -15,6 +15,10 @@ import { DaffCalloutBodyDirective } from './callout-body.directive';
   template: `
     <h3 daffCalloutBody>Lorem Ipsum</h3>
   `,
+  standalone: true,
+  imports: [
+    DaffCalloutBodyDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +29,7 @@ describe('@daffodil/design/callout | DaffCalloutBodyDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCalloutBodyDirective,
+      imports: [
         WrapperComponent,
       ],
     })

libs/design/callout/src/callout-body/callout-body.directive.ts

@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffCalloutBody]',
+  standalone: true,
 })
 
 export class DaffCalloutBodyDirective {

libs/design/callout/src/callout-icon/callout-icon.directive.spec.ts

@@ -15,6 +15,10 @@ import { DaffCalloutIconDirective } from './callout-icon.directive';
   template: `
     <h3 daffCalloutIcon>Lorem Ipsum</h3>
   `,
+  standalone: true,
+  imports: [
+    DaffCalloutIconDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +29,7 @@ describe('@daffodil/design/callout | DaffCalloutIconDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCalloutIconDirective,
+      imports: [
         WrapperComponent,
       ],
     })

libs/design/callout/src/callout-icon/callout-icon.directive.ts

@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffCalloutIcon]',
+  standalone: true,
 })
 
 export class DaffCalloutIconDirective {

libs/design/callout/src/callout-subtitle/callout-subtitle.directive.spec.ts

@@ -15,6 +15,10 @@ import { DaffCalloutSubtitleDirective } from './callout-subtitle.directive';
   template: `
     <p daffCalloutSubtitle>Lorem Ipsum</p>
   `,
+  standalone: true,
+  imports: [
+    DaffCalloutSubtitleDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +29,7 @@ describe('@daffodil/design/callout | DaffCalloutSubtitleDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCalloutSubtitleDirective,
+      imports: [
         WrapperComponent,
       ],
     })

libs/design/callout/src/callout-subtitle/callout-subtitle.directive.ts

@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffCalloutSubtitle]',
+  standalone: true,
 })
 
 export class DaffCalloutSubtitleDirective {

libs/design/callout/src/callout-tagline/callout-tagline.directive.spec.ts

@@ -15,6 +15,10 @@ import { DaffCalloutTaglineDirective } from './callout-tagline.directive';
   template: `
     <h3 daffCalloutTagline>Lorem Ipsum</h3>
   `,
+  standalone: true,
+  imports: [
+    DaffCalloutTaglineDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +29,7 @@ describe('@daffodil/design/callout | DaffCalloutTaglineDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCalloutTaglineDirective,
+      imports: [
         WrapperComponent,
       ],
     })

libs/design/callout/src/callout-tagline/callout-tagline.directive.ts

@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffCalloutTagline]',
+  standalone: true,
 })
 
 export class DaffCalloutTaglineDirective {

libs/design/callout/src/callout-title/callout-title.directive.spec.ts

@@ -15,6 +15,10 @@ import { DaffCalloutTitleDirective } from './callout-title.directive';
   template: `
     <h3 daffCalloutTitle>Lorem Ipsum</h3>
   `,
+  standalone: true,
+  imports: [
+    DaffCalloutTitleDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -25,8 +29,7 @@ describe('@daffodil/design/callout | DaffCalloutTitleDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCalloutTitleDirective,
+      imports: [
         WrapperComponent,
       ],
     })

libs/design/callout/src/callout-title/callout-title.directive.ts

@@ -5,6 +5,7 @@ import {
 
 @Directive({
   selector: '[daffCalloutTitle]',
+  standalone: true,
 })
 
 export class DaffCalloutTitleDirective {

libs/design/callout/src/callout.module.ts

@@ -8,11 +8,10 @@ import { DaffCalloutSubtitleDirective } from './callout-subtitle/callout-subtitl
 import { DaffCalloutTaglineDirective } from './callout-tagline/callout-tagline.directive';
 import { DaffCalloutTitleDirective } from './callout-title/callout-title.directive';
 
+/** @deprecated in favor of {@link DAFF_CALLOUT_COMPONENTS} */
 @NgModule({
   imports: [
     CommonModule,
-  ],
-  declarations: [
     DaffCalloutComponent,
     DaffCalloutIconDirective,
     DaffCalloutTitleDirective,

libs/design/callout/src/callout.ts

@@ -0,0 +1,15 @@
+import { DaffCalloutComponent } from './callout/callout.component';
+import { DaffCalloutBodyDirective } from './callout-body/callout-body.directive';
+import { DaffCalloutIconDirective } from './callout-icon/callout-icon.directive';
+import { DaffCalloutSubtitleDirective } from './callout-subtitle/callout-subtitle.directive';
+import { DaffCalloutTaglineDirective } from './callout-tagline/callout-tagline.directive';
+import { DaffCalloutTitleDirective } from './callout-title/callout-title.directive';
+
+export const DAFF_CALLOUT_COMPONENTS = <const>[
+  DaffCalloutComponent,
+  DaffCalloutIconDirective,
+  DaffCalloutTitleDirective,
+  DaffCalloutSubtitleDirective,
+  DaffCalloutTaglineDirective,
+  DaffCalloutBodyDirective,
+];

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

@@ -20,6 +20,10 @@ import { DaffCalloutComponent } from './callout.component';
   template: `
     <daff-callout [color]="color" [textAlignment]="textAlignment" [compact]="compact"></daff-callout>
   `,
+  standalone: true,
+  imports: [
+    DaffCalloutComponent,
+  ],
 })
 
 class WrapperComponent {
@@ -36,9 +40,8 @@ describe('@daffodil/design/callout | DaffCalloutComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         WrapperComponent,
-        DaffCalloutComponent,
       ],
     })
       .compileComponents();

libs/design/callout/src/callout/callout.component.ts

@@ -40,6 +40,7 @@ import {
     },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class DaffCalloutComponent {
   constructor(private textAlignable: DaffTextAlignableDirective) {

libs/design/callout/src/public_api.ts

@@ -1,4 +1,5 @@
 export { DaffCalloutModule } from './callout.module';
+export { DAFF_CALLOUT_COMPONENTS } from './callout';
 export * from './callout/callout.component';
 export * from './callout-icon/callout-icon.directive';
 export * from './callout-tagline/callout-tagline.directive';