bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-16 16:59:30 +00:00
Code Issues Releases Wiki Activity

[CL-208][CL-339] Enhance Storybook docs pages (#14838)

Browse Source 
* rearrange button docs

* Enhance avatar docs

* Enhance badge  docs

* Enhance banner docs

* add util to format args for snippets

* update banner snippets

* WIP

* bind boolean args so they work correctly in Storybook

* simplify button stories

* Update callout docs

* use title component for checkbox docs

* use title and description  component for chip select docs

* update color password story docs

* update disclosure docs

* add import to icon docs

* updated icon-button docs

* update link docs

* Update prgress docs

* updated search field docs

* remove html type definitions

* add import for progress

* updated toast docs

* remove example from docs. format args for snippet

* Update badges docs

* handle array arg values correctly

* Update badges list docs

* fix dupe key error from taost story

* remove unnecessary typeof check

* remove banner usage example

* add breadcrumbs import statement and jsdoc

* add color password import statement

* fixing type mismaches

* fix typos

* Add missing generics to format function

* fix typo

* update callout icon spacing to match Figma

* add back max width container
This commit is contained in:
Bryan Cunningham
2025-05-30 12:38:40 -04:00
committed by GitHub
parent 4e07fd7666
commit 5eb8d7b181
44 changed files with 454 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
libs/components/src/progress/progress.component.ts
View File

@@ -1,22 +1,25 @@
import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";
type SizeTypes = "small" | "default" | "large";
type BackgroundTypes = "danger" | "primary" | "success" | "warning";
type ProgressSizeType = "small" | "default" | "large";
type BackgroundType = "danger" | "primary" | "success" | "warning";
const SizeClasses: Record<SizeTypes, string[]> = {
const SizeClasses: Record<ProgressSizeType, string[]> = {
small: ["tw-h-1"],
default: ["tw-h-4"],
large: ["tw-h-6"],
};
const BackgroundClasses: Record<BackgroundTypes, string[]> = {
const BackgroundClasses: Record<BackgroundType, string[]> = {
danger: ["tw-bg-danger-600"],
primary: ["tw-bg-primary-600"],
success: ["tw-bg-success-600"],
warning: ["tw-bg-warning-600"],
};
/**
* Progress indicators may be used to visually indicate progress or to visually measure some other value, such as a password strength indicator.
*/
@Component({
selector: "bit-progress",
templateUrl: "./progress.component.html",
@@ -25,9 +28,9 @@ const BackgroundClasses: Record<BackgroundTypes, string[]> = {
})
export class ProgressComponent {
@Input() barWidth = 0;
@Input() bgColor: BackgroundTypes = "primary";
@Input() bgColor: BackgroundType = "primary";
@Input() showText = true;
@Input() size: SizeTypes = "default";
@Input() size: ProgressSizeType = "default";
@Input() text?: string;
get displayText() {