feat(progress-bar): add status prop (#1560)

* ProgressBar status feature added

* ProgressBar: Removed the css variables and use carbon-css instead.
The way of assigning the ProgressBar value has change. It is now a style
variable and scale-x is calculated in the css. This way prevent the
override of carbon css.

* Removed an unessacery span.

* Removed an unnecessary span.

* Added the status for the ProgressBarUx

* Remove `style css` and update docs.

* - Fixed the `capped` variable for more readability
- Updated docs `label` and `helperText`
- Updated docs and css

* fix: finished/error states cannot be indeterminate

* Run "yarn build:css"

* Re-run "yarn build:docs"

* test(progress-bar): assert `status` prop

* chore: add aria-busy and set valuenow to 0 when not active

---------

Co-authored-by: Eric Liu <ericyl.us@gmail.com>
Co-authored-by: Enrico Sacchetti <enrico@theetrain.ca>

src/ProgressBar/ProgressBar.svelte

@@ -14,6 +14,12 @@
    */
   export let kind = "default";
 
+  /**
+   * Specify the status
+   * @type {"active" | "finished" | "error"}
+   */
+  export let status = "active";
+
   /**
    * Specify the size
    * @type {"sm" | "md"}
@@ -32,10 +38,27 @@
   /** Set an id for the progress bar element */
   export let id = "ccs-" + Math.random().toString(36);
 
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+  import ErrorFilled from "../icons/ErrorFilled.svelte";
+
+  const statusIcons = {
+    error: ErrorFilled,
+    finished: CheckmarkFilled,
+  };
+
   let helperId = "ccs-" + Math.random().toString(36);
 
-  $: indeterminate = value === undefined;
-  $: capped = value > max ? max : value < 0 ? 0 : value;
+  $: indeterminate = value === undefined && status === "active";
+  let capped;
+  $: {
+    if (status === "error" || value < 0) {
+      capped = 0;
+    } else if (value > max) {
+      capped = max;
+    } else {
+      capped = value;
+    }
+  }
 </script>
 
 <div
@@ -45,6 +68,8 @@
   class:bx--progress-bar--small="{size === 'sm'}"
   class:bx--progress-bar--inline="{kind === 'inline'}"
   class:bx--progress-bar--indented="{kind === 'indented'}"
+  class:bx--progress-bar--error="{status === 'error'}"
+  class:bx--progress-bar--finished="{status === 'finished'}"
   {...$$restProps}
 >
   <label
@@ -55,11 +80,18 @@
     <slot name="labelText">
       {labelText}
     </slot>
+    {#if status === "error" || status === "finished"}
+      <svelte:component
+        this="{statusIcons[status]}"
+        class="bx--progress-bar__status-icon"
+      />
+    {/if}
   </label>
   <div
     role="progressbar"
     id="{id}"
     class:bx--progress-bar__track="{true}"
+    aria-busy="{status === 'active'}"
     aria-valuemin="{indeterminate ? undefined : 0}"
     aria-valuemax="{indeterminate ? undefined : max}"
     aria-valuenow="{indeterminate ? undefined : capped}"
@@ -67,7 +99,7 @@
   >
     <div
       class:bx--progress-bar__bar="{true}"
-      style="transform: scaleX({capped / max})"
+      style:transform="{status === "active" && `scaleX(${capped / max})`}"
     ></div>
   </div>
   {#if helperText}