mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-27 04:03:00 +02:00
add progress component, template, and stories (#4437)
This commit is contained in:
parent
b27e2605d5
commit
9e1e1ba4eb
1
libs/components/src/progress/index.ts
Normal file
1
libs/components/src/progress/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from "./progress.module";
|
19
libs/components/src/progress/progress.component.html
Normal file
19
libs/components/src/progress/progress.component.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<div [ngClass]="outerBarStyles">
|
||||||
|
<div
|
||||||
|
[ngClass]="innerBarStyles"
|
||||||
|
role="progressbar"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuemax="100"
|
||||||
|
attr.aria-valuenow="{{ barWidth }}"
|
||||||
|
[ngStyle]="{ width: barWidth + '%' }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
*ngIf="displayText"
|
||||||
|
class="tw-flex tw-h-full tw-flex-wrap tw-items-center tw-overflow-hidden"
|
||||||
|
>
|
||||||
|
<!-- If text is too long to fit, wrap it below to hide -->
|
||||||
|
<div class="tw-h-full"> </div>
|
||||||
|
<div class="tw-pr-1">{{ textContent }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
58
libs/components/src/progress/progress.component.ts
Normal file
58
libs/components/src/progress/progress.component.ts
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import { Component, Input } from "@angular/core";
|
||||||
|
|
||||||
|
type SizeTypes = "small" | "default" | "large";
|
||||||
|
type BackgroundTypes = "danger" | "primary" | "success" | "warning";
|
||||||
|
|
||||||
|
const SizeClasses: Record<SizeTypes, string[]> = {
|
||||||
|
small: ["tw-h-1"],
|
||||||
|
default: ["tw-h-4"],
|
||||||
|
large: ["tw-h-6"],
|
||||||
|
};
|
||||||
|
|
||||||
|
const BackgroundClasses: Record<BackgroundTypes, string[]> = {
|
||||||
|
danger: ["tw-bg-danger-500"],
|
||||||
|
primary: ["tw-bg-primary-500"],
|
||||||
|
success: ["tw-bg-success-500"],
|
||||||
|
warning: ["tw-bg-warning-500"],
|
||||||
|
};
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "bit-progress",
|
||||||
|
templateUrl: "./progress.component.html",
|
||||||
|
})
|
||||||
|
export class ProgressComponent {
|
||||||
|
@Input() barWidth = 0;
|
||||||
|
@Input() bgColor: BackgroundTypes = "primary";
|
||||||
|
@Input() showText = true;
|
||||||
|
@Input() size: SizeTypes = "default";
|
||||||
|
@Input() text?: string;
|
||||||
|
|
||||||
|
get displayText() {
|
||||||
|
return this.showText && this.size !== "small";
|
||||||
|
}
|
||||||
|
|
||||||
|
get outerBarStyles() {
|
||||||
|
return ["tw-overflow-hidden", "tw-rounded", "tw-bg-secondary-100"].concat(
|
||||||
|
SizeClasses[this.size]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get innerBarStyles() {
|
||||||
|
return [
|
||||||
|
"tw-flex",
|
||||||
|
"tw-justify-center",
|
||||||
|
"tw-items-center",
|
||||||
|
"tw-whitespace-nowrap",
|
||||||
|
"tw-text-xs",
|
||||||
|
"tw-font-semibold",
|
||||||
|
"tw-text-contrast",
|
||||||
|
"tw-transition-all",
|
||||||
|
]
|
||||||
|
.concat(SizeClasses[this.size])
|
||||||
|
.concat(BackgroundClasses[this.bgColor]);
|
||||||
|
}
|
||||||
|
|
||||||
|
get textContent() {
|
||||||
|
return this.text || this.barWidth + "%";
|
||||||
|
}
|
||||||
|
}
|
11
libs/components/src/progress/progress.module.ts
Normal file
11
libs/components/src/progress/progress.module.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { CommonModule } from "@angular/common";
|
||||||
|
import { NgModule } from "@angular/core";
|
||||||
|
|
||||||
|
import { ProgressComponent } from "./progress.component";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [CommonModule],
|
||||||
|
exports: [ProgressComponent],
|
||||||
|
declarations: [ProgressComponent],
|
||||||
|
})
|
||||||
|
export class ProgressModule {}
|
39
libs/components/src/progress/progress.stories.ts
Normal file
39
libs/components/src/progress/progress.stories.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { Meta, Story } from "@storybook/angular";
|
||||||
|
|
||||||
|
import { ProgressComponent } from "./progress.component";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: "Component Library/Progress",
|
||||||
|
component: ProgressComponent,
|
||||||
|
parameters: {
|
||||||
|
design: {
|
||||||
|
type: "figma",
|
||||||
|
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A18185&t=AM0acaIJ00BUhZKz-4",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
showText: true,
|
||||||
|
size: "default",
|
||||||
|
bgColor: "primary",
|
||||||
|
},
|
||||||
|
} as Meta;
|
||||||
|
|
||||||
|
const Template: Story<ProgressComponent> = (args: ProgressComponent) => ({
|
||||||
|
props: args,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Empty = Template.bind({});
|
||||||
|
Empty.args = {
|
||||||
|
barWidth: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Full = Template.bind({});
|
||||||
|
Full.args = {
|
||||||
|
barWidth: 100,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CustomText = Template.bind({});
|
||||||
|
CustomText.args = {
|
||||||
|
barWidth: 25,
|
||||||
|
text: "Loading...",
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user