Export id in ProgressBar, add UX animated progress bar example (#732)

* fix(progress-bar): export id prop #731

Fixes #731

* docs(progress-bar): add UX example

docs/src/COMPONENT_API.json

@@ -7441,6 +7441,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "id",
+          "kind": "let",
+          "description": "Set an id for the progress bar element",
+          "type": "string",
+          "value": "\"ccs-\" + Math.random().toString(36)",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [

docs/src/pages/components/ProgressBar.svx

@@ -21,4 +21,10 @@ The default `max` value is `100`.
 
 ### Hidden label
 
-<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
+<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
+
+### UX example
+
+This example shows how to animate the progress bar from 0 to 100% with start and end states.
+
+<FileSource src="/framed/ProgressBar/ProgressBarUx" />

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

@@ -1,30 +1,11 @@
 <script>
-  import { onMount } from "svelte";
-  import { ProgressBar } from "carbon-components-svelte";
+  import { ProgressBar, ButtonSet, Button } from "carbon-components-svelte";
 
   let max = 328;
   let value = 0;
-  let timer = undefined;
-
-  onMount(() => {
-    timer = setTimeout(() => {
-      const interval = setInterval(() => {
-        const delta = Math.random() * 10;
-
-        if (value + delta < max) {
-          value += delta;
-        } else {
-          value = max;
-          clearInterval(interval);
-        }
-      }, 20);
-    }, 2000);
-
-    return () => clearTimeout(timer);
-  });
 
   $: helperText =
-    value > 0 ? `${value.toFixed(0)}MB of ${max}MB` : "Preparing upload...";
+    value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
   $: if (value === max) helperText = "Done";
 </script>
 
@@ -34,3 +15,30 @@
   max="{max}"
   helperText="{helperText}"
 />
+
+<ButtonSet style="margin-top: var(--cds-spacing-08)">
+  <Button
+    disabled="{value > 0}"
+    on:click="{() => {
+      const interval = setInterval(() => {
+        const delta = Math.random() * 10;
+
+        if (value + delta < max) {
+          value += delta;
+        } else {
+          value = max;
+          clearInterval(interval);
+        }
+      }, 30);
+    }}"
+  >
+    Start
+  </Button>
+  <Button
+    kind="tertiary"
+    disabled="{value !== max}"
+    on:click="{() => (value = 0)}"
+  >
+    Reset
+  </Button>
+</ButtonSet>