Add external-link-icon handling

[JamesDPC]

Added in 3.9.0

Reference: https://digitalnsw.github.io/nsw-design-system/components/link/index.html

[JamesDPC]

What are your thoughts on this @tardinha - implement via JS and/or via a shortcode in the editor field ?

Custom templates can implement as required, and any global implementation would have to check that the external link icon is not already present.

[tardinha]

Can we automate it like we do already with files?

In the old days, we'd do it purely in CSS...

[JamesDPC]

The implementation examples is like this:

<a class="js-link" href="https://digital.nsw.gov.au">
  <span>My Link</span><span class="material-icons nsw-material-icons" title="(opens in new window)">open_in_new</span>
</a>

If we had a link like the below, some JS could be used to check if it is an external link and add the relevant HTML... maybe ignore if it already has the class js-link

<a href="https://digital.nsw.gov.au">My Link</a>

Separate to the implementation detail is - does having an external link icon improve anything ?

[tardinha]

I like the external icon, but not opening in a new tab.

I guess everything else is JS driven... i'd prefer a non-JS solution.

[JamesDPC]

It looks like the nswds ExternalLink component adds the _blank target for any element that has a class "js-link" but the implementation/template adds the chosen icon (open_in_new_window in the docs).

https://github.com/digitalnsw/nsw-design-system/pull/320/files#diff-27653c212e1cfe533e4eb2f7d0d3f89604c9de48a09583b4cbbbcbd08a07da79R110

const link = document.querySelectorAll('.js-link')
// ....
if (link) {
    link.forEach((element) => {
      new ExternalLink(element).init()
    })
}

For the editor field, maybe there is already a shortcode option for adding an external icon when the link is to a different domain, and the target is only determined by the person editing.