search

nswdpc / waratah

NSW Design System integration for Silverstripe websites
BSD 3-Clause "New" or "Revised" License
0 stars 3 forks source link

Add external-link-icon handling #59

Open JamesDPC opened 1 year ago

JamesDPC commented 1 year ago

Added in 3.9.0

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

JamesDPC commented 4 months ago

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 commented 4 months ago

Can we automate it like we do already with files?

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

JamesDPC commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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.