All files / components/Headline Headline.tsx

100% Statements 6/6
100% Branches 11/11
100% Functions 1/1
100% Lines 6/6

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                                    135x                       135x                 1702x   1702x 1702x   1702x                    
type HeadlineProps = {
	/** Content of Headline. */
	children: React.ReactNode
	/** Specifies if its an h1, h2, h3,... */
	level?: 1 | 2 | 3 | 4 | 5 | 6
	/** Customize size. Is also set with level. */
	size?: string
	/** If true adds margin. */
	hasMargin?: boolean
	/** Custom classname. */
	className?: string
	/** Adds title attribute to headline. */
	title?: string
	/** For testing. */
	datacy?: string
}
 
/** Defines the classes for each size level */
export const twTextSizes: { [K in Required<HeadlineProps>['level']]: string } = {
	1: 'text-2xl md:text-4xl',
	2: 'text-2xl md:text-3xl',
	3: 'text-xl md:text-2xl',
	4: 'text-lg md:text-xl',
	5: 'text-base md:text-lg',
	6: '',
}
 
/**
 * Custom Headline Component, to easy handle headlines with different level and adjustive styles.
 */
export const Headline: React.FC<HeadlineProps> = ({
	level = 1,
	children,
	size,
	title,
	hasMargin = true,
	className = '',
	datacy,
}) => {
	const CustomTag = `h${level}` as keyof JSX.IntrinsicElements
 
	const hasSerifFont = level === 1 || level === 2
	const fontStyle = hasSerifFont ? ` font-serif ` : ' '
 
	return (
		<CustomTag
			datacy={datacy}
			title={title}
			className={`${size ?? twTextSizes[level]}${fontStyle}font-bold ${hasMargin ? 'mb-2' : ''} ${className}`}
		>
			{children}
		</CustomTag>
	)
}