callout improvements, sorry not sorry

libs/components/src/banner/banner.component.html

@@ -4,8 +4,8 @@
   [attr.role]="useAlertRole() ? 'status' : null"
   [attr.aria-live]="useAlertRole() ? 'polite' : null"
 >
-  @if (icon(); as iconClass) {
-    <i class="bwi tw-align-middle tw-text-base" [ngClass]="iconClass" aria-hidden="true"></i>
+  @if (icon(); as icon) {
+    <i class="bwi tw-align-middle tw-text-base" [ngClass]="icon" aria-hidden="true"></i>
   }
   <!-- Overriding focus-visible color for link buttons for a11y against colored background -->
   <span class="tw-grow tw-text-base [&>button[bitlink]:focus-visible:before]:!tw-ring-text-main">

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

@@ -3,12 +3,12 @@
   [ngClass]="calloutClass"
   [attr.aria-labelledby]="titleId"
 >
-  @if (title(); as title) {
+  @if (titleComputed(); as title) {
     <header
       id="{{ titleId }}"
       class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold tw-flex tw-gap-2 tw-items-start"
     >
-      @if (icon(); as icon) {
+      @if (iconComputed(); as icon) {
         <i
           class="bwi !tw-text-main tw-relative tw-top-[3px]"
           [ngClass]="[icon]"

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

@@ -30,31 +30,31 @@ describe("Callout", () => {
 
   describe("default state", () => {
     it("success", () => {
-      component.type = "success";
+      fixture.componentRef.setInput("type", "success");
       fixture.detectChanges();
-      expect(component.title).toBeUndefined();
-      expect(component.icon).toBe("bwi-check-circle");
+      expect(component.titleComputed()).toBeUndefined();
+      expect(component.iconComputed()).toBe("bwi-check-circle");
     });
 
     it("info", () => {
-      component.type = "info";
+      fixture.componentRef.setInput("type", "info");
       fixture.detectChanges();
-      expect(component.title).toBeUndefined();
-      expect(component.icon).toBe("bwi-info-circle");
+      expect(component.titleComputed()).toBeUndefined();
+      expect(component.iconComputed()).toBe("bwi-info-circle");
     });
 
     it("warning", () => {
-      component.type = "warning";
+      fixture.componentRef.setInput("type", "warning");
       fixture.detectChanges();
-      expect(component.title).toBe("Warning");
-      expect(component.icon).toBe("bwi-exclamation-triangle");
+      expect(component.titleComputed()).toBe("Warning");
+      expect(component.iconComputed()).toBe("bwi-exclamation-triangle");
     });
 
     it("danger", () => {
-      component.type = "danger";
+      fixture.componentRef.setInput("type", "danger");
       fixture.detectChanges();
-      expect(component.title).toBe("Error");
-      expect(component.icon).toBe("bwi-error");
+      expect(component.titleComputed()).toBe("Error");
+      expect(component.iconComputed()).toBe("bwi-error");
     });
   });
 });

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

@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Component, OnInit, input, model } from "@angular/core";
+import { Component, computed, input } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -34,23 +34,26 @@ let nextId = 0;
   templateUrl: "callout.component.html",
   imports: [SharedModule, TypographyModule],
 })
-export class CalloutComponent implements OnInit {
+export class CalloutComponent {
   readonly type = input<CalloutTypes>("info");
-  icon = model<string>();
-  title = model<string>();
+  readonly icon = input<string>();
+  readonly title = input<string>();
   readonly useAlertRole = input(false);
+  readonly iconComputed = computed(() => this.icon() ?? defaultIcon[this.type()]);
+  readonly titleComputed = computed(() => {
+    const title = this.title();
+    const type = this.type();
+    if (title == null && defaultI18n[type] != null) {
+      return this.i18nService.t(defaultI18n[type]);
+    }
+
+    return title;
+  });
+
   protected titleId = `bit-callout-title-${nextId++}`;
 
   constructor(private i18nService: I18nService) {}
 
-  ngOnInit() {
-    const type = this.type();
-    this.icon.update((icon) => icon === null && defaultIcon[type]);
-    if (this.title() == null && defaultI18n[type] != null) {
-      this.title.set(this.i18nService.t(defaultI18n[type]));
-    }
-  }
-
   get calloutClass() {
     switch (this.type()) {
       case "danger":

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

@@ -68,3 +68,18 @@ export const Danger: Story = {
     type: "danger",
   },
 };
+
+export const CustomIcon: Story = {
+  ...Info,
+  args: {
+    ...Info.args,
+    icon: "bwi-star",
+  },
+};
+
+export const NoTitle: Story = {
+  ...Info,
+  args: {
+    icon: "bwi-star",
+  },
+};