From d279e48407f786580c1209e324f776d7531e1ba8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Wierzgo=C5=84?= <michal.wierzgon@gmail.com>
Date: Tue, 3 Dec 2024 10:59:36 +0100
Subject: [PATCH] Design system/progress bar (#68)

---
 .../src/ui/progress/stepProgress.tsx          |  2 +-
 .../src/ui/progress/stepProgressFancy.tsx     | 32 +++++++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/design-system/src/ui/progress/stepProgress.tsx b/packages/design-system/src/ui/progress/stepProgress.tsx
index 9d083f7..14eef3d 100644
--- a/packages/design-system/src/ui/progress/stepProgress.tsx
+++ b/packages/design-system/src/ui/progress/stepProgress.tsx
@@ -13,7 +13,7 @@ const stepProgressVariants = cva("k1-rounded-full", {
   variants: {
     status: {
       active: "k1-w-5 k1-bg-neutral-strong-active",
-      inactive: "k1-h-2 k1-w-2",
+      inactive: "k1-h-2 k1-w-2 k1-bg-neutral-disabled",
     },
   },
 });
diff --git a/packages/design-system/src/ui/progress/stepProgressFancy.tsx b/packages/design-system/src/ui/progress/stepProgressFancy.tsx
index 373edf2..4c0d895 100644
--- a/packages/design-system/src/ui/progress/stepProgressFancy.tsx
+++ b/packages/design-system/src/ui/progress/stepProgressFancy.tsx
@@ -1,11 +1,12 @@
-import React from "react";
 import { cva, VariantProps } from "class-variance-authority";
 
+type Status = true | false | null | undefined;
+
 type Props = {
   steps: {
     currentQuestion: number;
     totalQuestion: number;
-    answers: { answerId: string; status: true | false | null | undefined }[];
+    answers: { answerId: string; status: Status }[];
   };
 } & VariantProps<typeof stepProgressVariants>;
 
@@ -29,25 +30,30 @@ const stepProgressVariants = cva("k1-w-9", {
   },
 });
 
+function checkStatus(status: Status) {
+  switch (status) {
+    case true:
+      return "inFavour";
+    case false:
+      return "against";
+    case null:
+      return "isNull";
+    case undefined:
+      return "none";
+  }
+}
+
 const StepProgressFancy = ({ steps }: Props): JSX.Element => {
   const answersData = steps.answers;
   const { currentQuestion } = steps;
+
   return (
     <div className="k1-flex k1-items-center">
       {answersData.map((answer, index) => {
         return (
           <div
             className={stepProgressVariants({
-              status:
-                answer.status === true
-                  ? "inFavour"
-                  : answer.status === false
-                    ? "against"
-                    : answer.status === null
-                      ? "isNull"
-                      : answer.status === undefined
-                        ? "none"
-                        : null,
+              status: checkStatus(answer.status),
               height: currentQuestion === index + 1 ? "active" : "inactive",
             })}
           ></div>
@@ -57,6 +63,4 @@ const StepProgressFancy = ({ steps }: Props): JSX.Element => {
   );
 };
 
-// TODO: Fix ternary operator with function with switch/case
-
 export { StepProgressFancy };