This repository has been archived by the owner on Mar 16, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 104
/
SectionHeadingRenderer.jsx
90 lines (85 loc) · 2.32 KB
/
SectionHeadingRenderer.jsx
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Styled from 'react-styleguidist/lib/client/rsg-components/Styled';
import { defaultTextColor } from '../../src/config/colors';
import { fontSizeMap } from '../../src/config/typography';
import { spacingMap } from '../../src/config/layout';
const styles = () => ({
heading: {
display: 'flex',
},
'level-1': {
fontSize: fontSizeMap.xxl,
padding: [[spacingMap.xxl, 0]],
fontFamily: 'Gill Sans',
},
'level-2': {
fontSize: fontSizeMap.xl,
paddingTop: spacingMap.xxl,
fontFamily: 'Gill Sans',
},
'level-3': {
fontSize: fontSizeMap.l,
fontFamily: 'Gill Sans',
},
'level-4': {
fontSize: fontSizeMap.m,
fontFamily: 'Gill Sans',
},
'level-5': {
fontSize: fontSizeMap.m,
fontFamily: 'Gill Sans',
},
'level-6': {
fontSize: fontSizeMap.s,
fontFamily: 'Gill Sans',
},
title: {
flex: '1 1 auto',
lineHeight: 1,
},
link: {
color: defaultTextColor,
},
toolbar: {
'flex-shrink': 0,
},
});
export const SectionHeadingRenderer = ({ classes, id, href, depth, children, toolbar, deprecated }) => {
const headingLevel = Math.min(6, depth);
return (
<div
id={id}
className={`${classes.heading}
${classes[`level-${headingLevel}`]}`}
>
<div className={classes.title}>
<a
href={href}
className={classnames(classes.link, {
[classes.deprecated]: deprecated,
})}
>
{children}
</a>
</div>
{toolbar && <div className={classes.toolbar}>{toolbar}</div>}
</div>
);
};
SectionHeadingRenderer.propTypes = {
classes: PropTypes.object.isRequired,
children: PropTypes.node,
toolbar: PropTypes.node,
id: PropTypes.string.isRequired,
href: PropTypes.string.isRequired,
depth: PropTypes.number.isRequired,
deprecated: PropTypes.bool,
};
SectionHeadingRenderer.defaultProps = {
children: null,
toolbar: null,
deprecated: false,
};
export default Styled(styles)(SectionHeadingRenderer);