feat(ui): added checkbox component

frontend/package.json

@@ -22,6 +22,7 @@
     "@headlessui/react": "^1.6.6",
     "@radix-ui/react-accordion": "^1.1.0",
     "@radix-ui/react-alert-dialog": "^1.0.2",
+    "@radix-ui/react-checkbox": "^1.0.1",
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-label": "^2.0.0",
     "@radix-ui/react-popover": "^1.0.3",

frontend/src/components/v2/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Checkbox } from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Simple: Story = {
+  args: {
+    children: 'Accept the condition'
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Accept the condition',
+    isDisabled: true
+  }
+};
+
+export const Required: Story = {
+  args: {
+    children: 'Accept the condition',
+    isRequired: true
+  }
+};

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { twMerge } from 'tailwind-merge';
+
+export type CheckboxProps = Omit<
+  CheckboxPrimitive.CheckboxProps,
+  'checked' | 'disabled' | 'required'
+> & {
+  children: ReactNode;
+  id: string;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  isRequired?: boolean;
+};
+
+export const Checkbox = ({
+  children,
+  className,
+  id,
+  isChecked,
+  isDisabled,
+  isRequired,
+  ...props
+}: CheckboxProps): JSX.Element => {
+  return (
+    <div className="flex items-center text-bunker-300">
+      <CheckboxPrimitive.Root
+        className={twMerge(
+          'flex items-center justify-center w-5 h-5 mr-3 transition-all rounded shadow hover:bg-bunker-200 bg-bunker-300',
+          isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
+          className
+        )}
+        required={isRequired}
+        checked={isChecked}
+        disabled={isDisabled}
+        {...props}
+        id={id}
+      >
+        <CheckboxPrimitive.Indicator className="text-bunker-800">
+          <FontAwesomeIcon icon={faCheck} size="sm" />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+      <label className="text-sm" htmlFor={id}>
+        {children}
+        {isRequired && <span className="pl-1 text-red">*</span>}
+      </label>
+    </div>
+  );
+};

frontend/src/components/v2/Checkbox/index.tsx

@@ -0,0 +1,2 @@
+export type { CheckboxProps } from './Checkbox';
+export { Checkbox } from './Checkbox';

frontend/src/components/v2/index.tsx

@@ -1,5 +1,6 @@
 export * from './Button';
 export * from './Card';
+export * from './Checkbox';
 export * from './FormControl';
 export * from './IconButton';
 export * from './Input';