[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

apps/web/src/app/dirt/reports/shared/report-card/report-card.component.html

@@ -1,8 +1,8 @@
 <a
-  class="tw-block tw-h-full tw-max-w-72 tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 !tw-text-main tw-transition-all hover:tw-scale-105 hover:tw-no-underline focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2"
+  class="tw-block tw-h-full tw-max-w-72 tw-rounded-xl !tw-text-main tw-transition-all hover:tw-scale-105 hover:tw-no-underline focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2"
   [routerLink]="route"
 >
-  <div class="tw-relative">
+  <bit-base-card class="tw-relative tw-overflow-hidden tw-h-full">
     <div
       class="tw-flex tw-h-28 tw-bg-background-alt2 tw-text-center tw-text-primary-300"
       [ngClass]="{ 'tw-grayscale': disabled }"
@@ -11,10 +11,10 @@
         <bit-icon [icon]="icon" aria-hidden="true"></bit-icon>
       </div>
     </div>
-    <div class="tw-p-5" [ngClass]="{ 'tw-grayscale': disabled }">
+    <bit-card-content [ngClass]="{ 'tw-grayscale': disabled }">
       <h3 class="tw-mb-4 tw-text-xl tw-font-bold">{{ title }}</h3>
       <p class="tw-mb-0">{{ description }}</p>
-    </div>
+    </bit-card-content>
     <span
       bitBadge
       [variant]="requiresPremium ? 'success' : 'primary'"
@@ -24,5 +24,5 @@
       <ng-container *ngIf="requiresPremium">{{ "premium" | i18n }}</ng-container>
       <ng-container *ngIf="!requiresPremium">{{ "upgrade" | i18n }}</ng-container>
     </span>
-  </div>
+  </bit-base-card>
 </a>

apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts

@@ -4,7 +4,12 @@ import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/an
 
 import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { BadgeModule, IconModule } from "@bitwarden/components";
+import {
+  BadgeModule,
+  BaseCardComponent,
+  IconModule,
+  CardContentComponent,
+} from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../../core/tests";
 import { ReportVariant } from "../models/report-variant";
@@ -16,7 +21,15 @@ export default {
   component: ReportCardComponent,
   decorators: [
     moduleMetadata({
-      imports: [JslibModule, BadgeModule, IconModule, RouterTestingModule, PremiumBadgeComponent],
+      imports: [
+        JslibModule,
+        BadgeModule,
+        CardContentComponent,
+        IconModule,
+        RouterTestingModule,
+        PremiumBadgeComponent,
+        BaseCardComponent,
+      ],
     }),
     applicationConfig({
       providers: [importProvidersFrom(PreloadedEnglishI18nModule)],

apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts

@@ -4,7 +4,12 @@ import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/an
 
 import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { BadgeModule, IconModule } from "@bitwarden/components";
+import {
+  BadgeModule,
+  BaseCardComponent,
+  CardContentComponent,
+  IconModule,
+} from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../../core/tests";
 import { reports } from "../../reports";
@@ -18,7 +23,15 @@ export default {
   component: ReportListComponent,
   decorators: [
     moduleMetadata({
-      imports: [JslibModule, BadgeModule, RouterTestingModule, IconModule, PremiumBadgeComponent],
+      imports: [
+        JslibModule,
+        BadgeModule,
+        RouterTestingModule,
+        IconModule,
+        PremiumBadgeComponent,
+        CardContentComponent,
+        BaseCardComponent,
+      ],
       declarations: [ReportCardComponent],
     }),
     applicationConfig({

apps/web/src/app/dirt/reports/shared/reports-shared.module.ts

@@ -1,13 +1,15 @@
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
+import { BaseCardComponent, CardContentComponent } from "@bitwarden/components";
+
 import { SharedModule } from "../../../shared/shared.module";
 
 import { ReportCardComponent } from "./report-card/report-card.component";
 import { ReportListComponent } from "./report-list/report-list.component";
 
 @NgModule({
-  imports: [CommonModule, SharedModule],
+  imports: [CommonModule, SharedModule, BaseCardComponent, CardContentComponent],
   declarations: [ReportCardComponent, ReportListComponent],
   exports: [ReportCardComponent, ReportListComponent],
 })