From 9cbef657ac9484cbf79234527ec6bfe6a451ece8 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 9 Apr 2022 19:16:30 +0200
Subject: refactor(toggle): use Checkbox component and move it to molecules

---
 src/components/molecules/forms/toggle.tsx | 86 +++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/molecules/forms/toggle.tsx

(limited to 'src/components/molecules/forms/toggle.tsx')

diff --git a/src/components/molecules/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx
new file mode 100644
index 0000000..dff2d2d
--- /dev/null
+++ b/src/components/molecules/forms/toggle.tsx
@@ -0,0 +1,86 @@
+import Checkbox from '@components/atoms/forms/checkbox';
+import Label, { type LabelProps } from '@components/atoms/forms/label';
+import { ReactNode, VFC } from 'react';
+import styles from './toggle.module.scss';
+
+export type ToggleChoices = {
+  /**
+   * The left part of the toggle field (unchecked).
+   */
+  left: ReactNode;
+  /**
+   * The right part of the toggle field (checked).
+   */
+  right: ReactNode;
+};
+
+export type ToggleProps = {
+  /**
+   * The toggle choices.
+   */
+  choices: ToggleChoices;
+  /**
+   * The input id.
+   */
+  id: string;
+  /**
+   * The toggle label.
+   */
+  label: string;
+  /**
+   * Set additional classnames to the label.
+   */
+  labelClassName?: string;
+  /**
+   * The label size.
+   */
+  labelSize?: LabelProps['size'];
+  /**
+   * The input name.
+   */
+  name: string;
+  /**
+   * The toggle value. True if checked.
+   */
+  value: boolean;
+  /**
+   * A callback function to update the toggle value.
+   */
+  setValue: (value: boolean) => void;
+};
+
+/**
+ * Toggle component
+ *
+ * Render a toggle with a label and two choices.
+ */
+const Toggle: VFC<ToggleProps> = ({
+  choices,
+  id,
+  label,
+  labelClassName = '',
+  labelSize,
+  name,
+  setValue,
+  value,
+}) => {
+  return (
+    <>
+      <Checkbox
+        name={name}
+        id={id}
+        value={value}
+        setValue={() => setValue(!value)}
+        className={styles.checkbox}
+      />
+      <Label size={labelSize} htmlFor={id} className={styles.label}>
+        <span className={`${styles.title} ${labelClassName}`}>{label}</span>
+        {choices.left}
+        <span className={styles.toggle}></span>
+        {choices.right}
+      </Label>
+    </>
+  );
+};
+
+export default Toggle;
-- 
cgit v1.2.3