[EC-556] refactor cl button

libs/components/src/button/button.component.html

@@ -0,0 +1,8 @@
+<span class="tw-relative">
+  <span [ngClass]="{ 'tw-invisible': loading }">
+    <ng-content></ng-content>
+  </span>
+  <span class="tw-absolute tw-inset-0" [ngClass]="{ 'tw-invisible': !loading }">
+    <i class="bwi bwi-spinner bwi-lg bwi-spin tw-align-baseline" aria-hidden="true"></i>
+  </span>
+</span>

libs/components/src/button/button.directive.spec.ts → libs/components/src/button/button.component.spec.ts

@@ -60,16 +60,61 @@ describe("Button", () => {
     expect(buttonDebugElement.nativeElement.classList.contains("tw-block")).toBe(false);
     expect(linkDebugElement.nativeElement.classList.contains("tw-block")).toBe(false);
   });
+
+  it("should not be disabled when loading and disabled are false", () => {
+    testAppComponent.loading = false;
+    testAppComponent.disabled = false;
+    fixture.detectChanges();
+
+    expect(buttonDebugElement.attributes["loading"]).toBeFalsy();
+    expect(linkDebugElement.attributes["loading"]).toBeFalsy();
+    expect(buttonDebugElement.nativeElement.disabled).toBeFalsy();
+  });
+
+  it("should be disabled when disabled is true", () => {
+    testAppComponent.disabled = true;
+    fixture.detectChanges();
+
+    expect(buttonDebugElement.nativeElement.disabled).toBeTruthy();
+    // Anchor tags cannot be disabled.
+  });
+
+  it("should be disabled when loading is true", () => {
+    testAppComponent.loading = true;
+    fixture.detectChanges();
+
+    expect(buttonDebugElement.nativeElement.disabled).toBeTruthy();
+  });
 });
 
 @Component({
   selector: "test-app",
   template: `
-    <button type="button" bitButton [buttonType]="buttonType" [block]="block">Button</button>
-    <a href="#" bitButton [buttonType]="buttonType" [block]="block"> Link </a>
+    <button
+      type="button"
+      bitButton
+      [buttonType]="buttonType"
+      [block]="block"
+      [disabled]="disabled"
+      [loading]="loading"
+    >
+      Button
+    </button>
+    <a
+      href="#"
+      bitButton
+      [buttonType]="buttonType"
+      [block]="block"
+      [disabled]="disabled"
+      [loading]="loading"
+    >
+      Link
+    </a>
   `,
 })
 class TestApp {
   buttonType: string;
   block: boolean;
+  disabled: boolean;
+  loading: boolean;
 }

libs/components/src/button/button.directive.ts → libs/components/src/button/button.component.ts

@@ -1,4 +1,4 @@
-import { Input, HostBinding, Directive } from "@angular/core";
+import { Input, HostBinding, Component } from "@angular/core";
 
 export type ButtonTypes = "primary" | "secondary" | "danger";
 
@@ -38,10 +38,11 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
   ],
 };
 
-@Directive({
+@Component({
   selector: "button[bitButton], a[bitButton]",
+  templateUrl: "button.component.html",
 })
-export class ButtonDirective {
+export class ButtonComponent {
   @HostBinding("class") get classList() {
     return [
       "tw-font-semibold",
@@ -65,6 +66,12 @@ export class ButtonDirective {
       .concat(buttonStyles[this.buttonType ?? "secondary"]);
   }
 
+  @HostBinding("attr.disabled") get disabledAttr() {
+    return this.disabled || this.loading ? true : null;
+  }
+
   @Input() buttonType: ButtonTypes = null;
   @Input() block?: boolean;
+  @Input() loading = false;
+  @Input() disabled = false;
 }

libs/components/src/button/button.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
-import { ButtonDirective } from "./button.directive";
+import { ButtonComponent } from "./button.component";
 
 @NgModule({
   imports: [CommonModule],
-  exports: [ButtonDirective],
-  declarations: [ButtonDirective],
+  exports: [ButtonComponent],
+  declarations: [ButtonComponent],
 })
 export class ButtonModule {}

libs/components/src/button/button.stories.ts

@@ -1,12 +1,14 @@
 import { Meta, Story } from "@storybook/angular";
 
-import { ButtonDirective } from "./button.directive";
+import { ButtonComponent } from "./button.component";
 
 export default {
   title: "Component Library/Button",
-  component: ButtonDirective,
+  component: ButtonComponent,
   args: {
     buttonType: "primary",
+    disabled: false,
+    loading: false,
   },
   parameters: {
     design: {
@@ -16,11 +18,11 @@ export default {
   },
 } as Meta;
 
-const Template: Story<ButtonDirective> = (args: ButtonDirective) => ({
+const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
   props: args,
   template: `
-    <button bitButton [buttonType]="buttonType" [block]="block">Button</button>
-    <a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">Link</a>
+    <button bitButton [disabled]="disabled" [buttonType]="buttonType" [block]="block">Button</button>
+    <a bitButton [disabled]="disabled" [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">Link</a>
   `,
 });
 
@@ -39,21 +41,28 @@ Danger.args = {
   buttonType: "danger",
 };
 
-const DisabledTemplate: Story = (args) => ({
+const AllStylesTemplate: Story = (args) => ({
   props: args,
   template: `
-    <button bitButton disabled buttonType="primary" class="tw-mr-2">Primary</button>
-    <button bitButton disabled buttonType="secondary" class="tw-mr-2">Secondary</button>
-    <button bitButton disabled buttonType="danger" class="tw-mr-2">Danger</button>
+    <button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
+    <button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
+    <button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
   `,
 });
 
-export const Disabled = DisabledTemplate.bind({});
+export const Disabled = AllStylesTemplate.bind({});
 Disabled.args = {
-  size: "small",
+  disabled: true,
+  loading: false,
 };
 
-const BlockTemplate: Story<ButtonDirective> = (args: ButtonDirective) => ({
+export const Loading = AllStylesTemplate.bind({});
+Loading.args = {
+  disabled: false,
+  loading: true,
+};
+
+const BlockTemplate: Story<ButtonComponent> = (args: ButtonComponent) => ({
   props: args,
   template: `
     <span class="tw-flex">

libs/components/src/button/index.ts

@@ -1,2 +1,2 @@
-export * from "./button.directive";
+export * from "./button.component";
 export * from "./button.module";

libs/components/src/submit-button/submit-button.component.html

@@ -3,14 +3,8 @@
   type="submit"
   [block]="block"
   [buttonType]="buttonType"
-  [disabled]="loading || disabled"
+  [disabled]="disabled"
+  [loading]="loading"
 >
-  <span class="tw-relative">
-    <span [ngClass]="{ 'tw-invisible': loading }">
-      <ng-content></ng-content>
-    </span>
-    <span class="tw-absolute tw-inset-0" [ngClass]="{ 'tw-invisible': !loading }">
-      <i class="bwi bwi-spinner bwi-lg bwi-spin tw-align-baseline" aria-hidden="true"></i>
-    </span>
-  </span>
+  <ng-content></ng-content>
 </button>