Skip to content

Commit a278823

Browse files
Lukas742Lukas742
committed
cleanup
1 parent ce07936 commit a278823

3 files changed

Lines changed: 155 additions & 209 deletions

File tree

‎docs/UXCIntegration.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
/* eslint-disable import/order */
2-
import UXCIntegrationApp from '../patterns/navigation-layout/src/App.js';
31
import { MessageStrip, ThemeProvider } from '@ui5/webcomponents-react';
2+
import UXCIntegrationApp from '../patterns/navigation-layout/src/App.js';
43
import '../patterns/navigation-layout/src/index.css';
54
import { EmbeddedStackBlitz } from '@/docs/EmbeddedStackBlitz.js';
65

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"clean": "tsc --build --clean && tsc --build tsconfig.build.json --clean && rimraf temp .out && lerna run clean",
2020
"clean:remove-modules": "yarn clean && rimraf node_modules",
2121
"prettier:all": "prettier --write --config ./prettier.config.js \"**/*\"",
22-
"lint": "eslint . --fix",
22+
"lint": "eslint .",
2323
"lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
2424
"wrappers:main": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName '@ui5/webcomponents' --out ./packages/main/src/webComponents",
2525
"wrappers:fiori": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents",

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

Lines changed: 153 additions & 206 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/Illustr
77
import declineIcon from '@ui5/webcomponents-icons/dist/decline.js';
88
import sunIcon from '@ui5/webcomponents-icons/dist/general-leave-request.js';
99
import shareIcon from '@ui5/webcomponents-icons/dist/share.js';
10-
import { useReducer, useRef } from 'react';
10+
import { useRef } from 'react';
1111
import { fn } from 'storybook/test';
1212
import { Toolbar as LegacyToolbar, ToolbarSpacer as LegacyToolbarSpacer } from '../../../../compat/src/index.js';
1313
import type { ObjectPageDomRef } from '../../index.js';
@@ -145,217 +145,164 @@ type Story = StoryObj<typeof meta>;
145145

