Feature/260 checkbox component

frontend/src/components/Form/CheckboxList/CheckboxList.tsx

@@ -0,0 +1,33 @@
+import { Field } from "formik"
+import { ComponentOptions } from "../../../types/options"
+import { Icon } from "../../Icon/Icon"
+
+type CheckboxProps = {
+    /** Gives the input a unique name */
+    name: string
+    /** Inform users what the corresponding input fields mean. */
+    labelText?: string
+    /** Provides assistance on how to fill out a field. Helper text is optional. */
+    helperText?: string
+    /** A list of options to choose from. */
+    options: ComponentOptions[]
+}
+
+/**
+ * Checkbox, can only be used with Formik
+ */
+export const CheckboxList: React.FC<CheckboxProps> = ({ name, labelText, helperText, options }) => {
+    return (
+        <>
+            <h5 className="block text-darkgrey font-semibold">{labelText}</h5>
+            {options.map((option) => (
+                <label data-cy={`${name}-option-${option.value}`} key={`${option.value}`} className="flex items-center my-1 cursor-pointer">
+                    <Field type="checkbox" className="cursor-pointer mr-2" name={name} value={`${option.value}`} />
+                    {option.icon && <Icon className="text-lightgrey mr-1">{option.icon}</Icon>}
+                    <span className="text-darkgrey">{option.label}</span>
+                </label>
+            ))}
+            {helperText && <small data-cy={`${name}-helpertext`} className="text-lightgrey text-sm mb-4">{helperText}</small>}
+        </>
+    )
+}

frontend/src/components/Form/CheckboxList/checkboxList.cy.tsx

@@ -0,0 +1,102 @@
+import { Form, Formik } from "formik"
+import "material-symbols"
+import "../../../styles/global.css"
+import { Button } from "../../Button/Button"
+import { CheckboxList } from "./CheckboxList"
+
+const initialValues = {
+    box: ""
+}
+
+const submitForm = (values: typeof initialValues) => {
+    console.log(values)
+}
+
+const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    return <Formik initialValues={initialValues} onSubmit={submitForm} >
+        <Form>
+            {children}
+        </Form>
+    </Formik>
+}
+
+const data = {
+    name: "box",
+    labelText: "Box",
+    helperText: "Press the box.",
+    options: [
+        {
+            value: 1,
+            label: "Box 1"
+        },
+        {
+            value: 2,
+            label: "Box 2",
+            icon: "face"
+        },
+        {
+            value: 3,
+            label: "Box 3",
+            icon: "face"
+        }
+    ]
+}
+
+describe("CheckboxList", () => {
+    describe("Base", () => {
+        beforeEach(() => {
+            cy.mount(<Wrapper>
+                <CheckboxList name={data.name} options={data.options} labelText={data.labelText} />
+                <Button kind="primary" type="submit" className="mt-2">Hello</Button>
+            </Wrapper>)
+        })
+
+        it("should set labeltext", () => {
+            cy.get("h5 ").should("contain", data.labelText)
+        })
+
+        it("should display all options", () => {
+            data.options.forEach((option) => {
+                cy.get(`[data-cy="${data.name}-option-${option.value}"]`).should("contain", option.label)
+            })
+        })
+
+        it("should check box when click on it", () => {
+            cy.get(`[data-cy="${data.name}-option-${data.options[0].value}"] input`).check().should("be.checked")
+            cy.get(`[data-cy="${data.name}-option-${data.options[1].value}"] input`).should("not.be.checked")
+        })
+
+        it("should uncheck box when click on it after it is checked", () => {
+            cy.get(`[data-cy="${data.name}-option-${data.options[0].value}"] input`).check().should("be.checked")
+            cy.get(`[data-cy="${data.name}-option-${data.options[0].value}"] input`).click().should("not.be.checked")
+        })
+
+        it("should display icon before label when defined", () => {
+            cy.get(`[data-cy="${data.name}-option-${data.options[1].value}"] i`).should("be.visible")
+        })
+
+        it("should not display icon before label when not defined", () => {
+            cy.get(`[data-cy="${data.name}-option-${data.options[0].value}"] i`).should("not.exist")
+        })
+    })
+
+    describe("Helpertext", () => {
+        it("should set helper text", () => {
+            cy.mount(<Wrapper>
+                <CheckboxList name={data.name} options={data.options} labelText={data.labelText} helperText={data.helperText} />
+                <Button kind="primary" type="submit" className="mt-2">Hello</Button>
+            </Wrapper>)
+
+            cy.get(`[data-cy="${data.name}-helpertext"]`).should("contain", data.helperText)
+        })
+
+        it("should not show helper text", () => {
+            cy.mount(<Wrapper>
+                <CheckboxList name={data.name} options={data.options} labelText={data.labelText} />
+                <Button kind="primary" type="submit" className="mt-2">Hello</Button>
+            </Wrapper>)
+
+            cy.get(`[data-cy="${data.name}-helpertext"]`).should("not.exist")
+        })
+    })
+})

frontend/src/components/Form/Dropdown/Dropdown.tsx

@@ -1,5 +1,6 @@
 import { Field, FieldProps } from "formik"
 import { useState } from "react"
+import { ComponentOptions } from "../../../types/options"
 import { Icon } from "../../Icon/Icon"
 import { Label } from "../Label"
 
@@ -20,15 +21,6 @@ type DropdownProps = {
     hasMargin?: boolean
 }
 
-export type ComponentOptions = {
-    /** Unique value of option. */
-    value: number | string | boolean
-    /** Label which is shown as option. */
-    label: string
-    /** Icon in front of label. */
-    icon?: string
-}
-
 /**
  * Dropdown, can only be used with Formik
  */

frontend/src/types/options.d.ts

@@ -0,0 +1,8 @@
+export type ComponentOptions = {
+    /** Unique value of option. */
+    value: number | string | boolean
+    /** Label which is shown as option. */
+    label: string
+    /** Icon in front of label. */
+    icon?: string
+}