-
Notifications
You must be signed in to change notification settings - Fork 182
/
header.stories.tsx
129 lines (107 loc) · 3.47 KB
/
header.stories.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import React from 'react';
import hubLogo from '@jetbrains/logos/hub/hub.svg';
import hubTextLogo from '@jetbrains/logos/hub/hub-text.svg';
import addIcon from '@jetbrains/icons/add-20px';
import giftIcon from '@jetbrains/icons/gift-20px';
import helpIcon from '@jetbrains/icons/help-20px';
import searchIcon from '@jetbrains/icons/search-20px';
import settingsIcon from '@jetbrains/icons/settings-20px';
import {StoryFn} from '@storybook/react';
import hubConfig from '../../.storybook/hub-config';
import Link from '../link/link';
import DropdownMenu from '../dropdown-menu/dropdown-menu';
import showAuthDialog from '../auth-dialog-service/auth-dialog-service';
import Theme from '../global/theme';
import Auth from '../auth/auth';
import {ClickableLinkProps} from '../link/clickableLink';
import Header, {HeaderAttrs} from './header';
import Logo from './logo';
import Tray from './tray';
import TrayIcon from './tray-icon';
import SmartServices from './smart-services';
import SmartProfile from './smart-profile';
const blockAuth = window.location.search.includes('block-auth');
export default {
title: 'Components/Header',
component: Header,
parameters: {
storyStyles: `
<style>
body {
margin: 0 !important;
}
</style>`,
zeplinLink: 'https://app.zeplin.io/project/5afd8f5511c2d1c625752bb0/screen/6193bc71a88a41a987ba9918'
},
tags: ['skip-test']
};
interface HeaderArgs extends HeaderAttrs {
isCompact: boolean
dark: boolean
}
export const header: StoryFn<HeaderArgs> = ({isCompact, dark, ...args}) => {
class HeaderDemo extends React.Component {
render() {
const auth = new Auth(hubConfig);
if (!blockAuth) {
auth.setAuthDialogService(showAuthDialog);
auth.init();
}
const Comp = (props: ClickableLinkProps) => <a {...props}>This is component</a>;
return (
<Header
{...args}
theme={dark ? Theme.DARK : Theme.LIGHT}
className={isCompact ? 'compactHeader' : ''}
>
<a title="Hub" href="/">
{isCompact
? <Logo className="compactLogo" glyph={hubTextLogo} size={Logo.Size.Size96}/>
: <Logo glyph={hubLogo} size={Logo.Size.Size48}/>
}
</a>
<Link active href="#">
Users
</Link>
<Link href="#">Groups</Link>
<Link href="#">Spaces</Link>
<Link href="#">Services</Link>
<Tray>
<TrayIcon primary title="Create issue" icon={addIcon}/>
<TrayIcon title="Help" icon={helpIcon}/>
<TrayIcon title="What's new" icon={giftIcon}/>
<TrayIcon title="Search" icon={searchIcon}/>
<DropdownMenu
data={[{label: 'Test'}, {label: 'Test2'}]}
anchor={({active, pinned, ...ariaProps}) => (
<TrayIcon title="Settings" active={active} icon={settingsIcon} {...ariaProps}/>
)}
menuProps={{top: -12}}
/>
<SmartServices auth={auth}/>
<SmartProfile auth={auth} hasUpdates LinkComponent={Comp}/>
</Tray>
</Header>
);
}
}
return <HeaderDemo/>;
};
header.parameters = {notes: 'See available presentation options in knobs panel'};
header.args = {isCompact: false, dark: true};
header.parameters = {
storyStyles: `
<style>
body {
margin: 0 !important;
}
.compactHeader.compactHeader {
height: 48px;
}
.compactLogo.compactLogo {
color: #fff;
position: relative;
top: -2px;
}
</style>`
};