Refresh styles of table of contents component

releases.yml

@@ -4,6 +4,10 @@
       url: /docs/patterns/navigation#paper
       status: New
       notes: We've added a support for paper background for the side navigation (via <code>is-paper</code> class on body element).
+    - component: Table of contents
+      url: /docs/patterns/table-of-contents
+      status: Updated
+      notes: We've refreshed the style of the table of contents and improved the consistency of HTML markup.
 - version: 4.3.0
   features:
     - component: Logo section

scss/_base_typography-definitions.scss

@@ -238,9 +238,9 @@
     text-transform: uppercase;
   }
 
-  // deprecated: %muted-text is deprecated, use %small-caps-text instead
   %muted-heading {
     @extend %small-caps-text;
+    @extend %bold;
   }
 
   %bold {

scss/_patterns_table-of-contents.scss

@@ -2,55 +2,43 @@
 
 @mixin vf-p-table-of-contents {
   .p-table-of-contents {
-    border-top: 1px solid $color-mid-light;
-    font-size: 0.875rem;
-    padding: 0 $sp-large;
-
-    @media (min-width: $threshold-6-12-col) {
-      border-left: 1px solid $color-mid-light;
-      border-top: 0;
-      padding: 0 $sp-medium;
-    }
+    @extend %vf-grid-container-padding;
   }
 
   .p-table-of-contents__header {
-    color: $color-mid-dark;
-    font-size: $sp-medium;
-    line-height: 1.5;
-    margin-bottom: $sp-medium;
-    text-transform: uppercase;
+    @extend %muted-heading;
   }
 
   .p-table-of-contents__section {
-    padding: $sp-medium 0;
+    padding-bottom: $spv--large;
 
     &:not(:last-child) {
-      border-bottom: 1px dotted $color-mid-light;
+      border-bottom: 1px solid $color-mid-light;
     }
   }
 
-  .p-table-of-contents__nav {
+  .p-table-of-contents__list {
     list-style: none;
     margin: 0;
     padding: 0;
 
+    .p-table-of-contents__list {
+      margin-left: $sph--large;
+    }
+
     .p-table-of-contents__link {
-      border-bottom: 0;
-      color: $colors--light-theme--text-default;
-      margin-bottom: $sp-x-small;
+      display: block;
+      // paddings based on side navigation
+      padding-bottom: $spv--x-small;
+      padding-top: $spv--x-small;
 
-      &:visited {
-        color: $colors--light-theme--text-default;
+      &.is-active {
+        font-weight: $font-weight-bold;
       }
 
-      &:hover {
+      &:visited {
         color: $color-link;
       }
-
-      &.is-active {
-        font-weight: $font-weight-bold;
-        padding-left: $sp-x-small;
-      }
     }
   }
 }

templates/docs/examples/patterns/table-of-contents/default.html

@@ -0,0 +1,25 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table of contents{% endblock %}
+
+{% block standalone_css %}patterns_table-of-contents{% endblock %}
+
+{% block content %}
+<aside class="p-table-of-contents">
+  <div class="p-table-of-contents__section">
+    <h2 class="p-table-of-contents__header">On this page</h2>
+    <nav class="p-table-of-contents__nav" aria-label="Table of contents">
+      <ul class="p-table-of-contents__list">
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link1">Install from snap</a></li>
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link2">Initialisation</a></li>
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link is-active" href="#link3">Configuration verification</a>
+          <ul class="p-table-of-contents__list">
+            <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#">Networkd backend</a></li>
+            <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#">NetworkManager backend</a></li>
+          </ul>
+        </li>
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link4">Service statuses</a></li>
+      </ul>
+    </nav>
+  </div>
+</aside>
+{% endblock %}

templates/docs/examples/patterns/table-of-contents/sections.html

@@ -0,0 +1,35 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table of contents / Sections{% endblock %}
+
+{% block standalone_css %}patterns_table-of-contents{% endblock %}
+
+{% block content %}
+<aside class="p-table-of-contents">
+  <div class="p-table-of-contents__section">
+    <h2 class="p-table-of-contents__header">On this page</h2>
+    <nav class="p-table-of-contents__nav" aria-label="Table of contents">
+      <ul class="p-table-of-contents__list">
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link1">Install from snap</a></li>
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link2">Initialisation</a></li>
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link is-active" href="#link3">Configuration verification</a>
+          <ul class="p-table-of-contents__list">
+            <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#">Networkd backend</a></li>
+            <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#">NetworkManager backend</a></li>
+          </ul>
+        </li>
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link4">Service statuses</a></li>
+      </ul>
+    </nav>
+  </div>
+  <div class="p-table-of-contents__section">
+    <h2 class="p-table-of-contents__header">Resources</h2>
+    <nav class="p-table-of-contents__nav" aria-label="Resources">
+      <ul class="p-table-of-contents__list">
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link1">Documentation</a></li>
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link2">Forum</a></li>
+        <li class="p-table-of-contents__item"><a class="p-table-of-contents__link" href="#link3">GitHub</a></li>
+      </ul>
+    </nav>
+  </div>
+</aside>
+{% endblock %}

templates/docs/patterns/table-of-contents.md

@@ -10,7 +10,7 @@ context:
 
 A table of contents can be used to display supplementary links to a page.
 
-<div class="embedded-example"><a href="/docs/examples/patterns/table-of-contents/" class="js-example">
+<div class="embedded-example"><a href="/docs/examples/patterns/table-of-contents/default" class="js-example">
 View example of the table of contents pattern
 </a></div>