Skip to content

docs(ObjectPage): improve demo #650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 19, 2020
Merged

docs(ObjectPage): improve demo #650

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d55359
docs(ObjectPage): improve demo
MarcusNotheis Aug 14, 2020
7179964
disable breadcrumb links
MarcusNotheis Aug 19, 2020
e4b0c40
Merge branch 'master' into docs/object-page-demo
MarcusNotheis Aug 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 153 additions & 54 deletions packages/main/src/components/ObjectPage/demo.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,53 @@
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
import { Breadcrumbs } from '@ui5/webcomponents-react/lib/Breadcrumbs';
import { Button } from '@ui5/webcomponents-react/lib/Button';
import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
import { Form } from '@ui5/webcomponents-react/lib/Form';
import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup';
import { FormItem } from '@ui5/webcomponents-react/lib/FormItem';
import { Label } from '@ui5/webcomponents-react/lib/Label';
import { Link } from '@ui5/webcomponents-react/lib/Link';
import { ObjectPage } from '@ui5/webcomponents-react/lib/ObjectPage';
import { ObjectPageMode } from '@ui5/webcomponents-react/lib/ObjectPageMode';
import { ObjectPageSection } from '@ui5/webcomponents-react/lib/ObjectPageSection';
import { ObjectPageSubSection } from '@ui5/webcomponents-react/lib/ObjectPageSubSection';
import { ProgressIndicator } from '@ui5/webcomponents-react/lib/ProgressIndicator';
import { Text } from '@ui5/webcomponents-react/lib/Text';
import { Title } from '@ui5/webcomponents-react/lib/Title';
import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
import React, { useState } from 'react';
import SampleImage from './DemoImage.png';
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';