146146
export const Default: Story = {
147147
render(args) {
148-
const [hide, togglehide] = useReducer((prev) => !prev, false);
149148
return (
150149
// `onBeforeNavigate` & `onToggleHeaderArea` have to be added like this, otherwise Storybook invokes them incorrectly sometimes
151-
<>
152-
<button onClick={togglehide}>click</button>
153-
{!hide && (
154-
<ObjectPage
155-
{...args}
156-
onBeforeNavigate={(e) => {
157-
console.log('before', e);
158-
}}
159-
onToggleHeaderArea={args.onToggleHeaderArea}
160-
onSelectedSectionChange={(e) => {
161-
console.log('section', e);
162-
}}
150+
<ObjectPage {...args} onBeforeNavigate={args.onBeforeNavigate} onToggleHeaderArea={args.onToggleHeaderArea}>
151+
<ObjectPageSection titleText="Goals" id="goals" aria-label="Goals">
152+
<Form layout="S1 M2 L3 XL3" labelSpan="S12 M12 L12 XL12">
153+
<FormItem labelContent={<Label showColon>Evangelize the UI framework across the company</Label>}>
154+
<Text>4 days overdue - Cascaded</Text>
155+
</FormItem>
156+
<FormItem labelContent={<Label showColon>Get trained in development management direction</Label>}>
157+
<Text>Due Nov, 21</Text>
158+
</FormItem>
159+
<FormItem labelContent={<Label showColon>Mentor junior developers</Label>}>
160+
<Text>Due Dec, 31 - Cascaded</Text>
161+
</FormItem>
162+
</Form>
163+
</ObjectPageSection>
164+
<ObjectPageSection titleText="Personal" id="personal" aria-label="Personal">
165+
<ObjectPageSubSection
166+
titleText="Connect"
167+
id="personal-connect"
168+
aria-label="Connect"
169+
actions={
170+
<>
171+
<Button design={ButtonDesign.Emphasized} style={{ minWidth: '120px' }}>
172+
Custom Action
173+
</Button>
174+
<Button design={ButtonDesign.Transparent} icon="action-settings" tooltip="settings" />
175+
<Button design={ButtonDesign.Transparent} icon="download" tooltip="download" />
176+
</>
177+
}
163178
>
164-
<ObjectPageSection titleText="Goals" id="goals" aria-label="Goals">
165-
<Form layout="S1 M2 L3 XL3" labelSpan="S12 M12 L12 XL12">
166-
<FormItem labelContent={<Label showColon>Evangelize the UI framework across the company</Label>}>
167-
<Text>4 days overdue - Cascaded</Text>
179+
<Form style={{ alignItems: 'baseline' }}>
180+
<FormGroup headerText="Phone Numbers">
181+
<FormItem labelContent={<Label showColon>Home</Label>}>
182+
<Text>+1 234-567-8901</Text>
183+
<Text>+1 234-567-5555</Text>
168184
</FormItem>
169-
<FormItem labelContent={<Label showColon>Get trained in development management direction</Label>}>
170-
<Text>Due Nov, 21</Text>
185+
</FormGroup>
186+
<FormGroup headerText="Social Accounts">
187+
<FormItem labelContent={<Label showColon>LinkedIn</Label>}>
188+
<Text>/DeniseSmith</Text>
171189
</FormItem>
172-
<FormItem labelContent={<Label showColon>Mentor junior developers</Label>}>
173-
<Text>Due Dec, 31 - Cascaded</Text>
190+
<FormItem labelContent={<Label showColon>Twitter</Label>}>
191+
<Text>@DeniseSmith</Text>
174192
</FormItem>
175-
</Form>
176-
</ObjectPageSection>
177-
<ObjectPageSection titleText="Personal" id="personal" aria-label="Personal">
178-
<ObjectPageSubSection
179-
titleText="Connect"
180-
id="personal-connect"
181-
aria-label="Connect"
182-
actions={
183-
<>
184-
<Button design={ButtonDesign.Emphasized} style={{ minWidth: '120px' }}>
185-
Custom Action
186-
</Button>
187-
<Button design={ButtonDesign.Transparent} icon="action-settings" tooltip="settings" />
188-
<Button design={ButtonDesign.Transparent} icon="download" tooltip="download" />
189-
</>
190-
}
191-
>
192-
<Form style={{ alignItems: 'baseline' }}>
193-
<FormGroup headerText="Phone Numbers">
194-
<FormItem labelContent={<Label showColon>Home</Label>}>
195-
<Text>+1 234-567-8901</Text>
196-
<Text>+1 234-567-5555</Text>
197-
</FormItem>
198-
</FormGroup>
199-
<FormGroup headerText="Social Accounts">
200-
<FormItem labelContent={<Label showColon>LinkedIn</Label>}>
201-
<Text>/DeniseSmith</Text>
202-
</FormItem>
203-
<FormItem labelContent={<Label showColon>Twitter</Label>}>
204-
<Text>@DeniseSmith</Text>
205-
</FormItem>
206-
</FormGroup>
207-
<FormGroup headerText="Addresses">
208-
<FormItem labelContent={<Label showColon>Home Address</Label>}>
209-
<Text>2096 Mission Street</Text>
210-
</FormItem>
211-
<FormItem labelContent={<Label showColon>Mailing Address</Label>}>
212-
<Text>PO Box 32114</Text>
213-
</FormItem>
214-
</FormGroup>
215-
<FormGroup headerText="Mailing Address">
216-
<FormItem labelContent={<Label showColon>Work</Label>}>
217-
<Text>DeniseSmith@sap.com</Text>
218-
</FormItem>
219-
</FormGroup>
220-
</Form>
221-
</ObjectPageSubSection>
222-
<ObjectPageSubSection
223-
titleText="Payment Information"
224-
id="personal-payment-information"
225-
aria-label="Payment Information"
226-
>
227-
<Form>
228-
<FormGroup headerText="Salary">
229-
<FormItem labelContent={<Label showColon>Bank Transfer</Label>}>
230-
<Text>Money Bank, Inc.</Text>
231-
</FormItem>
232-
</FormGroup>
233-
<FormGroup headerText="Payment method for Expenses">
234-
<FormItem labelContent={<Label showColon>Extra Travel Expenses</Label>}>
235-
<Text>Cash 100 USD</Text>
236-
</FormItem>
237-
</FormGroup>
238-
</Form>
239-
</ObjectPageSubSection>
240-
</ObjectPageSection>
241-
<ObjectPageSection titleText="Employment" id="employment" aria-label="Employment">
242-
<ObjectPageSubSection
243-
titleText="Job Information"
244-
id="employment-job-information"
245-
aria-label="Job Information"
246-
>
247-
<Form>
248-
<FormItem labelContent={<Label showColon>Job Classification</Label>}>
249-
<FlexBox direction={FlexBoxDirection.Column}>
250-
<Text>Senior UI Developer</Text>
251-
<Label>(UIDEV-SR)</Label>
252-
</FlexBox>
253-
</FormItem>
254-
<FormItem labelContent={<Label showColon>Job Title</Label>}>
255-
<Text>Developer</Text>
256-
</FormItem>
257-
<FormItem labelContent={<Label showColon>Employee Class</Label>}>
258-
<Text>Employee</Text>
259-
</FormItem>
260-
<FormItem labelContent={<Label showColon>Manager</Label>}>
261-
<FlexBox direction={FlexBoxDirection.Column}>
262-
<Text>Dan Smith</Text>
263-
<Label>Development Manager</Label>
264-
</FlexBox>
265-
</FormItem>
266-
<FormItem labelContent={<Label showColon>Pay Grade</Label>}>
267-
<Text>Salary Grade 18 (GR-14)</Text>
268-
</FormItem>
269-
<FormItem labelContent={<Label showColon>FTE</Label>}>
270-
<Text>1</Text>
271-
</FormItem>
272-
</Form>
273-
</ObjectPageSubSection>
274-
<ObjectPageSubSection
275-
titleText="Employee Details"
276-
id="employment-employee-details"
277-
aria-label="Employee Details"
278-
>
279-
<Form>
280-
<FormItem labelContent={<Label showColon>Start Date</Label>}>
281-
<Text>Jan 01, 2018</Text>
282-
</FormItem>
283-
<FormItem labelContent={<Label showColon>End Date</Label>}>
284-
<Text>Dec 31, 9999</Text>
285-
</FormItem>
286-
<FormItem labelContent={<Label showColon>Payroll Start Date</Label>}>
287-
<Text>Jan 01, 2018</Text>
288-
</FormItem>
289-
<FormItem labelContent={<Label showColon>Benefits Start Date</Label>}>
290-
<Text>Jul 01, 2018</Text>
291-
</FormItem>
292-
<FormItem labelContent={<Label showColon>Company Car Eligibility</Label>}>
293-
<Text>Jan 01, 2021</Text>
294-
</FormItem>
295-
<FormItem labelContent={<Label showColon>Equity Start Date</Label>}>
296-
<Text>Jul 01, 2018</Text>
297-
</FormItem>
298-
</Form>
299-
</ObjectPageSubSection>
300-
<ObjectPageSubSection
301-
titleText="Job Relationship"
302-
id="employment-job-relationship"
303-
aria-label="Job Relationship"
304-
>
305-
<Form>
306-
<FormItem labelContent={<Label showColon>Manager</Label>}>
307-
<Text>John Doe</Text>
308-
</FormItem>
309-
<FormItem labelContent={<Label showColon>Scrum Master</Label>}>
310-
<Text>Michael Adams</Text>
311-
</FormItem>
312-
<FormItem labelContent={<Label showColon>Product Owner</Label>}>
313-
<Text>John Miller</Text>
314-
</FormItem>
315-
</Form>
316-
</ObjectPageSubSection>
317-
</ObjectPageSection>
318-
<ObjectPageSection titleText="Projects" id="projects" aria-label="Projects">
319-
<div style={{ height: '150px', background: 'lightblue', padding: '1rem' }}>Projects Section Content</div>
320-
</ObjectPageSection>
321-
<ObjectPageSection titleText="Skills" id="skills" aria-label="Skills">
322-
<div style={{ height: '250px', background: 'lightcoral', padding: '1rem' }}>Skills Section Content</div>
323-
</ObjectPageSection>
324-
<ObjectPageSection titleText="Education" id="education" aria-label="Education">
325-
<div style={{ height: '180px', background: 'lightgreen', padding: '1rem' }}>
326-
Education Section Content
327-
</div>
328-
</ObjectPageSection>
329-
<ObjectPageSection titleText="Certifications" id="certifications" aria-label="Certifications">
330-
<div style={{ height: '220px', background: 'lightyellow', padding: '1rem' }}>
331-
Certifications Section Content
332-
</div>
333-
</ObjectPageSection>
334-
<ObjectPageSection titleText="Performance" id="performance" aria-label="Performance">
335-
<div style={{ height: '300px', background: 'lavender', padding: '1rem' }}>
336-
Performance Section Content
337-
</div>
338-
</ObjectPageSection>
339-
<ObjectPageSection titleText="Benefits" id="benefits" aria-label="Benefits">
340-
<div style={{ height: '190px', background: 'lightpink', padding: '1rem' }}>Benefits Section Content</div>
341-
</ObjectPageSection>
342-
<ObjectPageSection titleText="Training" id="training" aria-label="Training">
343-
<div style={{ height: '270px', background: 'lightcyan', padding: '1rem' }}>Training Section Content</div>
344-
</ObjectPageSection>
345-
<ObjectPageSection titleText="Equipment" id="equipment" aria-label="Equipment">
346-
<div style={{ height: '210px', background: 'peachpuff', padding: '1rem' }}>Equipment Section Content</div>
347-
</ObjectPageSection>
348-
<ObjectPageSection titleText="Travel" id="travel" aria-label="Travel">
349-
<div style={{ height: '240px', background: 'mistyrose', padding: '1rem' }}>Travel Section Content</div>
350-
</ObjectPageSection>
351-
<ObjectPageSection titleText="Achievements" id="achievements" aria-label="Achievements">
352-
<div style={{ height: '280px', background: 'lightgoldenrodyellow', padding: '1rem' }}>
353-
Achievements Section Content
354-
</div>
355-
</ObjectPageSection>
356-
</ObjectPage>
357-
)}
358-
</>
193+
</FormGroup>
194+
<FormGroup headerText="Addresses">
195+
<FormItem labelContent={<Label showColon>Home Address</Label>}>
196+
<Text>2096 Mission Street</Text>
197+
</FormItem>
198+
<FormItem labelContent={<Label showColon>Mailing Address</Label>}>
199+
<Text>PO Box 32114</Text>
200+
</FormItem>
201+
</FormGroup>
202+
<FormGroup headerText="Mailing Address">
203+
<FormItem labelContent={<Label showColon>Work</Label>}>
204+
<Text>DeniseSmith@sap.com</Text>
205+
</FormItem>
206+
</FormGroup>
207+
</Form>
208+
</ObjectPageSubSection>
209+
<ObjectPageSubSection
210+
titleText="Payment Information"
211+
id="personal-payment-information"
212+
aria-label="Payment Information"
213+
>
214+
<Form>
215+
<FormGroup headerText="Salary">
216+
<FormItem labelContent={<Label showColon>Bank Transfer</Label>}>
217+
<Text>Money Bank, Inc.</Text>
218+
</FormItem>
219+
</FormGroup>
220+
<FormGroup headerText="Payment method for Expenses">
221+
<FormItem labelContent={<Label showColon>Extra Travel Expenses</Label>}>
222+
<Text>Cash 100 USD</Text>
223+
</FormItem>
224+
</FormGroup>
225+
</Form>
226+
</ObjectPageSubSection>
227+
</ObjectPageSection>
228+
<ObjectPageSection titleText="Employment" id="employment" aria-label="Employment">
229+
<ObjectPageSubSection
230+
titleText="Job Information"
231+
id="employment-job-information"
232+
aria-label="Job Information"
233+
>
234+
<Form>
235+
<FormItem labelContent={<Label showColon>Job Classification</Label>}>
236+
<FlexBox direction={FlexBoxDirection.Column}>
237+
<Text>Senior UI Developer</Text>
238+
<Label>(UIDEV-SR)</Label>
239+
</FlexBox>
240+
</FormItem>
241+
<FormItem labelContent={<Label showColon>Job Title</Label>}>
242+
<Text>Developer</Text>
243+
</FormItem>
244+
<FormItem labelContent={<Label showColon>Employee Class</Label>}>
245+
<Text>Employee</Text>
246+
</FormItem>
247+
<FormItem labelContent={<Label showColon>Manager</Label>}>
248+
<FlexBox direction={FlexBoxDirection.Column}>
249+
<Text>Dan Smith</Text>
250+
<Label>Development Manager</Label>
251+
</FlexBox>
252+
</FormItem>
253+
<FormItem labelContent={<Label showColon>Pay Grade</Label>}>
254+
<Text>Salary Grade 18 (GR-14)</Text>
255+
</FormItem>
256+
<FormItem labelContent={<Label showColon>FTE</Label>}>
257+
<Text>1</Text>
258+
</FormItem>
259+
</Form>
260+
</ObjectPageSubSection>
261+
<ObjectPageSubSection
262+
titleText="Employee Details"
263+
id="employment-employee-details"
264+
aria-label="Employee Details"
265+
>
266+
<Form>
267+
<FormItem labelContent={<Label showColon>Start Date</Label>}>
268+
<Text>Jan 01, 2018</Text>
269+
</FormItem>
270+
<FormItem labelContent={<Label showColon>End Date</Label>}>
271+
<Text>Dec 31, 9999</Text>
272+
</FormItem>
273+
<FormItem labelContent={<Label showColon>Payroll Start Date</Label>}>
274+
<Text>Jan 01, 2018</Text>
275+
</FormItem>
276+
<FormItem labelContent={<Label showColon>Benefits Start Date</Label>}>
277+
<Text>Jul 01, 2018</Text>
278+
</FormItem>
279+
<FormItem labelContent={<Label showColon>Company Car Eligibility</Label>}>
280+
<Text>Jan 01, 2021</Text>
281+
</FormItem>
282+
<FormItem labelContent={<Label showColon>Equity Start Date</Label>}>
283+
<Text>Jul 01, 2018</Text>
284+
</FormItem>
285+
</Form>
286+
</ObjectPageSubSection>
287+
<ObjectPageSubSection
288+
titleText="Job Relationship"
289+
id="employment-job-relationship"
290+
aria-label="Job Relationship"
291+
>
292+
<Form>
293+
<FormItem labelContent={<Label showColon>Manager</Label>}>
294+
<Text>John Doe</Text>
295+
</FormItem>
296+
<FormItem labelContent={<Label showColon>Scrum Master</Label>}>
297+
<Text>Michael Adams</Text>
298+
</FormItem>
299+
<FormItem labelContent={<Label showColon>Product Owner</Label>}>
300+
<Text>John Miller</Text>
301+
</FormItem>
302+
</Form>
303+
</ObjectPageSubSection>
304+
</ObjectPageSection>
305+
</ObjectPage>
359306
);
360307
},
361308
};

0 commit comments

Comments
 (0)