Create <TextLink /> component

[honzatmn]

Description

Link is used usually in the paragraph text to show that something navigates you to another location.

Visual style

Parameters

Parameter	Values	Default
Style	Primary, Secondary	Primary
External	[boolean]	false

Note: When external is true, it opens links in new tab/window.

Design tokens

For all configurations:
font-weight: $fontWeightLinks

Based on selected configuration:

Parameter:Value	property: $token
Style:Primary	color: $colorLinkPrimary
Style:Secondary	color: $colorLinkSecondary text-decoration: underline // token not needed, just visual change

Hover behavior

There are two things that will happen when the user hovers any link:

• Underline appears
• The text color will change to the darker version of $colorLinkPrimary color (for both styles, actually). For darkening percentage use design token $modifierDarkenHover

Other things to mention

• If it’s possible, it should be used only inside <Text> or <Headline> components and it should inherit Size from parent text.
• We are showing pointer cursor for every link
• For the visited state of links, please use original link color (at least for now, it’s possible that this will change in future).
• For focus state please keep outline there, until we decide what to do next with visited and focus state.

Some inspiration from other’s React components for heading component:

https://polaris.shopify.com/components/navigation/link
https://instacart.github.io/Snacks/#link-1
http://grommet.io/docs/anchor
http://design-system.pluralsight.com/components/link/
http://www.jetbrains.org/ring-ui/link.html

[honzatmn]

After discussion with @wEprous, we added few new tokens for taking control of link underline.

Token	Value
$textDecorationLinkPrimary	none
$textDecorationLinkPrimaryHover	underline
$textDecorationLinkSecondary	underline
$textDecorationLinkSecondaryHover	underline