Add "Link::Inline" component (05)

[didoo]

📌 Summary

This PR intends to add the missing counter-part of the Link::Standalone (a link that's used in isolation, not inline with adjacent text) component: the Link::Inline (a link that's used within a body of text).

Why not use just a <a> element?

Because in this way:

• we can use the "logic" provided by the Hds::Interactive component to handle the different kinds of Ember links we need to support (<a>, <LinkTo>, <LinkToExternal>)
• we can control the colors (by design, only primary ("action" color) and secondary (dark gray) should be used)
• we can control in detail the visual treatment of the interaction states (hover/active/focus)

🛠️ Detailed description

In this PR I have:

• added Link::Inline component
  • to resolve some issues with whitespace (see below) I had to slightly modify the template of the Interactive component
• added documentation page (preview here)
• added tests (integration + percy)

🚨 Known issues

• Whitespace - see comment below: Add "Link::Inline" component (05) #231 (comment)
  • found a fix for the "internal" whitespace, but gave up on trying to solve the "external" whitespace (asked @Dhaulagiri and @MelSumner to investigate more, if they have capacity).
• Focus ring - see comment below: Add "Link::Inline" component (05) #231 (comment)
  • decided to go with the simple override of the whole outline: this will make it consistent across all the browsers, apart from the border radius in Safari (something that probably can't be fixed anyway)

🔗 Links

• Proposal about color naming convention in Figma for Link Inline

TODOs

• Decide if it's OK to support also the icon in the component, or we want to remove it - see [WIP] Add icon support to "Link::Inline" component #255
  • let's go with it at this point
• add missing documentation for designers
  • decided we'll add in a follow-up PR

---

👀 How to review

👉 Review by files changed

Reviewer's checklist:

• +1 Percy if applicable

💬 Please consider using conventional comments when reviewing this PR.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 650b9aa

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
hds-components	✅ Ready (Inspect)	Visit Preview	May 19, 2022 at 4:19PM (UTC)
hds-flight-website	✅ Ready (Inspect)	Visit Preview	May 19, 2022 at 4:19PM (UTC)

[didoo]

I forgot that this won't be a component in Figma, so we'll need to add color styles/design tokens to Foreground for product designers.

For actions, we currently have --token-color-foreground-action --token-color-foreground-action-hover --token-color-foreground-action-active

what do you think about adding these? --token-color-foreground-action-secondary (neutral-700) --token-color-foreground-action-secondary-hover (neutral-600) --token-color-foreground-action-secondary-active (neutral-500)

@cveigt in theory yes, but in practice I have two counterpoints:

• they're not really "semantic": in fact they're not used in the Link::Standalone(secondary)
• we're introducing new "global" tokens (colors definitions), to solve the issue with only one small component; and following the suggestion it would mean add them here too:

what do you think @heatherlarsen ?

[alex-ju]

Technically this looks good – happy for it to be merged in the feature branch when the design comments are resolved.

[cveigt]

LGTM 👍 -I like how the focus ring ended up looking. It looks better in the browser than in Figma with the same offset.