fix(tabs): adjust the numbering of the steps. Closes #586

baloise · Oct 10, 2022 · dda1799 · dda1799
1 parent 461b5f9
commit dda1799
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/components/src/components/bal-tabs/bal-tab.type.ts b/packages/components/src/components/bal-tabs/bal-tab.type.ts
@@ -11,9 +11,10 @@ export interface BalTabOption {
   done: boolean
   hidden: boolean
   failed: boolean
-  passed: boolean
   bubble: boolean | string
   prevent: boolean
+  passed?: boolean
+  index?: number
   context?: Props.BalTabsInterface
   navigate: EventEmitter<MouseEvent>
 }

diff --git a/packages/components/src/components/bal-tabs/components/steps.tsx b/packages/components/src/components/bal-tabs/components/steps.tsx
@@ -12,15 +12,18 @@ const stepItemButtonLabelEl = stepItemButtonEl.element('label')
 
 export const StepList: FunctionalComponent<TabProps> = ({ value, float, clickable, tabs, onSelectTab }) => {
   let hasPassed = true
-  let index = 1
+  let index = 0
 
   tabs = tabs
     .map(tab => ({ ...tab, active: tab.value === value }))
     .map(tab => {
       if (tab.active) {
         hasPassed = false
       }
-      return { ...tab, passed: hasPassed }
+      if (!tab.hidden) {
+        index = index + 1
+      }
+      return { ...tab, passed: hasPassed, index }
     })
 
   return (
@@ -82,7 +85,7 @@ export const StepList: FunctionalComponent<TabProps> = ({ value, float, clickabl
                 }}
                 style={{ display: !tab.done ? 'block' : 'none' }}
               >
-                {tab.failed ? '!' : tab.hidden ? index : index++}
+                {tab.failed ? '!' : tab.index}
               </span>
             </span>
             <span