add progress component, template, and stories (#4437)

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<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 + "%";
+  }
+}