Browse Source
* 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>pull/11529/head
Jordan Aasen
1 year ago
committed by
GitHub
24 changed files with 173 additions and 0 deletions
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
## Tools Card |
||||
|
||||
Package name: `@bitwarden/tools-card` |
||||
|
||||
Generic Tools Card Component |
||||
@ -0,0 +1,13 @@
@@ -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>/../../", |
||||
}), |
||||
}; |
||||
@ -0,0 +1,24 @@
@@ -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" |
||||
} |
||||
} |
||||
@ -0,0 +1,7 @@
@@ -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> |
||||
@ -0,0 +1,30 @@
@@ -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; |
||||
} |
||||
@ -0,0 +1,36 @@
@@ -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>`, |
||||
}), |
||||
}; |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export { CardComponent } from "./card.component"; |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
import "jest-preset-angular/setup-jest"; |
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
{ |
||||
"extends": "../../shared/tsconfig.libs", |
||||
"include": ["src"], |
||||
"exclude": ["node_modules", "dist"] |
||||
} |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"include": ["src"], |
||||
"files": ["./test.setup.ts"], |
||||
"exclude": ["node_modules", "dist"] |
||||
} |
||||
Loading…
Reference in new issue