Adds class for anchor links to have visual onhover state

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "author": {
     "email": "[email protected]",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.14.0
+  features:
+    - component: Links / Anchor headings
+      url: /docs/patterns/links#anchor-link
+      status: New
+      notes: We've introduced a new class <code>.p-link--anchor-heading</code> to style anchor links in headings.
 - version: 4.13.0
   features:
     - component: Image container

scss/_patterns_links.scss

@@ -77,4 +77,30 @@
     padding: 0 $sph--small 0 $sph--large;
     text-decoration: none;
   }
+
+  .p-link--anchor-heading {
+    color: $colors--theme--text-default;
+
+    &:visited {
+      color: $colors--theme--text-default;
+    }
+
+    &::after {
+      @extend %icon;
+      @include vf-icon-get-link-themed;
+
+      content: '';
+      margin-left: $sph--small;
+      padding: $spv--small $sph--small;
+      vertical-align: baseline;
+      visibility: hidden;
+    }
+
+    &:hover,
+    &:focus {
+      &::after {
+        visibility: visible;
+      }
+    }
+  }
 }

templates/docs/examples/patterns/links/links-anchor.html

@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Links / Anchor{% endblock %}
+
+{% block standalone_css %}patterns_links{% endblock %}
+
+{% block content %}
+<h2>
+  <a href="#" class="p-link--anchor-heading">In this documentation</a>
+</h2>
+<h3>
+  <a href="#" class="p-link--anchor-heading">In this documentation</a>
+</h3>
+{% endblock %}

templates/docs/patterns/links/index.md

@@ -61,6 +61,14 @@ The `.p-link--skip` link is used to help keyboard users navigate quickly to the
 View example of the back to skip link pattern
 </a></div>
 
+## Anchor link
+
+The `.p-link--anchor-heading` class is used to add a visual on-hover state to anchor links.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/links/links-anchor/" class="js-example">
+View example of the back to anchor link pattern
+</a></div>
+
 ## Import
 
 To import just this component into your project, copy the snippet below and include it in your main Sass file.