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

libs/components/src/progress/index.ts

@@ -0,0 +1 @@
+export * from "./progress.module";

libs/components/src/progress/progress.component.html

@@ -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">&nbsp;</div>
+      <div class="tw-pr-1">{{ textContent }}</div>
+    </div>
+  </div>
+</div>

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

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 {}

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