feat(design): change daffCompactableMixin to a directive (#2937) (#2937)

BREAKING CHANGE: daffCompactableMixin has been removed in favor of DaffCompactableDirective. Update usage by using the hostDirective feature.

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

@@ -25,7 +25,7 @@ import { DaffCalloutComponent } from './callout.component';
 class WrapperComponent {
   color: DaffPalette;
   textAlignment: DaffTextAlignment;
-  compact = false;
+  compact: boolean;
 }
 
 describe('@daffodil/design/callout | DaffCalloutComponent', () => {
@@ -86,6 +86,6 @@ describe('@daffodil/design/callout | DaffCalloutComponent', () => {
     wrapper.compact = true;
     fixture.detectChanges();
 
-    expect(component.compact).toEqual(true);
+    expect(de.nativeElement.classList.contains('daff-compact')).toEqual(true);
   });
 });

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

@@ -7,12 +7,11 @@ import {
   Renderer2,
 } from '@angular/core';
 
+import { DaffCompactableDirective } from '@daffodil/design';
 import {
   DaffArticleEncapsulatedDirective,
   DaffColorable,
   daffColorMixin,
-  DaffCompactable,
-  daffCompactableMixin,
   DaffManageContainerLayoutDirective,
   DaffTextAlignableDirective,
 } from '@daffodil/design';
@@ -21,10 +20,10 @@ import {
  * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
  */
 class DaffCalloutBase {
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
+  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) { }
 }
 
-const _daffCalloutBase = daffColorMixin(daffCompactableMixin(DaffCalloutBase));
+const _daffCalloutBase = daffColorMixin(DaffCalloutBase);
 
 /**
  * @inheritdoc
@@ -36,18 +35,22 @@ const _daffCalloutBase = daffColorMixin(daffCompactableMixin(DaffCalloutBase));
   encapsulation: ViewEncapsulation.None,
   //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'compact'],
+  inputs: ['color'],
   hostDirectives: [
     { directive: DaffArticleEncapsulatedDirective },
     { directive: DaffManageContainerLayoutDirective },
     {
       directive: DaffTextAlignableDirective,
       inputs: ['textAlignment'],
     },
+    {
+      directive: DaffCompactableDirective,
+      inputs: ['compact'],
+    },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffCalloutComponent extends _daffCalloutBase implements DaffColorable, DaffCompactable {
+export class DaffCalloutComponent extends _daffCalloutBase implements DaffColorable {
   constructor(
     private elementRef: ElementRef,
     private renderer: Renderer2,

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

@@ -22,7 +22,7 @@ import { DaffHeroComponent } from './hero.component';
 class WrapperComponent {
   color: DaffPalette;
   textAlignment: DaffTextAlignment;
-  compact = false;
+  compact: boolean;
 }
 
 describe('@daffodil/design/hero | DaffHeroComponent', () => {
@@ -83,6 +83,6 @@ describe('@daffodil/design/hero | DaffHeroComponent', () => {
     wrapper.compact = true;
     fixture.detectChanges();
 
-    expect(component.compact).toEqual(true);
+    expect(de.nativeElement.classList.contains('daff-compact')).toEqual(true);
   });
 });

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

@@ -5,16 +5,13 @@ import {
   ChangeDetectionStrategy,
   HostBinding,
   Renderer2,
-  SimpleChanges,
-  OnChanges,
 } from '@angular/core';
 
+import { DaffCompactableDirective } from '@daffodil/design';
 import {
   DaffArticleEncapsulatedDirective,
   DaffColorable,
   daffColorMixin,
-  DaffCompactable,
-  daffCompactableMixin,
   DaffManageContainerLayoutDirective,
   DaffTextAlignableDirective,
 } from '@daffodil/design';
@@ -26,7 +23,7 @@ class DaffHeroBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffHeroBase = daffColorMixin(daffCompactableMixin(DaffHeroBase));
+const _daffHeroBase = daffColorMixin(DaffHeroBase);
 
 /**
  * @inheritdoc
@@ -38,18 +35,22 @@ const _daffHeroBase = daffColorMixin(daffCompactableMixin(DaffHeroBase));
   encapsulation: ViewEncapsulation.None,
   //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'compact'],
+  inputs: ['color'],
   hostDirectives: [
     { directive: DaffArticleEncapsulatedDirective },
     { directive: DaffManageContainerLayoutDirective },
     {
       directive: DaffTextAlignableDirective,
       inputs: ['textAlignment'],
     },
+    {
+      directive: DaffCompactableDirective,
+      inputs: ['compact'],
+    },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffHeroComponent extends _daffHeroBase implements DaffColorable, DaffCompactable {
+export class DaffHeroComponent extends _daffHeroBase implements DaffColorable {
   constructor(
     private elementRef: ElementRef,
     private renderer: Renderer2,

libs/design/src/core/compactable/compactable.directive.spec.ts

@@ -0,0 +1,74 @@
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { DaffCompactableDirective } from './compactable.directive';
+
+@Component({
+  template: `
+		<div daffCompactable [compact]="compact"></div>`,
+})
+
+class WrapperComponent {
+  compact: boolean;
+}
+
+describe('@daffodil/design | DaffCompactableDirective', () => {
+  let wrapper: WrapperComponent;
+  let de: DebugElement;
+  let fixture: ComponentFixture<WrapperComponent>;
+  let directive: DaffCompactableDirective;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        WrapperComponent,
+      ],
+      imports: [
+        DaffCompactableDirective,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('[daffCompactable]'));
+
+    directive = de.injector.get(DaffCompactableDirective);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(wrapper).toBeTruthy();
+    expect(directive).toBeTruthy();
+  });
+
+  it('should take compact as an input', () => {
+    expect(directive.compact).toEqual(wrapper.compact);
+  });
+
+  it('should add a class of .daff-compact to the host element if compact is set to true', () => {
+    wrapper.compact = true;
+    fixture.detectChanges();
+
+    expect(de.classes).toEqual(jasmine.objectContaining({
+      'daff-compact': true,
+    }));
+  });
+
+  it('should not add a class of .daff-compact to the host element if compact is set to false', () => {
+    wrapper.compact = false;
+    fixture.detectChanges();
+
+    expect(de.classes['daff-skeleton']).toBeUndefined();
+  });
+});

libs/design/src/core/compactable/compactable.directive.ts

@@ -0,0 +1,32 @@
+import {
+  Directive,
+  HostBinding,
+  Input,
+} from '@angular/core';
+
+/**
+ * The `DaffCompactableDirective` allows a component to conditionally apply a compact
+ * style by toggling a CSS class. This is useful for creating components that can
+ * switch between regular and compact styles based on the `compact` property.
+ *
+ * ## Example
+ *
+ * ```html
+ * <div daffCompactable [compact]="isCompact">Content goes here</div>
+ * ```
+ *
+ * In this example, the `daff-compact` class is applied to the `div` element when
+ * `isCompact` is `true`, making the `div` display its compact state.
+ *
+ * ## Styles
+ *
+ * The `daff-compact` class should be defined in your styles to display the compact
+ * state as desired.
+ */
+@Directive({
+  selector: '[daffCompactable]',
+  standalone: true,
+})
+export class DaffCompactableDirective {
+  @Input() @HostBinding('class.daff-compact') compact = false;
+}

libs/design/src/core/compactable/public_api.ts

@@ -1,2 +1,2 @@
 export { DaffCompactable } from './compactable';
-export { daffCompactableMixin } from './compactable-mixin';
+export { DaffCompactableDirective } from './compactable.directive';