fix(docs): stepper and docs examples not working (#3499) (#3686)

Co-authored-by: Tim Schär <[email protected]>
swisspost · Oct 9, 2024 · c53f528 · c53f528
1 parent 80041af
commit c53f528
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 23 deletions.
diff --git a/.changeset/funny-shrimps-care.md b/.changeset/funny-shrimps-care.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Refactored the stepper component to handle `updateArgs` directly within the `getStepperItem` function, fixing the issue where stepper examples were not independent and resolving unreliable step changes that sometimes caused clicks to be unrecognized or froze the page.
diff --git a/packages/documentation/src/stories/components/stepper/stepper.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.stories.ts
@@ -23,13 +23,13 @@ const meta: MetaComponent = {
   },
   args: {
     currentStepNumber: 3,
-    navigableSteps: 'all',
+    navigatableSteps: 'all',
     processName: 'Registration Form',
     steps: defaultSteps,
   },
   argTypes: {
-    navigableSteps: {
-      name: 'Navigable Steps',
+    navigatableSteps: {
+      name: 'Navigatable Steps',
       description: 'Defines which steps in the current process the user can navigate to.',
       control: {
         type: 'radio',
@@ -71,14 +71,14 @@ const meta: MetaComponent = {
 export default meta;
 
 // RENDERER
-function getStepperItem(args: Args, step: string, index: number) {
+function getStepperItem(args: Args, step: string, index: number, updateStep: (newStep: number, event: Event) => void) {
   const currentStepIndex = args.currentStepNumber - 1;
   const isCompletedStep = index < currentStepIndex;
   const isCurrentStep = index === currentStepIndex;
   const isNextStep = index > currentStepIndex;
   const isLink =
-    (isCompletedStep && args.navigableSteps !== 'none') ||
-    (isNextStep && args.navigableSteps === 'all');
+    (isCompletedStep && args.navigatableSteps !== 'none') ||
+    (isNextStep && args.navigatableSteps === 'all');
 
   let status = 'Current';
   if (isCompletedStep) status = 'Completed';
@@ -91,7 +91,11 @@ function getStepperItem(args: Args, step: string, index: number) {
     <li aria-current=${ifDefined(isCurrentStep ? 'step' : undefined)} class="stepper-item">
       ${isLink
         ? html`
-            <a class="stepper-link" href="../step-${index + 1}" title=${ifDefined(title)}>
+            <a class="stepper-link" href="../step-${index + 1}" title=${ifDefined(title)}
+              @click=${(e: Event) => {
+                e.preventDefault();
+                updateStep(index + 1, e);
+              }}>
               ${text}
             </a>
           `
@@ -100,45 +104,42 @@ function getStepperItem(args: Args, step: string, index: number) {
   `;
 }
 
+
 function renderStepper(args: Args) {
   const [_, updateArgs] = useArgs();
 
-  setTimeout(() => {
-    const stepperLinks = document.querySelectorAll('.stepper-link');
-    stepperLinks.forEach((link, index) => {
-      if (link.tagName === 'SPAN') return;
+  const updateStep = (newStepNumber: number, event: Event) => {
+    event.preventDefault();
+    updateArgs({ currentStepNumber: newStepNumber });
+  };
 
-      link.addEventListener('click', e => {
-        e.preventDefault();
-        updateArgs({ currentStepNumber: index + 1 });
-      });
-    });
-  });
+  const isNav = args.navigatableSteps !== 'none';
 
-  const isNav = args.navigableSteps !== 'none';
   const stepper = html`<ol
     class="stepper"
     aria-label=${ifDefined(isNav ? undefined : args.processName + ' Progress')}
   >
-    ${args.steps.map((step: string, index: number) => getStepperItem(args, step, index))}
+    ${args.steps.map((step: string, index: number) => 
+      getStepperItem(args, step, index, updateStep)
+    )}
   </ol>`;
 
-  return args.navigableSteps === 'none'
+  return args.navigatableSteps === 'none'
     ? stepper
-    : html` <nav aria-label="${args.processName}">${stepper}</nav> `;
+    : html`<nav aria-label="${args.processName}">${stepper}</nav>`;
 }
 
 export const Default: StoryObj = {};
 
 export const NavigationalStepper: StoryObj = {
   args: {
-    navigableSteps: 'completedOnly',
+    navigatableSteps: 'completedOnly',
   },
 };
 
 export const InformationalStepper: StoryObj = {
   args: {
-    navigableSteps: 'none',
+    navigatableSteps: 'none',
   },
 };