fix: fancyProgress step-status width updating accordingly

kalkulacka-one · Nov 23, 2024 · f46794b · f46794b
1 parent 7fbe58e
commit f46794b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 29 deletions.
diff --git a/apps/design-system/stories/stepProgressFancy.stories.tsx b/apps/design-system/stories/stepProgressFancy.stories.tsx
@@ -19,27 +19,16 @@ 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,
-    answerCount,
   },
-  render: (args) => <StepProgressFancy {...args} answerCount={answerCount} />,
+  render: (args) => <StepProgressFancy {...args} />,
 };
 
 export default meta;
diff --git a/apps/web/app/[lang]/bottom-bar/page.tsx b/apps/web/app/[lang]/bottom-bar/page.tsx
@@ -18,24 +18,31 @@ const steps = {
     { 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)
+    { answerId: "5", status: null },
+    { answerId: "6", status: null }, //
+    { answerId: "7", status: null },
+    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
+    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
+    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
+    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
+    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
+    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
+    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
+    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
+    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
+    { answerId: "8", status: null }, // 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">
+    <div className="sticky bottom-0 border border-red-500">
       {/* count status wrapper */}
-      <div className="w-full">
-        <StepProgressFancy steps={steps} answerCount={answerCount} />
+      <div className="w-screen">
+        <StepProgressFancy steps={steps} />
       </div>
       {/* button wrapper */}
       <div className="flex justify-center p-4">
@@ -48,3 +55,8 @@ export default function Page() {
     </div>
   );
 }
+
+// TODO
+// 1. Buttons on mobile wihout texts WIDTH!
+// 2. Statuses proper styling (bg) check with live
+// 3. Bottom bar positioning
diff --git a/packages/design-system/src/ui/progress/stepProgressFancy.tsx b/packages/design-system/src/ui/progress/stepProgressFancy.tsx
@@ -1,8 +1,7 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { cva, VariantProps } from "class-variance-authority";
 
 type Props = {
-  answerCount: number;
   steps: {
     currentQuestion: number;
     totalQuestion: number;
@@ -31,15 +30,24 @@ const stepProgressVariants = cva("", {
   },
 });
 
-const StepProgressFancy = ({ steps, answerCount }: Props): JSX.Element => {
+const StepProgressFancy = ({ steps }: Props): JSX.Element => {
+  const answerCount = steps.answers.length;
+
+  const [stepCount, setStepCount] = React.useState(answerCount);
+
+  useEffect(() => {
+    setStepCount(stepCount);
+  }, [answerCount]);
+
   const answersData = steps.answers;
 
   const { currentQuestion } = steps;
   return (
-    <div className="k1-flex k1-items-center">
+    <div className="k1-flex k1-items-center k1-justify-start k1-h-1">
       {answersData.map((answer, index) => {
         return (
           <div
+            style={{ width: `calc(100vw / ${stepCount})` }}
             className={`${stepProgressVariants({
               status:
                 answer.status === true
@@ -52,15 +60,12 @@ const StepProgressFancy = ({ steps, answerCount }: Props): JSX.Element => {
                         ? "none"
                         : null,
               height: currentQuestion === index + 1 ? "active" : "inactive",
-              // FIX bug with answer Count not updating
-            })} k1-w-[calc(100vw/${answerCount})]`}
+            })}`}
           ></div>
         );
       })}
     </div>
   );
 };
 
-// TODO: Fix ternary operator with function with switch/case
-
 export { StepProgressFancy };