fix(progress-step): inherit unclickable styling if preventChangeOnClick is true (#1535)

Fixes #1534

src/ProgressIndicator/ProgressIndicator.svelte

@@ -19,10 +19,12 @@
   const stepsById = derived(steps, ($) =>
     $.reduce((a, c) => ({ ...a, [c.id]: c }), {})
   );
+  const preventChangeOnClickStore = writable(preventChangeOnClick);
 
   setContext("ProgressIndicator", {
     steps,
     stepsById,
+    preventChangeOnClick: { subscribe: preventChangeOnClickStore.subscribe },
     add: (step) => {
       steps.update((_) => {
         if (step.id in $stepsById) {
@@ -58,6 +60,7 @@
       current: i === currentIndex,
     }))
   );
+  $: preventChangeOnClickStore.set(preventChangeOnClick);
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

src/ProgressIndicator/ProgressStep.svelte

@@ -31,7 +31,8 @@
 
   let step = {};
 
-  const { stepsById, add, change } = getContext("ProgressIndicator");
+  const { stepsById, add, change, preventChangeOnClick } =
+    getContext("ProgressIndicator");
 
   $: add({ id, complete, disabled });
 
@@ -67,7 +68,8 @@
     aria-disabled="{disabled}"
     tabindex="{!current && !disabled ? '0' : '-1'}"
     class:bx--progress-step-button="{true}"
-    class:bx--progress-step-button--unclickable="{current}"
+    class:bx--progress-step-button--unclickable="{current ||
+      $preventChangeOnClick}"
     on:click
     on:click="{() => {
       if (!step.complete) return;