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>

docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte

@@ -3,10 +3,14 @@
 
   let max = 328;
   let value = 0;
+  let status = "active";
 
   $: helperText =
     value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
-  $: if (value === max) helperText = "Done";
+  $: if (value === max) {
+    helperText = "Done";
+    status = "finished";
+  }
 </script>
 
 <ProgressBar
@@ -14,6 +18,7 @@
   value="{value}"
   max="{max}"
   helperText="{helperText}"
+  status="{status}"
 />
 
 <ButtonSet style="margin-top: var(--cds-spacing-08)">
@@ -37,7 +42,10 @@
   <Button
     kind="tertiary"
     disabled="{value !== max}"
-    on:click="{() => (value = 0)}"
+    on:click="{() => {
+      value = 0;
+      status = 'active';
+    }}"
   >
     Reset
   </Button>