-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
Heading.js
99 lines (91 loc) · 2.09 KB
/
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
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
91
92
93
94
95
96
97
98
99
/** @jsx jsx */
import React from 'react'; // eslint-disable-line no-unused-vars
import { jsx } from '@emotion/core';
import { colors, gridSize } from '@arch-ui/theme';
import { LinkIcon } from '@arch-ui/icons';
import { mq } from '../../utils/media';
const Heading = ({ as: Tag, children, id, ...props }) => {
const iconSize = 24;
const depth = parseInt(Tag.slice(1), 10);
const hasLink = depth > 1 && depth < 5;
const link = hasLink && (
<a
href={`#${id}`}
css={{
alignItems: 'center',
color: colors.N40,
display: 'flex',
fontSize: '1rem',
height: iconSize,
justifyContent: 'center',
marginTop: -iconSize / 2,
opacity: 0,
overflow: 'visible',
paddingRight: gridSize / 2,
position: 'absolute',
top: '50%',
transform: 'translateX(-100%)',
width: iconSize,
'&:hover': {
color: colors.primary,
},
}}
>
<LinkIcon width={iconSize} />
</a>
);
return (
<Tag
css={{
color: colors.N100,
lineHeight: 1,
marginBottom: '0.66em',
position: 'relative',
'&:hover a': {
opacity: 1,
},
}}
id={id}
{...props}
>
{link}
{children}
</Tag>
);
};
export const H1 = props => (
<Heading
css={mq({
fontSize: ['2.4rem', '3.2rem'],
marginTop: 0,
})}
{...props}
as="h1"
/>
);
export const H2 = props => (
<Heading
{...props}
css={mq({
fontSize: ['1.8rem', '2.4rem'],
fontWeight: 300,
marginTop: '1.33em',
})}
as="h2"
/>
);
export const H3 = props => (
<Heading
css={mq({
fontSize: ['1.4rem', '1.6rem'],
fontWeight: 500,
marginTop: '1.5em',
})}
{...props}
as="h3"
/>
);
export const H4 = props => <Heading css={{ fontSize: '1.2rem' }} {...props} as="h4" />;
export const H5 = props => <Heading {...props} css={{ fontSize: '1rem' }} as="h5" />;
export const H6 = props => <Heading {...props} css={{ fontSize: '0.9rem' }} as="h6" />;
export default Heading;