1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
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>
);
};
|
