wip: added toggle buttons for yes, no, and neutral responses, working…

… on props proper passing

apps/web/app/abc/navod/[guideNumber]/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Button, StepProgress } from "@repo/design-system/ui";
-import AnswerYesToggle from "../../answerYesToggle";
 import { useQuestionsStore } from "../../providers/storeProvider";
 import { CardTwo, CardThree, CardFour } from "../guideHtml";
 import Link from "next/link";
@@ -12,8 +11,6 @@ import {
 } from "@repo/design-system/icons";
 import { useParams } from "next/navigation";
 import { useEffect } from "react";
-import AnswerNoToggle from "../../answerNoToggle";
-import AnswerNeutralToggle from "../../answerNeutralToggle";
 
 export default function Page() {
   const params = useParams();
@@ -111,9 +108,6 @@ export default function Page() {
                 );
               }
             })}
-            <AnswerYesToggle />
-            <AnswerNoToggle />
-            <AnswerNeutralToggle />
           </div>
           {/* grid col 3 */}
           {/* empty div for 700 - 767 screen width */}

apps/web/app/abc/otazka/[questionNumber]/page.tsx

@@ -60,6 +60,8 @@ export default function Page() {
               toggleImportant={() => toggleImportant(currentQuestion)}
               yesClick={() => answerYes(currentQuestion)}
               noClick={() => answerNo(currentQuestion)}
+              yesPressed={question.answerType ? true : undefined}
+              noPressed={!question.answerType ? true : undefined}
               starPressed={question.isImportant ? true : undefined}
             />
           );

packages/design-system/src/ui/button/index.ts

@@ -3,3 +3,6 @@ export * from "./button";
 export * from "./buttonInFavour";
 export * from "./buttonAgainst";
 export * from "./buttonNeutral";
+export * from "./neutralToggleButton";
+export * from "./noToggleButton";
+export * from "./yesToggleButton";

packages/design-system/src/ui/button/neutralToggleButton.tsx

@@ -0,0 +1,17 @@
+import { ToggleButton } from "@repo/design-system/ui";
+import { NeutralIcon } from "@repo/design-system/icons";
+export function NeutralToggleButton() {
+  return (
+    <ToggleButton
+      kind="inverse"
+      color="neutral"
+      icon={NeutralIcon}
+      iconPosition="left"
+      compactable
+      fitContent
+      wider
+    >
+      Nevím
+    </ToggleButton>
+  );
+}

packages/design-system/src/ui/button/noToggleButton.tsx

@@ -0,0 +1,21 @@
+import { ToggleButton } from "@repo/design-system/ui";
+import { NoIcon } from "@repo/design-system/icons";
+type Props = {
+  pressed?: boolean | null;
+};
+export function NoToggleButton({ pressed }: Props) {
+  return (
+    <ToggleButton
+      kind="inverse"
+      color="secondary"
+      icon={NoIcon}
+      iconPosition="left"
+      compactable
+      fitContent
+      wider
+      data-pressed={pressed ? true : undefined}
+    >
+      Ne
+    </ToggleButton>
+  );
+}

packages/design-system/src/ui/button/yesToggleButton.tsx

@@ -0,0 +1,22 @@
+import { ToggleButton } from "@repo/design-system/ui";
+import { YesIcon } from "@repo/design-system/icons";
+
+type Props = {
+  pressed?: boolean | null;
+};
+export function YesToggleButton({ pressed }: Props) {
+  return (
+    <ToggleButton
+      kind="inverse"
+      color="primary"
+      icon={YesIcon}
+      iconPosition="left"
+      compactable
+      fitContent
+      wider
+      data-pressed={pressed ? true : undefined}
+    >
+      Ano
+    </ToggleButton>
+  );
+}

packages/design-system/src/ui/layout/bottomBar.tsx

@@ -1,11 +1,19 @@
-import { ButtonInFavour, ButtonAgainst } from "@repo/design-system/ui";
+import {
+  ButtonInFavour,
+  ButtonAgainst,
+  YesToggleButton,
+  NoToggleButton,
+  NeutralToggleButton,
+} from "@repo/design-system/ui";
 import { StepProgressFancy } from "@repo/design-system/ui";
 import { StarIconButton } from "@repo/design-system/ui";
 import type { ExtendedQuestions } from "../../../../../apps/web/app/xyz/store";
 
 type Props = {
   // solve unused button type eslint (no-unused-vars) problem
   starPressed?: boolean;
+  yesPressed?: boolean | null;
+  noPressed?: boolean | null;
   toggleImportant: (currentQuestion: number) => void;
   yesClick: () => void;
   noClick: () => void;
@@ -16,6 +24,8 @@ type Props = {
 
 export function BottomBar({
   starPressed,
+  yesPressed,
+  noPressed,
   yesClick,
   noClick,
   questions,
@@ -45,6 +55,8 @@ export function BottomBar({
           </StarIconButton>
           <ButtonInFavour onClick={yesClick} />
           <ButtonAgainst onClick={noClick} />
+          <YesToggleButton pressed={yesPressed ? true : null} />
+          <NoToggleButton pressed={noPressed ? true : null} />
         </div>
       </div>
     </div>

packages/design-system/src/ui/toggleButton/toggleButton.tsx

@@ -15,7 +15,7 @@ const ToggleButton = React.forwardRef<React.ElementRef<typeof Button>, Props>(
       <Button
         onClick={handlePressed}
         pressed={isPressed}
-        data-pressed={isPressed ? true : null}
+        data-active={isPressed ? true : null}
         ref={ref}
         {...props}
       />