From 0b4c5fd08f6466e323a01d367132e36a0263c686 Mon Sep 17 00:00:00 2001 From: Clemens Maier Date: Tue, 10 Dec 2019 17:34:39 +0100 Subject: [PATCH 1/8] Introduce key info area and Breadcrumbs --- .../components/ObjectPage/ObjectPage.jss.ts | 6 +- .../components/ObjectPage/ObjectPage.test.tsx | 27 + .../__snapshots__/ObjectPage.test.tsx.snap | 559 ++++++++++++------ .../components/ObjectPage/demo.stories.tsx | 28 +- .../main/src/components/ObjectPage/index.tsx | 91 ++- 5 files changed, 514 insertions(+), 197 deletions(-) diff --git a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts index e3144db66ec..5ce4375d0c9 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts +++ b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts @@ -129,6 +129,7 @@ const styles = ({ parameters }: JSSTheme) => ({ wordBreak: 'break-word', verticalAlign: 'baseline', paddingTop: '0.5rem', + paddingBottom: '0.5rem', fontSize: '0.875rem', color: parameters.sapUiContentLabelColor }, @@ -148,7 +149,7 @@ const styles = ({ parameters }: JSSTheme) => ({ }, stickied: {}, headerContent: { - paddingTop: '1.5rem', + //paddingTop: '1.5rem', paddingBottom: '0.25rem', transition: 'max-height 0.5s', maxHeight: '500px', @@ -202,6 +203,9 @@ const styles = ({ parameters }: JSSTheme) => ({ image: { width: '100%', height: '100%' + }, + keyInfoItem: { + marginLeft: '1rem' } }); diff --git a/packages/main/src/components/ObjectPage/ObjectPage.test.tsx b/packages/main/src/components/ObjectPage/ObjectPage.test.tsx index 906846c54d5..dba3896d958 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.test.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.test.tsx @@ -9,6 +9,8 @@ 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 { Text } from '@ui5/webcomponents-react/lib/Text'; +import { Title } from '../../webComponents/Title'; +import { TitleLevel } from '../..'; const renderHeaderContent = () => (
@@ -164,4 +166,29 @@ describe('ObjectPage', () => { ); expect(wrapper.render()).toMatchSnapshot(); }); + + test('Key Infos', () => { + const wrapper = mountThemedComponent( + + Key Info 1 + Value 1 + , + <> + Key Info 2 + Value 2 + , + <> + Key Info 3 + Value 3 + + ]} + > + Test + Test 2 + + ); + expect(wrapper.render()).toMatchSnapshot(); + }); }); diff --git a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap index 485e7af4b26..0ee950ce7c2 100644 --- a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap +++ b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap @@ -43,16 +43,24 @@ exports[`ObjectPage IconTabBar Mode 1`] = ` -

- Fiori Object Page Title -

- - Sub Title - +
+

+ Fiori Object Page Title +

+ + Sub Title + +
+
@@ -327,15 +335,42 @@ exports[`ObjectPage Just Some Sections 1`] = ` -

- +
+
+

+ +

+
+
-
-
-
-
+
+
+
+
+
+
+
+
+`; + +exports[`ObjectPage Key Infos 1`] = ` +
+
+
+
+
+
+ +
+
+
+
+
@@ -402,6 +587,28 @@ exports[`ObjectPage Just Some Sections 1`] = `
+
+
+
+
+
+
+ Test 2 +
+
+
-

- +
+
+

+ +

+

+