feat(design): add loading, disabled, and tabindex properties to butto…

…n component (#2448)

libs/design/src/atoms/button/button.component.scss

@@ -4,14 +4,19 @@
 
 @mixin daff-button {
 	@include interactions.clickable;
-	display: inline-block;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
 	appearance: none;
+	border: none;
 	border-radius: 4px;
 	position: relative;
 	text-align: center;
 	text-decoration: none;
 
-	&[disabled] {
+	&[disabled],
+	&.daff-button--disabled {
 		cursor: not-allowed;
 	}
 }
@@ -101,7 +106,6 @@
 
 .daff-underline-button {
 	@include daff-button();
-	@include prefix-suffix();
 	background: transparent;
 	border: 0;
 	border-radius: 0;
@@ -110,7 +114,8 @@
 	text-decoration: none;
 	vertical-align: middle;
 
-	&[disabled] {
+	&[disabled],
+	&.daff-button--disabled {
 		cursor: not-allowed;
 
 		&:hover,

libs/design/src/atoms/button/button.component.spec.ts

@@ -18,23 +18,25 @@ import {
 
 @Component({
   template: `
-    <a daff-button [color]="color" [size]="size" [status]="status">Link Daff Button</a>
-    <a daff-stroked-button [color]="color" [size]="size" [status]="status">Link Daff Stroked Button</a>
-    <a daff-raised-button [color]="color" [size]="size" [status]="status">Link Daff Raised Button</a>
-    <a daff-icon-button [color]="color" [size]="size" [status]="status">Link Daff Icon Button</a>
-    <a daff-underline-button [color]="color" [size]="size" [status]="status">Link Daff Underline Button</a>
-    <button daff-button [color]="color" [size]="size" [status]="status">Button Daff Button</button>
-    <button daff-stroked-button [color]="color" [size]="size" [status]="status">Button Daff Stroked Button</button>
-    <button daff-raised-button [color]="color" [size]="size" [status]="status">Button Daff Raised Button</button>
-    <button daff-icon-button [color]="color" [size]="size" [status]="status">Button Daff Icon Button</button>
-    <button daff-underline-button [color]="color" [size]="size" [status]="status">Button Daff Underline Button</button>
+    <a daff-button [color]="color" [size]="size" [status]="status" [loading]="loading" [tabindex]="tabindex">Basic Link Button</a>
+    <a daff-stroked-button [color]="color" [size]="size" [status]="status" [loading]="loading" [tabindex]="tabindex">Stroked Link Button</a>
+    <a daff-raised-button [color]="color" [size]="size" [status]="status" [loading]="loading" [tabindex]="tabindex">Raised Link Button</a>
+    <a daff-icon-button [color]="color" [size]="size" [status]="status" [loading]="loading" [tabindex]="tabindex">Icon Link Button</a>
+    <a daff-underline-button [color]="color" [size]="size" [status]="status" [loading]="loading" [tabindex]="tabindex">Underline Link Button</a>
+    <button daff-button [color]="color" [size]="size" [status]="status" [loading]="loading" [tabindex]="tabindex">Basic Button</button>
+    <button daff-stroked-button [color]="color" [size]="size" [status]="status" [loading]="loading" [tabindex]="tabindex">Stroked Button</button>
+    <button daff-raised-button [color]="color" [size]="size" [status]="status" [loading]="loading" [tabindex]="tabindex">Raised Button</button>
+    <button daff-icon-button [color]="color" [size]="size" [status]="status" [loading]="loading" [tabindex]="tabindex">Icon Button</button>
+    <button daff-underline-button [color]="color" [size]="size" [status]="status" [loading]="loading" [tabindex]="tabindex">Underline Button</button>
   `,
 })
 
 class WrapperComponent {
   color: DaffPalette;
   size: DaffButtonSize;
   status: DaffStatus;
+  loading = false;
+  tabindex = 0;
 }
 
 describe('DaffButtonComponent', () => {
@@ -190,4 +192,34 @@ describe('DaffButtonComponent', () => {
       expect(de.nativeElement.classList.contains('daff-warn')).toEqual(true);
     });
   });
+
+  describe('using the tabindex property of a button', () => {
+    it('should be able to take `tabindex` as an input', () => {
+      expect(component.tabindex).toEqual(wrapper.tabindex);
+    });
+  });
+
+
+  describe('when the button is disabled', () => {
+    beforeEach(() => {
+      component.disabled = true;
+      fixture.detectChanges();
+    });
+
+    it('should add a disabled class to the host element', () => {
+      expect(de.nativeElement.classList.contains('daff-button--disabled')).toBeTruthy();
+    });
+
+    it('should set disabled to true', () => {
+      expect(de.nativeElement.attributes['disabled'].value).toEqual('true');
+    });
+
+    it('should set aria-disabled to true', () => {
+      expect(de.nativeElement.attributes['aria-disabled'].value).toEqual('true');
+    });
+
+    it('should set the tabindex to -1', () => {
+      expect(de.nativeElement.attributes['tabindex'].value).toEqual('-1');
+    });
+  });
 });

libs/design/src/atoms/button/button.component.ts

@@ -1,3 +1,4 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   Component,
   OnInit,
@@ -6,6 +7,7 @@ import {
   ElementRef,
   HostBinding,
   Renderer2,
+  Input,
 } from '@angular/core';
 
 import { daffArticleEncapsulatedMixin } from '../../core/article-encapsulated/public_api';
@@ -150,6 +152,37 @@ export class DaffButtonComponent
     return this.buttonType === DaffButtonTypeEnum.Underline;
   }
 
+  @HostBinding('class.daff-button--disabled') get disabledClass() {
+	  return this.disabled;
+  }
+
+  @Input() loading = false;
+  @Input() tabindex = 0;
+
+  _disabled = false;
+
+  /**
+   * The disabled state of the button.
+   */
+  @Input() get disabled() {
+	  return this._disabled || this.loading;
+  }
+  set disabled(value: any) {
+	  this._disabled = coerceBooleanProperty(value);
+  }
+
+  @HostBinding('attr.disabled') get disabledAttribute() {
+	  return this.disabled ? true : null;
+  }
+
+  @HostBinding('attr.aria-disabled') get ariaDisabled() {
+	  return this.disabled ? true : null;
+  }
+
+  @HostBinding('attr.tabindex') get disabledTabIndex() {
+	  return this.disabled ? -1 : this.tabindex;
+  }
+
   private _getHostElement() {
     return this.elementRef.nativeElement;
   }