Link

[AlineNap]

Omschrijving

Een verwijzing om een een externe bron of bestand te openen of te navigeren binnen dezelfde pagina of website.

Playground en stories

Niet alle stories op Utrecht's Storybook hoeven overgenomen worden, wat iig op onze Storybook moet komen is:

• States
  • Hover
  • Active
  • Focus
• External
• Link met icon

Definition of ready

• Code check op community component gedaan door lux devs
• Stijling check op community component gedaan door Aline
• Plan voor missende features of bugs van het community component beschreven in het ticket
• Component tokens zijn beschikbaar op main
• Ticket doorgenomen met uitvoerder

Definition of done

Component

• Component is beschikbaar in de index
• Design tokens worden gebruikt

Storybook

• Playground story
• States en properties stories
• Korte beschrijving van het component
  • Wat doet het
  • Basis van het component (bijv Utrecht)
  • Aanpassingen en/of uitbreidingen
  • Relatie met andere componenten (bijv. Form field label en Form field)

Tests

• Het component rendert
• Aanpassingen en/of uitbreidingen werken (zie ook Testing components)
• Visual regression test (door LUX)

Links

• Component: https://www.nldesignsystem.nl/link
• NLDS Figma: https://www.figma.com/design/jzxqJv4PtgHJdmOJwY6lYg/NLDS---Bibliotheek---LUX-tokens?node-id=153-1056
• Community component:
  • CSS: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-link--docs
  • React: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-link--docs
  • Code: https://github.com/nl-design-system/utrecht/blob/main/packages/component-library-react/src/Link.tsx

[AlineNap]

Remy of Jaap-Hein doet nog een PR op utrecht om wat issues met de link te fixen van utrecht. oa om de stijling van de active link te verbeteren.

Issue: nl-design-system/utrecht#2476

[AlineNap]

Design review 29 oktober

Component

1. Icoon graag in het midden positioneren. Kijk naar deze spike en de vele conversaties hierover bij RHC, bijvoorbeeld bij de link-list. Liefst komt er een oplossing die herbruikbaar is over de verschillende componenten en mee schaalt bij kleiner font-size op mobiel.
2. De active state zou paars moeten zijn, heeft dit te maken met de bug op utrecht?
3. Laat een externe link niet standaard openen in een nieuwe tab. Dat is niet toegankelijk voor blinden en slechtziende, er is namelijk onverwachte contextverandering (een nieuwe tab). Bekijk WCAG Successcreterium 3.2.2 voor meer achtergrond informatie.
4. Extra: Kunnen we een propperty toevoegen aan de playground die de tekst (opent in een nieuw venster) erachter krijgt? Is dat veel werk? Liever een nieuw ticket? In sommige gevallen wil je een tab namelijk wel openen in een nieuw venster, bijvoorbeeld als je een link opent tijdens het invullen van een formulier. Dan wil je niet dat de gebruiker zijn ingevulde gegevens verliest. Zie bijgevoegd het design bij A&M.

Documentatie

1. Een voorbeeld van de visited state toevoegen
2. In de documentatie niet het label gebruiken om de visuele weergeven aan te geven. Gebruik liever het woord label of voorbeeldlink zoals utrecht doet. Dat is toegankelijker.
3. Focus graag veranderen in focus-visible en dat de focus outline zichtbaar is.

[VladAfanasev]

Design review 29 oktober

Component

• > 1. Icoon graag in het midden positioneren. Kijk naar deze spike en de vele conversaties hierover bij RHC, bijvoorbeeld bij de link-list. Liefst komt er een oplossing die herbruikbaar is over de verschillende componenten en mee schaalt bij kleiner font-size op mobiel.
• > 2. De active state zou paars moeten zijn, heeft dit te maken met de bug op utrecht?
  ---> @AlineNap volgensmij staat de active state wel goed. Wil je hier nog een keer naar kijken?
• > 3. Laat een externe link niet standaard openen in een nieuwe tab. Dat is niet toegankelijk voor blinden en slechtziende, er is namelijk onverwachte contextverandering (een nieuwe tab). Bekijk WCAG Successcreterium 3.2.2 voor meer achtergrond informatie.
• > 4. Extra: Kunnen we een propperty toevoegen aan de playground die de tekst (opent in een nieuw venster) erachter krijgt? Is dat veel werk? Liever een nieuw ticket? In sommige gevallen wil je een tab namelijk wel openen in een nieuw venster, bijvoorbeeld als je een link opent tijdens het invullen van een formulier. Dan wil je niet dat de gebruiker zijn ingevulde gegevens verliest. Zie bijgevoegd het design bij A&M.

Documentatie

• > 1. Een voorbeeld van de visited state toevoegen
• > 2. In de documentatie niet het label gebruiken om de visuele weergeven aan te geven. Gebruik liever het woord label of voorbeeldlink zoals utrecht doet. Dat is toegankelijker.
• > 3. Focus graag veranderen in focus-visible en dat de focus outline zichtbaar is.
  ---> @AlineNap deze even checken