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