From 0bfbba2d03b5371dd9e5adbcce6767bea1fe85af Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Wed, 3 Jul 2024 15:17:47 -0400
Subject: [PATCH] [CL-234] callout style refresh (#9920)

* update callout styles; make component standalone

* add import block to mdx page
---
 .../components/src/callout/callout.component.html | 15 ++++++---------
 .../src/callout/callout.component.spec.ts         |  2 +-
 libs/components/src/callout/callout.component.ts  | 13 +++++++++----
 libs/components/src/callout/callout.mdx           |  4 ++++
 libs/components/src/callout/callout.module.ts     |  4 +---
 5 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html
index 57da850d8bb..f64e197b9ef 100644
--- a/libs/components/src/callout/callout.component.html
+++ b/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>
diff --git a/libs/components/src/callout/callout.component.spec.ts b/libs/components/src/callout/callout.component.spec.ts
index 36abae437d5..b7388da3492 100644
--- a/libs/components/src/callout/callout.component.spec.ts
+++ b/libs/components/src/callout/callout.component.spec.ts
@@ -12,7 +12,7 @@ describe("Callout", () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [CalloutComponent],
+      imports: [CalloutComponent],
       providers: [
         {
           provide: I18nService,
diff --git a/libs/components/src/callout/callout.component.ts b/libs/components/src/callout/callout.component.ts
index 6942d4bc15a..f7235534d70 100644
--- a/libs/components/src/callout/callout.component.ts
+++ b/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";
     }
   }
 
diff --git a/libs/components/src/callout/callout.mdx b/libs/components/src/callout/callout.mdx
index a40a970f895..3fdb53943b4 100644
--- a/libs/components/src/callout/callout.mdx
+++ b/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
diff --git a/libs/components/src/callout/callout.module.ts b/libs/components/src/callout/callout.module.ts
index fac89dfbcf9..ad7e083fec7 100644
--- a/libs/components/src/callout/callout.module.ts
+++ b/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 {}