[CL-847] Card consolidation (#16952)

* 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

libs/pricing/src/components/pricing-card/pricing-card.component.html

@@ -1,6 +1,4 @@
-<div
-  class="tw-box-border tw-bg-background tw-text-main tw-border tw-border-secondary-100 tw-rounded-3xl tw-p-8 tw-shadow-sm tw-size-full tw-flex tw-flex-col"
->
+<bit-card class="tw-size-full tw-flex tw-flex-col">
   <!-- Title Section with Active Badge -->
   <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
     <ng-content select="[slot=title]"></ng-content>
@@ -82,4 +80,4 @@
       }
     }
   </div>
-</div>
+</bit-card>

libs/pricing/src/components/pricing-card/pricing-card.component.ts

@@ -6,6 +6,7 @@ import {
   BadgeVariant,
   ButtonModule,
   ButtonType,
+  CardComponent,
   IconModule,
   TypographyModule,
 } from "@bitwarden/components";
@@ -20,7 +21,7 @@ import {
 @Component({
   selector: "billing-pricing-card",
   templateUrl: "./pricing-card.component.html",
-  imports: [BadgeModule, ButtonModule, IconModule, TypographyModule, CurrencyPipe],
+  imports: [BadgeModule, ButtonModule, IconModule, TypographyModule, CurrencyPipe, CardComponent],
 })
 export class PricingCardComponent {
   readonly tagline = input.required<string>();