[CL-234] callout style refresh (#9920)

* update callout styles; make component standalone

* add import block to mdx page

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

@@ -1,16 +1,13 @@
 <aside
-  class="tw-mb-4 tw-box-border tw-rounded tw-border tw-border-l-8 tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-px-5 tw-py-3 tw-leading-5 tw-text-main"
+  class="tw-mb-4 tw-box-border tw-rounded-lg tw-border tw-border-l-4 tw-border-solid tw-bg-background tw-pl-3 tw-pr-2 tw-py-2 tw-leading-5 tw-text-main"
   [ngClass]="calloutClass"
   [attr.aria-labelledby]="titleId"
 >
-  <header
-    id="{{ titleId }}"
-    class="tw-mb-2 tw-mt-0 tw-text-base tw-font-bold tw-uppercase"
-    [ngClass]="headerClass"
-    *ngIf="title"
-  >
-    <i class="bwi {{ icon }}" *ngIf="icon" aria-hidden="true"></i>
+  <header id="{{ titleId }}" class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold" *ngIf="title">
+    <i class="bwi" [ngClass]="[icon, headerClass]" *ngIf="icon" aria-hidden="true"></i>
     {{ title }}
   </header>
-  <ng-content></ng-content>
+  <div bitTypography="body2">
+    <ng-content></ng-content>
+  </div>
 </aside>

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

@@ -12,7 +12,7 @@ describe("Callout", () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [CalloutComponent],
+      imports: [CalloutComponent],
       providers: [
         {
           provide: I18nService,

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

@@ -2,6 +2,9 @@ import { Component, Input, OnInit } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
+import { SharedModule } from "../shared";
+import { TypographyModule } from "../typography";
+
 type CalloutTypes = "success" | "info" | "warning" | "danger";
 
 const defaultIcon: Record<CalloutTypes, string> = {
@@ -22,6 +25,8 @@ let nextId = 0;
 @Component({
   selector: "bit-callout",
   templateUrl: "callout.component.html",
+  standalone: true,
+  imports: [SharedModule, TypographyModule],
 })
 export class CalloutComponent implements OnInit {
   @Input() type: CalloutTypes = "info";
@@ -42,13 +47,13 @@ export class CalloutComponent implements OnInit {
   get calloutClass() {
     switch (this.type) {
       case "danger":
-        return "tw-border-l-danger-600";
+        return "tw-border-danger-600";
       case "info":
-        return "tw-border-l-info-600";
+        return "tw-border-info-600";
       case "success":
-        return "tw-border-l-success-600";
+        return "tw-border-success-600";
       case "warning":
-        return "tw-border-l-warning-600";
+        return "tw-border-warning-600";
     }
   }
 

libs/components/src/callout/callout.mdx

@@ -2,6 +2,10 @@ import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
 
 import * as stories from "./callout.stories";
 
+```ts
+import { CalloutModule } from "@bitwarden/components";
+```
+
 <Meta of={stories} />
 
 # Callouts

libs/components/src/callout/callout.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { CalloutComponent } from "./callout.component";
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CalloutComponent],
   exports: [CalloutComponent],
-  declarations: [CalloutComponent],
 })
 export class CalloutModule {}