[bugfix] Fixes styling for new Meta Data panel

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-meta-panel/component.js

@@ -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-meta-panel/header/component.js

@@ -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-params/component.js → addon/components/api/x-section/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('.'));
-  })
+  }),
 });

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

@@ -0,0 +1,62 @@
+<div data-test-item>
+  <h3
+    id={{item.name}}
+    data-text="{{item.name}}"
+    data-test-item-header
+    class="docs-h3 font-mono font-normal"
+  >
+    {{#if (eq item.exportType 'default')}}
+      <span class="border border-grey-light align-text-top leading-loose text-xs pl-2 mr-2 py-1 rounded">
+        Default
+      </span>
+    {{/if}}
+
+    {{#if (or item.isClass item.isComponent)}}
+      {{#link-to 'docs.api.item' (concat 'modules/' item.id) class='hover:underline'}}
+        <strong>{{item.name}}</strong>
+      {{/link-to}}
+    {{else}}
+      {{#if (eq item.exportType 'default')}}
+        <span class="item-section__default-label">Default</span>
+      {{/if}}
+
+      <a href="#{{item.name}}" class="heading-anchor">
+        {{type-signature item}}
+      </a>
+    {{/if}}
+  </h3>
+
+  <p data-test-item-description>
+    {{{item.description}}}
+  </p>
+
+  {{#if (or item.exportType shouldDisplayParams)}}
+    {{#api/x-meta-panel as |panel|}}
+      {{#if item.exportType}}
+        {{#panel.header}}
+          Import Path
+        {{/panel.header}}
+
+        {{api/x-import-path item=item}}
+      {{/if}}
+
+      {{#if shouldDisplayParams}}
+        {{#panel.header}}
+          Params
+        {{/panel.header}}
+
+        <table class="mb-6" data-test-item-params>
+          <tbody>
+            {{#each item.params as |param|}}
+              <tr data-test-item-param>
+                <td><span class="font-mono font-bold border-r border-grey-light pr-2">{{param.name}}</span></td>
+                <td><span class="font-mono border-r border-grey-light px-2">{{param.type}}</span></td>
+                <td class="pl-2">{{param.description}}</td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      {{/if}}
+    {{/api/x-meta-panel}}
+  {{/if}}
+</div>

addon/components/api/x-sections/component.js

@@ -1,7 +1,21 @@
 import Component from '@ember/component';
-import layout from './template';
+import hbs from 'htmlbars-inline-precompile';
 
 export default Component.extend({
-  layout,
-  tagName: ''
+  tagName: '',
+  layout: hbs`
+    {{#each-in sections as |section items|}}
+      {{#if items}}
+        <section data-test-api-section class="item-section">
+          <h2 data-test-section-header={{section}} class="docs-h2">
+            {{capitalize section}}
+          </h2>
+
+          {{#each items as |item|}}
+            {{api/x-section item=item}}
+          {{/each}}
+        </section>
+      {{/if}}
+    {{/each-in}}
+  `,
 });