From 65e38742f11b2c060821e99e13dfd386433474ff Mon Sep 17 00:00:00 2001
From: Oliver Buchtala <oliver.buchtala@gmail.com>
Date: Thu, 23 Apr 2020 12:10:09 +0200
Subject: [PATCH] Use a 'Section' for showing 'attached to'.

---
 src/components/AttachedToComponent.js | 4 ++--
 src/components/Section.js             | 9 ++++-----
 styles/_file.scss                     | 4 ++++
 styles/_resource.scss                 | 4 ++++
 styles/_section.scss                  | 6 +++++-
 5 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/AttachedToComponent.js b/src/components/AttachedToComponent.js
index daa526e..b75663f 100644
--- a/src/components/AttachedToComponent.js
+++ b/src/components/AttachedToComponent.js
@@ -1,5 +1,6 @@
 import { Component, $$, domHelpers } from 'substance'
 import getLabel from './_getLabel'
+import Section from './Section'
 
 export default class AttachedToComponent extends Component {
   constructor (...args) {
@@ -20,7 +21,7 @@ export default class AttachedToComponent extends Component {
   render () {
     const { document, nodeId } = this.props
     const relationships = Array.from(this._relationshipIndex.get(nodeId))
-    const el = $$('div', { class: 'sc-attached-to' })
+    const el = $$(Section, { class: 'sc-attached-to', label: 'Attached to', hideIfEmpty: true })
     if (relationships.length > 0) {
       const items = relationships.map(targetId => {
         // ATTENTION: this assumes that we have ony Figure panels where files are attached to
@@ -31,7 +32,6 @@ export default class AttachedToComponent extends Component {
       if (items.length > 1) {
         items.sort((a, b) => a.label.localeCompare(b.label))
       }
-      el.append($$('span', { class: 'se-label' }, 'Attached to: '))
       for (const item of items) {
         el.append(
           $$('button', { class: 'se-panel-link' }, item.label).on('click', (e) => {
diff --git a/src/components/Section.js b/src/components/Section.js
index c0c6a67..a5a0571 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -1,12 +1,8 @@
 import { Component, $$ } from 'substance'
 
-// NOTE: I have a feeling the section component is misplaced in some areas currently
-// e.g. using it as a panel label ("A") or in the table of contents "Additional Information"
-// I suggest to flatten things, and use Heading in 
-
 export default class Section extends Component {
   render () {
-    const { name, label, children } = this.props
+    const { name, label, children, hideIfEmpty } = this.props
     const el = $$('div', { class: 'sc-section' })
     if (name) {
       el.addClass(`sm-${name}`)
@@ -18,6 +14,9 @@ export default class Section extends Component {
     if (children && children.length > 0) {
       el.append(children)
     }
+    if (hideIfEmpty && children.length === 0) {
+      el.addClass('sm-hidden')
+    }
     return el
   }
 }
diff --git a/styles/_file.scss b/styles/_file.scss
index 3be1b6e..eae37ca 100644
--- a/styles/_file.scss
+++ b/styles/_file.scss
@@ -1,3 +1,7 @@
 .sc-file {
   @include card-style;
+
+  .sc-attached-to {
+    margin-top: var(--default-spacing);
+  }
 }
diff --git a/styles/_resource.scss b/styles/_resource.scss
index dcf94e2..666a75d 100644
--- a/styles/_resource.scss
+++ b/styles/_resource.scss
@@ -1,3 +1,7 @@
 .sc-resource {
   @include card-style;
+
+  .sc-attached-to {
+    margin-top: var(--default-spacing);
+  }
 }
diff --git a/styles/_section.scss b/styles/_section.scss
index aa56e0f..7c10f2b 100644
--- a/styles/_section.scss
+++ b/styles/_section.scss
@@ -1,4 +1,8 @@
 .sc-section > .se-section-label {
   @include ts-small-interface;
   color: var(--quiet-text-color);
-}
\ No newline at end of file
+}
+
+.sc-section.sm-hidden {
+  display: none;
+}