feat(design): convert hero to standalone (#3054)

Author: xelaint

libs/design/hero/README.md

@@ -4,6 +4,47 @@ Hero is a top level container that is large and captivating. It should only be u
 ## Overview
 Heros are the first thing users see on a page and are designed to catch their attention. It's a flexible and extensible component that includes pre-styled content containers.
 
+## Usage
+
+### Within a standalone component
+To use hero 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_HERO_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use hero in a module, import `DaffHeroModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffHeroModule } from '@daffodil/design/hero';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffHeroModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Supported Content Types
 A `daff-hero` supports transclusion of any content and includes stylized `icon`, `tagline`, `title`, `subtitle`, and `body` content containers.
 

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

@@ -2,11 +2,11 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMobile } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
+import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -16,8 +16,8 @@ import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffHeroModule,
     FaIconComponent,
+    DAFF_HERO_COMPONENTS,
     DAFF_BUTTON_COMPONENTS,
   ],
 })

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

@@ -12,7 +12,7 @@ import { faMobile } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
 import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
-import { DaffHeroModule } from '@daffodil/design/hero';
+import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -22,7 +22,7 @@ import { DaffHeroModule } from '@daffodil/design/hero';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffHeroModule,
+    DAFF_HERO_COMPONENTS,
     DAFF_CONTAINER_COMPONENTS,
     FaIconComponent,
     DAFF_BUTTON_COMPONENTS,

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

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

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

@@ -7,7 +7,7 @@ import { faMobile } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
 import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
-import { DaffHeroModule } from '@daffodil/design/hero';
+import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -17,7 +17,7 @@ import { DaffHeroModule } from '@daffodil/design/hero';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffHeroModule,
+    DAFF_HERO_COMPONENTS,
     DAFF_CONTAINER_COMPONENTS,
     FaIconComponent,
     DAFF_BUTTON_COMPONENTS,

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

@@ -13,6 +13,10 @@ import { DaffHeroBodyDirective } from './hero-body.directive';
 
 @Component({
   template: `<h1 daffHeroBody>Hero Body</h1>`,
+  standalone: true,
+  imports: [
+    DaffHeroBodyDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -23,8 +27,7 @@ describe('@daffodil/design/hero | DaffHeroBodyDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffHeroBodyDirective,
+      imports: [
         WrapperComponent,
       ],
     })

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

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

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

@@ -13,6 +13,10 @@ import { DaffHeroIconDirective } from './hero-icon.directive';
 
 @Component({
   template: `<div daffHeroIcon>Hero Icon</div>`,
+  standalone: true,
+  imports: [
+    DaffHeroIconDirective,
+  ],
 })
 class WrapperComponent {}
 
@@ -23,8 +27,7 @@ describe('@daffodil/design/hero | DaffHeroIconDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffHeroIconDirective,
+      imports: [
         WrapperComponent,
       ],
     })

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

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

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

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

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

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

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

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

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

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

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

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

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

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

libs/design/hero/src/hero.module.ts

@@ -8,11 +8,12 @@ import { DaffHeroSubtitleDirective } from './hero-subtitle/hero-subtitle.directi
 import { DaffHeroTaglineDirective } from './hero-tagline/hero-tagline.directive';
 import { DaffHeroTitleDirective } from './hero-title/hero-title.directive';
 
+/**
+ * @deprecated in favor of {@link DAFF_HERO_COMPONENTS}
+ * */
 @NgModule({
   imports: [
     CommonModule,
-  ],
-  declarations: [
     DaffHeroComponent,
     DaffHeroIconDirective,
     DaffHeroTaglineDirective,

libs/design/hero/src/hero.ts

@@ -0,0 +1,15 @@
+import { DaffHeroComponent } from './hero/hero.component';
+import { DaffHeroBodyDirective } from './hero-body/hero-body.directive';
+import { DaffHeroIconDirective } from './hero-icon/hero-icon.directive';
+import { DaffHeroSubtitleDirective } from './hero-subtitle/hero-subtitle.directive';
+import { DaffHeroTaglineDirective } from './hero-tagline/hero-tagline.directive';
+import { DaffHeroTitleDirective } from './hero-title/hero-title.directive';
+
+export const DAFF_HERO_COMPONENTS = <const>[
+  DaffHeroComponent,
+  DaffHeroIconDirective,
+  DaffHeroTaglineDirective,
+  DaffHeroTitleDirective,
+  DaffHeroSubtitleDirective,
+  DaffHeroBodyDirective,
+];

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

@@ -18,6 +18,10 @@ import { DaffHeroComponent } from './hero.component';
 
 @Component({
   template: `<daff-hero [color]="color" [textAlignment]="textAlignment" [compact]="compact"></daff-hero>`,
+  standalone: true,
+  imports: [
+    DaffHeroComponent,
+  ],
 })
 class WrapperComponent {
   color: DaffPalette;
@@ -33,8 +37,7 @@ describe('@daffodil/design/hero | DaffHeroComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        WrapperComponent,
+      imports: [
         DaffHeroComponent,
       ],
     })

libs/design/hero/src/hero/hero.component.ts

@@ -15,14 +15,12 @@ import {
   DaffTextAlignableDirective,
 } from '@daffodil/design';
 
-/**
- * @inheritdoc
- */
 @Component({
   selector: 'daff-hero',
   template: '<ng-content></ng-content>',
   styleUrls: ['./hero.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   hostDirectives: [
     { directive: DaffArticleEncapsulatedDirective },
     { directive: DaffManageContainerLayoutDirective },
@@ -39,7 +37,7 @@ import {
       inputs: ['color'],
     },
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class DaffHeroComponent {
   constructor(private textAlignable: DaffTextAlignableDirective) {

libs/design/hero/src/public_api.ts

@@ -1,4 +1,5 @@
 export { DaffHeroModule } from './hero.module';
+export { DAFF_HERO_COMPONENTS } from './hero';
 export * from './hero/hero.component';
 export * from './hero-tagline/hero-tagline.directive';
 export * from './hero-title/hero-title.directive';