-
Notifications
You must be signed in to change notification settings - Fork 1
/
HeadlineComponent.tsx
75 lines (68 loc) · 1.95 KB
/
HeadlineComponent.tsx
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
import classnames from "classnames";
import { HTMLAttributes, FC, PropsWithChildren } from "react";
import ReactMarkdown from 'react-markdown';
import { HeadlineContext } from "@kickstartds/base/lib/headline";
import { defaultRenderFn } from "@kickstartds/core/lib/core";
import { HeadlineProps } from "./HeadlineProps";
const markdownRenderFn = (text) => <ReactMarkdown children={text} components={{p: 'span'}} />;
interface RenderFunctions {
renderContent?: typeof defaultRenderFn;
renderSubheadline?: typeof defaultRenderFn;
}
export const Headline: FC<
HeadlineProps & RenderFunctions & HTMLAttributes<HTMLElement>
> = ({
text,
sub,
switchOrder = false,
level = "h2",
style = "h2",
spaceAfter = "small",
renderContent = markdownRenderFn,
renderSubheadline = markdownRenderFn,
...props
}) => {
const TagName = level;
return (
<>
{text || sub ? (
<>
<header
className={classnames(
"c-headline",
`c-headline--align-left`,
spaceAfter && `c-headline--space-after-${spaceAfter}`,
)}
{...props}
>
{sub && switchOrder && (
<p className="c-headline__subheadline">
{renderSubheadline(sub)}
</p>
)}
<TagName
className={classnames(
"c-headline__headline",
style !== "none" &&
style !== level &&
`c-headline__${style}`
)}
>
{renderContent(text)}
</TagName>
{sub && !switchOrder && (
<p className="c-headline__subheadline">
{renderSubheadline(sub)}
</p>
)}
</header>
</>
) : (
""
)}
</>
);
};
export const HeadlineProvider: FC<PropsWithChildren<any>> = (props) => (
<HeadlineContext.Provider {...props} value={Headline} />
);