[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 <[email protected]>

.eslintrc.json

@@ -293,6 +293,12 @@
         "no-restricted-imports": ["error", { "patterns": ["@bitwarden/send-ui/*", "src/**/*"] }]
       }
     },
+    {
+      "files": ["libs/tools/card/src/**/*.ts"],
+      "rules": {
+        "no-restricted-imports": ["error", { "patterns": ["@bitwarden/tools-card/*", "src/**/*"] }]
+      }
+    },
     {
       "files": ["libs/vault/src/**/*.ts"],
       "rules": {

.github/whitelist-capital-letters.txt

@@ -24,6 +24,7 @@
 ./libs/tools/README.md
 ./libs/tools/export/vault-export/README.md
 ./libs/tools/send/README.md
+./libs/tools/card/README.md
 ./libs/vault/README.md
 ./README.md
 ./LICENSE_BITWARDEN.txt

.storybook/main.ts

@@ -19,6 +19,8 @@ const config: StorybookConfig = {
     "../apps/browser/src/**/*.stories.@(js|jsx|ts|tsx)",
     "../bitwarden_license/bit-web/src/**/*.mdx",
     "../bitwarden_license/bit-web/src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../libs/tools/card/src/**/*.mdx",
+    "../libs/tools/card/src/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [
     getAbsolutePath("@storybook/addon-links"),

apps/browser/src/_locales/en/messages.json

@@ -2647,6 +2647,15 @@
     "message": "Your organization requires you to set a master password.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
+  "cardMetrics": {
+    "message": "out of $TOTAL$",
+    "placeholders": {
+      "total": {
+        "content": "$1",
+        "example": "5"
+      }
+    }
+  },
   "verificationRequired": {
     "message": "Verification required",
     "description": "Default title for the user verification dialog."

apps/browser/tsconfig.json

@@ -32,6 +32,7 @@
       "@bitwarden/importer/ui": ["../../libs/importer/src/components"],
       "@bitwarden/platform": ["../../libs/platform/src"],
       "@bitwarden/send-ui": ["../../libs/tools/send/send-ui/src"],
+      "@bitwarden/tools-card": ["../../libs/tools/card/src"],
       "@bitwarden/key-management": ["../../libs/key-management/src"],
       "@bitwarden/vault": ["../../libs/vault/src"]
     },

apps/desktop/src/locales/en/messages.json

@@ -1752,6 +1752,15 @@
     "message": "Your organization requires you to set a master password.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
+  "cardMetrics": {
+    "message": "out of $TOTAL$",
+    "placeholders": {
+      "total": {
+        "content": "$1",
+        "example": "5"
+      }
+    }
+  },
   "verificationRequired": {
     "message": "Verification required",
     "description": "Default title for the user verification dialog."

apps/desktop/tsconfig.json

@@ -32,6 +32,7 @@
       "@bitwarden/node/*": ["../../libs/node/src/*"],
       "@bitwarden/platform": ["../../libs/platform/src"],
       "@bitwarden/send-ui": ["../../libs/tools/send/send-ui/src"],
+      "@bitwarden/tools-card": ["../../libs/tools/card/src"],
       "@bitwarden/vault": ["../../libs/vault/src"]
     },
     "useDefineForClassFields": false

apps/web/src/locales/en/messages.json

@@ -7922,6 +7922,15 @@
     "message": "Your organization requires you to set a master password.",
     "description": "Used as a card title description on the set password page to explain why the user is there"
   },
+  "cardMetrics": {
+    "message": "out of $TOTAL$",
+    "placeholders": {
+      "total": {
+        "content": "$1",
+        "example": "5"
+      }
+    }
+  },
   "notFound": {
     "message": "$RESOURCE$ not found",
     "placeholders": {

apps/web/tsconfig.json

@@ -26,6 +26,7 @@
       "@bitwarden/key-management": ["../../libs/key-management/src"],
       "@bitwarden/platform": ["../../libs/platform/src"],
       "@bitwarden/send-ui": ["../../libs/tools/send/send-ui/src"],
+      "@bitwarden/tools-card": ["../../libs/tools/card/src"],
       "@bitwarden/vault": ["../../libs/vault/src"],
       "@bitwarden/web-vault/*": ["src/*"]
     }

bitwarden_license/bit-common/tsconfig.json

@@ -21,6 +21,7 @@
       ],
       "@bitwarden/vault-export-ui": ["../../libs/tools/export/vault-export/vault-export-core/src"],
       "@bitwarden/send-ui": ["../../libs/tools/send/send-ui/src"],
+      "@bitwarden/tools-card": ["../../libs/tools/card/src"],
       "@bitwarden/key-management": ["../../libs/key-management/src"],
       "@bitwarden/platform": ["../../libs/platform/src"],
       "@bitwarden/vault": ["../../libs/vault/src"],

bitwarden_license/bit-web/tsconfig.json

@@ -26,6 +26,7 @@
       "@bitwarden/key-management": ["../../libs/key-management/src"],
       "@bitwarden/platform": ["../../libs/platform/src"],
       "@bitwarden/send-ui": ["../../libs/tools/send/send-ui/src"],
+      "@bitwarden/tools-card": ["../../libs/tools/card/src"],
       "@bitwarden/vault": ["../../libs/vault/src"],
       "@bitwarden/web-vault/*": ["../../apps/web/src/*"],
 

libs/shared/tsconfig.libs.json

@@ -22,6 +22,7 @@
       "@bitwarden/key-management": ["../key-management/src"],
       "@bitwarden/platform": ["../platform/src"],
       "@bitwarden/send-ui": ["../tools/send/send-ui/src"],
+      "@bitwarden/tools-card": ["../tools/card/src"],
       "@bitwarden/node/*": ["../node/src/*"],
       "@bitwarden/vault": ["../vault/src"]
     }

libs/tools/card/README.md

@@ -0,0 +1,5 @@
+## Tools Card
+
+Package name: `@bitwarden/tools-card`
+
+Generic Tools Card Component

libs/tools/card/jest.config.js

@@ -0,0 +1,13 @@
+const { pathsToModuleNameMapper } = require("ts-jest");
+
+const { compilerOptions } = require("../../../shared/tsconfig.libs");
+
+/** @type {import('jest').Config} */
+module.exports = {
+  testMatch: ["**/+(*.)+(spec).+(ts)"],
+  preset: "jest-preset-angular",
+  setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
+    prefix: "<rootDir>/../../",
+  }),
+};

