fancy and plain separated, fancy mockup data working

apps/design-system/stories/stepProgress.stories.tsx

@@ -1,42 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { StepProgress } from "@repo/design-system/stepProgress";
-import { StepProgressFancy } from "@repo/design-system/stepProgressFancy";
 
 const meta: Meta<typeof StepProgress> = {
   title: "Components/StepProgress",
   component: StepProgress,
 };
 
-const mockupData = {
-  currentStep: 3,
-  stepCount: 4,
-  stepStatus: [
-    { step: 1, status: true },
-    { step: 2, status: false },
-    { step: 3, status: null },
-    { step: 4, status: undefined },
-  ],
-};
-
-console.log(mockupData.stepStatus.map((step) => step.step));
-
 type StepProgressStory = StoryObj<typeof meta>;
 
 export const Plain: StepProgressStory = {
   args: {
     currentStep: 1,
-    stepCount: 2,
+    totalStep: 8,
   },
   render: (args) => <StepProgress {...args} />,
 };
 
-export const Fancy: StepProgressStory = {
-  args: {
-    currentStep: 1,
-    stepCount: 2,
-  },
-  render: (args) => <StepProgressFancy {...args} />,
-};
-
 export default meta;

apps/design-system/stories/stepProgressFancy.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { StepProgressFancy } from "@repo/design-system/stepProgressFancy";
+
+const meta: Meta<typeof StepProgressFancy> = {
+  title: "Components/StepProgress",
+  component: StepProgressFancy,
+};
+
+type StepProgressStory = StoryObj<typeof meta>;
+
+const stepsData = {
+  answers: [
+    { 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)
+    { answerId: "8", status: undefined }, // step with no sratus (e.g. not visited yet)
+  ],
+  totalQuestion: 4,
+  currentQuestion: 8,
+};
+export const Fancy: StepProgressStory = {
+  args: { stepsData },
+  render: (args) => <StepProgressFancy {...args} />,
+};
+
+export default meta;

packages/design-system/src/stepProgress.tsx

@@ -3,7 +3,7 @@ import { cva, VariantProps } from "class-variance-authority";
 
 type Props = {
   currentStep: number;
-  stepCount: number;
+  totalStep: number;
 } & VariantProps<typeof stepProgressVariants>;
 
 const stepProgressVariants = cva("k1-rounded-full", {
@@ -14,13 +14,13 @@ const stepProgressVariants = cva("k1-rounded-full", {
     },
   },
 });
-const StepProgress = ({ currentStep, stepCount }: Props): JSX.Element => {
+const StepProgress = ({ currentStep, totalStep }: Props): JSX.Element => {
   const getStepCount = (n: number) => {
-    // or get the array length?
+    // or get the array length? depends on the data structure
     return Array.from({ length: n }, (_, i) => (i === n ? n - 1 : i));
   };
 
-  const steps = getStepCount(stepCount);
+  const steps = getStepCount(totalStep);
 
   return (
     <>

packages/design-system/src/stepProgressFancy.tsx

@@ -2,71 +2,49 @@ import React from "react";
 import { cva, VariantProps } from "class-variance-authority";
 
 type Props = {
-  currentStep: number;
-  stepCount: number;
+  stepsData: {
+    currentQuestion: number;
+    totalQuestion: number;
+    answers: { answerId: string; status: boolean | null | undefined }[];
+  };
 } & VariantProps<typeof stepProgressVariants>;
 
 const stepProgressVariants = cva("k1-w-9", {
   variants: {
     status: {
       active: "k1-bg-neutral-strong-active k1-h-2",
       inactive: "k1-bg-neutral-disaled k1-h-1",
-      true: "k1-bg-green-400",
-      false: "k1-bg-red-400",
-      null: "k1-bg-yellow-400",
-      undefined: "k1-bg-blue-400",
+      true: "k1-bg-[#0070F4]",
+      false: "k1-bg-[#D04646]",
+      null: "k1-bg-[#1D1C1C]",
+      undefined: "k1-bg-neutral-disaled",
     },
   },
 });
 
-// mockup data
-const mockupData = [
-  {
-    answers: [
-      { 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 StepProgressFancy = ({ currentStep, stepCount }: Props): JSX.Element => {
-  const getStepCount = (n: number) => {
-    return Array.from({ length: n }, (_, i) => (i === n ? n - 1 : i));
-  };
-
+const StepProgressFancy = ({ stepsData }: Props): JSX.Element => {
+  const answersData = stepsData.answers;
+  const { currentQuestion } = stepsData;
   return (
-    <>
-      {/* Mockup data */}
-      <div className="k1-flex k1-items-center">
-        {mockupData.map((data) => {
-          const status = data.answers;
-          return status.map((step, index) => (
-            // Make a step component ?
-            <div
-              className={`k1-w-9 ${
-                step.status === true
-                  ? "k1-bg-[#0070F4]"
-                  : step.status === false
-                    ? "k1-bg-[#D04646]"
-                    : step.status === null
-                      ? "k1-bg-[#1D1C1C]"
-                      : step.status === undefined
-                        ? "k1-bg-neutral-disaled"
-                        : null
-              } ${data.currentQuestion === index + 1 ? "k1-h-2 k1-bg-[#1D1C1C]" : "k1-h-1"}`}
-            ></div>
-          ));
-        })}
-      </div>
-    </>
+    <div className="k1-flex k1-items-center">
+      {answersData.map((answer, index) => {
+        return (
+          <div
+            className={`k1-w-9 ${
+              answer.status === true
+                ? "k1-bg-[#0070F4]"
+                : answer.status === false
+                  ? "k1-bg-[#D04646]"
+                  : answer.status === null
+                    ? "k1-bg-[#1D1C1C]"
+                    : answer.status === undefined
+                      ? "k1-bg-neutral-disaled"
+                      : null
+            } ${currentQuestion === index + 1 ? "k1-h-2 k1-bg-[#1D1C1C]" : "k1-h-1"}`}
+          ></div>
+        );
+      })}
+    </div>
   );
 };