export const renderDemo = (props) => {
return (
<div style={{ width: 'calc(100% - 1rem)', height: 'calc(100% - 1rem)', position: 'relative', marginTop: '2rem' }}>
<ObjectPage
headerContent={
<>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Link href="https://www.sap.com">www.myurl.com</Link>
<Text>Address 1</Text>
</div>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Text>Address 2</Text>
<Text>Address 3</Text>
</div>
<FlexBox direction={FlexBoxDirection.Column}>
<Link>+33 6 4512 5158</Link>
<Link href="mailto:[email protected]">[email protected]</Link>
<Link href="https://github.com/SAP/ui5-webcomponents-react">
https://github.com/SAP/ui5-webcomponents-react
</Link>
</FlexBox>
<FlexBox direction={FlexBoxDirection.Column} style={{ width: '200px' }}>
<Label>Achieved Goals</Label>
<ProgressIndicator value={80} valueState={ValueState.Success} />
</FlexBox>
<FlexBox direction={FlexBoxDirection.Column}>
<Label>San Jose</Label>
<Label>California, USA</Label>
</FlexBox>
</>
}
breadcrumbs={
<Breadcrumbs>
<Link href="PathSegment1">Path1</Link>
<Link href="PathSegment2">Path2</Link>
<Link href="PathSegment3"></Link>
<Breadcrumbs currentLocationText="Employee Details">
<Link>Manager Cockpit</Link>
<Link>My Team</Link>
</Breadcrumbs>
}
keyInfos={
<>
<div>
<Title level={TitleLevel.H5}>Key Info 1</Title>
<Text>Value 1</Text>
</div>
<div>
<Title level={TitleLevel.H5}>Key Info 2</Title>
<Text>Value 2</Text>
</div>
<div>
<Title level={TitleLevel.H5}>Key Info 3</Title>
<Text>Value 3</Text>
</div>
</>
}
title={props.title}
subTitle={props.subTitle}
headerActions={[
Expand All @@ -74,30 +69,133 @@ export const renderDemo = (props) => {
style={{ height: '700px' }}
headerContentPinnable={props.headerContentPinnable}
>
<ObjectPageSection title="Test 1" id="1">
<div style={{ height: '200px' }}>Test1</div>
<ObjectPageSection title="Goals" id="goals">
<Form columnsL={3} columnsXL={3} labelSpanXL={6} labelSpanL={6} columnsM={2} labelSpanM={6}>
<FormItem label="Evangelize the UI framework across the company">
<Text>4 days overdue - Cascaded</Text>
</FormItem>
<FormItem label="Get trained in development management direction">
<Text>Due Nov, 21</Text>
</FormItem>
<FormItem label="Mentor junior developers">
<Text>Due Dec, 31 - Cascaded</Text>
</FormItem>
</Form>
</ObjectPageSection>
<ObjectPageSection title="Test 2" id="2">
<div style={{ height: '800px' }}>Test2</div>
</ObjectPageSection>
<ObjectPageSection title="Test 3" id="3">
Test1
</ObjectPageSection>
<ObjectPageSection title="Test 4" id="4">
<h1>Section 4</h1>
<ObjectPageSubSection title="SubSection 4.1" id="4.1">
Test 4 SubSection 1
<ObjectPageSection title="Personal" id="personal">
<ObjectPageSubSection title="Connect" id="personal-connect">
<Form columnsXL={4} columnsL={4}>
<FormGroup title="Phone Numbers">
<FormItem label="Home">
<Text>+1 234-567-8901</Text>
</FormItem>
<FormItem label="">
<Text>+1 234-567-5555</Text>
</FormItem>
</FormGroup>
<FormGroup title="Social Accounts">
<FormItem label="LinkedIn">
<Text>/DeniseSmith</Text>
</FormItem>
<FormItem label="Twitter">
<Text>@DeniseSmith</Text>
</FormItem>
</FormGroup>
<FormGroup title="Addresses">
<FormItem label="Home Address">
<Text>2096 Mission Street</Text>
</FormItem>
<FormItem label="Mailing Address">
<Text>PO Box 32114</Text>
</FormItem>
</FormGroup>
<FormGroup title="Mailing Address">
<FormItem label="Work">
<Text>[email protected]</Text>
</FormItem>
</FormGroup>
</Form>
</ObjectPageSubSection>
<ObjectPageSubSection title="SubSection 4.2" id="4.2">
Test 4 SubSection 2

<ObjectPageSubSection title="Payment Information" id="personal-payment-information">
<Form columnsXL={4} columnsL={4}>
<FormGroup title="Salary">
<FormItem label="Bank Transfer">
<Text>Money Bank, Inc.</Text>
</FormItem>
</FormGroup>

<FormGroup title="Payment method for Expenses">
<FormItem label="Extra Travel Expenses">
<Text>Cash 100 USD</Text>
</FormItem>
</FormGroup>
</Form>
</ObjectPageSubSection>
</ObjectPageSection>
<ObjectPageSection title="Test 5" id="5">
<ObjectPageSubSection title="SubSection 5.1" id="5.1">
Content of SubSection 5.1
<ObjectPageSection title="Employment" id="employment">
<ObjectPageSubSection title="Job Information" id="employment-job-information">
<Form columnsXL={4} columnsL={4}>
<FormItem label="Job Classification">
<FlexBox direction={FlexBoxDirection.Column}>
<Text>Senior UI Developer</Text>
<Label>(UIDEV-SR)</Label>
</FlexBox>
</FormItem>
<FormItem label="Job Title">
<Text>Developer</Text>
</FormItem>
<FormItem label="Employee Class">
<Text>Employee</Text>
</FormItem>
<FormItem label="Manager">
<FlexBox direction={FlexBoxDirection.Column}>
<Text>Dan Smith</Text>
<Label>Development Manager</Label>
</FlexBox>
</FormItem>
<FormItem label="Pay Grade">
<Text>Salary Grade 18 (GR-14)</Text>
</FormItem>
<FormItem label="FTE">
<Text>1</Text>
</FormItem>
</Form>
</ObjectPageSubSection>
<ObjectPageSubSection title="Employee Details" id="employment-employee-details">
<Form columnsXL={4} columnsL={4}>
<FormItem label="Start Date">
<Text>Jan 01, 2018</Text>
</FormItem>
<FormItem label="End Date">
<Text>Dec 31, 9999</Text>
</FormItem>
<FormItem label="Payroll Start Date">
<Text>Jan 01, 2018</Text>
</FormItem>
<FormItem label="Benefits Start Date">
<Text>Jul 01, 2018</Text>
</FormItem>
<FormItem label="Company Car Eligibility">
<Text>Jan 01, 2021</Text>
</FormItem>
<FormItem label="Equity Start Date">
<Text>Jul 01, 2018</Text>
</FormItem>
</Form>
</ObjectPageSubSection>
<ObjectPageSubSection title="SubSection 5.2" id="5.2">
Content of SubSection 5.2
<ObjectPageSubSection title="Job Relationship" id="employment-job-relationship">
<Form columnsXL={4} columnsL={4}>
<FormItem label="Manager">
<Text>John Doe</Text>
</FormItem>
<FormItem label="Scrum Master">
<Text>Michael Adams</Text>
</FormItem>
<FormItem label="Product Owner">
<Text>John Miller</Text>
</FormItem>
</Form>
</ObjectPageSubSection>
</ObjectPageSection>
</ObjectPage>
Expand Down Expand Up @@ -173,11 +271,12 @@ export default {
}
},
args: {
title: 'Object Page Title',
subTitle: 'Object Page Sub Title',
title: 'Denise Smith',
subTitle: 'Senior UI Developer',
mode: ObjectPageMode.Default,
showHideHeaderButton: true,
selectedSectionId: '1',
headerContentPinnable: true
selectedSectionId: 'goals',
headerContentPinnable: true,
imageShapeCircle: true
}
};