From 2d47bcaf1ffd7bd74af6562cd51f7f56fd83d177 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 7 Jul 2021 10:08:03 -0700
Subject: [PATCH] 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                            | 15 +++---
 docs/src/COMPONENT_API.json                   | 10 ++++
 docs/src/pages/components/ProgressBar.svx     |  8 ++-
 .../framed/ProgressBar/ProgressBarUx.svelte   | 50 +++++++++++--------
 src/ProgressBar/ProgressBar.svelte            |  4 +-
 types/ProgressBar/ProgressBar.d.ts            |  6 +++
 6 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 9f3d4afc..2a39b52f 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2838,13 +2838,14 @@ 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                       |
+| 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
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 1ae514df..2f90e454 100644
--- a/docs/src/COMPONENT_API.json
+++ b/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": [
diff --git a/docs/src/pages/components/ProgressBar.svx b/docs/src/pages/components/ProgressBar.svx
index b81cf599..7ed85752 100644
--- a/docs/src/pages/components/ProgressBar.svx
+++ b/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" />
\ No newline at end of file
+<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" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
index 83dd89b6..4f273214 100644
--- a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
+++ b/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>
diff --git a/src/ProgressBar/ProgressBar.svelte b/src/ProgressBar/ProgressBar.svelte
index 44702f01..609aff6d 100644
--- a/src/ProgressBar/ProgressBar.svelte
+++ b/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;
diff --git a/types/ProgressBar/ProgressBar.d.ts b/types/ProgressBar/ProgressBar.d.ts
index bee6de56..bd1d7ed7 100644
--- a/types/ProgressBar/ProgressBar.d.ts
+++ b/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<