feat(design): create daffStatusMixin to a directive

graycoreio · Jul 23, 2024 · 594b7d3 · 594b7d3
1 parent 0b31395
commit 594b7d3
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 57 deletions.
diff --git a/libs/design/button/src/button/button.component.spec.ts b/libs/design/button/src/button/button.component.spec.ts
@@ -207,17 +207,15 @@ describe('@daffodil/design/button | DaffButtonComponent', () => {
     });
   });
 
-  describe('using the status property of a button', () => {
-    it('should not set a default status', () => {
-      expect(component.status).toBeFalsy();
-    });
+  it('should take status as an input', () => {
+    wrapper.status = 'warn';
+    fixture.detectChanges();
 
-    it('should add the class of the defined status to the host element', () => {
-      wrapper.status = 'warn';
-      fixture.detectChanges();
+    expect(de.nativeElement.classList.contains('daff-warn')).toEqual(true);
+  });
 
-      expect(de.nativeElement.classList.contains('daff-warn')).toEqual(true);
-    });
+  it('should not set a default status', () => {
+    expect(component.status).toBeFalsy();
   });
 
   describe('using the tabindex property of a button', () => {

diff --git a/libs/design/button/src/button/button.component.ts b/libs/design/button/src/button/button.component.ts
@@ -17,9 +17,8 @@ import {
   DaffSuffixable,
   daffPrefixableMixin,
   daffSuffixableMixin,
-  DaffStatusable,
-  daffStatusMixin,
   DaffArticleEncapsulatedDirective,
+  DaffStatusableDirective,
 } from '@daffodil/design';
 
 import { DaffButtonSizableDirective } from './button-sizable.directive';
@@ -43,7 +42,7 @@ class DaffButtonBase{
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin((DaffButtonBase)))));
+const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin(daffColorMixin((DaffButtonBase))));
 
 export type DaffButtonType = 'daff-button' | 'daff-stroked-button' | 'daff-raised-button' | 'daff-flat-button' | 'daff-icon-button' | 'daff-underline-button' | undefined;
 
@@ -78,20 +77,24 @@ enum DaffButtonTypeEnum {
   styleUrls: ['./button.component.scss'],
   //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', 'status'],
+  inputs: ['color'],
   hostDirectives: [
     { directive: DaffArticleEncapsulatedDirective },
     {
       directive: DaffButtonSizableDirective,
       inputs: ['size'],
     },
+    {
+      directive: DaffStatusableDirective,
+      inputs: ['status'],
+    },
   ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffButtonComponent
   extends _daffButtonBase
-  implements OnInit, DaffPrefixable, DaffSuffixable, DaffColorable, DaffStatusable {
+  implements OnInit, DaffPrefixable, DaffSuffixable, DaffColorable {
 
   private buttonType: DaffButtonType;
 

diff --git a/libs/design/notification/examples/src/notification-status/notification-status.component.html b/libs/design/notification/examples/src/notification-status/notification-status.component.html
@@ -1,13 +1,13 @@
 <daff-notification [status]="statusControl.value">
 	<fa-icon *ngIf="statusControl.value === 'success'" daffPrefix [icon]="faCheck" [fixedWidth]="true"></fa-icon>
 	<fa-icon *ngIf="statusControl.value === 'warn'" daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
-	<fa-icon *ngIf="statusControl.value === 'error'" daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
+	<fa-icon *ngIf="statusControl.value === 'danger'" daffPrefix [icon]="faExclamation" [fixedWidth]="true"></fa-icon>
 	<div daffNotificationTitle>Title</div>
 	<div daffNotificationSubtitle>This is the subtitle with information</div>
 </daff-notification>
 
 <select [formControl]="statusControl">
 	<option value="success">Success</option>
 	<option value="warn">Warn</option>
-	<option value="error">Error</option>
+	<option value="danger">Danger</option>
 </select>
diff --git a/libs/design/notification/src/notification-theme.scss b/libs/design/notification/src/notification-theme.scss
@@ -37,7 +37,7 @@
 			}
 		}
 
-		&.daff-error {
+		&.daff-danger {
 			background: theming.daff-color(theming.$daff-red, 10);
 			border: 1px solid theming.daff-color(theming.$daff-red, 20);
 			color: theming.daff-text-contrast(theming.daff-color(theming.$daff-red, 10));

diff --git a/libs/design/notification/src/notification/notification.component.spec.ts b/libs/design/notification/src/notification/notification.component.spec.ts
@@ -1,9 +1,6 @@
 import {
   Component,
-  ContentChild,
   DebugElement,
-  Input,
-  ViewChild,
 } from '@angular/core';
 import {
   waitForAsync,
@@ -18,7 +15,6 @@ import {
   DaffNotificationComponent,
   DaffNotificationOrientation,
 } from './notification.component';
-import { DaffNotificationActionsDirective } from '../notification-actions/notification-actions.directive';
 
 @Component ({
   template: `
@@ -133,17 +129,11 @@ describe('@daffodil/design/notification | DaffNotificationComponent', () => {
     });
   });
 
-  describe('using the status property of a notification', () => {
-    it('should not set a default status', () => {
-      expect(component.status).toBeFalsy();
-    });
-
-    it('should add the class of the defined status to the host element', () => {
-      wrapper.status = 'warn';
-      fixture.detectChanges();
+  it('should take status as an input', () => {
+    wrapper.status = 'warn';
+    fixture.detectChanges();
 
-      expect(de.nativeElement.classList.contains('daff-warn')).toEqual(true);
-    });
+    expect(de.nativeElement.classList.contains('daff-warn')).toEqual(true);
   });
 
   describe('setting the orientation of a notification', () => {

diff --git a/libs/design/notification/src/notification/notification.component.ts b/libs/design/notification/src/notification/notification.component.ts
@@ -17,21 +17,13 @@ import {
   DaffPrefixable,
   DaffPrefixDirective,
   DaffStatusable,
+  DaffStatusableDirective,
   DaffStatusEnum,
   daffStatusMixin,
 } from '@daffodil/design';
 
 import { DaffNotificationActionsDirective } from '../notification-actions/notification-actions.directive';
 
-/**
- * An _elementRef is needed for the core mixins
- */
-class DaffNotificationBase {
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
-}
-
-const _daffNotificationBase = daffStatusMixin(DaffNotificationBase);
-
 export type DaffNotificationOrientation = 'horizontal' | 'vertical';
 
 enum DaffNotificationOrientationEnum {
@@ -47,18 +39,17 @@ enum DaffNotificationOrientationEnum {
   selector: 'daff-notification',
   templateUrl: './notification.component.html',
   styleUrls: ['./notification.component.scss'],
-  // 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: ['status'],
-  hostDirectives: [{
-    directive: DaffArticleEncapsulatedDirective,
-  }],
+  hostDirectives: [
+    { directive: DaffArticleEncapsulatedDirective },
+    {
+      directive: DaffStatusableDirective,
+      inputs: ['status'],
+    },
+  ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffNotificationComponent
-  extends _daffNotificationBase
-  implements DaffPrefixable, DaffStatusable {
+export class DaffNotificationComponent implements DaffPrefixable {
   faTimes = faTimes;
 
   @ContentChild(DaffPrefixDirective) _prefix: DaffPrefixDirective;
@@ -74,7 +65,7 @@ export class DaffNotificationComponent
    * Sets role to status on all other instances.
    */
   @HostBinding('attr.role') get role() {
-    return this.status === DaffStatusEnum.Warn || this.status === DaffStatusEnum.Danger ? 'alert' : 'status';
+    return this.statusDirective.status === DaffStatusEnum.Warn || this.statusDirective.status === DaffStatusEnum.Danger ? 'alert' : 'status';
   };
 
   @HostBinding('class.vertical') get verticalOrientation() {
@@ -88,6 +79,8 @@ export class DaffNotificationComponent
   /** Whether or not a notification is closable */
   @Input() @HostBinding('class.dismissible') dismissible = false;
 
+  constructor(private statusDirective: DaffStatusableDirective) {}
+
   private _orientation: DaffNotificationOrientation = DaffNotificationOrientationEnum.Vertical;
 
   @Input()
@@ -103,13 +96,6 @@ export class DaffNotificationComponent
     }
   };
 
-  constructor(
-    private elementRef: ElementRef,
-    private renderer: Renderer2,
-  ) {
-	  super(elementRef, renderer);
-  }
-
   /**
    * Output event triggered when the close icon is clicked.
    */

diff --git a/libs/design/src/core/statusable/public_api.ts b/libs/design/src/core/statusable/public_api.ts
@@ -4,3 +4,4 @@ export {
   DaffStatusEnum,
 } from './statusable';
 export { daffStatusMixin } from './statusable-mixin';
+export { DaffStatusableDirective } from './statusable.directive';
diff --git a/libs/design/src/core/statusable/statusable.directive.ts b/libs/design/src/core/statusable/statusable.directive.ts
@@ -0,0 +1,35 @@
+import {
+  Directive,
+  HostBinding,
+  Input,
+} from '@angular/core';
+
+import {
+  DaffStatus,
+  DaffStatusEnum,
+  DaffStatusable,
+} from './statusable';
+
+@Directive({
+  selector: '[daffStatusable]',
+  standalone: true,
+})
+
+export class DaffStatusableDirective implements DaffStatusable {
+  /**
+   * @docs-private
+   */
+  @HostBinding('class') get class() {
+    return {
+      'daff-warn': this.status === DaffStatusEnum.Warn,
+      'daff-danger': this.status === DaffStatusEnum.Danger,
+      'daff-success': this.status === DaffStatusEnum.Success,
+    };
+  }
+
+  /**
+   * Sets the status on a component.
+   */
+  @Input() status: DaffStatus;
+}
+