From 9e1e1ba4eb9d6f0fd082f4367bc7b8dd16a44589 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Tue, 24 Jan 2023 08:23:22 -0800
Subject: [PATCH] add progress component, template, and stories (#4437)
---
libs/components/src/progress/index.ts | 1 +
.../src/progress/progress.component.html | 19 ++++++
.../src/progress/progress.component.ts | 58 +++++++++++++++++++
.../src/progress/progress.module.ts | 11 ++++
.../src/progress/progress.stories.ts | 39 +++++++++++++
5 files changed, 128 insertions(+)
create mode 100644 libs/components/src/progress/index.ts
create mode 100644 libs/components/src/progress/progress.component.html
create mode 100644 libs/components/src/progress/progress.component.ts
create mode 100644 libs/components/src/progress/progress.module.ts
create mode 100644 libs/components/src/progress/progress.stories.ts
diff --git a/libs/components/src/progress/index.ts b/libs/components/src/progress/index.ts
new file mode 100644
index 0000000000..07bee90305
--- /dev/null
+++ b/libs/components/src/progress/index.ts
@@ -0,0 +1 @@
+export * from "./progress.module";
diff --git a/libs/components/src/progress/progress.component.html b/libs/components/src/progress/progress.component.html
new file mode 100644
index 0000000000..2637f23eee
--- /dev/null
+++ b/libs/components/src/progress/progress.component.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
{{ textContent }}
+
+
+
diff --git a/libs/components/src/progress/progress.component.ts b/libs/components/src/progress/progress.component.ts
new file mode 100644
index 0000000000..58590bcda7
--- /dev/null
+++ b/libs/components/src/progress/progress.component.ts
@@ -0,0 +1,58 @@
+import { Component, Input } from "@angular/core";
+
+type SizeTypes = "small" | "default" | "large";
+type BackgroundTypes = "danger" | "primary" | "success" | "warning";
+
+const SizeClasses: Record = {
+ small: ["tw-h-1"],
+ default: ["tw-h-4"],
+ large: ["tw-h-6"],
+};
+
+const BackgroundClasses: Record = {
+ 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 + "%";
+ }
+}
diff --git a/libs/components/src/progress/progress.module.ts b/libs/components/src/progress/progress.module.ts
new file mode 100644
index 0000000000..8ab09189d1
--- /dev/null
+++ b/libs/components/src/progress/progress.module.ts
@@ -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 {}
diff --git a/libs/components/src/progress/progress.stories.ts b/libs/components/src/progress/progress.stories.ts
new file mode 100644
index 0000000000..079f936e3a
--- /dev/null
+++ b/libs/components/src/progress/progress.stories.ts
@@ -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 = (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...",
+};