Create Vue table_of_contents

Also:
- Updates toc.scss to look for .table-of-contents
- Creates some dom helpers in shared
- Stick to footer directive
- Moves toc collapse button to component
- Fixes issue where collapsed on mobile
  affects full view

2 files changed, 144 insertions, 0 deletions

diff --git a/spec/frontend/default/components/__snapshots__/table_of_contents_list_spec.js.snap b/spec/frontend/default/components/__snapshots__/table_of_contents_list_spec.js.snap
new file mode 100644
index 00000000..6a00c5ea
--- /dev/null
+++ b/spec/frontend/default/components/__snapshots__/table_of_contents_list_spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`frontend/default/components/table_of_contents_list with empty items shows empty ul 1`] = `
+<ul
+  class="nav nav-pills flex-column"
+/>
+`;
diff --git a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
new file mode 100644
index 00000000..6483dea6
--- /dev/null
+++ b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
+<div
+  class="table-of-contents-container position-relative"
+  id="markdown-toc"
+>
+  <a
+    aria-controls="markdown-toc"
+    class="toc-collapse collapsed"
+    data-testid="collapse"
+    href="#"
+    role="button"
+  />
+   
+  <div
+    class="table-of-contents sm-collapsed"
+    data-testid="container"
+  >
+    <h4>
+      On this page:
+    </h4>
+     
+    <ul
+      class="nav nav-pills flex-column my-0"
+      data-testid="main-list"
+    >
+      <li>
+        <a
+          class="nav-link"
+          href="#lorem"
+          id="Lorem-anchor"
+        >
+          Lorem
+        </a>
+         
+        <ul
+          class="nav nav-pills flex-column"
+        >
+          <li>
+            <a
+              class="nav-link"
+              href="#lorem-"
+              id="Lorem 2-anchor"
+            >
+              Lorem 2
+            </a>
+             
+            <!---->
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a
+          class="nav-link"
+          href="#ipsum"
+          id="Ipsum-anchor"
+        >
+          Ipsum
+        </a>
+         
+        <ul
+          class="nav nav-pills flex-column"
+        >
+          <li>
+            <a
+              class="nav-link"
+              href="#dolar"
+              id="Dolar-anchor"
+            >
+              Dolar
+            </a>
+             
+            <ul
+              class="nav nav-pills flex-column"
+            >
+              <li>
+                <a
+                  class="nav-link"
+                  href="#sit"
+                  id="Sit-anchor"
+                >
+                  Sit
+                </a>
+                 
+                <!---->
+              </li>
+              <li>
+                <a
+                  class="nav-link"
+                  href="#amit"
+                  id="Amit-anchor"
+                >
+                  Amit
+                </a>
+                 
+                <!---->
+              </li>
+              <li>
+                <a
+                  class="nav-link"
+                  href="#test"
+                  id="Test-anchor"
+                >
+                  Test
+                </a>
+                 
+                <!---->
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
+     
+    <div
+      class="border-top mt-3 pt-3"
+    >
+      <ul
+        class="nav nav-pills flex-column my-0"
+        data-testid="help-and-feedback"
+      >
+        <li>
+          <a
+            class="nav-link"
+            href="#test-help-and-feedback"
+          >
+            Help and feedback
+          </a>
+           
+          <!---->
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;