feat(ObjectPage): Introduce Breadcrumbs and key infos (#246)

Author: clemai

babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   presets: ['babel-preset-react-app'],
-  plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
+  plugins: ['@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining']
 };

package.json

@@ -15,6 +15,7 @@
     "prettier:all": "prettier --write --config ./prettier.config.js \"packages/**/*.{ts,tsx}\""
   },
   "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
     "@storybook/addon-actions": "5.3.0-beta.31",
     "@storybook/addon-docs": "5.3.0-beta.31",
     "@storybook/addon-info": "5.3.0-beta.31",

packages/main/src/components/ObjectPage/ObjectPage.jss.ts

@@ -1,5 +1,6 @@
 import { JSSTheme } from '../../interfaces/JSSTheme';
 import { ZIndex } from '../../enums/ZIndex';
+import { CSSProperties } from 'react';
 
 const styles = ({ parameters }: JSSTheme) => ({
   objectPage: {
@@ -129,6 +130,7 @@ const styles = ({ parameters }: JSSTheme) => ({
     wordBreak: 'break-word',
     verticalAlign: 'baseline',
     paddingTop: '0.5rem',
+    paddingBottom: '0.5rem',
     fontSize: '0.875rem',
     color: parameters.sapUiContentLabelColor
   },
@@ -148,7 +150,7 @@ const styles = ({ parameters }: JSSTheme) => ({
   },
   stickied: {},
   headerContent: {
-    paddingTop: '1.5rem',
+    //paddingTop: '1.5rem',
     paddingBottom: '0.25rem',
     transition: 'max-height 0.5s',
     maxHeight: '500px',
@@ -160,7 +162,7 @@ const styles = ({ parameters }: JSSTheme) => ({
     '& $headerContent': {
       paddingTop: 0,
       '& > *': {
-        display: 'inline-block',
+        display: 'flex',
         verticalAlign: 'top',
         '&:not(:first-child)': {
           marginRight: '2rem',
@@ -192,6 +194,10 @@ const styles = ({ parameters }: JSSTheme) => ({
       lineHeight: '1.5rem'
     }
   },
+  headerCustomContentItem: {
+    marginLeft: '1rem'
+  },
+
   headerImage: {
     maxWidth: '5rem',
     maxHeight: '5rem',
@@ -202,6 +208,28 @@ const styles = ({ parameters }: JSSTheme) => ({
   image: {
     width: '100%',
     height: '100%'
+  },
+  keyInfos: {
+    '& > *': {
+      marginLeft: '1rem'
+    },
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  flexBoxRow: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  flexBoxColumn: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  flexBoxCenter: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  avatar: {
+    marginRight: '1rem'
   }
 });
 

packages/main/src/components/ObjectPage/ObjectPage.test.tsx

@@ -9,6 +9,9 @@ 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 '@ui5/webcomponents-react/lib/Title';
+import { Breadcrumbs } from '@ui5/webcomponents-react/lib/Breadcrumbs';
+import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 
 const renderHeaderContent = () => (
   <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -164,4 +167,39 @@ describe('ObjectPage', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  const renderKeyInfos = () => (
+    <>
+      <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>
+    </>
+  );
+
+  const renderBreadcrumbs = () => (
+    <Breadcrumbs>
+      <Link href="PathSegment1">Path1</Link>
+      <Link href="PathSegment2">Path2</Link>
+      <Link href="PathSegment3"></Link>
+    </Breadcrumbs>
+  );
+
+  test('Key Infos', () => {
+    const wrapper = mountThemedComponent(
+      <ObjectPage renderKeyInfos={renderKeyInfos} renderBreadcrumbs={renderBreadcrumbs}>
+        <ObjectPageSection id={'1'}>Test</ObjectPageSection>
+        <ObjectPageSection id={'2'}>Test 2</ObjectPageSection>
+      </ObjectPage>
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });