[Links] Show external-link icon where applicable

[meissadia]

Close #765

Changes

• feat: [Link] Programmatically determine internal vs external links and add icon where appropriate
  • Links to specific iRegs open in new tab
  • Links to specific FIG sections open in new tab
  • mailto: links are treated as internal
• task: Ensure all instances of <Link> use the SBL Link for consistent styling and functionality
• task: [Link] Refactor to simplify implied usage of RouterLink
• task: [Link] Remove unnecessary usages of the isRouterLink prop
• task: Overrides DS Notification styles to ensure icon colors consistently match link's status-based (visited, hover) styles

Screenshots

Filing home

Filing landing

Filing overview

Filing upload

Filing errors

Filing warnings

Filing Point of Contact

Filing Sign and Submit

User profile

[meissadia]

@natalia-fitzgerald Please follow-up with devs on how we want to handle external links where the icon wraps to a new line.

One potential solution is to use the Link component's noWrap property, which would keep the link text + icon together, but looks like it could introduce it's own wrapping oddities. Example screenshot below:

Description	Screenshot
Without noWrap (allow link text to wrap)
With noWrap (prevent link text from wrapping)

[natalia-fitzgerald]

@meissadia
Can you show the same two screenshots at mobile? I do worry that forcing no wrap could introduce even further oddities at smaller screen widths.

[meissadia]

@meissadia Can you show the same two screenshots at mobile? I do worry that forcing no wrap could introduce even further oddities at smaller screen widths.

@natalia-fitzgerald On large mobile (width: 425px)

Regular	No wrap

[natalia-fitzgerald]

@meissadia
Would it be possible to push the no wrap solution to a dev server so that I can click around and see how that approach looks across a few instances?

[meissadia]

Implemented no-wrap for external links, ready for deploy to DEV for evaluation by Design.

[billhimmelsbach]

Going to start deploying this now!

[billhimmelsbach]

It's up on Dev @meissadia and @natalia-fitzgerald!

[natalia-fitzgerald]

@meissadia
I took a look at the no-wrap implementation on Dev.

Assessment of no wrap

After additional consideration, I recommend that we handle external links the way we handle any link + icon. My preference is to follow the CFPB Design System and cf.gov website approach to link + icon, unless we identify a problem with this general approach. I believe that the standard approach in the DS and on cf.gov is to allow wrapping of links with and without icons. Is that your understanding? Here's a link to the link + icon section in the CFPB Design System.

One odd line break I saw was for Global LEI Foundation (GLEIF) where the no wrap made this stay on one line instead of wrapping and created awkward white space. Here the wrap solution is preferable.

Regular	No wrap

When does an external link icon appear next to a link?

On cf.gov, we use the external links icon for links to pages that take you outside of the CFPB sphere of webpages, examples on the beta platform would be Login.gov, the Federal Reserve, GLEIF, etc. In terms of what's shown on Dev it seems like the external link is being added to any link any link that will take you outside of the beta platform, even links to cf.gov content, for example the filing instructions guide and iRegs. If we go with the approach of only including the external link icon for links that take you out of the CFPB sphere of webpages, the number of instances would be greatly reduced, and this task would be a lot narrower. I recommend we take that approach.

I noticed some odd outlier behaviors that we should address:

Dotted underline extending under the icon
Dotted underline should not extend beyond the link text.

Underline is extending under the icon

Dotted underline is missing
All standard inline links and list links should include the dotted underline.

Underline is missing

Links to the same pages sometimes have an external link icon and sometimes don't.
The use of the external link icon should be consistently applied.

Filing instructions guide - no icon	Filing instructions guide - includes icon

Email our support staff includes icon and then doesn't

[meissadia]

@natalia-fitzgerald Thanks you very much for the detailed review!! This is phenomenal guidance for my next steps.

• No wrap
  • Yes, DS Links wrap even if icon ends up on a separate line than the link text. I will follow that guidance.
• CPFB sphere
  • I will work to compile a list of "internal" domains so that we can programmatically derive internal vs external
  • I imagine we want this functionality implemented in the DSR so that it is consistent across all CFPB applications
• Inconsistencies I am working to address
  • Dotted underline should not extend beyond the link text
  • Dotted underline is missing
  • The use of the external link icon should be consistently applied

[billhimmelsbach]

Heyo! A couple changes needed here.

[billhimmelsbach]

Heyo! Just summarizing our review from yesterday @meissadia:

1. Let's keep the underline for emails (like on the authenticated landing page), maybe take a quick look at why the underline is removed there when it's considered internal now?
2. Add an exception to the _blank logic for iRegs links and filing instruction guides, maybe based on the url?

We'll handle more external link logic at a later date.

[natalia-fitzgerald]

@meissadia
The external links icon work looks good on dev pub. We plan to create a more logical system for when links should and shouldn't open in a new tab so I'm fine with the in between implementation since we'll iterate on this soon. Here's the spike issue where Dan and I are discussing this behavior. cfpb/sbl-ux#18

[billhimmelsbach]

Code looks good, thanks for the fixes!