From 365c16a0d13b027be999c98f2d825cc860afaa98 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 20 Nov 2020 09:06:20 -0800
Subject: [PATCH] docs(progress-indicator): add programmatic usage example

---
 .../pages/components/ProgressIndicator.svx    |  6 ++++++
 .../ProgrammaticProgressIndicator.svelte      | 21 ++++++++-----------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/docs/src/pages/components/ProgressIndicator.svx b/docs/src/pages/components/ProgressIndicator.svx
index 909af2be..b0e6693f 100644
--- a/docs/src/pages/components/ProgressIndicator.svx
+++ b/docs/src/pages/components/ProgressIndicator.svx
@@ -53,6 +53,12 @@ Set `preventChangeOnClick` to `true` to prevent this behavior.
   />
 </ProgressIndicator>
 
+### Programmatic usage
+
+When programmatically updating the `currentIndex`, keep in mind that only completed steps should be selectable.
+
+<FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />
+
 ### Spaced-equally
 
 <ProgressIndicator spaceEqually>
diff --git a/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte b/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
index 6b6c6046..f833e346 100644
--- a/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
+++ b/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
@@ -6,7 +6,7 @@
   } from "carbon-components-svelte";
 
   let currentIndex = 1;
-  let thirdStepComplete = false;
+  let thirdStepCurrent = false;
 </script>
 
 <ProgressIndicator bind:currentIndex>
@@ -21,7 +21,8 @@
     description="The progress indicator will listen for clicks on the steps"
   />
   <ProgressStep
-    complete="{thirdStepComplete}"
+    complete
+    bind:current="{thirdStepCurrent}"
     label="Step 3"
     description="The progress indicator will listen for clicks on the steps"
   />
@@ -33,20 +34,16 @@
 
 <div style="margin: var(--cds-layout-02) 0">
   <Button
+    kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
     on:click="{() => {
-      currentIndex = 2;
+      currentIndex = currentIndex === 2 ? 0 : 2;
     }}"
   >
-    Set index to 2
-  </Button>
-  <Button
-    kind="ghost"
-    on:click="{() => {
-      thirdStepComplete = !thirdStepComplete;
-    }}"
-  >
-    Toggle step 3
+    Set currentIndex to
+    {currentIndex === 2 ? 0 : 2}
   </Button>
 </div>
 
 <h3>Current index: {currentIndex}</h3>
+
+<div>Is the third step currently selected? {thirdStepCurrent}</div>