diff options
Diffstat (limited to 'src/components/molecules/forms/labelled-boolean-field.tsx')
| -rw-r--r-- | src/components/molecules/forms/labelled-boolean-field.tsx | 85 |
1 files changed, 0 insertions, 85 deletions
diff --git a/src/components/molecules/forms/labelled-boolean-field.tsx b/src/components/molecules/forms/labelled-boolean-field.tsx deleted file mode 100644 index d110d45..0000000 --- a/src/components/molecules/forms/labelled-boolean-field.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { FC } from 'react'; -import { - BooleanField, - type BooleanFieldProps, - Label, - type LabelProps, -} from '../../atoms'; -import styles from './labelled-boolean-field.module.scss'; - -export type LabelledBooleanFieldProps = Omit< - BooleanFieldProps, - 'aria-labelledby' | 'className' -> & { - /** - * Set additional classnames to the labelled field wrapper. - */ - className?: string; - /** - * Set additional classnames to the field. - */ - fieldClassName?: LabelledBooleanFieldProps['className']; - /** - * The field label. - */ - label: LabelProps['children']; - /** - * Set additional classnames to the label. - */ - labelClassName?: LabelProps['className']; - /** - * The label position. Default: left. - */ - labelPosition?: 'left' | 'right'; - /** - * The label size. - */ - labelSize?: LabelProps['size']; -}; - -/** - * LabelledBooleanField component - * - * Render a checkbox or radio button with a label. - */ -export const LabelledBooleanField: FC<LabelledBooleanFieldProps> = ({ - className = '', - fieldClassName, - hidden, - id, - label, - labelClassName, - labelPosition = 'left', - labelSize, - ...props -}) => { - const labelHiddenModifier = hidden ? 'label--hidden' : 'label--visible'; - const labelPositionModifier = `label--${labelPosition}`; - const labelClass = `${styles[labelPositionModifier]} ${styles[labelHiddenModifier]} ${labelClassName}`; - - return labelPosition === 'left' ? ( - <span className={`${styles.wrapper} ${className}`}> - <Label className={labelClass} htmlFor={id} size={labelSize}> - {label} - </Label> - <BooleanField - {...props} - className={fieldClassName} - hidden={hidden} - id={id} - /> - </span> - ) : ( - <span className={`${styles.wrapper} ${className}`}> - <BooleanField - {...props} - className={fieldClassName} - hidden={hidden} - id={id} - /> - <Label className={labelClass} htmlFor={id} size={labelSize}> - {label} - </Label> - </span> - ); -}; |
