Page MenuHomePhabricator

(MS 5) Create link component
Closed, ResolvedPublic8 Estimated Story Points

Description

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

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Sarai-WMDE renamed this task from Create link component to Create link.Jan 26 2021, 2:33 PM
Sarai-WMDE updated the task description. (Show Details)
amy_rc renamed this task from Create link to (MS 5) Create link.Jan 27 2021, 2:50 PM
Sarai-WMDE renamed this task from (MS 5) Create link to (MS 5) Create link component.Feb 3 2021, 4:49 PM
bete removed bete as the assignee of this task.Feb 17 2021, 8:42 AM
bete added a subscriber: bete.
Sarai-WMDE removed the point value for this task.