fancy and plain, first version

kalkulacka-one · Oct 1, 2024 · 59250e4 · 59250e4
1 parent 146c593
commit 59250e4
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 43 deletions.
diff --git a/apps/design-system/stories/stepProgress.stories.tsx b/apps/design-system/stories/stepProgress.stories.tsx
@@ -9,11 +9,23 @@ const meta: Meta<typeof StepProgress> = {
 
 type StepProgressStory = StoryObj<typeof meta>;
 
+const steps = {
+  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,
+};
+
 export const Plain: StepProgressStory = {
-  args: {
-    currentStep: 1,
-    totalStep: 8,
-  },
+  args: { steps },
   render: (args) => <StepProgress {...args} />,
 };
 

diff --git a/apps/design-system/stories/stepProgressFancy.stories.tsx b/apps/design-system/stories/stepProgressFancy.stories.tsx
@@ -9,7 +9,7 @@ const meta: Meta<typeof StepProgressFancy> = {
 
 type StepProgressStory = StoryObj<typeof meta>;
 
-const stepsData = {
+const steps = {
   answers: [
     { answerId: "1", status: true }, // positive step (e.g. answerInFavour)
     { answerId: "2", status: null },
@@ -19,13 +19,12 @@ const stepsData = {
     { 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 },
+  args: { steps },
   render: (args) => <StepProgressFancy {...args} />,
 };
 

diff --git a/packages/design-system/src/stepProgress.tsx b/packages/design-system/src/stepProgress.tsx
@@ -2,8 +2,11 @@ import React from "react";
 import { cva, VariantProps } from "class-variance-authority";
 
 type Props = {
-  currentStep: number;
-  totalStep: number;
+  steps: {
+    currentQuestion: number;
+    totalQuestion: number;
+    answers: { answerId: string; status: boolean | null | undefined }[];
+  };
 } & VariantProps<typeof stepProgressVariants>;
 
 const stepProgressVariants = cva("k1-rounded-full", {
@@ -14,25 +17,19 @@ const stepProgressVariants = cva("k1-rounded-full", {
     },
   },
 });
-const StepProgress = ({ currentStep, totalStep }: Props): JSX.Element => {
-  const getStepCount = (n: number) => {
-    // or get the array length? depends on the data structure
-    return Array.from({ length: n }, (_, i) => (i === n ? n - 1 : i));
-  };
-
-  const steps = getStepCount(totalStep);
-
+const StepProgress = ({ steps }: Props): JSX.Element => {
+  const { currentQuestion } = steps;
+  const answersData = steps.answers;
   return (
     <>
       <div className="k1-flex k1-gap-1">
-        {steps.map((step, index) => {
+        {answersData.map((answer, index) => {
           return (
-            // Make a step component
             <div
               className={stepProgressVariants({
-                status: index === currentStep - 1 ? "active" : "inactive",
+                status: currentQuestion === index + 1 ? "active" : "inactive",
               })}
-              key={step}
+              key={answer.answerId}
             ></div>
           );
         })}

diff --git a/packages/design-system/src/stepProgressFancy.tsx b/packages/design-system/src/stepProgressFancy.tsx
@@ -2,45 +2,53 @@ import React from "react";
 import { cva, VariantProps } from "class-variance-authority";
 
 type Props = {
-  stepsData: {
+  steps: {
     currentQuestion: number;
     totalQuestion: number;
-    answers: { answerId: string; status: boolean | null | undefined }[];
+    answers: { answerId: string; status: true | false | 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-[#0070F4]",
-      false: "k1-bg-[#D04646]",
-      null: "k1-bg-[#1D1C1C]",
-      undefined: "k1-bg-neutral-disaled",
+      inFavour: "k1-bg-[#0070F4]",
+      against: "k1-bg-[#D04646]",
+      none: "k1-bg-[#1D1C1C]",
+      isNull: "k1-bg-neutral-disaled",
+    },
+    height: {
+      active: "k1-h-2",
+      inactive: "k1-h-1",
+    },
+    defaultVariant: {
+      status: "undefined",
+      height: "inactive",
     },
   },
 });
 
-const StepProgressFancy = ({ stepsData }: Props): JSX.Element => {
-  const answersData = stepsData.answers;
-  const { currentQuestion } = stepsData;
+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={`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"}`}
+            className={stepProgressVariants({
+              status:
+                answer.status === true
+                  ? "inFavour"
+                  : answer.status === false
+                    ? "against"
+                    : answer.status === null
+                      ? "isNull"
+                      : answer.status === undefined
+                        ? "none"
+                        : null,
+              height: currentQuestion === index + 1 ? "active" : "inactive",
+            })}
           ></div>
         );
       })}