1 | import React from 'react';
|
2 | import {storiesOf} from '@storybook/html';
|
3 | import hubLogo from '@jetbrains/logos/hub/hub.svg';
|
4 | import hubTextLogo from '@jetbrains/logos/hub/hub-text.svg';
|
5 |
|
6 | import reactDecorator from '../../.storybook/react-decorator';
|
7 | import hubConfig from '../../.storybook/hub-config';
|
8 | import Link from '../link/link';
|
9 |
|
10 | import {Auth} from '../index';
|
11 |
|
12 | import PopupMenu from '../popup-menu/popup-menu';
|
13 | import Dropdown from '../dropdown/dropdown';
|
14 | import showAuthDialog from '../auth-dialog-service/auth-dialog-service';
|
15 | import {Add20pxIcon, Gift20pxIcon, Help20pxIcon, Search20pxIcon, Settings20pxIcon} from '../icon';
|
16 |
|
17 | import Theme from '../global/theme';
|
18 |
|
19 | import Header from './header';
|
20 | import Logo from './logo';
|
21 |
|
22 | import Tray from './tray';
|
23 | import TrayIcon from './tray-icon';
|
24 | import SmartServices from './smart-services';
|
25 | import SmartProfile from './smart-profile';
|
26 |
|
27 | storiesOf('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 | });
|