build(aio): render grouped overloads

(cherry picked from commit be3352a084)

aio/tools/transforms/templates/api/function.template.html

@@ -2,15 +2,14 @@
 {% extends 'export-base.template.html' -%}
 
 {% block details %}
-{% if doc.overloads.length === 1 %}
-  <code-example language="ts" hideCopy="true">
-  function {$ doc.overloads[0].name $}{$ params.paramList(doc.overloads[0].parameters) $}
-  {%- if doc.overloads[0].type %}: {$ doc.overloads[0].type | escape $}{% endif %};
-  </code-example>
-  {% include "includes/description.html" %}
-{% else %}
+<code-example language="ts" hideCopy="true" class="no-box api-heading">
+function {$ doc.name $}{$ params.paramList(doc.parameters) $}
+{%- if doc.type %}: {$ doc.type | escape $}{% endif %};
+</code-example>
+{% include "includes/description.html" %}
+{% if doc.overloads.length %}
   <h2>Overloads</h2>{% for overload in doc.overloads %}
-  <code-example language="ts" hideCopy="true">
+  <code-example language="ts" hideCopy="true" class="no-box api-heading">
   function {$ overload.name $}{$ params.paramList(overload.parameters) $}
   {%- if overload.type %}: {$ overload.type | escape $}{% endif %};
   </code-example>

aio/tools/transforms/templates/api/includes/constructor.html

@@ -2,7 +2,7 @@
 <section class="constructor">
   <a id="{$ doc.constructorDoc.name $}"></a>
   <h2>Constructor</h2>
-  <code-example hideCopy="true">{$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) $}</code-example>
+  <code-example hideCopy="true" class="no-box api-heading">{$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) $}</code-example>
   {% if not doc.constructorDoc.notYetDocumented %}{$ doc.constructorDoc.description | marked $}{% endif %}
 </section>
 {% endif %}

aio/tools/transforms/templates/api/lib/memberHelpers.html

@@ -22,7 +22,7 @@
 {%- macro renderMemberDetail(member, cssClass) -%}
 <div class="{$ cssClass $}">
   <a id="{$ member.anchor $}"></a>
-  <code-example hideCopy="true">{$ renderMember(member) $}</code-example>
+  <code-example hideCopy="true" class="no-box api-heading">{$ renderMember(member) $}</code-example>
   {%- if not member.notYetDocumented %}
   {$ member.description | marked $}
   {% endif -%}
@@ -35,7 +35,17 @@
   <h2>{$ titleText $}</h2>
   {% for member in members %}{% if not member.internal %}
     {$ renderMemberDetail(member, itemClass) $}
-    {% if not loop.last %}<hr>{% endif %}
+    {% if member.overloads.length %}
+    <details class="overloads">
+      <summary>Overloads</summary>
+      <div class="detail-contents">
+        {% for overload in member.overloads %}
+        {$ renderMemberDetail(overload, itemClass + '-overload') $}
+        {% endfor %}
+      </div>
+    </details>
+    {% endif %}
+    {% if not loop.last %}<hr class="hr-margin">{% endif %}
   {% endif %}{% endfor %}
 </section>
 {% endif %}

aio/tools/transforms/templates/api/var.template.html

@@ -1,7 +1,7 @@
 {% extends 'export-base.template.html' %}
 
 {% block details %}
-  <code-example language="ts" hideCopy="true">
+  <code-example language="ts" hideCopy="true" class="no-box api-heading">
   const {$ doc.name $}: {$ doc.symbolTypeName or 'any' $};
   </code-example>
   {% include "includes/description.html" %}