summaryrefslogtreecommitdiffstats
path: root/src/components/atoms/forms/toggle.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-09 19:16:30 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-09 19:20:08 +0200
commit9cbef657ac9484cbf79234527ec6bfe6a451ece8 (patch)
tree68a4fec038cf742f1bc949c3b1ad239793f58ced /src/components/atoms/forms/toggle.tsx
parentaf575907c254d3233c3fd5904afc87c1db0bdcf3 (diff)
refactor(toggle): use Checkbox component and move it to molecules
Diffstat (limited to 'src/components/atoms/forms/toggle.tsx')
-rw-r--r--src/components/atoms/forms/toggle.tsx86
1 files changed, 0 insertions, 86 deletions
diff --git a/src/components/atoms/forms/toggle.tsx b/src/components/atoms/forms/toggle.tsx
deleted file mode 100644
index c3bc09d..0000000
--- a/src/components/atoms/forms/toggle.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { ReactNode, VFC } from 'react';
-import Label, { LabelProps } from './label';
-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 (
- <>
- <input
- type="checkbox"
- name={name}
- id={id}
- checked={value}
- onChange={() => 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;