Translate and extend documentation

packages/css/src/components/link-list/README.md

@@ -1,16 +1,16 @@
 # Link List
 
-Een verzameling gerelateerde verwijzingen.
+A collection of related links.
 
-## Vormgeving
+## Design
 
-Voor elke verwijzing in de lijst staat een chevron.
-Dit benadrukt het lijst-zijn en de thematische samenhang.
-De chevron is onderdeel van de link.
-Die is dus blauw en er kan op geklikt worden.
+Every list item starts with a chevron.
+It emphasizes the list structure and thematic coherence.
+The chevron is part of the link.
+Therefore, it is blue and clickable.
 
-## Richtlijnen
+## Guidelines
 
-Gebruik een Link List om meerdere verwijzingen binnen een thema aan te bieden.
+Use a Link List to present multiple links within a theme.
 
-Raadpleeg voor meer richtlijnen het [Link](/?path=/docs/navigation-link--docs)-component.
+For additional guidelines, refer to the [Link](?path=/docs/navigation-link--docs) component.

packages/react/src/LinkList/LinkList.tsx

@@ -14,6 +14,7 @@ interface LinkListComponent extends ForwardRefExoticComponent<LinkListProps & Re
   Link: typeof LinkListLink
 }
 
+/** A collection of related links. */
 export const LinkList = forwardRef(
   ({ children, className, ...restProps }: LinkListProps, ref: ForwardedRef<HTMLUListElement>) => {
     return (

packages/react/src/LinkList/LinkListLink.tsx

@@ -13,15 +13,26 @@ import { Icon } from '../Icon'
 type BackgroundName = 'default' | 'light' | 'dark'
 
 export interface LinkListLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {
+  /** The target url for the link. */
   href: string
+  /**
+   * An icon to display instead of the default chevron.
+   * Don’t mix custom icons with chevrons in one list.
+   */
   icon?: Function
+  /** Whether the link sits on a dark background. */
   onBackground?: BackgroundName
+  /**
+   * The text size for the link.
+   * Use the same size for all items in the list.
+   */
   size?: 'small' | 'large'
 }
 
 interface LinkListLinkComponent
   extends ForwardRefExoticComponent<LinkListLinkProps & RefAttributes<HTMLAnchorElement>> {}
 
+/** One link with a Link List. */
 export const LinkListLink = forwardRef(
   (
     { children, className, href, icon, onBackground, size, ...restProps }: LinkListLinkProps,

storybook/storybook-react/src/LinkList/LinkList.docs.mdx

@@ -6,25 +6,30 @@ import README from "../../../../packages/css/src/components/link-list/README.md?
 
 <Markdown>{README}</Markdown>
 
-## Voorbeelden
+## Examples
 
-### Basis
+### Default
 
 <Primary />
 
 ### Small Text
 
-In de [Footer](?path=/docs/react_containers-footer--docs) gebruiken we kleine tekst, ook voor lijsten.
+In the [Footer](?path=/docs/react_containers-footer--docs), we use small text, also for lists.
+Specify this for each item in the list.
 
 <Canvas of={LinkListStories.SmallText} />
 
 ### With Custom Icons
 
-In bepaalde gevallen kan het lijsticoon worden vervangen door een betekenisvol icoon.
-Gebruik beide niet door elkaar in 1 lijst.
+A meaningful icon can help understand a link more quickly or easily.
+In that case, replace the list icon.
+Avoid using both meaningful and list icons in the same list.
 
 <Canvas of={LinkListStories.CustomIcons} />
 
 ### On Dark Background
 
+For a list on a dark background color, specify this for each link in the list.
+The link remains responsible for using appropriate text colors.
+
 <Canvas of={LinkListStories.OnDarkBackground} />