fix: dynamic width of the status bar based on the answerCount

kalkulacka-one · Nov 21, 2024 · 7fbe58e · 7fbe58e
1 parent 1952753
commit 7fbe58e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/apps/design-system/stories/stepProgressFancy.stories.tsx b/apps/design-system/stories/stepProgressFancy.stories.tsx
@@ -19,13 +19,27 @@ const steps = {
     { answerId: "6", status: true }, //
     { answerId: "7", status: false },
     { answerId: "8", status: undefined }, // step with no sratus (e.g. not visited yet)
+    { answerId: "1", status: true }, // positive step (e.g. answerInFavour)
+    { answerId: "2", status: null },
+    { answerId: "3", status: null }, // neutral step (e.g. visited / skipped, answerNeutral)
+    { answerId: "4", status: false }, // negative step (e.g. answerAgainst)
+    { answerId: "5", status: true },
+    { answerId: "6", status: true }, //
+    { answerId: "7", status: false },
+    { answerId: "8", status: undefined }, // step with no sratus (e.g. not visited yet)
   ],
   totalQuestion: 4,
   currentQuestion: 8,
 };
+
+const answerCount = steps.answers.length;
+
 export const Fancy: StepProgressStory = {
-  args: { steps },
-  render: (args) => <StepProgressFancy {...args} />,
+  args: {
+    steps,
+    answerCount,
+  },
+  render: (args) => <StepProgressFancy {...args} answerCount={answerCount} />,
 };
 
 export default meta;
diff --git a/apps/web/app/[lang]/bottom-bar/page.tsx b/apps/web/app/[lang]/bottom-bar/page.tsx
@@ -14,18 +14,28 @@ const steps = {
     { answerId: "6", status: true }, //
     { answerId: "7", status: false },
     { answerId: "8", status: undefined }, // step with no sratus (e.g. not visited yet)
+    { answerId: "1", status: true }, // positive step (e.g. answerInFavour)
+    { answerId: "2", status: null },
+    { answerId: "3", status: null }, // neutral step (e.g. visited / skipped, answerNeutral)
+    { answerId: "4", status: false }, // negative step (e.g. answerAgainst)
+    { answerId: "5", status: true },
+    { answerId: "6", status: true }, //
+    { answerId: "7", status: false },
+    { answerId: "8", status: undefined }, // step with no sratus (e.g. not visited yet)
   ],
   totalQuestion: 4,
   currentQuestion: 8,
 };
 
+const answerCount = steps.answers.length;
+
 export default function Page() {
   return (
     // main wrapper
     <div className="sticky bottom-0 bg-slate-300">
       {/* count status wrapper */}
       <div className="w-full">
-        <StepProgressFancy steps={steps} />
+        <StepProgressFancy steps={steps} answerCount={answerCount} />
       </div>
       {/* button wrapper */}
       <div className="flex justify-center p-4">

diff --git a/packages/design-system/src/ui/progress/stepProgressFancy.tsx b/packages/design-system/src/ui/progress/stepProgressFancy.tsx
@@ -2,14 +2,17 @@ import React from "react";
 import { cva, VariantProps } from "class-variance-authority";
 
 type Props = {
+  answerCount: number;
   steps: {
     currentQuestion: number;
     totalQuestion: number;
     answers: { answerId: string; status: true | false | null | undefined }[];
   };
 } & VariantProps<typeof stepProgressVariants>;
 
-const stepProgressVariants = cva("k1-w-9", {
+// Updated calculated width for the bar based on the answerLenght
+
+const stepProgressVariants = cva("", {
   variants: {
     status: {
       inFavour: "k1-bg-primary-strong",
@@ -28,15 +31,16 @@ const stepProgressVariants = cva("k1-w-9", {
   },
 });
 
-const StepProgressFancy = ({ steps }: Props): JSX.Element => {
+const StepProgressFancy = ({ steps, answerCount }: 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({
+            className={`${stepProgressVariants({
               status:
                 answer.status === true
                   ? "inFavour"
@@ -48,7 +52,8 @@ const StepProgressFancy = ({ steps }: Props): JSX.Element => {
                         ? "none"
                         : null,
               height: currentQuestion === index + 1 ? "active" : "inactive",
-            })}
+              // FIX bug with answer Count not updating
+            })} k1-w-[calc(100vw/${answerCount})]`}
           ></div>
         );
       })}