vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[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>
This commit is contained in:
Jordan Aasen 2024-10-11 14:00:45 -07:00 committed by GitHub
parent 988c2b69e0
commit fa41f29fc4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
24 changed files with 173 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.json
View File

@ -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": {

1
.github/whitelist-capital-letters.txt vendored
View File

@ -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

2
.storybook/main.ts
View File

@ -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"),

9
apps/browser/src/_locales/en/messages.json
View File

@ -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."

1
apps/browser/tsconfig.json
View File

@ -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"]
},

9
apps/desktop/src/locales/en/messages.json
View File

@ -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."

1
apps/desktop/tsconfig.json
View File

@ -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

9
apps/web/src/locales/en/messages.json
View File

@ -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": {

1
apps/web/tsconfig.json
View File

@ -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/*"]
}

1
bitwarden_license/bit-common/tsconfig.json
View File

@ -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"],

1
bitwarden_license/bit-web/tsconfig.json
View File

@ -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/*"],

1
libs/shared/tsconfig.libs.json
View File

@ -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"]
}

5
libs/tools/card/README.md Normal file
View File

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

13
libs/tools/card/jest.config.js Normal file
View File

@ -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>/../../",
}),
};

24
libs/tools/card/package.json Normal file
View File

@ -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"
}
}

7
libs/tools/card/src/card.component.html Normal file
View File

@ -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>

30
libs/tools/card/src/card.component.ts Normal file
View File

@ -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;
}

36
libs/tools/card/src/card.stories.ts Normal file
View File

@ -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>`,
}),
};

1
libs/tools/card/src/index.ts Normal file
View File

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

1
libs/tools/card/test.setup.ts Normal file
View File

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

5
libs/tools/card/tsconfig.json Normal file
View File

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

6
libs/tools/card/tsconfig.spec.json Normal file
View File

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

1
tsconfig.eslint.json
View File

@ -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"],

2
tsconfig.json
View File

@ -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/**/*"
],