Review updates

- making all muted headings use same styles - adjusting headling level for table of contents header - overriding visited link colour (as these will be anchors)
canonical · Oct 5, 2023 · 756236d · 756236d
1 parent 0af4e86
commit 756236d
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 5 deletions.
diff --git a/scss/_base_typography-definitions.scss b/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 {

diff --git a/scss/_patterns_table-of-contents.scss b/scss/_patterns_table-of-contents.scss
@@ -35,6 +35,10 @@
       &.is-active {
         font-weight: $font-weight-bold;
       }
+
+      &:visited {
+        color: $color-link;
+      }
     }
   }
 }
diff --git a/.../examples/patterns/table-of-contents.html → ...s/patterns/table-of-contents/default.html b/.../examples/patterns/table-of-contents.html → ...s/patterns/table-of-contents/default.html
@@ -6,7 +6,7 @@
 {% block content %}
 <aside class="p-table-of-contents">
   <div class="p-table-of-contents__section">
-    <h4 class="p-table-of-contents__header">On this page:</h4>
+    <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>

diff --git a/.../patterns/table-of-contents-sections.html → .../patterns/table-of-contents/sections.html b/.../patterns/table-of-contents-sections.html → .../patterns/table-of-contents/sections.html
@@ -6,7 +6,7 @@
 {% block content %}
 <aside class="p-table-of-contents">
   <div class="p-table-of-contents__section">
-    <h4 class="p-table-of-contents__header">On this page:</h4>
+    <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>
@@ -22,7 +22,7 @@ <h4 class="p-table-of-contents__header">On this page:</h4>
     </nav>
   </div>
   <div class="p-table-of-contents__section">
-    <h4 class="p-table-of-contents__header">Resources:</h4>
+    <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>

diff --git a/templates/docs/patterns/table-of-contents.md b/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>