From 782cc0a31a866519fb7c3e18a523b347d3e40238 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 30 May 2022 19:27:21 +0200
Subject: chore: replace Checkbox component with a BooleanField component

Checkbox and radio buttons are working the same way so I decided to
group them in a same component.
---
 src/components/atoms/forms/boolean-field.tsx | 62 ++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/components/atoms/forms/boolean-field.tsx

(limited to 'src/components/atoms/forms/boolean-field.tsx')

diff --git a/src/components/atoms/forms/boolean-field.tsx b/src/components/atoms/forms/boolean-field.tsx
new file mode 100644
index 0000000..946e375
--- /dev/null
+++ b/src/components/atoms/forms/boolean-field.tsx
@@ -0,0 +1,62 @@
+import { ChangeEventHandler, FC, MouseEventHandler } from 'react';
+import styles from './boolean-field.module.scss';
+
+export type BooleanFieldProps = {
+  /**
+   * One or more ids that refers to the checkbox name.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * True if the field should be checked.
+   */
+  checked: boolean;
+  /**
+   * Add classnames to the checkbox.
+   */
+  className?: string;
+  /**
+   * Field id attribute.
+   */
+  id: string;
+  /**
+   * True if the field should be visually hidden. Default: false.
+   */
+  hidden?: boolean;
+  /**
+   * Field name attribute.
+   */
+  name: string;
+  /**
+   * Callback function to handle state change.
+   */
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  /**
+   * A callback function to handle click.
+   */
+  onClick?: MouseEventHandler<HTMLInputElement>;
+  /**
+   * The input type.
+   */
+  type: 'checkbox' | 'radio';
+  /**
+   * Field name attribute.
+   */
+  value: string;
+};
+
+/**
+ * BooleanField component
+ *
+ * Render a checkbox or a radio input type.
+ */
+const BooleanField: FC<BooleanFieldProps> = ({
+  className = '',
+  hidden = false,
+  ...props
+}) => {
+  const modifier = hidden ? 'hidden' : '';
+
+  return <input className={`${styles[modifier]} ${className}`} {...props} />;
+};
+
+export default BooleanField;
-- 
cgit v1.2.3