wip: implemented and polished RecapitulationCard component and integr…

…ated questions data into rekapitulace page
kalkulacka-one · Jan 13, 2025 · 4eaa2a6 · 4eaa2a6
1 parent 6f80eb9
commit 4eaa2a6
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 57 deletions.
diff --git a/apps/web/app/abc/rekapitulace/page.tsx b/apps/web/app/abc/rekapitulace/page.tsx
@@ -4,9 +4,14 @@ import {
   ArrowIconRight,
   PercentageIcon,
 } from "@repo/design-system/icons";
-import { Blobs, Button } from "@repo/design-system/ui";
+import { Blobs, Button, RecapitulationCard } from "@repo/design-system/ui";
+import { useQuestionsStore } from "../providers/storeProvider";
 
 export default function Page() {
+  const questions = useQuestionsStore((state) => state.questions);
+  const handleAnswer = () => {
+    alert("Clicked!");
+  };
   return (
     <>
       <Blobs />
@@ -43,20 +48,26 @@ export default function Page() {
           </Button>
         </div>
       </header>
-      <main className="grid grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] justify-center p-4">
+      <main className="grid grid-cols-[clamp(32rem,50vw,48rem)] justify-center gap-4 p-4">
         {/* grid col 1 */}
-        <div></div>
-        {/* grid col 2 */}
-        <div>
-          {/* replace with typo compoment */}
-          <p className="text-sm leading-tight text-neutral">
-            Zde si můžete projít a případně upravit svoje odpovědi a jejich
-            váhu.
-          </p>
+        {/* replace with typo compoment */}
+        <p className="text-sm leading-tight text-neutral">
+          Zde si můžete projít a případně upravit svoje odpovědi a jejich váhu.
+        </p>
+        <div className="grid items-start gap-4">
+          {questions.map((question, index) => {
+            const currentQuestion = index + 1;
+            return (
+              <RecapitulationCard
+                key={`Recapitulation card id:${question.id}`}
+                currentQuestion={currentQuestion}
+                questionCount={questions.length}
+                question={question}
+                onClick={handleAnswer}
+              />
+            );
+          })}
         </div>
-
-        {/* grid col 3 */}
-        <div></div>
       </main>
       {/* bottom bar */}
       <div className="sticky bottom-0 bg-white p-4 sm:hidden">

diff --git a/packages/design-system/src/ui/card/card.tsx b/packages/design-system/src/ui/card/card.tsx
@@ -15,7 +15,7 @@ const cardVariants = cva(
       color: {
         white:
           // TODO: add white as neutral-fg-inverse to the config?
-          "k1-bg-white hover:k1-bg-neutral-backdrop-hover active:k1-bg-neutral-backdrop-active",
+          "k1-bg-white active:k1-bg-neutral-backdrop-active",
         blue: "k1-bg-primary hover:k1-bg-primary-strong-hover active:k1-bg-primary-strong-active",
         transparent:
           "k1-bg-transparent hover:k1-bg-neutral-backdrop-hover active:k1-bg-neutral-backdrop-active",

diff --git a/packages/design-system/src/ui/questionCard/questionCard.tsx b/packages/design-system/src/ui/questionCard/questionCard.tsx
@@ -18,6 +18,7 @@ const QuestionCard = ({ question, currentQuestion, questionCount }: Props) => {
   return (
     <Card
       id={id}
+      color="white"
       corner="topLeft"
       className="k1-flex k1-w-auto k1-flex-col k1-gap-4 k1-p-customMobile md:k1-p-customDesktop"
     >

diff --git a/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx b/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx
@@ -41,43 +41,22 @@ export function RecapitulationCard({
     switch (answerType) {
       case true: {
         return (
-          <Button
-            compactable
-            fitContent
-            wider
-            kind="inverse"
-            color="primary"
-            icon={YesIcon}
-          >
-            Ano
+          <Button wider fitContent kind="inverse" color="primary">
+            <YesIcon className="size-6" />
           </Button>
         );
       }
       case false: {
         return (
-          <Button
-            compactable
-            fitContent
-            wider
-            kind="inverse"
-            color="secondary"
-            icon={NoIcon}
-          >
-            Ne
+          <Button wider fitContent kind="inverse" color="secondary">
+            <NoIcon className="size-6" />
           </Button>
         );
       }
       case null: {
         return (
-          <Button
-            compactable
-            fitContent
-            wider
-            kind="inverse"
-            color="neutral"
-            icon={NeutralIcon}
-          >
-            Nevím
+          <Button wider fitContent kind="inverse" color="neutral">
+            <NeutralIcon className="size-6" />
           </Button>
         );
       }
@@ -102,37 +81,50 @@ export function RecapitulationCard({
     <Card
       data-card-id={id}
       corner="topLeft"
-      className="k1-flex k1-w-full k1-flex-col  k1-justify-between k1-gap-4 k1-p-customMobile md:k1-p-customDesktop"
+      color="white"
+      className="k1-flex k1-flex-col k1-py-4"
     >
-      <div className="k1-flex k1-items-center k1-justify-between">
+      <div className="k1-items-center k1-grid k1-grid-cols-[min-content_1fr_min-content_min-content] k1-gap-x-6">
         {/* toggle star */}
+        {/* icon edit large icon size and wrapper */}
         <StarIconButton
+          iconSize="large"
+          iconWrapper="large"
           data-buttonCardId={id}
           starPressed={isImportant ? true : false}
           onClick={(event) => onClick(event, "Togglerecimportant")}
         />
 
         <div className="k1-mr-auto k1-flex k1-flex-col">
-          <div className="k1-flex k1-flex-wrap k1-items-center k1-gap-4">
-            <span className="k1-text-sm k1-font-normal">
+          <div className="k1-flex k1-flex-wrap k1-items-center k1-gap-2">
+            <span className=" k1-font-light k1-text-sm  k1-text-neutral">
               {currentQuestion}/{questionCount}
             </span>
-            <span className="k1-text-sm k1-font-normal">{title}</span>
-            <Badge>{tags}</Badge>
+            <span className="sm:k1-inline k1-font-light k1-text-neutral k1-text-sm k1-font-primary  hidden">
+              {title}
+            </span>
+            <Badge color="neutral">{tags}</Badge>
           </div>
           <div>
             {/* TODO: line height fix value */}
-            <span className="k1-text-lg k1-font-bold k1-leading-6 k1-tracking-tighter">
+            {/* replace with typo compoment */}
+            <span className="k1-text-neutral k1-font-semibold k1-tracking-wide k1-leading-6 sm:k1-inline hidden font-primary text-base">
               {statement}
             </span>
+            {/* mobile title */}
+            <span className="k1-font-light k1-text-neutral k1-font-primary k1-inline sm:k1-hidden">
+              {title}
+            </span>
           </div>
         </div>
+        <div className={`${detailToggled ? "k1-invisible" : "k1-block"}`}>
+          {switchButton(answerType)}
+        </div>
         <DetailIconButton onClick={toggleDetail} />
-        <div>{switchButton(answerType)}</div>
       </div>
       {detailToggled && (
-        <div>
-          <div className="k1-flex k1-w-full">
+        <>
+          <div className="k1-flex k1-w-full k1-gap-4">
             <Button
               kind="inverse"
               color="primary"
@@ -160,12 +152,10 @@ export function RecapitulationCard({
               Ne
             </Button>
           </div>
-          <div>
-            <p className="k1-text-base k1-font-normal k1-text-neutral">
-              {detail}
-            </p>
-          </div>
-        </div>
+          <p className="k1-text-base k1-font-normal k1-text-neutral">
+            {detail}
+          </p>
+        </>
       )}
     </Card>
   );