From e371b226fade18f03fb09ed5cee61f0adb611fd3 Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Fri, 18 May 2018 13:46:26 +0100
Subject: [PATCH] build(aio): rearrange decorator API doc template (#24000)

The overview of the decorator options is now a table.
The detailed description of each option is now a full section.

PR Close #24000
---
 aio/src/styles/2-modules/_api-pages.scss      |  2 +-
 .../templates/api/decorator.template.html     | 38 ++++++++++++++++++-
 .../api/includes/decorator-overview.html      | 35 ++++++++++++++---
 3 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss
index 7bfdb19556..00a3bb1c9b 100644
--- a/aio/src/styles/2-modules/_api-pages.scss
+++ b/aio/src/styles/2-modules/_api-pages.scss
@@ -30,7 +30,7 @@
     }
   }
 
-  .method-table {
+  .method-table, .option-table {
     h3 {
       margin: 6px 0;
       font-weight: bold;
diff --git a/aio/tools/transforms/templates/api/decorator.template.html b/aio/tools/transforms/templates/api/decorator.template.html
index 75e43cf6ec..050240a875 100644
--- a/aio/tools/transforms/templates/api/decorator.template.html
+++ b/aio/tools/transforms/templates/api/decorator.template.html
@@ -4,6 +4,40 @@
 
 {% block overview %}{% include "includes/decorator-overview.html" %}{% endblock %}
 {% block details %}
-  {% include "includes/description.html" %}
-  {$ memberHelper.renderProperties(doc.members, 'metadata-members', 'metadata-member', 'Options') $}
+{% include "includes/description.html" %}
+
+<section class="decorator-options">
+  <h2>Options</h2>
+  {% for option in doc.members %}
+  <a id="{$ option.anchor $}"></a>
+  <table class="is-full-width option-table">
+    <thead><tr><th><h3>{$ option.name $}</h3></th></tr></thead>
+    <tbody>
+      <tr>
+        <td>
+          {% if option.shortDescription %}{$ option.shortDescription | marked $}{% endif %}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code-example language="ts" hideCopy="true" class="no-box api-heading">
+          {$ option.name $}: {$ option.type | escape $}
+          </code-example>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {%- if option.description %}
+          {$ option.description | marked({ h3: 'h4' }) $}
+          {% endif %}
+
+          {%- if option.usageNotes %}
+          {$ option.usageNotes | marked({ h3: 'h4' }) $}
+          {% endif %}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  {% endfor %}
+</section>
 {% endblock %}
diff --git a/aio/tools/transforms/templates/api/includes/decorator-overview.html b/aio/tools/transforms/templates/api/includes/decorator-overview.html
index a8328500d1..44f06484c3 100644
--- a/aio/tools/transforms/templates/api/includes/decorator-overview.html
+++ b/aio/tools/transforms/templates/api/includes/decorator-overview.html
@@ -1,10 +1,33 @@
-{% import "lib/memberHelpers.html" as memberHelper -%}
+{% import "lib/descendants.html" as descendants -%}
+
+{% macro renderOptionsTable(doc) %}
+<table class="is-full-width list-table option-table">
+  <thead>
+    <tr><th>Option</th><th>Description</th></tr>
+  </thead>
+  <tbody>
+  {%- for option in doc.members %}
+    <tr class="option">
+      <td>
+        <a class="code-anchor" href="{$ doc.path $}#{$ option.anchor | urlencode $}">
+          <code>{$ option.name $}</code>
+        </a>
+      </td>
+      <td>{$ option.shortDescription | marked $}</td>
+    </tr>
+    {% endfor -%}
+  </tbody>
+</table>
+
+{% for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
+<h3>Inherited from <a class="code-anchor" href="{$ ancestor.doc.path $}">{$ ancestor.doc.id $}</a></h3>
+{$ renderOptionsTable(ancestor.doc) $}
+{% endif %}{% endfor %}
+{% endmacro %}
 
 {% if doc.members.length %}
 <section class="decorator-overview">
-<code-example language="ts" hideCopy="true">
-@{$ doc.name $}{$ doc.typeParams | escape $}({ {$ memberHelper.renderMembers(doc) $}
-})
-</code-example>
+  {$ renderOptionsTable(doc) $}
+  {$ descendants.renderDescendants(doc, 'decorator', 'Subclasses') $}
 </section>
-{% endif %}
\ No newline at end of file
+{% endif %}