From 5ca12f6c024670d20030a7747beac30cb6473e15 Mon Sep 17 00:00:00 2001
From: Carlos Mercado <carlos.mercado.pc@gmail.com>
Date: Thu, 24 Aug 2023 20:20:22 -0400
Subject: [PATCH 1/2] [#19] - [TableFlow] Update Stepper component to make
 width dependent on number of items

	resolves #19
---
 src/Stepper/index.tsx                 | 43 ++++++++++++++-------------
 src/Stepper/style/Stepper.module.scss |  8 +++++
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/Stepper/index.tsx b/src/Stepper/index.tsx
index a65645e..b663850 100644
--- a/src/Stepper/index.tsx
+++ b/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>
+  );
 }
diff --git a/src/Stepper/style/Stepper.module.scss b/src/Stepper/style/Stepper.module.scss
index be97659..2e2b26f 100644
--- a/src/Stepper/style/Stepper.module.scss
+++ b/src/Stepper/style/Stepper.module.scss
@@ -52,4 +52,12 @@
       }
     }
   }
+
+  .stepWide {
+    &:not(:first-of-type) {
+      &:before {
+        width: min(140px, 10vw);
+      }
+    }
+  }
 }

From ec49a97d49da944b4eb667e98be44df81134b5e6 Mon Sep 17 00:00:00 2001
From: ciminelli <eric@tableflow.com>
Date: Mon, 28 Aug 2023 14:33:18 -0700
Subject: [PATCH 2/2] Updated stepper spacing

---
 src/Stepper/style/Stepper.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Stepper/style/Stepper.module.scss b/src/Stepper/style/Stepper.module.scss
index 2e2b26f..5c93af5 100644
--- a/src/Stepper/style/Stepper.module.scss
+++ b/src/Stepper/style/Stepper.module.scss
@@ -56,7 +56,7 @@
   .stepWide {
     &:not(:first-of-type) {
       &:before {
-        width: min(140px, 10vw);
+        width: min(120px, 10vw);
       }
     }
   }