refactor: stepper component (#467)

deriv-com · Oct 9, 2024 · 87e6654 · 87e6654
1 parent b18af7e
commit 87e6654
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/lib/components/Stepper/index.tsx b/lib/components/Stepper/index.tsx
@@ -44,7 +44,7 @@ export const BasicStepper = ({
                                 >
                                     {isActive && <Icon size={size} />}
                                 </div>
-                                {index !== labels.length - 1 && (
+                                {index < labels.length - 1 && (
                                     <div
                                         className={clsx("step-line", `step-line--size-${lineSize}`, {
                                             "step-line--disabled": index > currentStep,
@@ -59,7 +59,7 @@ export const BasicStepper = ({
                                 className={clsx(`step-circle__label-${size}`, {
                                     "step-circle__label--disabled": isPreviousInactive
                                 })}>
-                                {labels[index - 1]}
+                                {labels[index]}
                             </Text>
                         </div>
                     </React.Fragment>

diff --git a/lib/components/Stepper/vertical-stepper/__tests__/vertical-stepper.test.tsx b/lib/components/Stepper/vertical-stepper/__tests__/vertical-stepper.test.tsx
@@ -5,7 +5,7 @@ describe("BasicStepper component", () => {
 
     const props = {
         currentStep: 1,
-        labels: ['Step 1', 'Step 2', 'Step 3'],
+        labels: ['Default', 'Step 1', 'Step 2'],
     };
 
     it("renders steps correctly", () => {

diff --git a/lib/components/Stepper/vertical-stepper/stepper-vertical.stories.tsx b/lib/components/Stepper/vertical-stepper/stepper-vertical.stories.tsx
@@ -55,7 +55,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     args: {
         currentStep: 0,
-        labels: ['Step 1', 'Step 2', 'Step 3'],
+        labels: ['Default', 'Step 1', 'Step 2'],
         size: "md",
         lineSize: "md",
     },
@@ -64,7 +64,7 @@ export const Default: Story = {
 export const OneStepCompleted: Story = {
     args: {
         currentStep: 1,
-        labels: ['Step 1', 'Step 2', 'Step 3'],
+        labels: ['Default', 'Step 1', 'Step 2'],
         size: "md",
         lineSize: "md",
     },
@@ -73,15 +73,15 @@ export const OneStepCompleted: Story = {
 export const AllStepsCompleted: Story = {
     args: {
         currentStep: 2,
-        labels: ['Step 1', 'Step 2', 'Step 3'],
+        labels: ['Default', 'Step 1', 'Step 2'],
         size: "md",
         lineSize: "md",
     },
 };
 
 const commonProps = {
     currentStep: 1,
-    labels: ['Step 1', 'Step 2', 'Step 3'],
+    labels: ['Default', 'Step 1', 'Step 2'],
 };
 
 export const SmallSize: Story = {