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

graycoreio · Sep 27, 2024 · 7f830b6 · 7f830b6
1 parent 1de68ab
commit 7f830b6
Show file tree

Hide file tree

Showing 24 changed files with 126 additions and 38 deletions.
diff --git a/libs/design/card/README.md b/libs/design/card/README.md
@@ -9,6 +9,47 @@ The example below is a default, filled card that includes all of a card's pre-st
 
 <design-land-example-viewer-container example="basic-card"></design-land-example-viewer-container>
 
+## Usage
+
+### Within a standalone component
+To use card 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_CARD_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use card in a module, import `DaffCardModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffCardModule } from '@daffodil/design/card';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffCardModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Supported Content Types
 A card supports a wide variety of content and includes minimally pre-styled `image`, `icon`, `tagline`, `title`, `content`, and `actions` content containers.
 

diff --git a/libs/design/card/examples/src/basic-card/basic-card.component.ts b/libs/design/card/examples/src/basic-card/basic-card.component.ts
@@ -6,8 +6,8 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMapMarked } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffCardModule } from '@daffodil/design/card';
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -17,8 +17,8 @@ import { DaffImageModule } from '@daffodil/design/image';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffCardModule,
-    DaffImageModule,
+    DAFF_CARD_COMPONENTS,
+    DAFF_IMAGE_COMPONENTS,
     FaIconComponent,
     DAFF_BUTTON_COMPONENTS,
   ],

diff --git a/libs/design/card/examples/src/card-orientation/card-orientation.component.ts b/libs/design/card/examples/src/card-orientation/card-orientation.component.ts
@@ -11,8 +11,8 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMapMarked } from '@fortawesome/free-solid-svg-icons';
 
 import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import { DaffCardModule } from '@daffodil/design/card';
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -22,8 +22,8 @@ import { DaffImageModule } from '@daffodil/design/image';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffCardModule,
-    DaffImageModule,
+    DAFF_CARD_COMPONENTS,
+    DAFF_IMAGE_COMPONENTS,
     FaIconComponent,
     DAFF_BUTTON_COMPONENTS,
     ReactiveFormsModule,

diff --git a/libs/design/card/examples/src/card-theming/card-theming.component.ts b/libs/design/card/examples/src/card-theming/card-theming.component.ts
@@ -8,7 +8,7 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 
-import { DaffCardModule } from '@daffodil/design/card';
+import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -22,7 +22,7 @@ import { DaffCardModule } from '@daffodil/design/card';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffCardModule,
+    DAFF_CARD_COMPONENTS,
     ReactiveFormsModule,
     NgFor,
   ],

diff --git a/libs/design/card/examples/src/linkable-card/linkable-card.component.ts b/libs/design/card/examples/src/linkable-card/linkable-card.component.ts
@@ -8,8 +8,8 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 
-import { DaffCardModule } from '@daffodil/design/card';
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -19,8 +19,8 @@ import { DaffImageModule } from '@daffodil/design/image';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffCardModule,
-    DaffImageModule,
+    DAFF_CARD_COMPONENTS,
+    DAFF_IMAGE_COMPONENTS,
     ReactiveFormsModule,
     NgFor,
   ],

diff --git a/libs/design/card/examples/src/raised-card/raised-card.component.ts b/libs/design/card/examples/src/raised-card/raised-card.component.ts
@@ -8,8 +8,8 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 
-import { DaffCardModule } from '@daffodil/design/card';
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -19,8 +19,8 @@ import { DaffImageModule } from '@daffodil/design/image';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffCardModule,
-    DaffImageModule,
+    DAFF_CARD_COMPONENTS,
+    DAFF_IMAGE_COMPONENTS,
     ReactiveFormsModule,
     NgFor,
   ],

diff --git a/libs/design/card/examples/src/stroked-card/stroked-card.component.ts b/libs/design/card/examples/src/stroked-card/stroked-card.component.ts
@@ -8,8 +8,8 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 
-import { DaffCardModule } from '@daffodil/design/card';
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -19,8 +19,8 @@ import { DaffImageModule } from '@daffodil/design/image';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffCardModule,
-    DaffImageModule,
+    DAFF_CARD_COMPONENTS,
+    DAFF_IMAGE_COMPONENTS,
     ReactiveFormsModule,
     NgFor,
   ],

diff --git a/libs/design/card/src/card-actions/card-actions.directive.spec.ts b/libs/design/card/src/card-actions/card-actions.directive.spec.ts
@@ -13,6 +13,10 @@ import { DaffCardActionsDirective } from './card-actions.directive';
 
 @Component({
   template: `<div daffCardActions></div>`,
+  standalone: true,
+  imports: [
+    DaffCardActionsDirective,
+  ],
 })
 
 class WrapperComponent {}
@@ -24,8 +28,7 @@ describe('@daffodil/design/card | DaffCardActionsDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCardActionsDirective,
+      imports: [
         WrapperComponent,
       ],
     })

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

diff --git a/libs/design/card/src/card-content/card-content.directive.spec.ts b/libs/design/card/src/card-content/card-content.directive.spec.ts
@@ -13,6 +13,10 @@ import { DaffCardContentDirective } from './card-content.directive';
 
 @Component({
   template: `<div daffCardContent></div>`,
+  standalone: true,
+  imports: [
+    DaffCardContentDirective,
+  ],
 })
 
 class WrapperComponent {}
@@ -24,8 +28,7 @@ describe('@daffodil/design/card | DaffCardContentDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCardContentDirective,
+      imports: [
         WrapperComponent,
       ],
     })

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

diff --git a/libs/design/card/src/card-icon/card-icon.directive.spec.ts b/libs/design/card/src/card-icon/card-icon.directive.spec.ts
@@ -13,6 +13,10 @@ import { DaffCardIconDirective } from './card-icon.directive';
 
 @Component({
   template: `<div daffCardIcon></div>`,
+  standalone: true,
+  imports: [
+    DaffCardIconDirective,
+  ],
 })
 
 class WrapperComponent {}
@@ -24,8 +28,7 @@ describe('@daffodil/design/card | DaffCardIconDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCardIconDirective,
+      imports: [
         WrapperComponent,
       ],
     })

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

diff --git a/libs/design/card/src/card-image/card-image.directive.spec.ts b/libs/design/card/src/card-image/card-image.directive.spec.ts
@@ -13,6 +13,10 @@ import { DaffCardImageDirective } from './card-image.directive';
 
 @Component({
   template: `<img src="/" daffCardImage />`,
+  standalone: true,
+  imports: [
+    DaffCardImageDirective,
+  ],
 })
 
 class WrapperComponent {}
@@ -24,8 +28,7 @@ describe('@daffodil/design/card | DaffCardImageDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCardImageDirective,
+      imports: [
         WrapperComponent,
       ],
     })

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

diff --git a/libs/design/card/src/card-tagline/card-tagline.directive.spec.ts b/libs/design/card/src/card-tagline/card-tagline.directive.spec.ts
@@ -13,6 +13,10 @@ import { DaffCardTaglineDirective } from './card-tagline.directive';
 
 @Component({
   template: `<div daffCardTagline></div>`,
+  standalone: true,
+  imports: [
+    DaffCardTaglineDirective,
+  ],
 })
 
 class WrapperComponent {}
@@ -24,8 +28,7 @@ describe('@daffodil/design/card | DaffCardTaglineDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCardTaglineDirective,
+      imports: [
         WrapperComponent,
       ],
     })

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

diff --git a/libs/design/card/src/card-title/card-title.directive.spec.ts b/libs/design/card/src/card-title/card-title.directive.spec.ts
@@ -13,6 +13,10 @@ import { DaffCardTitleDirective } from './card-title.directive';
 
 @Component({
   template: `<div daffCardTitle></div>`,
+  standalone: true,
+  imports: [
+    DaffCardTitleDirective,
+  ],
 })
 
 class WrapperComponent {}
@@ -24,8 +28,7 @@ describe('@daffodil/design/card | DaffCardTitleDirective', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffCardTitleDirective,
+      imports: [
         WrapperComponent,
       ],
     })

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

diff --git a/libs/design/card/src/card.module.ts b/libs/design/card/src/card.module.ts
@@ -9,11 +9,12 @@ import { DaffCardImageDirective } from './card-image/card-image.directive';
 import { DaffCardTaglineDirective } from './card-tagline/card-tagline.directive';
 import { DaffCardTitleDirective } from './card-title/card-title.directive';
 
+/**
+ * @deprecated in favor of {@link DAFF_CARD_COMPONENTS}
+ */
 @NgModule({
   imports: [
     CommonModule,
-  ],
-  declarations: [
     DaffCardComponent,
     DaffCardIconDirective,
     DaffCardImageDirective,

diff --git a/libs/design/card/src/card.ts b/libs/design/card/src/card.ts
@@ -0,0 +1,17 @@
+import { DaffCardComponent } from './card/card.component';
+import { DaffCardActionsDirective } from './card-actions/card-actions.directive';
+import { DaffCardContentDirective } from './card-content/card-content.directive';
+import { DaffCardIconDirective } from './card-icon/card-icon.directive';
+import { DaffCardImageDirective } from './card-image/card-image.directive';
+import { DaffCardTaglineDirective } from './card-tagline/card-tagline.directive';
+import { DaffCardTitleDirective } from './card-title/card-title.directive';
+
+export const DAFF_CARD_COMPONENTS = <const>[
+  DaffCardComponent,
+  DaffCardIconDirective,
+  DaffCardImageDirective,
+  DaffCardTaglineDirective,
+  DaffCardTitleDirective,
+  DaffCardContentDirective,
+  DaffCardActionsDirective,
+];