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

COMPONENT_INDEX.md

@@ -2839,12 +2839,13 @@ None.
 ### Props
 
 | Prop name  | Kind             | Reactive | Type                 | Default value                                    | Description                                   |
-| :--------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
+| :--------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | --------------------------------------------- |
 | value      | <code>let</code> | No       | <code>number</code>  | --                                               | Specify the current value                     |
 | max        | <code>let</code> | No       | <code>number</code>  | <code>100</code>                                 | Specify the maximum value                     |
 | labelText  | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the label text                        |
 | hideLabel  | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to visually hide the label text |
 | helperText | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the helper text                       |
+| id         | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the progress bar element        |
 
 ### Slots
 

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

@@ -22,3 +22,9 @@ The default `max` value is `100`.
 ### Hidden label
 
 <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>

src/ProgressBar/ProgressBar.svelte

@@ -17,7 +17,9 @@
   /** Specify the helper text */
   export let helperText = "";
 
-  let id = "ccs-" + Math.random().toString(36);
+  /** Set an id for the progress bar element */
+  export let id = "ccs-" + Math.random().toString(36);
+
   let helperId = "ccs-" + Math.random().toString(36);
 
   $: indeterminate = value === undefined;

types/ProgressBar/ProgressBar.d.ts

@@ -31,6 +31,12 @@ export interface ProgressBarProps
    * @default ""
    */
   helperText?: string;
+
+  /**
+   * Set an id for the progress bar element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
 }
 
 export default class ProgressBar extends SvelteComponentTyped<