[AC-1423] Add minWidth input to bit-progress component

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

@@ -5,7 +5,7 @@
     aria-valuemin="0"
     aria-valuemax="100"
     attr.aria-valuenow="{{ barWidth }}"
-    [ngStyle]="{ width: barWidth + '%' }"
+    [ngStyle]="{ width: barWidthPercentage + '%' }"
   >
     <div
       *ngIf="displayText"

libs/components/src/progress/progress.component.ts

@@ -26,11 +26,16 @@ export class ProgressComponent {
   @Input() showText = true;
   @Input() size: SizeTypes = "default";
   @Input() text?: string;
+  @Input() minWidth = 0;
 
   get displayText() {
     return this.showText && this.size !== "small";
   }
 
+  protected get barWidthPercentage() {
+    return this.barWidth > this.minWidth ? this.barWidth : this.minWidth;
+  }
+
   get outerBarStyles() {
     return ["tw-overflow-hidden", "tw-rounded", "tw-bg-secondary-100"].concat(
       SizeClasses[this.size]

libs/components/src/progress/progress.stories.ts

@@ -15,6 +15,7 @@ export default {
     showText: true,
     size: "default",
     bgColor: "primary",
+    minWidth: 0,
   },
 } as Meta;
 
@@ -38,3 +39,10 @@ export const CustomText: Story = {
     text: "Loading...",
   },
 };
+
+export const MinWidth: Story = {
+  args: {
+    barWidth: 0,
+    minWidth: 5,
+  },
+};