Replace jQuery animation for table of contents and remove jQuery package

.eslintrc.js

@@ -20,7 +20,6 @@ module.exports = {
     browser: true,
   },
   rules: {
-    'ember/no-jquery': 'off',
     'no-console': 'off',
     'ember/no-new-mixins': 'off',
     'ember/no-mixins': 'off',

app/components/table-of-contents.js

@@ -3,7 +3,8 @@ import Component from '@ember/component';
 export default Component.extend({
   actions: {
     toggle(type) {
-      this.$('ol.toc-level-1.' + type).slideToggle(200);
+      const tableElement = document.querySelector(`ol.toc-level-1.${type}`);
+      tableElement.classList.toggle('selected');
     },
   },
 });

app/styles/components/_sidebar.scss

@@ -121,11 +121,17 @@ li.toc-level-0 {
 ol.toc-level-1 {
   border-left: $base-border;
   font-size: $base-font-size * 0.9;
+  transition: max-height 0.5s ease;
 
-  &:not(.selected) {
-    display: none;
+  &.selected{ 
+    max-height: 3000px;
   }
 
+  &:not(.selected) {
+    overflow: hidden;
+    max-height: 0;
+  } 
+
   li {
     border-left: 3px solid transparent;
     transition: border-width $duration, margin-right $duration;

app/templates/components/table-of-contents.hbs

@@ -1,7 +1,7 @@
 <ol class="toc-level-0">
   <li class="toc-level-0">
-    <a {{action 'toggle' 'modules'}} href="#">Packages</a>
-    <ol class="toc-level-1 modules" style="display: block">
+    <a {{action 'toggle' 'modules'}} href="#" data-test-toc-title="packages">Packages</a>
+    <ol class="toc-level-1 modules selected">
       {{#each moduleIDs as |moduleID|}}
 
         {{#if (not-eq moduleID "@ember/object/computed")}}
@@ -16,8 +16,8 @@
 
   {{#if isShowingNamespaces}}
     <li class="toc-level-0">
-      <a {{action 'toggle' 'namespaces'}} href="#">Namespaces</a>
-      <ol class="toc-level-1 namespaces" style="display: block">
+      <a {{action 'toggle' 'namespaces'}} href="#" data-test-toc-title="namespaces">Namespaces</a>
+      <ol class="toc-level-1 namespaces selected">
         {{#each namespaceIDs as |namespaceID|}}
           <li class="toc-level-1" data-test-namespace={{namespaceID}}>
             {{#link-to 'project-version.namespaces.namespace' version namespaceID}}{{namespaceID}}{{/link-to}}
@@ -28,8 +28,8 @@
   {{/if}}
 
   <li class="toc-level-0">
-    <a {{action 'toggle' 'classes'}} href="#">Classes</a>
-    <ol class="toc-level-1 classes" style="display: block">
+    <a {{action 'toggle' 'classes'}} href="#" data-test-toc-title="classes">Classes</a>
+    <ol class="toc-level-1 classes selected">
       {{#each classesIDs as |classID|}}
         <li class="toc-level-1" data-test-class={{classID}}>
           {{#link-to 'project-version.classes.class' version classID}}{{classID}}{{/link-to}}

config/optional-features.json

@@ -1,6 +1,6 @@
 {
   "application-template-wrapper": false,
   "default-async-observers": true,
-  "jquery-integration": true,
+  "jquery-integration": false,
   "template-only-glimmer-components": true
 }

package.json

@@ -26,7 +26,6 @@
     "test:ember": "ember test"
   },
   "devDependencies": {
-    "@ember/jquery": "^1.1.0",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.2.5",
     "@glimmer/component": "^1.0.4",

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

@@ -1,30 +1,157 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, findAll } from '@ember/test-helpers';
+import { render, findAll, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
+const TIMEOUT_FOR_ANIMATION = 600;
+const CLASSES = ['Descriptor', 'Ember'];
+const MODULES = ['@ember/application', '@ember/array'];
+
 module('Integration | Component | table of contents', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
     // Set any properties with this.set('myProperty', 'value');
     this.set('projectId', 'Ember');
     this.set('emberVersion', '2.4.3');
+    this.set('classesIDs', CLASSES);
+
+    await render(hbs`
+      {{
+        table-of-contents showPrivateClasses=true
+          projectid=projectId
+          version=emberVersion
+          classesIDs=classesIDs
+          isShowingNamespaces=true
+       }}
+    `);
+
+    const contentTitle = document.querySelector(
+      '[data-test-toc-title="classes"]'
+    );
+    const contentReference = '.toc-level-1';
+
+    assert.dom(contentTitle).hasText('Classes');
+    assert
+      .dom(`${contentReference} li`)
+      .exists({ count: 2 }, 'We have two items to display');
+    assert.dom(findAll(`${contentReference} li`)[0]).hasText(CLASSES[0]);
+    assert.dom(findAll(`${contentReference} li`)[1]).hasText(CLASSES[1]);
+  });
+
+  test('Starts with underlying content visible', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    this.set('projectId', 'Ember');
+    this.set('emberVersion', '2.4.3');
+    this.set('moduleIDs', MODULES);
 
-    this.set('classesIDs', ['Descriptor', 'Ember']);
+    await render(hbs`
+      {{
+        table-of-contents showPrivateClasses=true
+          projectid=projectId
+          version=emberVersion
+          moduleIDs=moduleIDs
+          isShowingNamespaces=true
+       }}
+    `);
 
-    await render(hbs`{{table-of-contents showPrivateClasses=true
-                                        projectid=projectId
-                                        version=emberVersion
-                                        classesIDs=classesIDs
-                                        isShowingNamespaces=true
-                    }}`);
+    const contentReference = '.toc-level-1';
+    const content = document.querySelector(contentReference);
+    const contentTitle = document.querySelector(
+      '[data-test-toc-title="classes"]'
+    );
 
-    assert.dom(findAll('.toc-level-0 > a')[2]).hasText('Classes');
+    assert.dom(contentTitle).hasText('Classes');
+    assert.dom(content).hasClass('selected');
     assert
-      .dom('.toc-level-1 li')
+      .dom(`${contentReference} li`)
       .exists({ count: 2 }, 'We have two items to display');
-    assert.dom(findAll('.toc-level-1 li')[0]).hasText('Descriptor');
-    assert.dom(findAll('.toc-level-1 li')[1]).hasText('Ember');
+    assert.dom(content).isVisible();
+    assert.dom(findAll(`${contentReference} li`)[0]).hasText(MODULES[0]);
+    assert.dom(findAll(`${contentReference} li`)[1]).hasText(MODULES[1]);
+  });
+
+  test('Underlying content hides once clicked', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    this.set('projectId', 'Ember');
+    this.set('emberVersion', '2.4.3');
+    this.set('moduleIDs', MODULES);
+
+    await render(hbs`
+      {{
+        table-of-contents showPrivateClasses=true
+          projectid=projectId
+          version=emberVersion
+          moduleIDs=moduleIDs
+          isShowingNamespaces=true
+       }}
+    `);
+
+    const contentTitle = document.querySelector(
+      '[data-test-toc-title="packages"]'
+    );
+    const contentReference = '.toc-level-1';
+    const content = document.querySelector(contentReference);
+
+    assert.dom(contentTitle).hasText('Packages');
+    assert.dom(content).hasClass('selected');
+    assert.dom(content).isVisible();
+
+    await click(contentTitle);
+
+    const done = assert.async();
+    setTimeout(() => {
+      assert.dom(content).isNotVisible();
+      assert.dom(content).doesNotHaveClass('selected');
+      done();
+    }, TIMEOUT_FOR_ANIMATION);
+  });
+
+  test('Underlying content should be visible after 2 clicks', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    this.set('projectId', 'Ember');
+    this.set('emberVersion', '2.4.3');
+    this.set('moduleIDs', MODULES);
+
+    await render(hbs`
+      {{
+        table-of-contents showPrivateClasses=true
+          projectid=projectId
+          version=emberVersion
+          moduleIDs=moduleIDs
+          isShowingNamespaces=true
+       }}
+    `);
+
+    const titleButton = document.querySelector(
+      '[data-test-toc-title="packages"]'
+    );
+    const contentReference = '.toc-level-1';
+    const content = document.querySelector(contentReference);
+
+    assert.dom(titleButton).hasText('Packages');
+    assert.dom(content).hasClass('selected');
+    assert.dom(content).isVisible();
+
+    await click(titleButton);
+
+    const done1 = assert.async();
+
+    setTimeout(async () => {
+      assert.dom(content).isNotVisible();
+      assert.dom(content).doesNotHaveClass('selected');
+
+      await click(titleButton);
+
+      const done2 = assert.async();
+
+      setTimeout(() => {
+        assert.dom(content).isVisible();
+        assert.dom(content).hasClass('selected');
+        done2();
+      }, TIMEOUT_FOR_ANIMATION);
+
+      done1();
+    }, TIMEOUT_FOR_ANIMATION);
   });
 });