Added LabelSimpleGroup & updated LabelTask

website/src/components/Survey/LabelSimpleGroup.tsx

@@ -0,0 +1,78 @@
+import { Box, Button, Flex, useColorMode } from "@chakra-ui/react";
+import { useId, useState } from "react";
+import { colors } from "src/styles/Theme/colors";
+
+interface LabelSimpleGroupProps {
+  labelIDs: Array<string>;
+  onChange: (sliderValues: number[]) => unknown;
+  isDisabled?: boolean;
+}
+
+export const LabelSimpleGroup = (props: LabelSimpleGroupProps) => {
+  const [labelValues, setLabelValues] = useState<number[]>(Array.from({ length: props.labelIDs.length }).map(() => 0));
+
+  return (
+    <Flex direction="column" justify="center">
+      {props.labelIDs.map((labelId, idx) => (
+        <LabelSimpleItem
+          key={idx}
+          labelId={labelId}
+          labelValue={labelValues[idx]}
+          clickHandler={(newValue) => {
+            const newState = labelValues.slice();
+            newState[idx] = newValue;
+            props.onChange(labelValues);
+            setLabelValues(newState);
+          }}
+          states={[
+            { text: "No", value: 0 },
+            { text: "Yes", value: 1 },
+          ]}
+          isDisabled={props.isDisabled}
+        />
+      ))}
+    </Flex>
+  );
+};
+
+interface ButtonState {
+  text: string;
+  value: number;
+}
+
+interface LabelSimpleItemProps {
+  labelId: string;
+  labelValue: number;
+  clickHandler: (newVal: number) => unknown;
+  states: ButtonState[];
+  isDisabled: boolean;
+}
+
+const LabelSimpleItem = (props: LabelSimpleItemProps) => {
+  const id = useId();
+  const { colorMode } = useColorMode();
+
+  const labelTextClass = colorMode === "light" ? `text-${colors.light.text}` : `text-${colors.dark.text}`;
+
+  return (
+    <Box>
+      <label className="text-sm" htmlFor={id}>
+        {/* TODO: display real text instead of just the id */}
+        <span className={labelTextClass}>{props.labelId}</span>
+      </label>
+      <Flex direction="row" gap={6} justify="center">
+        {props.states.map((item, idx) => (
+          <Button
+            colorScheme={item.value === props.labelValue ? "green" : "gray"}
+            isDisabled={props.isDisabled}
+            size="lg"
+            key={idx}
+            onClick={() => props.clickHandler(item.value)}
+          >
+            {item.text}
+          </Button>
+        ))}
+      </Flex>
+    </Box>
+  );
+};

website/src/components/Tasks/LabelTask.tsx

@@ -7,6 +7,7 @@ import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskType } from "src/types/Task";
 import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup";
+import { LabelSimpleGroup } from "src/components/Survey/LabelSimpleGroup";
 
 export const LabelTask = ({
   task,
@@ -65,7 +66,11 @@ export const LabelTask = ({
             </Box>
           )}
         </>
-        <LabelSliderGroup labelIDs={task.valid_labels} isDisabled={isDisabled} onChange={onSliderChange} />
+        {valid_labels.length === 1 ? (
+          <LabelSimpleGroup labelIDs={task.valid_labels} isDisabled={isDisabled} onChange={onSliderChange} />
+        ) : (
+          <LabelSliderGroup labelIDs={task.valid_labels} isDisabled={isDisabled} onChange={onSliderChange} />
+        )}
       </TwoColumnsWithCards>
     </div>
   );