Merge pull request #11 from tableflowhq/stepper-component-update-wider--line-space

Update Stepper component to make width dependent on number of items

Author: ciminelli

src/Stepper/index.tsx

@@ -4,27 +4,30 @@ import style from "./style/Stepper.module.scss";
 import Icon from "../Icon";
 
 export default function Stepper({ steps, current, clickable, setCurrent }: StepperProps) {
-    return (
-        <div className={style.stepper}>
-            {steps.map((step, i) => {
-                const done = i < current;
+  return (
+    <div className={style.stepper}>
+      {steps.map((step, i) => {
+        const done = i < current;
 
-                const Element = clickable ? "button" : "div";
+        const Element = clickable ? "button" : "div";
 
-                const buttonProps: any = clickable
-                    ? {
-                          onClick: () => setCurrent(i),
-                          type: "button",
-                      }
-                    : {};
+        const buttonProps: any = clickable
+          ? {
+              onClick: () => setCurrent(i),
+              type: "button",
+            }
+          : {};
 
-                return (
-                    <Element key={i} className={classes([style.step, i === current ? style.active : done && style.done])} {...buttonProps}>
-                        <div className={style.badge}>{done ? <Icon icon="check" /> : i + 1}</div>
-                        <div className={style.label}>{step.label}</div>
-                    </Element>
-                );
-            })}
-        </div>
-    );
+        return (
+          <Element
+            key={i}
+            className={classes([style.step, i === current ? style.active : done && style.done, steps.length < 4 && style.stepWide])}
+            {...buttonProps}>
+            <div className={style.badge}>{done ? <Icon icon="check" /> : i + 1}</div>
+            <div className={style.label}>{step.label}</div>
+          </Element>
+        );
+      })}
+    </div>
+  );
 }

src/Stepper/style/Stepper.module.scss

@@ -52,4 +52,12 @@
       }
     }
   }
+
+  .stepWide {
+    &:not(:first-of-type) {
+      &:before {
+        width: min(120px, 10vw);
+      }
+    }
+  }
 }