[bug] CL - fix default button display and callout header class (#756)

components/src/button/button.component.spec.ts

@@ -1,10 +1,15 @@
-import { Component } from "@angular/core";
+import { Component, DebugElement } from "@angular/core";
-import { TestBed, waitForAsync } from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 
 import { ButtonModule } from "./index";
 
 describe("Button", () => {
+  let fixture: ComponentFixture<TestApp>;
+  let testAppComponent: TestApp;
+  let buttonDebugElement: DebugElement;
+  let linkDebugElement: DebugElement;
+
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
@@ -13,16 +18,14 @@ describe("Button", () => {
       });
 
       TestBed.compileComponents();
+      fixture = TestBed.createComponent(TestApp);
+      testAppComponent = fixture.debugElement.componentInstance;
+      buttonDebugElement = fixture.debugElement.query(By.css("button"));
+      linkDebugElement = fixture.debugElement.query(By.css("a"));
     })
   );
 
   it("should apply classes based on type", () => {
-    const fixture = TestBed.createComponent(TestApp);
-
-    const testAppComponent: TestApp = fixture.debugElement.componentInstance;
-    const buttonDebugElement = fixture.debugElement.query(By.css("button"));
-    const linkDebugElement = fixture.debugElement.query(By.css("a"));
-
     testAppComponent.buttonType = "primary";
     fixture.detectChanges();
     expect(buttonDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true);
@@ -43,15 +46,32 @@ describe("Button", () => {
     expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
     expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
   });
+
+  it("should apply block when true and inline-block when false", () => {
+    testAppComponent.block = true;
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-block")).toBe(true);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-block")).toBe(true);
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(false);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(false);
+
+    testAppComponent.block = false;
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(true);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(true);
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-block")).toBe(false);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-block")).toBe(false);
+  });
 });
 
 @Component({
   selector: "test-app",
   template: `
-    <button type="button" bit-button [buttonType]="buttonType">Button</button>
+    <button type="button" bit-button [buttonType]="buttonType" [block]="block">Button</button>
-    <a href="#" bit-button [buttonType]="buttonType"> Link </a>
+    <a href="#" bit-button [buttonType]="buttonType" [block]="block"> Link </a>
   `,
 })
 class TestApp {
   buttonType: string;
+  block: boolean;
 }

components/src/button/button.component.ts

@@ -74,7 +74,7 @@ export class ButtonComponent implements OnInit, OnChanges {
       "focus:tw-ring",
       "focus:tw-ring-offset-2",
       "focus:tw-ring-primary-700",
-      this.block ? "tw-w-full tw-block" : "",
+      this.block ? "tw-w-full tw-block" : "tw-inline-block",
       buttonStyles[this.buttonType ?? "secondary"],
     ];
   }

components/src/callout/callout.component.spec.ts

@@ -33,6 +33,7 @@ describe("Callout", () => {
       fixture.detectChanges();
       expect(component.title).toBeUndefined();
       expect(component.icon).toBe("bwi-check");
+      expect(component.headerClass).toBe("!tw-text-success");
     });
 
     it("info", () => {
@@ -40,6 +41,7 @@ describe("Callout", () => {
       fixture.detectChanges();
       expect(component.title).toBeUndefined();
       expect(component.icon).toBe("bwi-info-circle");
+      expect(component.headerClass).toBe("!tw-text-info");
     });
 
     it("warning", () => {
@@ -47,6 +49,7 @@ describe("Callout", () => {
       fixture.detectChanges();
       expect(component.title).toBe("Warning");
       expect(component.icon).toBe("bwi-exclamation-triangle");
+      expect(component.headerClass).toBe("!tw-text-warning");
     });
 
     it("danger", () => {
@@ -54,6 +57,7 @@ describe("Callout", () => {
       fixture.detectChanges();
       expect(component.title).toBe("Error");
       expect(component.icon).toBe("bwi-error");
+      expect(component.headerClass).toBe("!tw-text-danger");
     });
   });
 });

components/src/callout/callout.component.ts

@@ -51,13 +51,13 @@ export class CalloutComponent implements OnInit {
   get headerClass() {
     switch (this.type) {
       case "danger":
-        return "tw-text-danger";
+        return "!tw-text-danger";
       case "info":
-        return "tw-text-info";
+        return "!tw-text-info";
       case "success":
-        return "tw-text-success";
+        return "!tw-text-success";
       case "warning":
-        return "tw-text-warning";
+        return "!tw-text-warning";
     }
   }
 }