wip wip add link icon to header

Related to bpmn-io/bpmn-js-properties-panel#616
bpmn-io · Mar 25, 2022 · 803a367 · 803a367
1 parent f158b24
commit 803a367
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/assets/properties-panel.css b/assets/properties-panel.css
@@ -169,6 +169,10 @@
   user-select: none;
 }
 
+.bio-properties-panel-header-actions {
+  margin-left: auto;
+}
+
 .bio-properties-panel-header-type {
   font-size: var(--text-size-smallest);
   font-weight: 600;
@@ -185,6 +189,11 @@
   margin-top: -6px;
 }
 
+.bio-properties-panel-header-actions {
+  margin-left: auto;
+  margin-top: auto;
+}
+
 /**
  * Scroll container
  */

diff --git a/src/components/Header.js b/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,25 +22,37 @@ 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);
 
+  // todo: properly style icon
   return (<div class="bio-properties-panel-header">
     <div class="bio-properties-panel-header-icon">
       { ElementIcon && <ElementIcon width="32" height="32" viewBox="0 0 32 32" /> }
     </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>);
 }
diff --git a/src/components/icons/ExternalLink.svg b/src/components/icons/ExternalLink.svg
diff --git a/src/components/icons/index.js b/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';