[CL-324] migrate app-callout internals to bit-callout (#9925)

apps/browser/src/auth/popup/lock.component.html

@@ -89,7 +89,7 @@
       <p class="text-center" *ngIf="!fido2Data.isFido2Session">
         <button type="button" appStopClick (click)="logOut()">{{ "logOut" | i18n }}</button>
       </p>
-      <app-callout *ngIf="biometricError" type="error">{{ biometricError }}</app-callout>
+      <app-callout *ngIf="biometricError" type="danger">{{ biometricError }}</app-callout>
       <p class="text-center text-muted" *ngIf="pendingBiometric">
         <i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i> {{ "awaitDesktop" | i18n }}
       </p>

apps/browser/src/popup/scss/misc.scss

@@ -287,102 +287,6 @@ app-vault-icon,
   cursor: move;
 }
 
-.callout {
-  padding: 10px;
-  margin: 10px;
-  border: 1px solid #000000;
-  border-left-width: 5px;
-  border-radius: 3px;
-  @include themify($themes) {
-    border-color: themed("calloutBorderColor");
-    background-color: themed("calloutBackgroundColor");
-  }
-
-  .callout-heading {
-    margin-top: 0;
-  }
-
-  h3.callout-heading {
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-
-  &.callout-primary {
-    @include themify($themes) {
-      border-left-color: themed("primaryColor");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("primaryColor");
-      }
-    }
-  }
-
-  &.callout-info {
-    @include themify($themes) {
-      border-left-color: themed("infoColor");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("infoColor");
-      }
-    }
-  }
-
-  &.callout-danger {
-    @include themify($themes) {
-      border-left-color: themed("dangerColor");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("dangerColor");
-      }
-    }
-  }
-
-  &.callout-success {
-    @include themify($themes) {
-      border-left-color: themed("successColor");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("successColor");
-      }
-    }
-  }
-
-  &.callout-warning {
-    @include themify($themes) {
-      border-left-color: themed("warningColor");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("warningColor");
-      }
-    }
-  }
-
-  &.clickable {
-    &:hover,
-    &:focus,
-    &.active {
-      @include themify($themes) {
-        background-color: themed("boxBackgroundHoverColor");
-      }
-    }
-  }
-
-  .enforced-policy-options ul {
-    padding-left: 30px;
-    margin: 0;
-  }
-}
-
 input[type="password"]::-ms-reveal {
   display: none;
 }

apps/desktop/src/scss/misc.scss

@@ -439,92 +439,6 @@ app-root > #loading,
   cursor: move;
 }
 
-.callout {
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #000000;
-  border-left-width: 5px;
-  border-radius: 3px;
-  @include themify($themes) {
-    border-color: themed("calloutBorderColor");
-    background-color: themed("calloutBackgroundColor");
-  }
-
-  .callout-heading {
-    margin-top: 0;
-  }
-
-  h3.callout-heading {
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-
-  &.callout-primary {
-    @include themify($themes) {
-      border-left-color: themed("primaryColor");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("primaryColor");
-      }
-    }
-  }
-
-  &.callout-info {
-    @include themify($themes) {
-      border-left-color: themed("infoColor");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("infoColor");
-      }
-    }
-  }
-
-  &.callout-danger {
-    @include themify($themes) {
-      border-left-color: themed("dangerColor");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("dangerColor");
-      }
-    }
-  }
-
-  &.callout-success {
-    @include themify($themes) {
-      border-left-color: themed("successColor");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("successColor");
-      }
-    }
-  }
-
-  &.callout-warning {
-    @include themify($themes) {
-      border-left-color: themed("warningColor");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("warningColor");
-      }
-    }
-  }
-
-  ul {
-    padding-left: 40px;
-    margin: 0;
-  }
-}
-
 .password-reprompt {
   text-align: left;
   margin-top: 15px;

apps/web/src/scss/callouts.scss

@@ -1,79 +0,0 @@
-.callout {
-  border-left-width: 5px !important;
-  border-radius: $card-inner-border-radius;
-  margin-bottom: $alert-margin-bottom;
-  padding: $alert-padding-y $alert-padding-x;
-  @include themify($themes) {
-    background-color: themed("calloutBackground");
-    border: 1px solid themed("borderColor");
-    color: themed("calloutColor");
-  }
-
-  .callout-heading {
-    margin-top: 0;
-  }
-
-  h3.callout-heading {
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-
-  &.callout-primary {
-    @include themify($themes) {
-      border-left-color: themed("primary");
-    }
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("primary");
-      }
-    }
-  }
-
-  &.callout-info {
-    @include themify($themes) {
-      border-left-color: themed("info");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("info");
-      }
-    }
-  }
-
-  &.callout-danger {
-    @include themify($themes) {
-      border-left-color: themed("danger");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("danger");
-      }
-    }
-  }
-
-  &.callout-success {
-    @include themify($themes) {
-      border-left-color: themed("success");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("success");
-      }
-    }
-  }
-
-  &.callout-warning {
-    @include themify($themes) {
-      border-left-color: themed("warning");
-    }
-
-    .callout-heading {
-      @include themify($themes) {
-        color: themed("warning");
-      }
-    }
-  }
-}

apps/web/src/scss/styles.scss

@@ -45,7 +45,6 @@
 
 @import "./base";
 @import "./buttons";
