wip: recapCard fixes (ongoing)

kalkulacka-one · Jan 26, 2025 · f1f55b4 · f1f55b4
1 parent 7140459
commit f1f55b4
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 18 deletions.
diff --git a/packages/design-system/src/ui/button/index.ts b/packages/design-system/src/ui/button/index.ts
@@ -6,3 +6,5 @@ export * from "./buttonNeutral";
 export * from "./neutralToggleButton";
 export * from "./noToggleButton";
 export * from "./yesToggleButton";
+export * from "./recapNoToggleButton";
+export * from "./recapYesToggleButton";
diff --git a/packages/design-system/src/ui/button/recapNoToggleButton.tsx b/packages/design-system/src/ui/button/recapNoToggleButton.tsx
@@ -0,0 +1,29 @@
+import { buttonVariants, ToggleButton } from "@repo/design-system/ui";
+import { NoIcon } from "@repo/design-system/icons";
+import { VariantProps } from "class-variance-authority";
+
+type Props = {
+  pressed?: boolean;
+  onClick: () => void;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
+
+export function RecapNoToggleButton({ pressed, onClick }: Props) {
+  return (
+    <ToggleButton
+      kind="inverse"
+      color="secondary"
+      icon={NoIcon}
+      iconPosition="left"
+      className="!k1-w-full !k1-justify-center !k1-gap-6 min-[576px]:!k1-justify-start lg:!k1-w-full lg:!k1-justify-start"
+      compactable
+      fitContent
+      wider
+      onClick={onClick}
+      toggleButtonPressed={pressed}
+      data-pressed={pressed ? true : undefined}
+    >
+      Ne
+    </ToggleButton>
+  );
+}
diff --git a/packages/design-system/src/ui/button/recapYesToggleButton.tsx b/packages/design-system/src/ui/button/recapYesToggleButton.tsx
@@ -0,0 +1,29 @@
+import { buttonVariants, ToggleButton } from "@repo/design-system/ui";
+import { YesIcon } from "@repo/design-system/icons";
+import { VariantProps } from "class-variance-authority";
+
+type Props = {
+  onClick: () => void;
+  pressed?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
+
+export function RecapYesToggleButton({ pressed, onClick }: Props) {
+  return (
+    <ToggleButton
+      kind="inverse"
+      color="primary"
+      icon={YesIcon}
+      hasIcon
+      compactable
+      iconPosition="left"
+      className="!k1-w-full !k1-justify-center !k1-gap-6 min-[576px]:!k1-justify-start lg:!k1-w-full lg:!k1-justify-start"
+      onClick={onClick}
+      wider
+      toggleButtonPressed={pressed}
+      data-pressed={pressed ? true : undefined}
+    >
+      Ano
+    </ToggleButton>
+  );
+}
diff --git a/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx b/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx
@@ -4,8 +4,8 @@ import { YesIcon, NoIcon, NeutralIcon } from "@repo/design-system/icons";
 import {
   Button,
   Card,
-  YesToggleButton,
-  NoToggleButton,
+  RecapYesToggleButton,
+  RecapNoToggleButton,
 } from "@repo/design-system/ui";
 import { StarIconButton } from "@repo/design-system/ui";
 import { DetailIconButton } from "@repo/design-system/ui";
@@ -97,9 +97,10 @@ export function RecapitulationCard({
       corner="topLeft"
       color="white"
       // add custom calculated padding
-      className="k1-p-recapitulationCardMobile lg:k1-py-recapitulationCardDesktop k1-flex k1-min-w-full k1-flex-col k1-gap-4"
+      className="k1-flex k1-min-w-full k1-flex-col k1-gap-6 k1-p-recapitulationCardMobile lg:k1-py-recapitulationCardDesktop"
     >
-      <div className="k1-grid k1-grid-cols-[min-content_1fr_min-content_min-content] k1-items-center k1-gap-x-2 min-[700px]:k1-gap-x-6">
+      {/* top wrapper */}
+      <div className="k1-grid k1-grid-cols-[min-content_1fr_min-content_min-content] k1-items-center k1-gap-x-2 k1-bg-purple-300">
         {/* toggle star */}
         {/* icon edit large icon size and wrapper */}
         <StarIconButton
@@ -108,25 +109,26 @@ export function RecapitulationCard({
           starPressed={isImportant ? true : undefined}
           onClick={() => onClick("toggleImportant")}
         />
+        {/* top toggled wrapper */}
 
-        <div className="k1-mr-auto k1-flex k1-flex-col">
+        <div className=" k1-mr-auto k1-flex k1-flex-col k1-bg-red-400">
           <div className="k1-flex k1-flex-wrap k1-items-center k1-gap-2">
             <span className=" k1-text-sm k1-font-light  k1-text-neutral">
               {currentQuestion}/{questionCount}
             </span>
-            <span className="hidden k1-font-primary k1-text-sm k1-font-light k1-text-neutral  sm:k1-inline">
+            <span className="hidden k1-font-primary k1-text-sm k1-font-light k1-text-neutral min-[700px]:k1-inline  sm:k1-inline">
               {title}
             </span>
             <Badge color="neutral">{tags}</Badge>
           </div>
           <div>
             {/* TODO: line height fix value */}
             {/* replace with typo compoment */}
-            <p className="hidden font-primary k1-font-semibold k1-leading-6 k1-tracking-wide k1-text-neutral sm:k1-inline sm:k1-text-base">
+            <p className="k1-hidden k1-font-primary k1-font-semibold k1-leading-normal k1-tracking-wide k1-text-neutral min-[700px]:k1-block  sm:k1-text-base">
               {statement}
             </p>
             {/* mobile title */}
-            <p className="k1-font-primary k1-text-sm k1-font-light k1-leading-tight k1-text-neutral sm:k1-hidden">
+            <p className="k1-font-primary k1-text-sm k1-font-light k1-leading-tight k1-text-neutral min-[700px]:k1-hidden">
               {title}
             </p>
           </div>
@@ -139,26 +141,49 @@ export function RecapitulationCard({
       </div>
       {detailToggled && (
         // detail wrapper
-        <div>
-          <div className="k1-flex k1-w-full k1-gap-4">
-            <YesToggleButton
+        <>
+          {/* button wrapper */}
+          <div className="k1-flex k1-w-full k1-gap-4 k1-bg-green-300">
+            <RecapYesToggleButton
               pressed={answerType === true ? true : undefined}
               onClick={() => onClick("Yes")}
             />
-            <NoToggleButton
+            <RecapNoToggleButton
               pressed={answerType === false ? true : undefined}
               onClick={() => onClick("No")}
             />
           </div>
-          <p className="k1-text-base k1-font-normal k1-text-neutral">
-            {detail}
-          </p>
-        </div>
+          {/* detail wrapper */}
+          <div>
+            {/* top toggled wrapper */}
+            <div className="k1-mb-4 k1-flex k1-flex-col k1-gap-4 min-[701px]:k1-hidden">
+              <div className="k1-flex k1-items-center k1-gap-2">
+                <span className=" k1-text-sm k1-font-light  k1-text-neutral">
+                  {currentQuestion}/{questionCount}
+                </span>
+                <Badge color="neutral">{tags}</Badge>
+              </div>
+              <div>
+                <p className="k1-block k1-font-primary k1-text-sm k1-font-light k1-leading-tight k1-text-neutral min-[701px]:k1-hidden">
+                  {title}
+                </p>
+                <p className="hidden font-primary k1-font-semibold k1-leading-normal k1-tracking-wide k1-text-neutral max-[700px]:k1-block  sm:k1-text-base">
+                  {statement}
+                </p>
+              </div>
+            </div>
+
+            <p className="k1-text-base k1-font-light k1-text-neutral">
+              {detail}
+            </p>
+          </div>
+        </>
       )}
     </Card>
   );
 }
 
 // TODO:
-// 1. Fix custom paddings on card (desktop)
-// 2.
+// 1. Fix custom paddings behaviour on card (desktop)
+// 2. Simplify structure (toggle behaviour content order), if possible
+// 3.