mirror of
https://github.com/bitwarden/browser
synced 2026-01-19 08:53:28 +00:00
f452f39f3c
* created shared card directive * WIP * use base card in anon layout * use bit-card for pricing card component * add base card to integration cards * add base card to reports cards * add base card to integration card * use card content on report card * use base card directive on base component * update dirt card to use bit-card * run prettier. fix whitespace * add missing imports to report list stories * add base card story and docs
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { CurrencyPipe } from "@angular/common";
|
|
import { Component, EventEmitter, input, Output } from "@angular/core";
|
|
|
|
import {
|
|
BadgeModule,
|
|
BadgeVariant,
|
|
ButtonModule,
|
|
ButtonType,
|
|
CardComponent,
|
|
IconModule,
|
|
TypographyModule,
|
|
} from "@bitwarden/components";
|
|
|
|
/**
|
|
* A reusable UI-only component that displays pricing information in a card format.
|
|
* This component has no external dependencies and performs no logic - it only displays data
|
|
* and emits events when the button is clicked.
|
|
*/
|
|
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
|
|
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
|
|
@Component({
|
|
selector: "billing-pricing-card",
|
|
templateUrl: "./pricing-card.component.html",
|
|
imports: [BadgeModule, ButtonModule, IconModule, TypographyModule, CurrencyPipe, CardComponent],
|
|
})
|
|
export class PricingCardComponent {
|
|
readonly tagline = input.required<string>();
|
|
readonly price = input<{
|
|
amount: number;
|
|
cadence: "monthly" | "annually";
|
|
showPerUser?: boolean;
|
|
}>();
|
|
readonly button = input<{
|
|
type: ButtonType;
|
|
text: string;
|
|
disabled?: boolean;
|
|
icon?: { type: string; position: "before" | "after" };
|
|
}>();
|
|
readonly features = input<string[]>();
|
|
readonly activeBadge = input<{ text: string; variant?: BadgeVariant }>();
|
|
|
|
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
|
|
// eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
|
|
@Output() buttonClick = new EventEmitter<void>();
|
|
|
|
/**
|
|
* Handles button click events and emits the buttonClick event
|
|
*/
|
|
onButtonClick(): void {
|
|
this.buttonClick.emit();
|
|
}
|
|
}
|