-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
Heading.tsx
76 lines (67 loc) · 1.72 KB
/
Heading.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
76
import React, { FunctionComponent, ComponentProps } from 'react';
import { styled } from '@storybook/theming';
import { Button } from '@storybook/components';
import { Brand } from './Brand';
import { SidebarMenu, MenuList } from './Menu';
export interface HeadingProps {
menuHighlighted?: boolean;
menu: MenuList;
skipLinkHref?: string;
}
const BrandArea = styled.div(({ theme }) => ({
fontSize: theme.typography.size.s2,
fontWeight: theme.typography.weight.bold,
color: theme.color.defaultText,
marginRight: 20,
display: 'flex',
width: '100%',
alignItems: 'center',
minHeight: 22,
'& > *': {
maxWidth: '100%',
height: 'auto',
display: 'block',
flex: '1 1 auto',
},
}));
const HeadingWrapper = styled.div({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
position: 'relative',
});
const SkipToCanvasLink = styled(Button)(({ theme }) => ({
display: 'none',
'@media (min-width: 600px)': {
display: 'block',
position: 'absolute',
width: '100%',
padding: '10px 15px',
fontSize: theme.typography.size.s1,
zIndex: 1,
transform: 'translate(0,-100px)',
'&:focus': {
transform: 'translate(0,-10px)',
},
},
}));
export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof HeadingWrapper>> = ({
menuHighlighted = false,
menu,
skipLinkHref,
...props
}) => {
return (
<HeadingWrapper {...props}>
{skipLinkHref && (
<SkipToCanvasLink secondary isLink tabIndex={0} href={skipLinkHref}>
Skip to canvas
</SkipToCanvasLink>
)}
<BrandArea>
<Brand />
</BrandArea>
<SidebarMenu menu={menu} isHighlighted={menuHighlighted} />
</HeadingWrapper>
);
};