From d4cf6577c99a7a0a094c8ee17d9be73ca8ff689d Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 6 Aug 2022 14:02:53 -0700
Subject: [PATCH] docs: flatten table of contents hierarchy

---
 docs/src/layouts/ComponentLayout.svelte | 11 +++---
 docs/svelte.config.js                   | 51 ++++++++++---------------
 2 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 3ffae9e5..2c2ede9a 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -100,12 +100,11 @@
     <Row>
       <Column class="prose">
         <div class="toc mobile">
-          <h5>Table of Contents</h5>
+          <h5>Examples</h5>
           <slot name="aside" />
         </div>
-        <h2 id="usage">Usage</h2>
         <slot />
-        <h2 id="component-api">Component API</h2>
+        <h3 id="component-api">Component API</h3>
         <p>
           API documentation is
           <Link
@@ -143,7 +142,7 @@
 
   <Column class="table" xlg="{4}" lg="{5}">
     <div class="toc">
-      <h5>Table of Contents</h5>
+      <h5>Examples</h5>
       <slot name="aside" />
     </div>
   </Column>
@@ -157,7 +156,8 @@
     border-bottom: 1px solid var(--cds-ui-03);
   }
 
-  .toc h5 {
+  :global(.toc h5) {
+    margin-top: var(--cds-spacing-06);
     margin-bottom: var(--cds-spacing-03);
   }
 
@@ -168,6 +168,7 @@
   @media (max-width: 1056px) {
     .toc.mobile {
       display: block;
+      margin-bottom: var(--cds-spacing-09);
     }
   }
 </style>
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index 277d8ced..bdacb967 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -188,41 +188,30 @@ module.exports = {
             "</Layout_MDSVEX_DEFAULT>",
             `<div slot="aside">
                 <ul class="bx--list--unordered">
-                  <li class="bx--list__item">
-                    <a class="bx--link" href="#usage">Usage</a>
-                    <ul class="bx--list--unordered bx--list--nested">
                     ${toc
-                      .map((item) => {
-                        return `
-                          <li class="bx--list__item">
-                            <a class="bx--link" href="\#${item.id}">${item.text}</a>
-                          </li>`;
-                      })
+                      .map(
+                        (item) =>
+                          `<li class="bx--list__item"><a class="bx--link" href="\#${item.id}">${item.text}</a></li>`
+                      )
                       .join("")}
-                    </ul>
+                  <h5>Component API</h5>
+                  <li class="bx--list__item">
+                    <a class="bx--link" href="#props">Props</a>
                   </li>
                   <li class="bx--list__item">
-                    <a class="bx--link" href="#component-api">Component API</a>
-                    <ul class="bx--list--unordered bx--list--nested">
-                      <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>
-                      <li class="bx--list__item">
-                        <a class="bx--link" href="#forwarded-events">Forwarded events</a>
-                      </li>
-                      <li class="bx--list__item">
-                        <a class="bx--link" href="#dispatched-events">Dispatched events</a>
-                      </li>
-                      <li class="bx--list__item">
-                        <a class="bx--link" href="#rest-props">restProps</a>
-                      </li>
-                    </ul>
+                    <a class="bx--link" href="#typedefs">Typedefs</a>
+                  </li>
+                  <li class="bx--list__item">
+                    <a class="bx--link" href="#slots">Slots</a>
+                  </li>
+                  <li class="bx--list__item">
+                    <a class="bx--link" href="#forwarded-events">Forwarded events</a>
+                  </li>
+                  <li class="bx--list__item">
+                    <a class="bx--link" href="#dispatched-events">Dispatched events</a>
+                  </li>
+                  <li class="bx--list__item">
+                    <a class="bx--link" href="#rest-props">restProps</a>
                   </li>
                 </ul>
               </div>