Adds styling (copied from guidemaker) and update the classes to match that

Author: MinThaMie

app/components/table-of-contents.hbs

@@ -1,43 +1,43 @@
-<ol class='toc-level-0'>
-  <li class='toc-level-0'>
+<ul class='table-of-contents '>
+  <li class='toc-item toc-group'>
     <a {{on 'click' (fn this.toggle 'modules')}} href='#' data-test-toc-title='packages'>Packages</a>
-    <ol class='toc-level-1 modules selected'>
+    <ul class='sub-table-of-contents modules selected'>
       {{#each @moduleIDs as |moduleID|}}
 
         {{#if (not-eq moduleID '@ember/object/computed')}}
-          <li class='toc-level-1' data-test-module={{moduleID}}>
+          <li class='toc-item toc-link' data-test-module={{moduleID}}>
             <LinkTo @route='project-version.modules.module' @models={{array @version moduleID}}>{{moduleID}}</LinkTo>
           </li>
         {{/if}}
 
       {{/each}}
-    </ol>
+    </ul>
   </li>
 
   {{#if @isShowingNamespaces}}
-    <li class='toc-level-0'>
+    <li class='table-of-contents'>
       <a {{on 'click' (fn this.toggle 'namespaces')}} href='#' data-test-toc-title='namespaces'>Namespaces</a>
-      <ol class='toc-level-1 namespaces selected'>
+      <ul class='sub-table-of-contents namespaces selected'>
         {{#each @namespaceIDs as |namespaceID|}}
-          <li class='toc-level-1' data-test-namespace={{namespaceID}}>
+          <li class='toc-item toc-link' data-test-namespace={{namespaceID}}>
             <LinkTo @route='project-version.namespaces.namespace' @models={{array @version namespaceID}}>{{namespaceID}}</LinkTo>
           </li>
         {{/each}}
-      </ol>
+      </ul>
     </li>
   {{/if}}
 
-  <li class='toc-level-0'>
+  <li class='table-of-contents '>
     <a {{on 'click' (fn this.toggle 'classes')}} href='#' data-test-toc-title='classes'>Classes</a>
-    <ol class='toc-level-1 classes selected'>
+    <ul class='sub-table-of-contents classes selected'>
       {{#each @classesIDs as |classID|}}
-        <li class='toc-level-1' data-test-class={{classID}}>
+        <li class='toc-item toc-link' data-test-class={{classID}}>
           <LinkTo @route='project-version.classes.class' @models={{array @version classID}}>{{classID}}</LinkTo>
         </li>
       {{/each}}
-    </ol>
+    </ul>
   </li>
-</ol>
+</ul>
 <label class='toc-private-toggle'>
   <input type='checkbox' checked={{@showPrivateClasses}} onchange={{@togglePrivateClasses}} class='private-deprecated-toggle' />
   Show Private / Deprecated

app/components/table-of-contents.js

@@ -4,7 +4,9 @@ import Component from '@glimmer/component';
 export default class TableOfContents extends Component {
   @action
   toggle(type) {
-    const tableElement = document.querySelector(`ol.toc-level-1.${type}`);
+    const tableElement = document.querySelector(
+      `ul.sub-table-of-contents.${type}`
+    );
     tableElement.classList.toggle('selected');
   }
 }

app/styles/app.css

@@ -25,3 +25,60 @@ main a.edit-icon {
   display: inline-block;
   background: none;
 }
+
+.table-of-contents {
+  list-style-type: none;
+  padding-left: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-3);
+}
+
+.sub-table-of-contents {
+  padding-left: var(--spacing-1);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-2);
+}
+
+.sub-table-of-contents .sub-table-of-contents {
+  padding-left: var(--spacing-3);
+  margin-bottom: 0;
+}
+
+.table-of-contents a:link {
+  background: none;
+}
+
+.sub-table-of-contents .toc-item a  {
+  display: block;
+  padding: var(--spacing-1);
+  border-radius: var(--radius);
+  line-height: var(--line-height-xs);
+  color: var(--color-gray-700);
+  border-left: 0 solid transparent;
+  transition: border-width .3s;
+}
+
+.sub-table-of-contents .toc-item a:hover {
+  border-left: 4px solid var(--color-gray-400);
+  border-radius: 0;
+}
+
+.sub-table-of-contents .toc-item.selected > a, .sub-table-of-contents .toc-item > a.active  {
+  border-left: 4px solid var(--color-brand-hc-dark);
+  border-radius: 0;
+}
+
+.table-of-contents li {
+  margin: 3px 0;
+  list-style-type: none;
+}
+
+li.toc-heading {
+  margin-top: var(--spacing-4);
+  color: var(--color-gray-600);
+}
+
+li.toc-heading:first-child {
+  margin-top: 0;
+}
+

tests/integration/components/table-of-contents-test.js

@@ -27,7 +27,7 @@ module('Integration | Component | table of contents', function (hooks) {
     const contentTitle = document.querySelector(
       '[data-test-toc-title="classes"]'
     );
-    const contentReference = '.toc-level-1';
+    const contentReference = '.sub-table-of-contents';
 
     assert.dom(contentTitle).hasText('Classes');
     assert
@@ -51,7 +51,7 @@ module('Integration | Component | table of contents', function (hooks) {
       />
     `);
 
-    const contentReference = '.toc-level-1';
+    const contentReference = '.sub-table-of-contents';
     const content = document.querySelector(contentReference);
     const contentTitle = document.querySelector(
       '[data-test-toc-title="classes"]'
@@ -84,7 +84,7 @@ module('Integration | Component | table of contents', function (hooks) {
     const contentTitle = document.querySelector(
       '[data-test-toc-title="packages"]'
     );
-    const contentReference = '.toc-level-1';
+    const contentReference = '.sub-table-of-content';
     const content = document.querySelector(contentReference);
 
     assert.dom(contentTitle).hasText('Packages');
@@ -118,7 +118,7 @@ module('Integration | Component | table of contents', function (hooks) {
     const titleButton = document.querySelector(
       '[data-test-toc-title="packages"]'
     );
-    const contentReference = '.toc-level-1';
+    const contentReference = '.sub-table-of-contents';
     const content = document.querySelector(contentReference);
 
     assert.dom(titleButton).hasText('Packages');