Fixed: Step active issue.

StaticMania · Aug 16, 2024 · 2afe1a3 · 2afe1a3
1 parent 55f61ad
commit 2afe1a3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 28 deletions.
diff --git a/app/docs/components/steps/variant/DefaultStep.tsx b/app/docs/components/steps/variant/DefaultStep.tsx
@@ -13,14 +13,14 @@ const DefaultStep = () => {
           </p>
           <p className="text-body-4 font-medium">general info</p>
         </StepPoint>
-        <StepLine completed={active >= 1} />
+        <StepLine completed={active >= 2} />
         <StepPoint completed={active >= 2}>
           <p className="flex size-5 items-center justify-center rounded-full border border-current text-body-5 font-medium">
             2
           </p>
           <p className="text-body-4 font-medium">payment details</p>
         </StepPoint>
-        <StepLine completed={active >= 2} />
+        <StepLine completed={active >= 3} />
         <StepPoint completed={active >= 3}>
           <p className="flex size-5 items-center justify-center rounded-full border border-current text-body-5 font-medium">
             3
@@ -35,7 +35,7 @@ const DefaultStep = () => {
         <SkeletonLine className="h-4 w-7/12" />
       </Skeleton>
       <div className="flex items-center justify-between">
-        <Button disabled={active === 0} onClick={() => setActive(active - 1)}>
+        <Button disabled={active === 1} onClick={() => setActive(active - 1)}>
           Previous
         </Button>
         <Button disabled={active === 3} onClick={() => setActive(active + 1)}>
@@ -57,17 +57,23 @@ export const StepComponent = () => {
     <div className="space-y-6">
       <Steps>
         <StepPoint completed={active >= 1}>
-          <p className="flex size-5 items-center justify-center rounded-full border border-current text-body-5 font-medium">1</p>
+          <p className="flex size-5 items-center justify-center rounded-full border border-current text-body-5 font-medium">
+            1
+          </p>
           <p className="text-body-4 font-medium">general info</p>
         </StepPoint>
-        <StepLine completed={active >= 1} />
+        <StepLine completed={active >= 2} />
         <StepPoint completed={active >= 2}>
-          <p className="flex size-5 items-center justify-center rounded-full border border-current text-body-5 font-medium">2</p>
+          <p className="flex size-5 items-center justify-center rounded-full border border-current text-body-5 font-medium">
+            2
+          </p>
           <p className="text-body-4 font-medium">payment details</p>
         </StepPoint>
-        <StepLine completed={active >= 2} />
+        <StepLine completed={active >= 3} />
         <StepPoint completed={active >= 3}>
-          <p className="flex size-5 items-center justify-center rounded-full border border-current text-body-5 font-medium">3</p>
+          <p className="flex size-5 items-center justify-center rounded-full border border-current text-body-5 font-medium">
+            3
+          </p>
           <p className="text-body-4 font-medium">benefits & extras</p>
         </StepPoint>
       </Steps>
@@ -78,7 +84,7 @@ export const StepComponent = () => {
         <SkeletonLine className="h-4 w-7/12" />
       </Skeleton>
       <div className="flex items-center justify-between">
-        <Button disabled={active === 0} onClick={() => setActive(active - 1)}>
+        <Button disabled={active === 1} onClick={() => setActive(active - 1)}>
           Previous
         </Button>
         <Button disabled={active === 3} onClick={() => setActive(active + 1)}>

diff --git a/app/docs/components/steps/variant/StepWithBorder.tsx b/app/docs/components/steps/variant/StepWithBorder.tsx
@@ -11,12 +11,12 @@ const StepWithBorder = () => {
           <p className="flex size-5 items-center justify-center rounded-full border text-body-5 font-medium">1</p>
           <p className="text-body-4 font-medium">general info</p>
         </StepPoint>
-        <StepLine completed={active >= 1} />
+        <StepLine completed={active >= 2} />
         <StepPoint variant="border" completed={active >= 2}>
           <p className="flex size-5 items-center justify-center rounded-full border text-body-5 font-medium">2</p>
           <p className="text-body-4 font-medium">payment details</p>
         </StepPoint>
-        <StepLine completed={active >= 2} />
+        <StepLine completed={active >= 3} />
         <StepPoint variant="border" completed={active >= 3}>
           <p className="flex size-5 items-center justify-center rounded-full border text-body-5 font-medium">3</p>
           <p className="text-body-4 font-medium">benefits & extras</p>
@@ -29,7 +29,7 @@ const StepWithBorder = () => {
         <SkeletonLine className="h-4 w-7/12" />
       </Skeleton>
       <div className="flex items-center justify-between">
-        <Button disabled={active === 0} onClick={() => setActive(active - 1)}>
+        <Button disabled={active === 1} onClick={() => setActive(active - 1)}>
           Previous
         </Button>
         <Button disabled={active === 3} onClick={() => setActive(active + 1)}>
@@ -50,17 +50,17 @@ export const StepComponent = () => {
   return (
     <div className="space-y-6">
       <Steps>
-        <StepPoint variant='border' completed={active >= 1}>
+        <StepPoint variant="border" completed={active >= 1}>
           <p className="flex size-5 items-center justify-center rounded-full border text-body-5 font-medium">1</p>
           <p className="text-body-4 font-medium">general info</p>
         </StepPoint>
-        <StepLine completed={active >= 1} />
-        <StepPoint variant='border' completed={active >= 2}>
+        <StepLine completed={active >= 2} />
+        <StepPoint variant="border" completed={active >= 2}>
           <p className="flex size-5 items-center justify-center rounded-full border text-body-5 font-medium">2</p>
           <p className="text-body-4 font-medium">payment details</p>
         </StepPoint>
-        <StepLine completed={active >= 2} />
-        <StepPoint variant='border' completed={active >= 3}>
+        <StepLine completed={active >= 3} />
+        <StepPoint variant="border" completed={active >= 3}>
           <p className="flex size-5 items-center justify-center rounded-full border text-body-5 font-medium">3</p>
           <p className="text-body-4 font-medium">benefits & extras</p>
         </StepPoint>
@@ -72,7 +72,7 @@ export const StepComponent = () => {
         <SkeletonLine className="h-4 w-7/12" />
       </Skeleton>
       <div className="flex items-center justify-between">
-        <Button disabled={active === 0} onClick={() => setActive(active - 1)}>
+        <Button disabled={active === 1} onClick={() => setActive(active - 1)}>
           Previous
         </Button>
         <Button disabled={active === 3} onClick={() => setActive(active + 1)}>

diff --git a/app/docs/components/steps/variant/StepWithIcon.tsx b/app/docs/components/steps/variant/StepWithIcon.tsx
@@ -11,15 +11,15 @@ const StepWithIcon = () => {
         <StepPoint variant="icon" completed={active >= 1}>
           <Hourglass size={20} />
         </StepPoint>
-        <StepLine completed={active >= 1} />
+        <StepLine completed={active >= 2} />
         <StepPoint variant="icon" completed={active >= 2}>
           <Recycle size={20} />
         </StepPoint>
-        <StepLine completed={active >= 2} />
+        <StepLine completed={active >= 3} />
         <StepPoint variant="icon" completed={active >= 3}>
           <Gear size={20} />
         </StepPoint>
-        <StepLine completed={active >= 3} />
+        <StepLine completed={active >= 4} />
         <StepPoint variant="icon" completed={active >= 4}>
           <Package size={20} />
         </StepPoint>
@@ -31,7 +31,7 @@ const StepWithIcon = () => {
         <SkeletonLine className="h-4 w-7/12" />
       </Skeleton>
       <div className="flex items-center justify-between">
-        <Button disabled={active === 0} onClick={() => setActive(active - 1)}>
+        <Button disabled={active === 1} onClick={() => setActive(active - 1)}>
           Previous
         </Button>
         <Button disabled={active === 4} onClick={() => setActive(active + 1)}>
@@ -51,20 +51,20 @@ import { Button, Skeleton, SkeletonLine, StepLine, StepPoint, Steps } from 'keep
 export const StepComponent = () => {
   const [active, setActive] = useState(1)
   return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-6">
       <Steps>
         <StepPoint variant="icon" completed={active >= 1}>
           <Hourglass size={20} />
         </StepPoint>
-        <StepLine completed={active >= 1} />
+        <StepLine completed={active >= 2} />
         <StepPoint variant="icon" completed={active >= 2}>
           <Recycle size={20} />
         </StepPoint>
-        <StepLine completed={active >= 2} />
+        <StepLine completed={active >= 3} />
         <StepPoint variant="icon" completed={active >= 3}>
           <Gear size={20} />
         </StepPoint>
-        <StepLine completed={active >= 3} />
+        <StepLine completed={active >= 4} />
         <StepPoint variant="icon" completed={active >= 4}>
           <Package size={20} />
         </StepPoint>
@@ -76,7 +76,7 @@ export const StepComponent = () => {
         <SkeletonLine className="h-4 w-7/12" />
       </Skeleton>
       <div className="flex items-center justify-between">
-        <Button disabled={active === 0} onClick={() => setActive(active - 1)}>
+        <Button disabled={active === 1} onClick={() => setActive(active - 1)}>
           Previous
         </Button>
         <Button disabled={active === 4} onClick={() => setActive(active + 1)}>

diff --git a/app/src/components/Steps/StepLine.tsx b/app/src/components/Steps/StepLine.tsx
@@ -16,7 +16,7 @@ const StepLine = forwardRef<HTMLDivElement, StepLineProps>(({ className, complet
         initial={{ width: '0%' }}
         animate={{ width: completed ? '100%' : '0%' }}
         transition={{ duration: 0.3, type: 'tween' }}
-        className={cn('absolute bottom-0 left-0 top-0 rounded-full bg-metal-900 dark:bg-white', className)}
+        className={cn('absolute bottom-0 left-0 top-0 rounded-full bg-primary-500', className)}
       />
     </motion.div>
   )