From 017da06f9ab7aa9da37f2b37ba6fe4312f2f6403 Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Tue, 19 Dec 2023 19:22:37 +0100 Subject: [PATCH] [CL-160] Rename BadgeType to BadgeVariant (#7244) We're establishing a common language for the Component Library. As part of this work we're renaming componentType to variant. Starting with badges. --- .../manage/groups.component.html | 2 +- .../member-dialog.component.html | 2 +- .../members/people.component.html | 16 ++++----- .../policies/policies.component.html | 2 +- .../access-selector.component.html | 2 +- .../emergency-access.component.html | 33 +++++++------------ .../webauthn-login-settings.component.html | 8 ++--- .../user-subscription.component.html | 2 +- ...nization-subscription-cloud.component.html | 4 +-- .../exposed-passwords-report.component.html | 2 +- .../reused-passwords-report.component.html | 2 +- .../weak-passwords-report.component.html | 2 +- .../pages/weak-passwords-report.component.ts | 6 ++-- .../report-card/report-card.component.html | 2 +- .../components/premium-badge.component.ts | 2 +- .../individual-vault/add-edit.component.html | 2 +- .../collection-name-badge.component.html | 4 +-- .../group-name-badge.component.html | 2 +- .../domain-add-edit-dialog.component.html | 4 +-- .../domain-verification.component.html | 4 +-- .../providers/manage/people.component.html | 10 +++--- .../shared/secrets-list.component.html | 4 +-- .../src/badge-list/badge-list.component.html | 4 +-- .../src/badge-list/badge-list.component.ts | 4 +-- .../src/badge-list/badge-list.stories.ts | 8 ++--- libs/components/src/badge/badge.directive.ts | 19 +++++++---- libs/components/src/badge/badge.stories.ts | 18 +++++----- libs/components/src/badge/index.ts | 2 +- .../multi-select/multi-select.component.html | 2 +- .../src/toggle-group/toggle-group.stories.ts | 10 +++--- 30 files changed, 91 insertions(+), 93 deletions(-) diff --git a/apps/web/src/app/admin-console/organizations/manage/groups.component.html b/apps/web/src/app/admin-console/organizations/manage/groups.component.html index d8055e4bdc..0c65c2812d 100644 --- a/apps/web/src/app/admin-console/organizations/manage/groups.component.html +++ b/apps/web/src/app/admin-console/organizations/manage/groups.component.html @@ -88,7 +88,7 @@ *ngIf="!g.details.accessAll" [items]="g.collectionNames" [maxItems]="3" - badgeType="secondary" + variant="secondary" > {{ "all" | i18n }} diff --git a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html index 65d9b766dd..b53cba9c26 100644 --- a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html +++ b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html @@ -5,7 +5,7 @@ {{ params.name }} - {{ "revoked" | i18n }} + {{ "revoked" | i18n }}
diff --git a/apps/web/src/app/admin-console/organizations/members/people.component.html b/apps/web/src/app/admin-console/organizations/members/people.component.html index d759807816..c99056dbbc 100644 --- a/apps/web/src/app/admin-console/organizations/members/people.component.html +++ b/apps/web/src/app/admin-console/organizations/members/people.component.html @@ -8,22 +8,22 @@ [attr.aria-label]="'memberStatusFilter' | i18n" > - {{ "all" | i18n }} {{ allCount }} + {{ "all" | i18n }} {{ allCount }} {{ "invited" | i18n }} - {{ invitedCount }} + {{ invitedCount }} {{ "needsConfirmation" | i18n }} - {{ acceptedCount }} + {{ acceptedCount }} {{ "revoked" | i18n }} - {{ revokedCount }} + {{ revokedCount }} @@ -160,21 +160,21 @@ {{ "invited" | i18n }} {{ "needsConfirmation" | i18n }} {{ "revoked" | i18n }} @@ -195,7 +195,7 @@ *ngIf="organization.useGroups || !u.accessAll" [items]="organization.useGroups ? u.groupNames : u.collectionNames" [maxItems]="3" - badgeType="secondary" + variant="secondary" > {{ "all" | i18n }} diff --git a/apps/web/src/app/admin-console/organizations/policies/policies.component.html b/apps/web/src/app/admin-console/organizations/policies/policies.component.html index d12502398f..8f2c0760bd 100644 --- a/apps/web/src/app/admin-console/organizations/policies/policies.component.html +++ b/apps/web/src/app/admin-console/organizations/policies/policies.component.html @@ -14,7 +14,7 @@ {{ p.name | i18n }} - {{ + {{ "on" | i18n }} {{ p.description | i18n }} diff --git a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html index c2ef2f78ed..5a22b7b228 100644 --- a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html +++ b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html @@ -63,7 +63,7 @@
{{ item.labelName }} - + {{ "invited" | i18n }}
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html index 0ce30ccd4f..4f2bf3b875 100644 --- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html +++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html @@ -43,21 +43,15 @@ {{ c.email }} + {{ + "invited" | i18n + }} + {{ + "accepted" | i18n + }} {{ "invited" | i18n }} - {{ "accepted" | i18n }} - {{ "emergencyAccessRecoveryInitiated" | i18n }} @@ -163,21 +157,18 @@ {{ "invited" | i18n }} + {{ + "accepted" | i18n + }} {{ "accepted" | i18n }} - {{ "emergencyAccessRecoveryInitiated" | i18n }} {{ "emergencyAccessRecoveryApproved" | i18n }} diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html index 968b8565a6..e65899e05e 100644 --- a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html +++ b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html @@ -4,21 +4,21 @@ {{ "off" | i18n }} - {{ "ssoLoginIsRequired" | i18n }} - {{ + {{ "on" | i18n }} - {{ + {{ "off" | i18n }} - {{ "beta" | i18n }} + {{ "beta" | i18n }} diff --git a/apps/web/src/app/billing/individual/user-subscription.component.html b/apps/web/src/app/billing/individual/user-subscription.component.html index 0b709eec5b..79a694e42a 100644 --- a/apps/web/src/app/billing/individual/user-subscription.component.html +++ b/apps/web/src/app/billing/individual/user-subscription.component.html @@ -63,7 +63,7 @@
{{ "status" | i18n }}
{{ (subscription && subscription.status) || "-" }} - {{ + {{ "pendingCancellation" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html index 0ffe79cc6c..d4c34982e7 100644 --- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html +++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html @@ -49,7 +49,7 @@ {{ isSponsoredSubscription ? "sponsored" : subscription.status || "-" }} - {{ + {{ "pendingCancellation" | i18n }} @@ -96,7 +96,7 @@ {{ "beta" | i18n }} ({{ "annually" | i18n }}) @ {{ 0 | currency: "$" }} - {{ + {{ "betaEnding" | i18n | uppercase }} diff --git a/apps/web/src/app/reports/pages/exposed-passwords-report.component.html b/apps/web/src/app/reports/pages/exposed-passwords-report.component.html index 03af0e6cb4..39642d0b10 100644 --- a/apps/web/src/app/reports/pages/exposed-passwords-report.component.html +++ b/apps/web/src/app/reports/pages/exposed-passwords-report.component.html @@ -60,7 +60,7 @@ - + {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(c.id) | number) }} diff --git a/apps/web/src/app/reports/pages/reused-passwords-report.component.html b/apps/web/src/app/reports/pages/reused-passwords-report.component.html index 4bb26580cc..b03907b1f6 100644 --- a/apps/web/src/app/reports/pages/reused-passwords-report.component.html +++ b/apps/web/src/app/reports/pages/reused-passwords-report.component.html @@ -75,7 +75,7 @@ - + {{ "reusedXTimes" | i18n: passwordUseMap.get(c.login.password) }} diff --git a/apps/web/src/app/reports/pages/weak-passwords-report.component.html b/apps/web/src/app/reports/pages/weak-passwords-report.component.html index 562a0b504c..dd41c46240 100644 --- a/apps/web/src/app/reports/pages/weak-passwords-report.component.html +++ b/apps/web/src/app/reports/pages/weak-passwords-report.component.html @@ -75,7 +75,7 @@ - + {{ passwordStrengthMap.get(c.id)[0] | i18n }} diff --git a/apps/web/src/app/reports/pages/weak-passwords-report.component.ts b/apps/web/src/app/reports/pages/weak-passwords-report.component.ts index 9da9643448..a7ed119e19 100644 --- a/apps/web/src/app/reports/pages/weak-passwords-report.component.ts +++ b/apps/web/src/app/reports/pages/weak-passwords-report.component.ts @@ -7,7 +7,7 @@ import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/pass import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service"; import { CipherType } from "@bitwarden/common/vault/enums"; import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view"; -import { BadgeTypes } from "@bitwarden/components"; +import { BadgeVariant } from "@bitwarden/components"; import { PasswordRepromptService } from "@bitwarden/vault"; import { CipherReportComponent } from "./cipher-report.component"; @@ -17,7 +17,7 @@ import { CipherReportComponent } from "./cipher-report.component"; templateUrl: "weak-passwords-report.component.html", }) export class WeakPasswordsReportComponent extends CipherReportComponent implements OnInit { - passwordStrengthMap = new Map(); + passwordStrengthMap = new Map(); disabled = true; private passwordStrengthCache = new Map(); @@ -118,7 +118,7 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen return c.login.password + "_____" + (this.isUserNameNotEmpty(c) ? c.login.username : ""); } - private scoreKey(score: number): [string, BadgeTypes] { + private scoreKey(score: number): [string, BadgeVariant] { switch (score) { case 4: return ["strong", "success"]; diff --git a/apps/web/src/app/reports/shared/report-card/report-card.component.html b/apps/web/src/app/reports/shared/report-card/report-card.component.html index 2996b7b499..5553daf6e7 100644 --- a/apps/web/src/app/reports/shared/report-card/report-card.component.html +++ b/apps/web/src/app/reports/shared/report-card/report-card.component.html @@ -15,7 +15,7 @@
diff --git a/apps/web/src/app/vault/components/premium-badge.component.ts b/apps/web/src/app/vault/components/premium-badge.component.ts index 5dafda2551..6deff43489 100644 --- a/apps/web/src/app/vault/components/premium-badge.component.ts +++ b/apps/web/src/app/vault/components/premium-badge.component.ts @@ -5,7 +5,7 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag @Component({ selector: "app-premium-badge", template: ` - `, diff --git a/apps/web/src/app/vault/individual-vault/add-edit.component.html b/apps/web/src/app/vault/individual-vault/add-edit.component.html index 449f1242e4..af5954f0c4 100644 --- a/apps/web/src/app/vault/individual-vault/add-edit.component.html +++ b/apps/web/src/app/vault/individual-vault/add-edit.component.html @@ -267,7 +267,7 @@ href="#" appStopClick bitBadge - badgeType="primary" + variant="primary" class="tw-ml-4" (click)="upgradeOrganization()" *ngIf=" diff --git a/apps/web/src/app/vault/org-vault/collection-badge/collection-name-badge.component.html b/apps/web/src/app/vault/org-vault/collection-badge/collection-name-badge.component.html index 881ad4e1fa..853682ebda 100644 --- a/apps/web/src/app/vault/org-vault/collection-badge/collection-name-badge.component.html +++ b/apps/web/src/app/vault/org-vault/collection-badge/collection-name-badge.component.html @@ -1,6 +1,6 @@ - {{ c | collectionNameFromId: collections }} + {{ c | collectionNameFromId: collections }} - + {{ xMoreCount }} more + + {{ xMoreCount }} more diff --git a/apps/web/src/app/vault/org-vault/group-badge/group-name-badge.component.html b/apps/web/src/app/vault/org-vault/group-badge/group-name-badge.component.html index 7f2c3e37eb..9ddc9897a3 100644 --- a/apps/web/src/app/vault/org-vault/group-badge/group-name-badge.component.html +++ b/apps/web/src/app/vault/org-vault/group-badge/group-name-badge.component.html @@ -1 +1 @@ - + diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html index 08de724562..fcbfcb74e6 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html @@ -12,10 +12,10 @@ data.orgDomain.domainName }} - {{ + {{ "domainStatusUnverified" | i18n }} - {{ + {{ "domainStatusVerified" | i18n }} diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html index dbe793dd3b..84d32ade01 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html @@ -41,10 +41,10 @@ - {{ + {{ "domainStatusUnverified" | i18n }} - {{ + {{ "domainStatusVerified" | i18n }} diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html index 99c73057bb..cb271b94d0 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html @@ -8,17 +8,17 @@ > {{ "all" | i18n }} - {{ allCount }} + {{ allCount }} {{ "invited" | i18n }} - {{ invitedCount }} + {{ invitedCount }} {{ "accepted" | i18n }} - {{ acceptedCount }} + {{ acceptedCount }} @@ -120,10 +120,10 @@ {{ u.email }} - {{ + {{ "invited" | i18n }} - {{ + {{ "accepted" | i18n }} {{ u.name }} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html index 36efa42ea6..f8d5d1081e 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html +++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html @@ -90,13 +90,13 @@ {{ project.name | ellipsis: 32 }} - {{ "unassigned" | i18n }} diff --git a/libs/components/src/badge-list/badge-list.component.html b/libs/components/src/badge-list/badge-list.component.html index da58323084..53360a0c10 100644 --- a/libs/components/src/badge-list/badge-list.component.html +++ b/libs/components/src/badge-list/badge-list.component.html @@ -1,11 +1,11 @@
- + {{ item }} , - + {{ "plusNMore" | i18n: (items.length - filteredItems.length).toString() }}
diff --git a/libs/components/src/badge-list/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts index 64deae21b9..5ec0d7dc4c 100644 --- a/libs/components/src/badge-list/badge-list.component.ts +++ b/libs/components/src/badge-list/badge-list.component.ts @@ -1,6 +1,6 @@ import { Component, Input, OnChanges } from "@angular/core"; -import { BadgeTypes } from "../badge"; +import { BadgeVariant } from "../badge"; @Component({ selector: "bit-badge-list", @@ -12,7 +12,7 @@ export class BadgeListComponent implements OnChanges { protected filteredItems: string[] = []; protected isFiltered = false; - @Input() badgeType: BadgeTypes = "primary"; + @Input() variant: BadgeVariant = "primary"; @Input() items: string[] = []; @Input() truncate = true; diff --git a/libs/components/src/badge-list/badge-list.stories.ts b/libs/components/src/badge-list/badge-list.stories.ts index 92e9e14875..24024cb6bb 100644 --- a/libs/components/src/badge-list/badge-list.stories.ts +++ b/libs/components/src/badge-list/badge-list.stories.ts @@ -28,7 +28,7 @@ export default { }), ], args: { - badgeType: "primary", + variant: "primary", truncate: false, }, parameters: { @@ -45,12 +45,12 @@ export const Default: Story = { render: (args) => ({ props: args, template: ` - + `, }), args: { - badgeType: "info", + variant: "info", maxItems: 3, items: ["Badge 1", "Badge 2", "Badge 3", "Badge 4", "Badge 5"], truncate: false, @@ -60,7 +60,7 @@ export const Default: Story = { export const Truncated: Story = { ...Default, args: { - badgeType: "info", + variant: "info", maxItems: 3, items: ["Badge 1", "Badge 2 containing lengthy text", "Badge 3", "Badge 4", "Badge 5"], truncate: true, diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.directive.ts index 14dc96edd5..dd28d86ae8 100644 --- a/libs/components/src/badge/badge.directive.ts +++ b/libs/components/src/badge/badge.directive.ts @@ -1,8 +1,8 @@ import { Directive, ElementRef, HostBinding, Input } from "@angular/core"; -export type BadgeTypes = "primary" | "secondary" | "success" | "danger" | "warning" | "info"; +export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info"; -const styles: Record = { +const styles: Record = { primary: ["tw-bg-primary-500"], secondary: ["tw-bg-text-muted"], success: ["tw-bg-success-500"], @@ -11,7 +11,7 @@ const styles: Record = { info: ["tw-bg-info-500"], }; -const hoverStyles: Record = { +const hoverStyles: Record = { primary: ["hover:tw-bg-primary-700"], secondary: ["hover:tw-bg-secondary-700"], success: ["hover:tw-bg-success-700"], @@ -44,15 +44,22 @@ export class BadgeDirective { "focus:tw-ring-offset-2", "focus:tw-ring-primary-700", ] - .concat(styles[this.badgeType]) - .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : []) + .concat(styles[this.variant]) + .concat(this.hasHoverEffects ? hoverStyles[this.variant] : []) .concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : []); } @HostBinding("attr.title") get title() { return this.truncate ? this.el.nativeElement.textContent.trim() : null; } - @Input() badgeType: BadgeTypes = "primary"; + /** + * Variant, sets the background color of the badge. + */ + @Input() variant: BadgeVariant = "primary"; + + /** + * Truncate long text + */ @Input() truncate = true; private hasHoverEffects = false; diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts index 5912250e0e..27873bbbbf 100644 --- a/libs/components/src/badge/badge.stories.ts +++ b/libs/components/src/badge/badge.stories.ts @@ -13,7 +13,7 @@ export default { }), ], args: { - badgeType: "primary", + variant: "primary", truncate: false, }, parameters: { @@ -30,11 +30,11 @@ export const Primary: Story = { render: (args) => ({ props: args, template: ` - Span Badge containing lengthy text + Span Badge containing lengthy text

- Link Badge + Link Badge

- Button + Button `, }), }; @@ -42,35 +42,35 @@ export const Primary: Story = { export const Secondary: Story = { ...Primary, args: { - badgeType: "secondary", + variant: "secondary", }, }; export const Success: Story = { ...Primary, args: { - badgeType: "success", + variant: "success", }, }; export const Danger: Story = { ...Primary, args: { - badgeType: "danger", + variant: "danger", }, }; export const Warning: Story = { ...Primary, args: { - badgeType: "warning", + variant: "warning", }, }; export const Info: Story = { ...Primary, args: { - badgeType: "info", + variant: "info", }, }; diff --git a/libs/components/src/badge/index.ts b/libs/components/src/badge/index.ts index 574db348ba..a8f5babda9 100644 --- a/libs/components/src/badge/index.ts +++ b/libs/components/src/badge/index.ts @@ -1,2 +1,2 @@ -export { BadgeDirective, BadgeTypes } from "./badge.directive"; +export { BadgeDirective, BadgeVariant } from "./badge.directive"; export * from "./badge.module"; diff --git a/libs/components/src/multi-select/multi-select.component.html b/libs/components/src/multi-select/multi-select.component.html index 1c972fbea4..6e0db43615 100644 --- a/libs/components/src/multi-select/multi-select.component.html +++ b/libs/components/src/multi-select/multi-select.component.html @@ -26,7 +26,7 @@