Skip to content

Commit 135188e

Browse files
stomitastomita
committed
add page header story
1 parent f541e90 commit 135188e

File tree

2 files changed

+177
-0
lines changed

2 files changed

+177
-0
lines changed

‎stories/PageHeaderStories.js‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import React from 'react';
2+
import { storiesOf } from '@kadira/storybook';
3+
import { withKnobs } from '@kadira/storybook-addon-knobs';
4+
import PageHeader, {
5+
PageHeaderHeading,
6+
PageHeaderHeadingTitle,
7+
PageHeaderDetail,
8+
PageHeaderDetailItem,
9+
PageHeaderDetailBody,
10+
PageHeaderDetailLabel,
11+
} from '../src/scripts/PageHeader';
12+
import {
13+
Icon, Crumb, Button, ButtonGroup, DropdownButton, MenuItem,
14+
Text, Grid,
15+
} from '../src/scripts';
16+
17+
storiesOf('PageHeader', module)
18+
.addDecorator(withKnobs)
19+
.addWithInfo('Base', 'Default Page Header', () => (
20+
<PageHeader>
21+
<PageHeaderHeading
22+
title='Rohde Corp - 80,000 Widgets'
23+
info='Mark Jaeckal • Unlimited Customer • 11/13/15'
24+
figure={
25+
<Icon category='standard' icon='opportunity' />
26+
}
27+
/>
28+
</PageHeader>
29+
))
30+
.addWithInfo('Record Home', 'Page Header of Record Home', () => (
31+
<PageHeader>
32+
<PageHeaderHeading
33+
legend='RECORD TYPE'
34+
title='Record Title'
35+
figure={ <Icon category='standard' icon='user' size='large' /> }
36+
leftActions={ <Button type='neutral' icon='add' iconAlign='left'>Follow</Button> }
37+
rightActions={(
38+
<ButtonGroup>
39+
<Button type='neutral'>Edit</Button>
40+
<Button type='neutral'>Delete</Button>
41+
<Button type='neutral'>Clone</Button>
42+
<DropdownButton type='icon-border' menuAlign='right'>
43+
<MenuItem>Menu Item #1</MenuItem>
44+
<MenuItem>Menu Item #2</MenuItem>
45+
<MenuItem>Menu Item #3</MenuItem>
46+
</DropdownButton>
47+
</ButtonGroup>
48+
)}
49+
/>
50+
<PageHeaderDetail>
51+
<PageHeaderDetailItem label='FIELD 1'>
52+
<Text
53+
category='body' type='regular'
54+
truncate
55+
title='Description that demonstrates truncation with a long text field'
56+
>
57+
Description that demonstrates truncation with a long text field
58+
</Text>
59+
</PageHeaderDetailItem>
60+
<PageHeaderDetailItem>
61+
<PageHeaderDetailLabel>
62+
<Text tag='div' category='heading' type='label'>
63+
FIELD 2 (3)
64+
<DropdownButton type='icon-bare' iconSize='small' icon='down'>
65+
<MenuItem>Menu Item #1</MenuItem>
66+
<MenuItem>Menu Item #2</MenuItem>
67+
<MenuItem>Menu Item #3</MenuItem>
68+
</DropdownButton>
69+
</Text>
70+
</PageHeaderDetailLabel>
71+
<PageHeaderDetailBody>
72+
<Text category='body' type='regular' title='Multiple Values'>
73+
Multiple Values
74+
</Text>
75+
</PageHeaderDetailBody>
76+
</PageHeaderDetailItem>
77+
<PageHeaderDetailItem label='FIELD 3'>
78+
<a>Hyperlink</a>
79+
</PageHeaderDetailItem>
80+
<PageHeaderDetailItem label='FIELD 4'>
81+
<span>Description (2-line truncat...</span>
82+
</PageHeaderDetailItem>
83+
</PageHeaderDetail>
84+
</PageHeader>
85+
))
86+
.addWithInfo('Object Home', 'Page Header of Object Home', () => (
87+
<PageHeader>
88+
<PageHeaderHeading
89+
legend='LEADS'
90+
title={(
91+
<Grid vertical={false}>
92+
<PageHeaderHeadingTitle>
93+
My Leads (truncates)
94+
</PageHeaderHeadingTitle>
95+
<DropdownButton type='icon-bare' icon='down' className='slds-align-middle'>
96+
<MenuItem>Menu Item #1</MenuItem>
97+
<MenuItem>Menu Item #2</MenuItem>
98+
<MenuItem>Menu Item #3</MenuItem>
99+
</DropdownButton>
100+
</Grid>
101+
)}
102+
info='10 items • Sorted by Name'
103+
leftActions={(
104+
<DropdownButton type='icon-more' icon='settings' className='slds-m-left--large'>
105+
<MenuItem>Menu Item #1</MenuItem>
106+
<MenuItem>Menu Item #2</MenuItem>
107+
<MenuItem>Menu Item #3</MenuItem>
108+
</DropdownButton>
109+
)}
110+
rightActions={[
111+
<DropdownButton key={0} type='icon-more' icon='table' menuAlign='right'>
112+
<MenuItem>Menu Item #1</MenuItem>
113+
<MenuItem>Menu Item #2</MenuItem>
114+
<MenuItem>Menu Item #3</MenuItem>
115+
</DropdownButton>,
116+
<ButtonGroup key={1} className='slds-button-space-left'>
117+
<Button type='icon-border' icon='chart' />
118+
<Button type='icon-border' icon='filterList' />
119+
<DropdownButton type='icon-more' icon='sort' menuAlign='right'>
120+
<MenuItem>Menu Item #1</MenuItem>
121+
<MenuItem>Menu Item #2</MenuItem>
122+
<MenuItem>Menu Item #3</MenuItem>
123+
</DropdownButton>
124+
</ButtonGroup>,
125+
<ButtonGroup key={2} className='slds-button-space-left'>
126+
<Button type='neutral'>New Lead</Button>
127+
<DropdownButton
128+
type='icon-border-filled'
129+
menuAlign='right'
130+
>
131+
<MenuItem>Menu Item #1</MenuItem>
132+
<MenuItem>Menu Item #2</MenuItem>
133+
<MenuItem>Menu Item #3</MenuItem>
134+
</DropdownButton>
135+
</ButtonGroup>,
136+
]}
137+
/>
138+
</PageHeader>
139+
))
140+
.addWithInfo('Related List', 'Page Header of Related List', () => (
141+
<PageHeader>
142+
<PageHeaderHeading
143+
breadCrumbs={[
144+
<Crumb key={0} href='#'>ACCOUNTS</Crumb>,
145+
<Crumb key={1} href='#'>COMPANY ONE</Crumb>,
146+
]}
147+
title='Contacts (will truncate)'
148+
info='10 items, sorted by name'
149+
rightActions={[
150+
<DropdownButton key={0} type='icon-more' icon='table' menuAlign='right'>
151+
<MenuItem>Menu Item #1</MenuItem>
152+
<MenuItem>Menu Item #2</MenuItem>
153+
<MenuItem>Menu Item #3</MenuItem>
154+
</DropdownButton>,
155+
<ButtonGroup key={1} className='slds-button-space-left'>
156+
<Button type='icon-border' icon='chart' />
157+
<Button type='icon-border' icon='filterList' />
158+
<DropdownButton type='icon-more' icon='sort' menuAlign='right'>
159+
<MenuItem>Menu Item #1</MenuItem>
160+
<MenuItem>Menu Item #2</MenuItem>
161+
<MenuItem>Menu Item #3</MenuItem>
162+
</DropdownButton>
163+
</ButtonGroup>,
164+
<ButtonGroup key={2} className='slds-button-space-left'>
165+
<Button type='neutral'>Add Contact</Button>
166+
<DropdownButton type='icon-border-filled' menuAlign='right'>
167+
<MenuItem>Menu Item #1</MenuItem>
168+
<MenuItem>Menu Item #2</MenuItem>
169+
<MenuItem>Menu Item #3</MenuItem>
170+
</DropdownButton>
171+
</ButtonGroup>,
172+
]}
173+
/>
174+
</PageHeader>
175+
))
176+
;

‎stories/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import './FormStories';
1616
import './GridStories';
1717
import './MediaObjectStories';
1818
import './ModalStories';
19+
import './PageHeaderStories';
1920
import './IconStories';
2021
import './TabsStories';
2122
import './TableStories';

0 commit comments

Comments
 (0)