bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

[CL-847] Card consolidation (#16952)

Browse Source 
* 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
This commit is contained in:
Bryan Cunningham
2025-10-27 11:14:42 -04:00
committed by GitHub
parent af6e19335d
commit f452f39f3c
21 changed files with 184 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
libs/dirt/card/src/card.component.html
View File

@@ -1,7 +1,9 @@
<div class="tw-flex-col">
<span bitTypography="body2" class="tw-flex tw-text-muted">{{ title }}</span>
<div class="tw-flex tw-items-baseline tw-gap-2">
<span bitTypography="h1">{{ value }}</span>
<span bitTypography="body2">{{ "cardMetrics" | i18n: maxValue }}</span>
<bit-card>
<div class="tw-flex tw-flex-col tw-gap-1.5">
<span bitTypography="body2" class="tw-flex tw-text-muted">{{ title }}</span>
<div class="tw-flex tw-items-baseline tw-gap-2">
<span bitTypography="h1" class="!tw-mb-0">{{ value }}</span>
<span bitTypography="body2">{{ "cardMetrics" | i18n: maxValue }}</span>
</div>
</div>
</div>
</bit-card>

8
libs/dirt/card/src/card.component.ts
View File

@@ -4,18 +4,14 @@ import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { TypographyModule } from "@bitwarden/components";
import { TypographyModule, CardComponent as BitCardComponent } from "@bitwarden/components";
// 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: "dirt-card",
templateUrl: "./card.component.html",
imports: [CommonModule, TypographyModule, JslibModule],
host: {
class:
"tw-box-border tw-bg-background tw-block tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-border [&:not(bit-layout_*)]:tw-rounded-lg tw-rounded-lg tw-p-6",
},
imports: [CommonModule, TypographyModule, JslibModule, BitCardComponent],
})
export class CardComponent {
/**