UNPKG

6.17 kBJavaScriptView Raw
1import React from 'react';
2import {storiesOf} from '@storybook/html';
3import hubLogo from '@jetbrains/logos/hub/hub.svg';
4import hubTextLogo from '@jetbrains/logos/hub/hub-text.svg';
5
6import reactDecorator from '../../.storybook/react-decorator';
7import hubConfig from '../../.storybook/hub-config';
8import Link from '../link/link';
9
10import {Auth} from '../index';
11
12import PopupMenu from '../popup-menu/popup-menu';
13import Dropdown from '../dropdown/dropdown';
14import showAuthDialog from '../auth-dialog-service/auth-dialog-service';
15import {Add20pxIcon, Gift20pxIcon, Help20pxIcon, Search20pxIcon, Settings20pxIcon} from '../icon';
16
17import Theme from '../global/theme';
18
19import Header from './header';
20import Logo from './logo';
21
22import Tray from './tray';
23import TrayIcon from './tray-icon';
24import SmartServices from './smart-services';
25import SmartProfile from './smart-profile';
26
27storiesOf('Components|Header', module).
28 addParameters({
29 notes: 'Displays a configurable page header.',
30 storyStyles: `
31<style>
32 body {
33 margin: 0;
34 }
35</style>`
36 }).
37 addDecorator(reactDecorator()).
38 add('basic', () => {
39 class HeaderDemo extends React.Component {
40 render() {
41 const auth = new Auth(hubConfig);
42 auth.setAuthDialogService(showAuthDialog);
43 auth.init();
44
45 const Comp = props => <a {...props}>This is component</a>;
46 return (
47 <Header>
48 <Link href="#">
49 <Logo glyph={hubLogo} size={Logo.Size.Size48}/>
50 </Link>
51 <Link active href="#">Users</Link>
52 <Link href="#">Groups</Link>
53 <Link href="#">Spaces</Link>
54 <Link href="#">Services</Link>
55 <Tray>
56 <TrayIcon
57 primary
58 title="Create issue"
59 icon={Add20pxIcon}
60 />
61 <TrayIcon icon={Help20pxIcon}/>
62 <TrayIcon icon={Gift20pxIcon}/>
63 <TrayIcon icon={Search20pxIcon}/>
64 <Dropdown
65 anchor={({active}) => (
66 <TrayIcon
67 active={active}
68 icon={Settings20pxIcon}
69 />
70 )}
71 >
72 <PopupMenu
73 top={-12}
74 closeOnSelect
75 data={[
76 {label: 'Test'},
77 {label: 'Test2'}
78 ]}
79 />
80 </Dropdown>
81 <SmartServices auth={auth}/>
82 <SmartProfile
83 auth={auth}
84 hasUpdates
85 LinkComponent={Comp}
86 />
87 </Tray>
88 </Header>
89 );
90 }
91 }
92
93 return <HeaderDemo/>;
94 }).
95 add('light', () => {
96 class LightHeaderDemo extends React.Component {
97 render() {
98 const auth = new Auth(hubConfig);
99 auth.setAuthDialogService(showAuthDialog);
100 auth.init();
101
102 const Comp = props => <a {...props}>This is component</a>;
103
104 return (
105 <Header theme={Theme.LIGHT}>
106 <Link href="#">
107 <Logo glyph={hubLogo} size={Logo.Size.Size48}/>
108 </Link>
109 <Link active href="#">Users</Link>
110 <Link href="#">Groups</Link>
111
112 <Tray>
113 <TrayIcon
114 primary
115 title="Create issue"
116 icon={Add20pxIcon}
117 />
118 <TrayIcon icon={Help20pxIcon}/>
119 <TrayIcon icon={Gift20pxIcon}/>
120 <TrayIcon icon={Search20pxIcon}/>
121 <Dropdown
122 anchor={({active}) => (
123 <TrayIcon
124 active={active}
125 icon={Settings20pxIcon}
126 />
127 )}
128 >
129 <PopupMenu
130 top={-12}
131 closeOnSelect
132 data={[
133 {label: 'Test'},
134 {label: 'Test2'}
135 ]}
136 />
137 </Dropdown>
138 <SmartServices auth={auth}/>
139 <SmartProfile
140 auth={auth}
141 hasUpdates
142 LinkComponent={Comp}
143 />
144 </Tray>
145 </Header>
146 );
147 }
148 }
149
150 return <LightHeaderDemo/>;
151 }).
152 add('compact', () => {
153 class CompactHeaderDemo extends React.Component {
154 render() {
155 const auth = new Auth(hubConfig);
156 auth.setAuthDialogService(showAuthDialog);
157 auth.init();
158
159 return (
160 <Header className="header">
161 <Link href="#">
162 <Logo className="logo" glyph={hubTextLogo} size={Logo.Size.Size96}/>
163 </Link>
164 <Link active href="#">Users</Link>
165 <Link href="#">Groups</Link>
166 <Link href="#">Spaces</Link>
167 <Link href="#">Services</Link>
168 <Tray>
169 <TrayIcon
170 primary
171 title="Create issue"
172 icon={Add20pxIcon}
173 />
174 <TrayIcon icon={Help20pxIcon}/>
175 <TrayIcon icon={Gift20pxIcon}/>
176 <TrayIcon icon={Search20pxIcon}/>
177 <Dropdown
178 anchor={({active}) => (
179 <TrayIcon
180 active={active}
181 icon={Settings20pxIcon}
182 />
183 )}
184 >
185 <PopupMenu
186 top={-12}
187 closeOnSelect
188 data={[
189 {label: 'Test'},
190 {label: 'Test2'}
191 ]}
192 />
193 </Dropdown>
194 <SmartServices auth={auth}/>
195 <SmartProfile
196 auth={auth}
197 hasUpdates
198 size={SmartProfile.Size.Size24}
199 />
200 </Tray>
201 </Header>
202 );
203 }
204 }
205
206 return <CompactHeaderDemo/>;
207 }, {
208 storyStyles: `
209<style>
210 body {
211 margin: 0;
212 }
213
214 .header.header {
215 height: 40px;
216 }
217
218 .logo.logo {
219 color: #fff;
220 position: relative;
221 top: -2px;
222 }
223</style>`
224 });