build(aio): render grouped overloads

aio/src/styles/2-modules/_api-info-bar.scss

@@ -1,13 +0,0 @@
-.api-info-bar {
-    max-width: 800px;
-    text-align: left;
-
-    span {
-        margin: 0 16px 0 0;
-
-        @media screen and (max-width: 600px) {
-            display: block;
-        }
-
-    }
-}

aio/src/styles/2-modules/_api-pages.scss

@@ -0,0 +1,23 @@
+.api-info-bar {
+  max-width: 800px;
+  text-align: left;
+
+  span {
+    margin: 0 16px 0 0;
+
+    @media screen and (max-width: 600px) {
+      display: block;
+    }
+
+  }
+}
+
+.api-heading {
+  margin-top: 24px;
+  margin-bottom: 18px;
+  font-size: 16px;
+}
+
+.overloads .detail-contents {
+  padding-top: 0;
+}

aio/src/styles/2-modules/_details.scss

@@ -0,0 +1,51 @@
+/*
+ * General styling to make detail/summary tags look a bit more material
+ * To get the best out of it you should structure your usage like this:
+ *
+ * ```
+ * <details>
+ *   <summary>Some title</summary>
+ *   <div class="details-content">
+ *     Some content
+ *   </div>
+ *  </details>
+ *
+ */
+
+summary {
+  cursor: pointer;
+  font-size: 16px;
+  position: relative;
+  padding: 16px 24px;
+  color: $black;
+  height: 16px;
+  display: block; // Remove the built in details marker in FF
+
+  &::-webkit-details-marker {
+    display: none; // Remove the built in details marker in webkit
+  }
+
+  &::after {
+    content: '\E5CE'; // See https://material.io/icons/#ic_expand_less
+    font-family: 'Material Icons';
+    font-size: 24px;
+    -webkit-font-smoothing: antialiased;
+    @include rotate(0deg); // We will rotate 180 degrees when details is open
+
+    position: absolute;
+    top: 12px;
+    right: 22px;
+  }
+}
+
+details {
+  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+
+  .detail-contents {
+    padding: 16px 24px;
+  }
+
+  &[open] > summary::after {
+    @include rotate(180deg); // Rotate the icon
+  }
+}

aio/src/styles/2-modules/_modules-dir.scss

@@ -3,7 +3,7 @@
    ============================== */
 
    @import 'alert';
-   @import 'api-info-bar';
+   @import 'api-pages';
    @import 'api-list';
    @import 'banner';
    @import 'buttons';
@@ -12,6 +12,7 @@
    @import 'code';
    @import 'contribute';
    @import 'contributor';
+   @import 'details';
    @import 'edit-page-cta';
    @import 'features';
    @import 'filetree';

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" %}