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; @@ -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 (
{answersData.map((answer, index) => { return (
@@ -57,6 +63,4 @@ const StepProgressFancy = ({ steps }: Props): JSX.Element => { ); }; -// TODO: Fix ternary operator with function with switch/case - export { StepProgressFancy };