Externe link component

[Robbert]

Waarschijnlijk het handigst een wrapper te maken van de Utrecht Link met jullie externe link functionaliteit als extra feature.

• Gebruik de wrapper van Utrecht als je een externe link icoon hebt
• Let op de accessibility van icon, moet wel text-equivalent hebben
• external prop gebruiken (en weer doorgeven aan Utrecht Link) voor privacy en noreferrer enzo

Link.tsx aanmaken in deze component library voor React:

import { Link as UtrechtLink, type LinkProps as UtrechtLinkProps } from '@utrecht/component-library-react/dist/css-module';

interface RhcLinkProps extends UtrechtLinkProps {
  externalLabel?: string;
}

export const Link = forwardRef(
  (({ externalLabel, ...restProps}: RhcLinkProps, ref: ForwaredRef<HTMLAnchorElement>) => <UtrechtLink {...restProps} ref={ref}>{restProps.external && <Icon role="img" aria-label={externalLabel}><ExternalIconSVG/></Icon>}{children}</Link>);

index.ts:

export * from '@utrecht/component-library-react/dist/css-module';

// Overwrite some components
export { Link } from './Link';

Voorbeeld van een wrapper van UtrechtLink voor Next.js: https://github.com/frameless/strapi/blob/main/packages/ui/src/components/AdvancedLink/index.tsx

Figma
Link component in NLDS - Rijksoverheid - Bibliotheek

[AlineNap]

Zie feedback in link story: #474 (comment)