feat(header): add documentation ref

Related to bpmn-io/bpmn-js-properties-panel#616

assets/properties-panel.css

@@ -185,6 +185,11 @@
   margin-top: -6px;
 }
 
+.bio-properties-panel-header-actions {
+  margin-left: auto;
+  margin-top: auto;
+}
+
 /**
  * Scroll container
  */

src/components/Header.js

@@ -1,5 +1,12 @@
+import { ExternalLinkIcon } from './icons';
+
 /**
- * @typedef { { getElementLabel: Function, getTypeLabel: Function, getElementIcon: Function } } HeaderProvider
+ * @typedef { {
+ *  getElementLabel: (element: djs.model.base) => string,
+ *  getTypeLabel: (element: djs.model.base) => string,
+ *  getElementIcon: (element: djs.model.base) => import('preact').Component,
+ *  getDocumentationRef: (element: djs.model.base) => string
+ * } } HeaderProvider
  */
 
 /**
@@ -15,13 +22,16 @@ export default function Header(props) {
   } = props;
 
   const {
+    getElementIcon,
+    getDocumentationRef,
     getElementLabel,
     getTypeLabel,
-    getElementIcon
   } = headerProvider;
 
   const label = getElementLabel(element);
   const type = getTypeLabel(element);
+  const documentationRef = getDocumentationRef && getDocumentationRef(element);
+
   const ElementIcon = getElementIcon(element);
 
   return (<div class="bio-properties-panel-header">
@@ -30,10 +40,18 @@ export default function Header(props) {
     </div>
     <div class="bio-properties-panel-header-labels">
       <div title={ type } class="bio-properties-panel-header-type">{ type }</div>
-      { getElementLabel(element) ?
+      { label ?
         <div title={ label } class="bio-properties-panel-header-label">{ label }</div> :
         null
       }
     </div>
+    <div class="bio-properties-panel-header-actions">
+      { documentationRef ?
+        <a rel="noopener" class="bio-properties-panel-header-link" href={ documentationRef } target="_blank">
+          <ExternalLinkIcon />
+        </a> :
+        null
+      }
+    </div>
   </div>);
 }

src/components/icons/index.js

@@ -1,5 +1,6 @@
 export { default as ArrowIcon } from './Arrow.svg';
 export { default as CreateIcon } from './Create.svg';
 export { default as DeleteIcon } from './Delete.svg';
+export { default as ExternalLinkIcon } from './ExternalLink.svg';
 export { default as FeelRequiredIcon } from './FeelRequired.svg';
 export { default as FeelOptionalIcon } from './FeelOptional.svg';

test/spec/components/Header.spec.js

@@ -18,7 +18,7 @@ import Header from 'src/components/Header';
 insertCoreStyles();
 
 
-describe('<Header>', function() {
+describe.only('<Header>', function() {
 
   let container;
 
@@ -142,6 +142,44 @@ describe('<Header>', function() {
     expect(iconNode).to.exist;
   });
 
+  it('should NOT render documentation ref', function() {
+
+    // given
+    const provider = {
+      getElementLabel: () => 'name',
+      getTypeLabel: () => 'type',
+      getElementIcon: () => 'icon'
+    };
+
+    // when
+    const result = render(<Header headerProvider={ provider } />, { container });
+
+    const documentationNode = domQuery('.bio-properties-panel-header-link', result.container);
+
+    // then
+    expect(documentationNode).to.not.exist;
+  });
+
+
+  it('should render documentation ref', function() {
+
+    // given
+    const provider = {
+      getElementLabel: () => 'name',
+      getTypeLabel: () => 'type',
+      getElementIcon: () => 'icon',
+      getDocumentationRef: () => 'https://example.com'
+    };
+
+    // when
+    const result = render(<Header headerProvider={ provider } />, { container });
+
+    const documentationNode = domQuery('.bio-properties-panel-header-link', result.container);
+
+    // then
+    expect(documentationNode).to.exist;
+  });
+
 
   describe('a11y', function() {