This component illustrates the linkArrow JavaScript module. The linkArrow module adds animated arrows to the end of links.
The example component and variants are for illustration purposes only. Please see JSDoc comments for full usage documentation.
Example usage
To apply animated arrows that fade in on a dark background to all links with a class of “fancy-link”
import { linkArrow } from "../../library/01-foundations/03-utilities/arrow-link/arrow-link.module";
linkArrow("fancy-link", true, true);
<h1><a href="#" class="uol-arrow-link">Text link with arrow effect</a></h1>
<h2><a href="#" class="uol-arrow-link">Text link with arrow effect</a></h2>
<h3><a href="#" class="uol-arrow-link">Text link with arrow effect</a></h3>
<h4><a href="#" class="uol-arrow-link">Text link with arrow effect</a></h4>
<p><a href="#" class="uol-arrow-link">Text link with arrow effect</a><p>
<h1><a href="#" class="uol-arrow-link">Text link with arrow effect</a></h1>
<h2><a href="#" class="uol-arrow-link">Text link with arrow effect</a></h2>
<h3><a href="#" class="uol-arrow-link">Text link with arrow effect</a></h3>
<h4><a href="#" class="uol-arrow-link">Text link with arrow effect</a></h4>
<p><a href="#" class="uol-arrow-link">Text link with arrow effect</a>
<p>
.uol-arrow-link {
&:hover,
&:focus {
svg {
right: -0.1em;
}
@media (prefers-reduced-motion) {
svg {
right: 0.2em;
}
}
}
}
.uol-arrow-link--bg-dark {
svg {
fill: $color-brand--bright;
}
}
.uol-arrow-link--fade-in {
svg {
opacity: 0;
}
&:hover,
&:focus {
svg {
opacity: 1;
}
}
}
.uol-arrow-link__arrow-wrapper {
position: relative;
white-space: nowrap;
padding-right: 1.65em;
svg {
position: absolute;
height: 1.2em;
width: 1.2em;
top: 0.1em;
right: 0.2em;
fill: $color-brand;
transition: all 0.3s ease 0.15s;
@media (-ms-high-contrast: active), (forced-colors: active) {
fill: -ms-hotlight;
fill: linkText;
}
}
}
/**
* Adds animated arrows to the end of links
* @module linkArrow
* @param {String} className=".uol-arrow-link" - Selector for the elements
* @param {Boolean} backgroundDark=false - If background is dark set true
* @param {Boolean} fadeIn=false - If fade in required set true
*/
export const linkArrow = (
className = ".uol-arrow-link",
backgroundDark = false,
fadeIn = false
) => {
// Create SVG arrow string that will be appended to link
const svgRightArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true">
<path fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg>`;
// Get all matching links
const links = document.querySelectorAll(className);
links.forEach((link) => {
// Add arrow class
link.classList.add("uol-arrow-link");
// Handle dark backgrounds
if (backgroundDark) link.classList.add("uol-arrow-link--bg-dark");
// Handle fade in option
if (fadeIn) link.classList.add("uol-arrow-link--fade-in");
// Split text to array
const innerTextArray = link.innerText.trim().split(" ");
// Wrap inner text in role="text" to "help" VoiceOver. Wrap last word and arrow in non-breaking span to avoid orphaned arrows
link.innerHTML = `<span role="text"">${innerTextArray
.slice(0, -1)
.join(" ")} <span class="uol-arrow-link__arrow-wrapper">${
innerTextArray[innerTextArray.length - 1]
}${svgRightArrow}</span></span>`;
});
};
/* No context defined. */