From 870c2c2ae87b5ab875fd9f7b6d655f1e5f470777 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 3 Jul 2021 15:29:26 -0700
Subject: [PATCH] docs: render component API typedefs (#721)

* style(component-api): use flush, condensed structured list for prop table

* style(component-api): use small tag variant for reactive props

* docs(component-api): render component typedefs
---
 docs/src/components/ComponentApi.svelte | 28 +++++++++++++++++++------
 docs/svelte.config.js                   |  3 +++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
index de54abb0..2f131f01 100644
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@@ -4,6 +4,7 @@
     slots: [],
     events: [],
     rest_props: undefined,
+    typedefs: [],
   };
 
   import {
@@ -17,6 +18,7 @@
     UnorderedList,
     ListItem,
     Tag,
+    CodeSnippet,
   } from "carbon-components-svelte";
   import InlineSnippet from "./InlineSnippet.svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
@@ -40,7 +42,7 @@
 </script>
 
 <p style="margin-bottom: var(--cds-layout-02)">
-  Component source code:
+  Source code:
   <Link inline size="lg" href="{source}" target="_blank">
     {component.filePath}
     <Launch16 />
@@ -51,9 +53,7 @@
 
 {#if component.props.length > 0}
   <div class="overflow">
-    <StructuredList
-      style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05))"
-    >
+    <StructuredList flush condensed>
       <StructuredListHead>
         <StructuredListRow head>
           <StructuredListCell head>Prop name</StructuredListCell>
@@ -71,9 +71,11 @@
               <InlineSnippet code="{prop.name}" />
               {#if prop.reactive}
                 <div
-                  style="white-space: nowrap; margin-top: var(--cds-spacing-03)"
+                  style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-03)"
                 >
-                  <Tag type="cyan">Reactive</Tag>
+                  <Tag style="margin-left: 0" size="sm" type="cyan">
+                    Reactive
+                  </Tag>
                 </div>
               {/if}
             </StructuredListCell>
@@ -133,6 +135,20 @@
 {:else}
   <p class="my-layout-01-03">No props.</p>
 {/if}
+
+<h3 id="typedefs">Typedefs</h3>
+
+{#if component.typedefs.length > 0}
+  <CodeSnippet
+    style="margin-top: var(--cds-spacing-08)"
+    class="my-layout-01-03"
+    type="multi"
+    code="{component.typedefs.map((t) => t.ts).join(';\n\n')}"
+  />
+{:else}
+  <p class="my-layout-01-03">No typedefs.</p>
+{/if}
+
 <h3 id="slots">Slots</h3>
 {#if component.slots.length > 0}
   <UnorderedList class="my-layout-01-03">
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index fbf33fcb..035a51dd 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -238,6 +238,9 @@ module.exports = {
                       <li class="bx--list__item">
                         <a class="bx--link" href="#props">Props</a>
                       </li>
+                      <li class="bx--list__item">
+                        <a class="bx--link" href="#typedefs">Typedefs</a>
+                      </li>
                       <li class="bx--list__item">
                         <a class="bx--link" href="#slots">Slots</a>
                       </li>