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/COMPONENT_API.json

@@ -8973,6 +8973,18 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "status",
+          "kind": "let",
+          "description": "Specify the status",
+          "type": "\"active\" | \"finished\" | \"error\"",
+          "value": "\"active\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "size",
           "kind": "let",

docs/src/pages/components/ProgressBar.svx

@@ -21,6 +21,18 @@ Specify a `value` for the progress bar to be determinate.
 
 <ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
+## Finished status
+
+Specify `status="finished"` for the progress bar.
+
+<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
+
+## Error status
+
+Specify `status="error"` for the progress bar.
+
+<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
+
 ## Custom max value
 
 The default `max` value is `100`.
@@ -45,6 +57,10 @@ The inline variant visually hides the `helperText`.
 
 <ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
+## Indented status variant
+
+<ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
+
 ## UX example
 
 This example shows how to animate the progress bar from 0 to 100% with start and end states.

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>