From 80f4935171489e924d7d9c20fa198f091f1dcdff Mon Sep 17 00:00:00 2001 From: Will Martin Date: Tue, 27 Aug 2024 09:12:28 -0400 Subject: [PATCH] [CL-324] migrate app-callout internals to bit-callout (#9925) --- .../src/auth/popup/lock.component.html | 2 +- apps/browser/src/popup/scss/misc.scss | 96 ------------------- apps/desktop/src/scss/misc.scss | 86 ----------------- apps/web/src/scss/callouts.scss | 79 --------------- apps/web/src/scss/styles.scss | 1 - .../select-payment-method.component.html | 2 +- .../src/components/callout.component.html | 15 +-- .../src/components/callout.component.ts | 37 ++----- libs/angular/src/jslib.module.ts | 8 +- .../src/callout/callout.component.ts | 2 +- 10 files changed, 17 insertions(+), 311 deletions(-) delete mode 100644 apps/web/src/scss/callouts.scss diff --git a/apps/browser/src/auth/popup/lock.component.html b/apps/browser/src/auth/popup/lock.component.html index 5ea839470b..ccc743d86d 100644 --- a/apps/browser/src/auth/popup/lock.component.html +++ b/apps/browser/src/auth/popup/lock.component.html @@ -89,7 +89,7 @@

- {{ biometricError }} + {{ biometricError }}

{{ "awaitDesktop" | i18n }}

diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss index 134bac917d..57bd3e010c 100644 --- a/apps/browser/src/popup/scss/misc.scss +++ b/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; } diff --git a/apps/desktop/src/scss/misc.scss b/apps/desktop/src/scss/misc.scss index ccc0af8fa4..75a72640f2 100644 --- a/apps/desktop/src/scss/misc.scss +++ b/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; diff --git a/apps/web/src/scss/callouts.scss b/apps/web/src/scss/callouts.scss deleted file mode 100644 index da28d60716..0000000000 --- a/apps/web/src/scss/callouts.scss +++ /dev/null @@ -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"); - } - } - } -} diff --git a/apps/web/src/scss/styles.scss b/apps/web/src/scss/styles.scss index 8fbea200a9..d17181615c 100644 --- a/apps/web/src/scss/styles.scss +++ b/apps/web/src/scss/styles.scss @@ -45,7 +45,6 @@ @import "./base"; @import "./buttons"; -@import "./callouts"; @import "./cards"; @import "./forms"; @import "./modals"; diff --git a/libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html b/libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html index 7add3f6d35..f7e57acb7f 100644 --- a/libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html +++ b/libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html @@ -141,7 +141,7 @@ - + {{ "makeSureEnoughCredit" | i18n }} diff --git a/libs/angular/src/components/callout.component.html b/libs/angular/src/components/callout.component.html index a049d5cb72..7e352fa0ce 100644 --- a/libs/angular/src/components/callout.component.html +++ b/libs/angular/src/components/callout.component.html @@ -1,14 +1,5 @@ -
-

- - {{ title }} -

-
+ +
{{ enforcedPolicyMessage }}
  • @@ -32,4 +23,4 @@
-
+ diff --git a/libs/angular/src/components/callout.component.ts b/libs/angular/src/components/callout.component.ts index c595beec19..2fd0878654 100644 --- a/libs/angular/src/components/callout.component.ts +++ b/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 { - @Input() type = "info"; +export class DeprecatedCalloutComponent implements OnInit { + @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() { diff --git a/libs/angular/src/jslib.module.ts b/libs/angular/src/jslib.module.ts index da8a4dd418..755d52c0e7 100644 --- a/libs/angular/src/jslib.module.ts +++ b/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, diff --git a/libs/components/src/callout/callout.component.ts b/libs/components/src/callout/callout.component.ts index 6942d4bc15..bfeae17b35 100644 --- a/libs/components/src/callout/callout.component.ts +++ b/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 = { success: "bwi-check",