Usage

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);

Parameters

  • @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
<h1><a href="#" class="uol-arrow-link uol-arrow-link--fade-in">Text link with arrow effect on hover and focus</a></h1>
<h2><a href="#" class="uol-arrow-link uol-arrow-link--fade-in">Text link with arrow effect on hover and focus</a></h2>
<h3><a href="#" class="uol-arrow-link uol-arrow-link--fade-in">Text link with arrow effect on hover and focus</a></h3>
<h4><a href="#" class="uol-arrow-link uol-arrow-link--fade-in">Text link with arrow effect on hover and focus</a></h4>
<p><a href="#" class="uol-arrow-link uol-arrow-link--fade-in">Text link with arrow effect on hover and focus</a><p>
<h1><a href="#" class="uol-arrow-link uol-arrow-link--fade-in">Text link with arrow effect on hover and focus</a></h1>
<h2><a href="#" class="uol-arrow-link uol-arrow-link--fade-in">Text link with arrow effect on hover and focus</a></h2>
<h3><a href="#" class="uol-arrow-link uol-arrow-link--fade-in">Text link with arrow effect on hover and focus</a></h3>
<h4><a href="#" class="uol-arrow-link uol-arrow-link--fade-in">Text link with arrow effect on hover and focus</a></h4>
<p><a href="#" class="uol-arrow-link uol-arrow-link--fade-in">Text link with arrow effect on hover and focus</a>
<p>
  • Content:
    .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;
        }
      }
    }
    
  • URL: /components/raw/uol-arrow-link/_arrow-link.scss
  • Filesystem Path: src/library/01-foundations/03-utilities/arrow-link/_arrow-link.scss
  • Size: 761 Bytes
  • Content:
    /**
     * 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>`;
      });
    };
    
  • URL: /components/raw/uol-arrow-link/arrow-link.module.js
  • Filesystem Path: src/library/01-foundations/03-utilities/arrow-link/arrow-link.module.js
  • Size: 1.6 KB
/* No context defined. */