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';