-
Notifications
You must be signed in to change notification settings - Fork 46
/
Header.stories.js
40 lines (37 loc) · 1.46 KB
/
Header.stories.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
import React from 'react';
import Header, { HeaderNav, HeaderNavItem } from './Header.js';
export default {
title: 'Header',
component: Header,
}
export const HeaderAndNav = () => (
<>
<Header css="custom-global-css-class">
<>
<div style={{ padding: 24 }}>LOGO</div>
<HeaderNav>
<HeaderNavItem style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">Home</a></HeaderNavItem>
<HeaderNavItem style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">Services</a></HeaderNavItem>
<HeaderNavItem style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">About</a></HeaderNavItem>
<HeaderNavItem style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">Contact</a></HeaderNavItem>
</HeaderNav>
</>
</Header>
<Header isSkinned={false}>
<>
<div style={{ padding: 24 }}>NO-Skinz</div>
<HeaderNav>
<HeaderNavItem><a style={{ color: "#333333", textDecoration: "none" }} href="#">Not Skinned</a></HeaderNavItem>
</HeaderNav>
</>
</Header>
<Header isSticky={true}>
<>
<div style={{ padding: 24 }}>Logo</div>
<HeaderNav>
<HeaderNavItem><a style={{ color: "#333333", textDecoration: "none" }} href="#">Sticky</a></HeaderNavItem>
</HeaderNav>
</>
</Header>
</>
)