add more review feedback

frontend/components/input/SelectionField.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SelectionField } from "@/components/input/SelectionField";
+
+const meta: Meta<typeof SelectionField> = {
+	title: "Input/SelectionField",
+	component: SelectionField,
+	tags: ["autodocs"],
+	args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof SelectionField>;
+
+export const Default: Story = {
+	args: {
+		list: [
+			{
+				title: "ONE",
+				description: "Description 1",
+				isSelected: true,
+				icon: "Square",
+			},
+			{
+				title: "TWO",
+				description: "Description 2",
+				isSelected: false,
+				icon: "Circle",
+			},
+		],
+	},
+};
+export const NoSelected: Story = {
+	args: {
+		list: [
+			{
+				title: "ONE",
+				description: "Description 1",
+				isSelected: false,
+				icon: "Square",
+			},
+			{
+				title: "TWO",
+				description: "Description 2",
+				isSelected: false,
+				icon: "Circle",
+			},
+		],
+	},
+};

frontend/components/input/SelectionField.tsx

@@ -1,8 +1,10 @@
+import clsx from "clsx";
 import { useState } from "react";
 import { Check, ChevronDown } from "react-feather";
 
 import { Text } from "@/components/Text";
 import { Icon, IconName } from "@/components/graphics/Icon";
+import { clickOnEnter } from "@/util/utils";
 
 export type SelectionListItem = {
 	title: string;
@@ -40,40 +42,42 @@ export const SelectionField = ({
 		getListSelected(list)
 	);
 	return (
-		<div>
+		<div {...props} className={className}>
 			<Text className="mb-1 text-sm font-semibold text-neutral-400">
 				{title}
 			</Text>
 			<div
-				className="flex	hover:cursor-pointer"
-				role="button"
-				onKeyDown={() => {}}
+				className="flex	cursor-pointer"
+				role="combobox"
+				onKeyUp={clickOnEnter}
+				tabIndex={0}
 				onClick={() => setVisible(!visible)}
 			>
-				<div className="w-8 align-middle">
-					{selected.icon && <Icon icon={selected.icon}></Icon>}
+				<div className="w-8">
+					{selected.icon && <Icon icon={selected.icon} />}
 				</div>
 				<Text className="w-16 truncate">{selected.title}</Text>
 				<ChevronDown
-					className={`m-0 mx-2 w-8 align-middle transition ${
-						visible ? "rotate-180 " : ""
-					}`}
-					color="gray"
-				></ChevronDown>
+					className={clsx(
+						"mx-2 align-middle text-neutral-400 transition",
+						visible && "rotate-180"
+					)}
+				/>
 			</div>
 
 			{visible && (
 				<div className="absolute z-10 m-2 h-fit w-fit max-w-sm items-start space-y-2 rounded-2xl bg-black px-3 pb-3 text-sm text-white before:relative before:-top-2 before:left-[5.64rem] before:block before:h-5 before:w-5 before:rotate-45 before:bg-black">
 					{list?.map((selectionItem) => (
 						<div
 							key={selectionItem.title}
-							className={`flex hover:cursor-pointer ${
-								!selectionItem.isSelected
-									? "text-neutral-400 hover:text-neutral-300"
-									: ""
-							}`}
-							role="button"
-							onKeyDown={() => {}}
+							className={clsx(
+								"flex cursor-pointer",
+								!selectionItem.isSelected &&
+									"text-neutral-400 hover:text-neutral-300"
+							)}
+							role="option"
+							onKeyUp={clickOnEnter}
+							tabIndex={0}
 							onClick={() => {
 								setSelected(selectionItem);
 								setVisible(false);
@@ -83,23 +87,23 @@ export const SelectionField = ({
 							<Icon
 								className="w-10 pr-3"
 								icon={selectionItem.icon}
-							></Icon>
+							/>
 							<div>
 								<Text className="font-bold">
 									{selectionItem.title}
 								</Text>
-								<div className="flex">
+								<div className="flex items-center">
+									{" "}
 									<Text className="w-56 font-light">
 										{selectionItem.description}
 									</Text>
-
 									<Check
-										className={` w-8 ${
+										className={clsx(
 											selectionItem.isSelected
-												? "visible justify-end"
+												? "visible"
 												: "invisible"
-										}`}
-									></Check>
+										)}
+									/>
 								</div>
 							</div>
 						</div>