-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Heading.js
37 lines (32 loc) · 971 Bytes
/
Heading.js
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
// @flow
import * as React from 'react';
import sx, { type AllCSSProperties } from '@adeira/sx';
import HeadingLevel from '../HeadingLevel';
type Props = {
+children: React.Node,
+xstyle?: AllCSSProperties,
};
/**
* Heading component automatically renders the right `h[1-6]` HTML element based on the location in
* the React tree. To advance the heading level you should nest it inside `<Section />` component.
*
* For more info please visit:
*
* - https://web.dev/headings-and-landmarks/
* - https://github.com/jonathantneal/h-element-spec/issues/1
*/
export default function Heading(props: Props): React.Node {
return (
<HeadingLevel.Consumer>
{(level) => {
const Heading = `h${Math.min(level, 6)}`;
return <Heading className={sx(styles.heading, props.xstyle)}>{props.children}</Heading>;
}}
</HeadingLevel.Consumer>
);
}
const styles = sx.create({
heading: {
color: 'rgba(var(--sx-foreground))',
},
});