[CL-688] Callout UI updates (#15152)

* refresh callout ui

* fix callout padding

* Use more descriptive example text

* position icon. Change padding back

libs/components/src/callout/callout.component.html

@@ -1,20 +1,24 @@
 <aside
-  class="tw-mb-4 tw-box-border tw-rounded-lg tw-border tw-border-l-4 tw-border-solid tw-bg-background tw-ps-3 tw-pe-2 tw-py-2 tw-leading-5 tw-text-main"
+  class="tw-mb-4 tw-box-border tw-rounded-lg tw-bg-background tw-ps-3 tw-pe-3 tw-py-2 tw-leading-5 tw-text-main"
   [ngClass]="calloutClass"
   [attr.aria-labelledby]="titleId"
 >
   @if (title) {
     <header
       id="{{ titleId }}"
-      class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold tw-flex tw-gap-2 tw-items-center"
+      class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold tw-flex tw-gap-2 tw-items-start"
     >
       @if (icon) {
-        <i class="bwi" [ngClass]="[icon, headerClass]" aria-hidden="true"></i>
+        <i
+          class="bwi !tw-text-main tw-relative tw-top-[3px]"
+          [ngClass]="[icon]"
+          aria-hidden="true"
+        ></i>
       }
       {{ title }}
     </header>
   }
-  <div bitTypography="body2">
+  <div class="tw-ps-6" bitTypography="body2">
     <ng-content></ng-content>
   </div>
 </aside>

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

@@ -33,8 +33,7 @@ describe("Callout", () => {
       component.type = "success";
       fixture.detectChanges();
       expect(component.title).toBeUndefined();
-      expect(component.icon).toBe("bwi-check");
-      expect(component.headerClass).toBe("!tw-text-success");
+      expect(component.icon).toBe("bwi-check-circle");
     });
 
     it("info", () => {
@@ -42,7 +41,6 @@ describe("Callout", () => {
       fixture.detectChanges();
       expect(component.title).toBeUndefined();
       expect(component.icon).toBe("bwi-info-circle");
-      expect(component.headerClass).toBe("!tw-text-info");
     });
 
     it("warning", () => {
@@ -50,7 +48,6 @@ 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", () => {
@@ -58,7 +55,6 @@ describe("Callout", () => {
       fixture.detectChanges();
       expect(component.title).toBe("Error");
       expect(component.icon).toBe("bwi-error");
-      expect(component.headerClass).toBe("!tw-text-danger");
     });
   });
 });

libs/components/src/callout/callout.component.ts

@@ -10,7 +10,7 @@ import { TypographyModule } from "../typography";
 export type CalloutTypes = "success" | "info" | "warning" | "danger";
 
 const defaultIcon: Record<CalloutTypes, string> = {
-  success: "bwi-check",
+  success: "bwi-check-circle",
   info: "bwi-info-circle",
   warning: "bwi-exclamation-triangle",
   danger: "bwi-error",
@@ -53,26 +53,13 @@ export class CalloutComponent implements OnInit {
   get calloutClass() {
     switch (this.type) {
       case "danger":
-        return "tw-border-danger-600";
+        return "tw-bg-danger-100";
       case "info":
-        return "tw-border-info-600";
+        return "tw-bg-info-100";
       case "success":
-        return "tw-border-success-600";
+        return "tw-bg-success-100";
       case "warning":
-        return "tw-border-warning-600";
-    }
-  }
-
-  get headerClass() {
-    switch (this.type) {
-      case "danger":
-        return "!tw-text-danger";
-      case "info":
-        return "!tw-text-info";
-      case "success":
-        return "!tw-text-success";
-      case "warning":
-        return "!tw-text-warning";
+        return "tw-bg-warning-100";
     }
   }
 }

libs/components/src/callout/callout.stories.ts

@@ -39,11 +39,11 @@ export const Info: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>Content</bit-callout>
+      <bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>The content of the callout</bit-callout>
     `,
   }),
   args: {
-    title: "Title",
+    title: "Callout title",
   },
 };