Linklist

[AlineNap]

Omschrijving

Een lijst met gerelateerde links naar andere pagina’s of websites.

Let op: (CSS) Column Width is Utrecht-specifiek en heeft geen tokens er voor. Nemen we niet over. (React) links-property mag wel overgenomen worden.

In de documentatie mogen meer voorbeelden van gebruikt, beschreven worden, zoals "snel naar"-links, footer-links, etc.

Links

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

Checks

Definition of ready

• [x] Code check op community component (door LUX)
• [x] Styling check op community component (door LUX)
• [x] Plan voor missende features of bugs community component beschreven in ticket
• [x] Component tokens zijn beschikbaar op main
• [x] 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
  • Wat doen (speciale) features
  • 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)

[AlineNap]

Stijling check is goed!

Let op positioneren van icoon

Let bij het bouwen op het positioneren van het icoon, dit gaat geregeld mis. Zie comment bij de onze eigen link, rhc links list en het ticket om hier een brede oplossing voor te bedenken.