[bugfix] Fixes styling for new Meta Data panel

Fixes the new metadata panel, ensuring its only shown when it actually has
content. Refactored some of the API docs components to be simpler, more
reusable, and drop custom styles in general as well.

Author: pzuraq

addon/components/api/x-class/template.hbs

@@ -3,18 +3,36 @@
 {{! wrapping in a div seems to work around https://github.com/ember-learn/ember-cli-addon-docs/issues/7 }}
 <div data-test-class-description>{{{class.description}}}</div>
 
-{{#if hasContents}}
-  {{#if hasToggles}}
-    {{api/x-toggles
-      toggles=(hash
-        inherited=(if component.hasInherited showInherited)
-        protected=(if component.hasProtected showProtected)
-        private=(if component.hasPrivate showPrivate)
-        deprecated=(if component.hasDeprecated showDeprecated)
-      )
-    }}
-  {{/if}}
+{{#if (or class.exportType hasToggles)}}
+  {{#api/x-meta-panel as |panel|}}
+    {{#if class.exportType}}
+      {{#panel.header}}
+        Import Path
+      {{/panel.header}}
+
+      {{api/x-import-path item=class}}
+    {{/if}}
+
+    {{#if hasToggles}}
+      {{#panel.header}}
+        Show
+      {{/panel.header}}
 
+      {{#if hasToggles}}
+        {{api/x-toggles
+          toggles=(hash
+            inherited=(if class.hasInherited showInherited)
+            protected=(if class.hasProtected showProtected)
+            private=(if class.hasPrivate showPrivate)
+            deprecated=(if class.hasDeprecated showDeprecated)
+          )
+        }}
+      {{/if}}
+    {{/if}}
+  {{/api/x-meta-panel}}
+{{/if}}
+
+{{#if hasContents}}
   {{api/x-sections
     sections=(hash
       constructors=class.constructors

addon/components/api/x-component/template.hbs

@@ -3,21 +3,30 @@
 {{! wrapping in a div seems to work around https://github.com/ember-learn/ember-cli-addon-docs/issues/7 }}
 <div data-test-component-name>{{{component.description}}}</div>
 
-{{#if hasContents}}
-  {{#if hasToggles}}
-    {{api/x-toggles
-      toggles=(hash
-        inherited=(if component.hasInherited showInherited)
-        internal=(if component.hasInternal showInternal)
-        protected=(if component.hasProtected showProtected)
-        private=(if component.hasPrivate showPrivate)
-        deprecated=(if component.hasDeprecated showDeprecated)
-      )
+{{#if hasToggles}}
+  {{#api/x-meta-panel as |panel|}}
+    {{#panel.header}}
+      Show
+    {{/panel.header}}
+
+    {{#if hasToggles}}
+      {{api/x-toggles
+        toggles=(hash
+          inherited=(if component.hasInherited showInherited)
+          internal=(if component.hasInternal showInternal)
+          protected=(if component.hasProtected showProtected)
+          private=(if component.hasPrivate showPrivate)
+          deprecated=(if component.hasDeprecated showDeprecated)
+        )
 
-      onToggle=(action 'updateFilter')
-    }}
-  {{/if}}
+        onToggle=(action 'updateFilter')
+      }}
+    {{/if}}
+  {{/api/x-meta-panel}}
+{{/if}}
 
+
+{{#if hasContents}}
   {{api/x-sections
     sections=(hash
       constructors=constructors

addon/components/api/x-import-path/component.js

@@ -1,7 +1,20 @@
 import Component from '@ember/component';
-import layout from './template';
+import hbs from 'htmlbars-inline-precompile';
 
 export default Component.extend({
-  layout,
-  tagName: ''
+  tagName: '',
+  layout: hbs`
+    <div class="import-path mb-6 font-mono" data-test-import-path>
+      <span class="hljs-keyword">import</span>
+
+      {{#if (eq item.exportType "default")}}
+        {{item.name}}
+      {{else}}
+      { {{item.name}} }
+      {{/if}}
+
+      <span class="hljs-keyword">from</span>
+      <span class="hljs-string">'{{item.file}}'</span>;
+    </div>
+  `,
 });

addon/components/api/x-import-path/style.scss

@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import hbs from 'htmlbars-inline-precompile';
+
+export default Component.extend({
+  tagName: '',
+  layout: hbs`
+    <div class="px-6 pt-3 mt-4 border border-grey-light rounded text-sm">
+      {{yield (hash
+        header=(component 'api/x-meta-panel/header')
+      )}}
+    </div>
+  `,
+});

addon/components/api/x-import-path/template.hbs

@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import hbs from 'htmlbars-inline-precompile';
+
+export default Component.extend({
+  tagName: '',
+  layout: hbs`
+    <h4 class="mb-2 text-grey font-bold tracking-wide uppercase text-xs">
+      {{yield}}
+    </h4>
+  `,
+});

addon/components/api/x-meta-panel/component.js

@@ -10,9 +10,9 @@ export default Component.extend({
    * Params shouldn't be displayed when there are no descriptions and no subparams,
    * because the information is already displayed in the type signature and redundant
    */
-  shouldDisplayParams: computed('params.[]', function() {
-    let params = this.get('params') || [];
+  shouldDisplayParams: computed('item.params.[]', function() {
+    let params = this.get('item.params') || [];
 
     return params.some(p => p.description || p.name.includes('.'));
-  })
+  }),
 });