Merge pull request #177 from ember-learn/fix-api-docs-meta-data-section

[bugfix] Fixes styling for new Meta Data panel

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('.'));
-  })
+  }),
 });