blob: d8c58d10a6cefa92835559639c3b731ac48a0cd3 (
plain)
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
|
import {
type ForwardedRef,
forwardRef,
type ForwardRefRenderFunction,
type HTMLAttributes,
type ReactNode,
} from 'react';
import styles from './heading.module.scss';
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
/**
* The heading body.
*/
children?: ReactNode;
/**
* Use an heading element or only its styles.
*
* @default false
*/
isFake?: boolean;
/**
* HTML heading level.
*/
level: HeadingLevel;
};
const HeadingWithRef: ForwardRefRenderFunction<
HTMLHeadingElement | HTMLParagraphElement,
HeadingProps
> = (
{ children, className = '', isFake = false, level, ...props },
ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement>
) => {
const HeadingTag = `h${level}` as const;
const levelClass = styles[`heading--${level}`];
const headingClass = `${levelClass} ${className}`;
return isFake ? (
<p {...props} className={headingClass} ref={ref}>
{children}
</p>
) : (
<HeadingTag {...props} className={headingClass} ref={ref}>
{children}
</HeadingTag>
);
};
/**
* Heading component.
*
* Render an HTML heading element or a paragraph with heading styles.
*/
export const Heading = forwardRef(HeadingWithRef);
|
