As a DS designer and developer, I want to be able to create links, because they are needed in the Simple Query Builder.

ACs

• Links' styles are based on the Figma specs and follows the behavior and accessibility principles defined in the component documentation (TBD by @Sarai-WMDE).
• The link styles are based on/created on top of link tokens (available in this draft PR).
• Links are documented in Storybook according to the specifications (see below)

States

Links have the following states (as seen in the specs):

• Default state
• Hover
• Active
• Focus
• Visited

Storybook:

The link component will be included in its own Storybook page, under Vue components:

• Basic (controllable story displaying a link without icon)
• All (displays all link variants – with and without icon – and states)

Controls should allow users to enable the icon, edit the link text and mark the link as visited.

Notes:

To decide whether the following link features should be in scope:

• A prop should allow implementers to make links underlined by default (see specs)
• Link can take icons before and after the link text
• In order to be able to use links embedded in description paragraphs, we should create a link mixin or class. The same mixin/class could be applied to create the link component