libs/tools/card/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@bitwarden/tools-card",
+  "version": "0.0.0",
+  "description": "Angular card component",
+  "keywords": [
+    "bitwarden"
+  ],
+  "author": "Bitwarden Inc.",
+  "homepage": "https://bitwarden.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bitwarden/clients"
+  },
+  "license": "GPL-3.0",
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && tsc",
+    "build:watch": "npm run clean && tsc -watch"
+  },
+  "dependencies": {
+    "@bitwarden/common": "file:../../../common",
+    "@bitwarden/components": "file:../../../components"
+  }
+}

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";

libs/tools/card/test.setup.ts

@@ -0,0 +1 @@
+import "jest-preset-angular/setup-jest";

libs/tools/card/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../shared/tsconfig.libs",
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

libs/tools/card/tsconfig.spec.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src"],
+  "files": ["./test.setup.ts"],
+  "exclude": ["node_modules", "dist"]
+}

tsconfig.eslint.json

@@ -31,6 +31,7 @@
       "@bitwarden/importer/core": ["./libs/importer/src"],
       "@bitwarden/importer/ui": ["./libs/importer/src/components"],
       "@bitwarden/send-ui": [".libs/tools/send/send-ui/src"],
+      "@bitwarden/tools-card": [".libs/tools/card/src"],
       "@bitwarden/platform": ["./libs/platform/src"],
       "@bitwarden/node/*": ["./libs/node/src/*"],
       "@bitwarden/vault": ["./libs/vault/src"],

tsconfig.json

@@ -34,6 +34,7 @@
       "@bitwarden/key-management": ["./libs/key-management/src"],
       "@bitwarden/platform": ["./libs/platform/src"],
       "@bitwarden/send-ui": ["./libs/tools/send/send-ui/src"],
+      "@bitwarden/tools-card": ["./libs/tools/card/src"],
       "@bitwarden/node/*": ["./libs/node/src/*"],
       "@bitwarden/web-vault/*": ["./apps/web/src/*"],
       "@bitwarden/vault": ["./libs/vault/src"],
@@ -51,6 +52,7 @@
     "apps/browser/src/**/*",
     "libs/*/src/**/*",
     "libs/tools/send/**/src/**/*",
+    "libs/tools/card/src/**/*",
     "bitwarden_license/bit-web/src/**/*",
     "bitwarden_license/bit-common/src/**/*"
   ],