All files / components/Form/Label Label.tsx

100% Statements 3/3
100% Branches 12/12
100% Functions 1/1
100% Lines 3/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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                                    122x               7199x   7199x                      
type LabelProps = {
	/** Unique name of the input field. */
	name: string
	/** Label text describing the input field. */
	labelText: string
	/** When true, a * character is added to the labelText. */
	inputRequired?: boolean
	/** Additional CSS classes. */
	className?: string
	/** For testing. */
	datacy?: string
	/** When label is a label of a group */
	isLegend?: boolean
}
 
/**
 * Label for various Input Fields.
 */
export const Label: React.FC<LabelProps> = ({
	name,
	labelText,
	className,
	inputRequired = false,
	datacy,
	isLegend = false,
}) => {
	const LabelComponent = isLegend ? 'p' : 'label'
 
	return (
		<LabelComponent datacy={`${datacy || name}-label`} className={className} htmlFor={!isLegend ? name : undefined}>
			{labelText}
			{inputRequired && (
				<span datacy={`${datacy || name}-label-required`} className="ml-1 text-red">
					*
				</span>
			)}
		</LabelComponent>
	)
}