-@import "./callouts";
 @import "./cards";
 @import "./forms";
 @import "./modals";

libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html

@@ -141,7 +141,7 @@
   </ng-container>
   <!-- Account Credit -->
   <ng-container *ngIf="showAccountCredit && usingAccountCredit">
-    <app-callout type="note">
+    <app-callout type="info">
       {{ "makeSureEnoughCredit" | i18n }}
     </app-callout>
   </ng-container>

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

@@ -1,14 +1,5 @@
-<div
+<bit-callout [icon]="icon" [title]="title" [type]="$any(type)" [useAlertRole]="useAlertRole">
-  #callout
+  <div class="tw-pl-7 tw-m-0" *ngIf="enforcedPolicyOptions">
-  class="callout callout-{{ calloutStyle }}"
-  [ngClass]="{ clickable: clickable }"
-  [attr.role]="useAlertRole ? 'alert' : null"
->
-  <h3 class="callout-heading" *ngIf="title">
-    <i class="bwi {{ icon }}" *ngIf="icon" aria-hidden="true"></i>
-    {{ title }}
-  </h3>
-  <div class="enforced-policy-options" *ngIf="enforcedPolicyOptions">
     {{ enforcedPolicyMessage }}
     <ul>
       <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
@@ -32,4 +23,4 @@
     </ul>
   </div>
   <ng-content></ng-content>
-</div>
+</bit-callout>

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

@@ -2,16 +2,19 @@ import { Component, Input, OnInit } from "@angular/core";
 
 import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CalloutTypes } from "@bitwarden/components";
 
+/**
+ * @deprecated use the CL's `CalloutComponent` instead
+ */
 @Component({
   selector: "app-callout",
   templateUrl: "callout.component.html",
 })
-export class CalloutComponent implements OnInit {
+export class DeprecatedCalloutComponent implements OnInit {
-  @Input() type = "info";
+  @Input() type: CalloutTypes = "info";
   @Input() icon: string;
   @Input() title: string;
-  @Input() clickable: boolean;
   @Input() enforcedPolicyOptions: MasterPasswordPolicyOptions;
   @Input() enforcedPolicyMessage: string;
   @Input() useAlertRole = false;
@@ -26,34 +29,6 @@ export class CalloutComponent implements OnInit {
     if (this.enforcedPolicyMessage === undefined) {
       this.enforcedPolicyMessage = this.i18nService.t("masterPasswordPolicyInEffect");
     }
-
-    if (this.type === "warning" || this.type === "danger") {
-      if (this.type === "danger") {
-        this.calloutStyle = "danger";
-      }
-      if (this.title === undefined) {
-        this.title = this.i18nService.t("warning");
-      }
-      if (this.icon === undefined) {
-        this.icon = "bwi-exclamation-triangle";
-      }
-    } else if (this.type === "error") {
-      this.calloutStyle = "danger";
-      if (this.title === undefined) {
-        this.title = this.i18nService.t("error");
-      }
-      if (this.icon === undefined) {
-        this.icon = "bwi-error";
-      }
-    } else if (this.type === "tip") {
-      this.calloutStyle = "success";
-      if (this.title === undefined) {
-        this.title = this.i18nService.t("tip");
-      }
-      if (this.icon === undefined) {
-        this.icon = "bwi-lightbulb";
-      }
-    }
   }
 
   getPasswordScoreAlertDisplay() {

libs/angular/src/jslib.module.ts

@@ -14,6 +14,7 @@ import {
   AsyncActionsModule,
   AutofocusDirective,
   ButtonModule,
+  CalloutModule,
   CheckboxModule,
   DialogModule,
   FormFieldModule,
@@ -29,7 +30,7 @@ import {
 } from "@bitwarden/components";
 
 import { TwoFactorIconComponent } from "./auth/components/two-factor-icon.component";
-import { CalloutComponent } from "./components/callout.component";
+import { DeprecatedCalloutComponent } from "./components/callout.component";
 import { A11yInvalidDirective } from "./directives/a11y-invalid.directive";
 import { A11yTitleDirective } from "./directives/a11y-title.directive";
 import { ApiActionDirective } from "./directives/api-action.directive";
@@ -72,6 +73,7 @@ import { IconComponent } from "./vault/components/icon.component";
     FormFieldModule,
     SelectModule,
     ButtonModule,
+    CalloutModule,
     CheckboxModule,
     DialogModule,
     TypographyModule,
@@ -88,7 +90,7 @@ import { IconComponent } from "./vault/components/icon.component";
     ApiActionDirective,
     AutofocusDirective,
     BoxRowDirective,
-    CalloutComponent,
+    DeprecatedCalloutComponent,
     CopyTextDirective,
     CreditCardNumberPipe,
     EllipsisPipe,
@@ -125,7 +127,7 @@ import { IconComponent } from "./vault/components/icon.component";
     AutofocusDirective,
     ToastModule,
     BoxRowDirective,
-    CalloutComponent,
+    DeprecatedCalloutComponent,
     CopyTextDirective,
     CreditCardNumberPipe,
     EllipsisPipe,

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

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
-type CalloutTypes = "success" | "info" | "warning" | "danger";
+export type CalloutTypes = "success" | "info" | "warning" | "danger";
 
 const defaultIcon: Record<CalloutTypes, string> = {
   success: "bwi-check",