diff --git a/packages/css/src/components/link-list/README.md b/packages/css/src/components/link-list/README.md index 23b887a7aa..b73be43da3 100644 --- a/packages/css/src/components/link-list/README.md +++ b/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. diff --git a/packages/react/src/LinkList/LinkList.tsx b/packages/react/src/LinkList/LinkList.tsx index 2debd1a87f..5f14221879 100644 --- a/packages/react/src/LinkList/LinkList.tsx +++ b/packages/react/src/LinkList/LinkList.tsx @@ -14,6 +14,7 @@ interface LinkListComponent extends ForwardRefExoticComponent) => { return ( diff --git a/packages/react/src/LinkList/LinkListLink.tsx b/packages/react/src/LinkList/LinkListLink.tsx index 7b9827a1a9..67c85c4ac0 100644 --- a/packages/react/src/LinkList/LinkListLink.tsx +++ b/packages/react/src/LinkList/LinkListLink.tsx @@ -13,15 +13,26 @@ import { Icon } from '../Icon' type BackgroundName = 'default' | 'light' | 'dark' export interface LinkListLinkProps extends PropsWithChildren> { + /** 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> {} +/** One link with a Link List. */ export const LinkListLink = forwardRef( ( { children, className, href, icon, onBackground, size, ...restProps }: LinkListLinkProps, diff --git a/storybook/storybook-react/src/LinkList/LinkList.docs.mdx b/storybook/storybook-react/src/LinkList/LinkList.docs.mdx index 3b03c3e7ab..90c97b1694 100644 --- a/storybook/storybook-react/src/LinkList/LinkList.docs.mdx +++ b/storybook/storybook-react/src/LinkList/LinkList.docs.mdx @@ -6,25 +6,30 @@ import README from "../../../../packages/css/src/components/link-list/README.md? {README} -## Voorbeelden +## Examples -### Basis +### Default ### 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. ### 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. ### 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. +