Skip to content

Commit 18d9e77

Browse files
MarcusNotheisMarcusNotheis
authored
docs(ObjectPage): improve demo (#650)
[ci skip]
1 parent 2a65a24 commit 18d9e77

File tree

1 file changed

+153
-54
lines changed

1 file changed

+153
-54
lines changed

‎packages/main/src/components/ObjectPage/demo.stories.tsx

Lines changed: 153 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,53 @@
1+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
12
import { Breadcrumbs } from '@ui5/webcomponents-react/lib/Breadcrumbs';
23
import { Button } from '@ui5/webcomponents-react/lib/Button';
34
import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
5+
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
6+
import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
7+
import { Form } from '@ui5/webcomponents-react/lib/Form';
8+
import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup';
9+
import { FormItem } from '@ui5/webcomponents-react/lib/FormItem';
410
import { Label } from '@ui5/webcomponents-react/lib/Label';
511
import { Link } from '@ui5/webcomponents-react/lib/Link';
612
import { ObjectPage } from '@ui5/webcomponents-react/lib/ObjectPage';
713
import { ObjectPageMode } from '@ui5/webcomponents-react/lib/ObjectPageMode';
814
import { ObjectPageSection } from '@ui5/webcomponents-react/lib/ObjectPageSection';
915
import { ObjectPageSubSection } from '@ui5/webcomponents-react/lib/ObjectPageSubSection';
16+
import { ProgressIndicator } from '@ui5/webcomponents-react/lib/ProgressIndicator';
1017
import { Text } from '@ui5/webcomponents-react/lib/Text';
11-
import { Title } from '@ui5/webcomponents-react/lib/Title';
12-
import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
18+
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
1319
import React, { useState } from 'react';
1420
import SampleImage from './DemoImage.png';
15-
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
1621

1722
export const renderDemo = (props) => {
1823
return (
1924
<div style={{ width: 'calc(100% - 1rem)', height: 'calc(100% - 1rem)', position: 'relative', marginTop: '2rem' }}>
2025
<ObjectPage
2126
headerContent={
2227
<>
23-
<div style={{ display: 'flex', flexDirection: 'column' }}>
24-
<Link href="https://www.sap.com">www.myurl.com</Link>
25-
<Text>Address 1</Text>
26-
</div>
27-
<div style={{ display: 'flex', flexDirection: 'column' }}>
28-
<Text>Address 2</Text>
29-
<Text>Address 3</Text>
30-
</div>
28+
<FlexBox direction={FlexBoxDirection.Column}>
29+
<Link>+33 6 4512 5158</Link>
30+
<Link href="mailto:[email protected]">[email protected]</Link>
31+
<Link href="https://github.com/SAP/ui5-webcomponents-react">
32+
https://github.com/SAP/ui5-webcomponents-react
33+
</Link>
34+
</FlexBox>
35+
<FlexBox direction={FlexBoxDirection.Column} style={{ width: '200px' }}>
36+
<Label>Achieved Goals</Label>
37+
<ProgressIndicator value={80} valueState={ValueState.Success} />
38+
</FlexBox>
39+
<FlexBox direction={FlexBoxDirection.Column}>
40+
<Label>San Jose</Label>
41+
<Label>California, USA</Label>
42+
</FlexBox>
3143
</>
3244
}
3345
breadcrumbs={
34-
<Breadcrumbs>
35-
<Link href="PathSegment1">Path1</Link>
36-
<Link href="PathSegment2">Path2</Link>
37-
<Link href="PathSegment3"></Link>
46+
<Breadcrumbs currentLocationText="Employee Details">
47+
<Link>Manager Cockpit</Link>
48+
<Link>My Team</Link>
3849
</Breadcrumbs>
3950
}
40-
keyInfos={
41-
<>
42-
<div>
43-
<Title level={TitleLevel.H5}>Key Info 1</Title>
44-
<Text>Value 1</Text>
45-
</div>
46-
<div>
47-
<Title level={TitleLevel.H5}>Key Info 2</Title>
48-
<Text>Value 2</Text>
49-
</div>
50-
<div>
51-
<Title level={TitleLevel.H5}>Key Info 3</Title>
52-
<Text>Value 3</Text>
53-
</div>
54-
</>
55-
}
5651
title={props.title}
5752
subTitle={props.subTitle}
5853
headerActions={[
@@ -74,30 +69,133 @@ export const renderDemo = (props) => {
7469
style={{ height: '700px' }}
7570
headerContentPinnable={props.headerContentPinnable}
7671
>
77-
<ObjectPageSection title="Test 1" id="1">
78-
<div style={{ height: '200px' }}>Test1</div>
72+
<ObjectPageSection title="Goals" id="goals">
73+
<Form columnsL={3} columnsXL={3} labelSpanXL={6} labelSpanL={6} columnsM={2} labelSpanM={6}>
74+
<FormItem label="Evangelize the UI framework across the company">
75+
<Text>4 days overdue - Cascaded</Text>
76+
</FormItem>
77+
<FormItem label="Get trained in development management direction">
78+
<Text>Due Nov, 21</Text>
79+
</FormItem>
80+
<FormItem label="Mentor junior developers">
81+
<Text>Due Dec, 31 - Cascaded</Text>
82+
</FormItem>
83+
</Form>
7984
</ObjectPageSection>
80-
<ObjectPageSection title="Test 2" id="2">
81-
<div style={{ height: '800px' }}>Test2</div>
82-
</ObjectPageSection>
83-
<ObjectPageSection title="Test 3" id="3">
84-
Test1
85-
</ObjectPageSection>
86-
<ObjectPageSection title="Test 4" id="4">
87-
<h1>Section 4</h1>
88-
<ObjectPageSubSection title="SubSection 4.1" id="4.1">
89-
Test 4 SubSection 1
85+
<ObjectPageSection title="Personal" id="personal">
86+
<ObjectPageSubSection title="Connect" id="personal-connect">
87+
<Form columnsXL={4} columnsL={4}>
88+
<FormGroup title="Phone Numbers">
89+
<FormItem label="Home">
90+
<Text>+1 234-567-8901</Text>
91+
</FormItem>
92+
<FormItem label="">
93+
<Text>+1 234-567-5555</Text>
94+
</FormItem>
95+
</FormGroup>
96+
<FormGroup title="Social Accounts">
97+
<FormItem label="LinkedIn">
98+
<Text>/DeniseSmith</Text>
99+
</FormItem>
100+
<FormItem label="Twitter">
101+
<Text>@DeniseSmith</Text>
102+
</FormItem>
103+
</FormGroup>
104+
<FormGroup title="Addresses">
105+
<FormItem label="Home Address">
106+
<Text>2096 Mission Street</Text>
107+
</FormItem>
108+
<FormItem label="Mailing Address">
109+
<Text>PO Box 32114</Text>
110+
</FormItem>
111+
</FormGroup>
112+
<FormGroup title="Mailing Address">
113+
<FormItem label="Work">
114+
<Text>[email protected]</Text>
115+
</FormItem>
116+
</FormGroup>
117+
</Form>
90118
</ObjectPageSubSection>
91-
<ObjectPageSubSection title="SubSection 4.2" id="4.2">
92-
Test 4 SubSection 2
119+
120+
<ObjectPageSubSection title="Payment Information" id="personal-payment-information">
121+
<Form columnsXL={4} columnsL={4}>
122+
<FormGroup title="Salary">
123+
<FormItem label="Bank Transfer">
124+
<Text>Money Bank, Inc.</Text>
125+
</FormItem>
126+
</FormGroup>
127+
128+
<FormGroup title="Payment method for Expenses">
129+
<FormItem label="Extra Travel Expenses">
130+
<Text>Cash 100 USD</Text>
131+
</FormItem>
132+
</FormGroup>
133+
</Form>
93134
</ObjectPageSubSection>
94135
</ObjectPageSection>
95-
<ObjectPageSection title="Test 5" id="5">
96-
<ObjectPageSubSection title="SubSection 5.1" id="5.1">
97-
Content of SubSection 5.1
136+
<ObjectPageSection title="Employment" id="employment">
137+
<ObjectPageSubSection title="Job Information" id="employment-job-information">
138+
<Form columnsXL={4} columnsL={4}>
139+
<FormItem label="Job Classification">
140+
<FlexBox direction={FlexBoxDirection.Column}>
141+
<Text>Senior UI Developer</Text>
142+
<Label>(UIDEV-SR)</Label>
143+
</FlexBox>
144+
</FormItem>
145+
<FormItem label="Job Title">
146+
<Text>Developer</Text>
147+
</FormItem>
148+
<FormItem label="Employee Class">
149+
<Text>Employee</Text>
150+
</FormItem>
151+
<FormItem label="Manager">
152+
<FlexBox direction={FlexBoxDirection.Column}>
153+
<Text>Dan Smith</Text>
154+
<Label>Development Manager</Label>
155+
</FlexBox>
156+
</FormItem>
157+
<FormItem label="Pay Grade">
158+
<Text>Salary Grade 18 (GR-14)</Text>
159+
</FormItem>
160+
<FormItem label="FTE">
161+
<Text>1</Text>
162+
</FormItem>
163+
</Form>
164+
</ObjectPageSubSection>
165+
<ObjectPageSubSection title="Employee Details" id="employment-employee-details">
166+
<Form columnsXL={4} columnsL={4}>
167+
<FormItem label="Start Date">
168+
<Text>Jan 01, 2018</Text>
169+
</FormItem>
170+
<FormItem label="End Date">
171+
<Text>Dec 31, 9999</Text>
172+
</FormItem>
173+
<FormItem label="Payroll Start Date">
174+
<Text>Jan 01, 2018</Text>
175+
</FormItem>
176+
<FormItem label="Benefits Start Date">
177+
<Text>Jul 01, 2018</Text>
178+
</FormItem>
179+
<FormItem label="Company Car Eligibility">
180+
<Text>Jan 01, 2021</Text>
181+
</FormItem>
182+
<FormItem label="Equity Start Date">
183+
<Text>Jul 01, 2018</Text>
184+
</FormItem>
185+
</Form>
98186
</ObjectPageSubSection>
99-
<ObjectPageSubSection title="SubSection 5.2" id="5.2">
100-
Content of SubSection 5.2
187+
<ObjectPageSubSection title="Job Relationship" id="employment-job-relationship">
188+
<Form columnsXL={4} columnsL={4}>
189+
<FormItem label="Manager">
190+
<Text>John Doe</Text>
191+
</FormItem>
192+
<FormItem label="Scrum Master">
193+
<Text>Michael Adams</Text>
194+
</FormItem>
195+
<FormItem label="Product Owner">
196+
<Text>John Miller</Text>
197+
</FormItem>
198+
</Form>
101199
</ObjectPageSubSection>
102200
</ObjectPageSection>
103201
</ObjectPage>
@@ -173,11 +271,12 @@ export default {
173271
}
174272
},
175273
args: {
176-
title: 'Object Page Title',
177-
subTitle: 'Object Page Sub Title',
274+
title: 'Denise Smith',
275+
subTitle: 'Senior UI Developer',
178276
mode: ObjectPageMode.Default,
179277
showHideHeaderButton: true,
180-
selectedSectionId: '1',
181-
headerContentPinnable: true
278+
selectedSectionId: 'goals',
279+
headerContentPinnable: true,
280+
imageShapeCircle: true
182281
}
183282
};

0 commit comments

Comments
 (0)