Design system/progress bar (#68)

kalkulacka-one · Dec 3, 2024 · d279e48 · d279e48
1 parent 10c63e0
commit d279e48
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git 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
@@ -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 };