[CL-425] - add tools card component (#11375)

* add tools card component

* rename to tools-card

* whitelist readme

* fix tw classes in card component

* add RTL support.

* add documentation. revert changes to settings

* Revert vscode settings

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

libs/tools/card/src/card.component.html

@@ -0,0 +1,7 @@
+<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>
+  </div>
+</div>

libs/tools/card/src/card.component.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { TypographyModule } from "@bitwarden/components";
+
+@Component({
+  selector: "tools-card",
+  templateUrl: "./card.component.html",
+  standalone: true,
+  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-p-6",
+  },
+})
+export class CardComponent {
+  /**
+   * The title of the card
+   */
+  @Input() title: string;
+  /**
+   * The current value of the card as emphasized text
+   */
+  @Input() value: number;
+  /**
+   * The maximum value of the card
+   */
+  @Input() maxValue: number;
+}

libs/tools/card/src/card.stories.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from "@angular/common";
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { I18nMockService, TypographyModule } from "@bitwarden/components";
+
+import { CardComponent } from "./card.component";
+
+export default {
+  title: "Toools/Card",
+  component: CardComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CardComponent, CommonModule, TypographyModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () =>
+            new I18nMockService({
+              cardMetrics: (value) => `out of ${value}`,
+            }),
+        },
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<CardComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <tools-card [title]="'Unsecured Members'" [value]="'38'" [maxValue]="'157'"></tools-card>`,
+  }),
+};

libs/tools/card/src/index.ts

@@ -0,0 +1 @@
+export { CardComponent } from "./card.component";