[style] Cleans up the API docs

Cleans up the API docs visually by putting all metadata in a
single panel at the end of each items' section

Author: pzuraq

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

@@ -3,5 +3,5 @@ import layout from './template';
 
 export default Component.extend({
   layout,
-  classNames: ['import-path']
+  tagName: ''
 });

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

@@ -1,8 +1,3 @@
 .import-path {
   font-family: Monaco, monospace;
-  font-size: 0.85em;
-
-  padding: 6px 10px;
-  border: 1px solid #E4E4E4;
-  border-radius: 6px;
 }

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

@@ -1,10 +1,18 @@
-<span class="hljs-keyword">import</span>
+{{#if item.exportType}}
+  <h4 class="mb-2 text-grey font-bold tracking-wide uppercase text-xs">
+    Import Path
+  </h4>
 
-{{#if (eq item.exportType "default")}}
-  {{item.name}}
-{{else}}
- { {{item.name}} }
-{{/if}}
+  <div class="import-path mb-6" 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>;
+    <span class="hljs-keyword">from</span>
+    <span class="hljs-string">'{{item.file}}'</span>;
+  </div>
+{{/if}}

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

@@ -4,7 +4,7 @@ import layout from './template';
 
 export default Component.extend({
   layout,
-  classNames: ['item-params'],
+  tagName: '',
 
   /**
    * Params shouldn't be displayed when there are no descriptions and no subparams,

addon/components/api/x-params/style.scss

@@ -1,30 +1,13 @@
 .item-params {
-  h4 {
-    margin: 1em 0;
-  }
-
-  table {
-    font-size: 0.85em;
-    width: 100%;
-
-    padding: 6px 10px;
-    border: 1px solid #E4E4E4;
-    border-radius: 6px;
+  width: 100%;
 
-    th {
-      text-align: left;
-      color: #777;
-      padding: 3px 10px;
-    }
-
-    td {
-      padding: 0 20px 0 10px;
-    }
+  td {
+    padding-right: 1em;
+  }
 
-    td:last-of-type {
-      width: 99%;
-      padding-right: 10px;
-    }
+  td:last-of-type {
+    width: 99%;
+    padding-right: 0;
   }
 }
 

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

@@ -1,14 +1,9 @@
 {{#if shouldDisplayParams}}
-  <h4>Params</h4>
+  <h4 class="mb-2 text-grey font-bold tracking-wide uppercase text-xs">
+    Params
+  </h4>
 
-  <table>
-    {{!-- <thead>
-      <tr>
-        <th>name</th>
-        <th>type</th>
-        <th>description</th>
-      </tr>
-    </thead> --}}
+  <table class="item-params mb-6" data-test-item-params>
     <tbody>
       {{#each params as |param|}}
         <tr data-test-item-param>

addon/components/api/x-sections/style.scss

@@ -23,13 +23,22 @@
 }
 
 .item-section__class-header {
+  .item-section__default-label {
+    line-height: 1.4em;
+    vertical-align: text-top;
+  }
+
   a {
     color: #333;
     font-size: 1.4em;
 
     &:visited {
       color: #999;
     }
+
+    &:before {
+      content: ''
+    }
   }
 }
 

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

@@ -8,36 +8,37 @@
       {{#each items as |item|}}
         <div data-test-item>
           {{#if (or item.isClass item.isComponent)}}
-            <h3 id={{item.name}} data-test-item-header class="item-section__class-header mb-1">
-              {{#link-to 'docs.api.item' (concat 'root/' item.id)}}
-                {{#if (eq item.exportType 'default')}}
-                  <span class="item-section__default-label">Default</span>
-                {{/if}}
+            <h3 id={{item.name}} data-test-item-header class="item-section__class-header">
+              {{#if (eq item.exportType 'default')}}
+                <span class="item-section__default-label">Default</span>
+              {{/if}}
+
+              {{#link-to 'docs.api.item' (concat 'modules/' item.id)}}
                 {{item.name}}
               {{/link-to}}
             </h3>
 
             {{{item.description}}}
           {{else}}
-            <h3 id={{item.name}} data-test-item-header data-text="{{item.name}}" class="docs-h3 mb-1">
-              <a href="#{{item.name}}" class="docs-header-link">
-                {{#if (eq item.exportType 'default')}}
-                  <span class="item-section__default-label">Default</span>
-                {{/if}}
+            <h3 id={{item.name}} data-test-item-header data-text="{{item.name}}" class="docs-h3">
+              {{#if (eq item.exportType 'default')}}
+                <span class="item-section__default-label">Default</span>
+              {{/if}}
 
+              <a href="#{{item.name}}" class="docs-header-link">
                 {{type-signature item}}
               </a>
             </h3>
 
-            {{#if item.exportType}}
-              {{api/x-import-path data-test-import-path=true item=item}}
-            {{/if}}
-
             <p data-test-item-description>
               {{{item.description}}}
             </p>
 
-            {{api/x-params data-test-item-params=true params=item.params}}
+            <div class="px-6 pt-3 mt-4 border border-grey-light rounded text-sm">
+              {{api/x-import-path item=item}}
+
+              {{api/x-params params=item.params}}
+            </div>
           {{/if}}
         </div>
       {{/each}}

addon/tailwind/components/docs-md.css

@@ -20,7 +20,7 @@
 .docs-h3,
 .docs-md__h3 a,
 .docs-h3 a {
-  @apply pt-4 mb-2 text-grey-darkest leading-tight no-underline;
+  @apply pt-4 mb-1 text-grey-darkest leading-tight no-underline;
 }
 
 .docs-md p {