All files / components/Form/CustomSelectionButton CustomSelectionButton.tsx

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

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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64                                                    44x                   985x                                                      
import { MaterialSymbol } from 'material-symbols'
import { Color } from '../../../types/color'
import { Icon } from '../../Icon/Icon'
 
export type CustomSelectionButtonProps = {
	/** If the button is active or not. */
	active: boolean
	/** The color of the border and icon when active */
	activeColor?: Color
	/** The icon when active. */
	activeIcon?: MaterialSymbol
	/** The icon displayed above headline. */
	icon?: MaterialSymbol
	/** The function that is called when the button is clicked. */
	onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
	/** The headline in the button. */
	headline: string
	/** The description in the button. */
	description?: string
	/** For testing. */
	datacy?: string
}
 
/**
 * A custom selection button that can be used in a form for a selection between states.
 */
export const CustomSelectionButton: React.FC<CustomSelectionButtonProps> = ({
	active,
	activeColor = 'yellow',
	activeIcon = 'check_circle',
	icon,
	onClick,
	headline,
	datacy,
	description,
}) => {
	return (
		<button
			datacy={datacy}
			type="button"
			onClick={onClick}
			disabled={active}
			className={`flex flex-col items-center border-2 transition duration-200 ease-in-out ${
				active ? `border-${activeColor}-500` : 'border-gray-100'
			} rounded-lg px-3 pb-5 pt-2 md:px-4 md:pb-6 md:pt-3`}
		>
			{active ? (
				<Icon datacy={`${datacy}-icon`} icon={activeIcon} className={`text-${activeColor}-500 ml-auto h-4`} />
			) : (
				<Icon datacy={`${datacy}-inactive-icon`} icon="circle" className="ml-auto h-4 text-gray-200" />
			)}
			{icon && <Icon icon={icon} className={`${active ? `text-${activeColor}-500` : 'text-gray-300'} text-4xl`} />}
			<h6 datacy={`${datacy}-headline`} className="mt-1 font-medium">
				{headline}
			</h6>
			{description && (
				<p datacy={`${datacy}-description`} className="text-sm text-gray-600">
					{description}
				</p>
			)}
		</button>
	)
}