generated from nl-design-system/example
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Closes #474 Closes #448 --------- Co-authored-by: Ruben Smit <[email protected]>
- Loading branch information
2 people
authored and
Mees Work
committed
Aug 22, 2024
1 parent
5979129
commit a3ee4dd
Showing
12 changed files
with
247 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * @license EUPL-1.2 | ||
| * Copyright (c) 2021 Community for NL Design System | ||
| */ | ||
|
|
||
| .utrecht-link:any-link { | ||
| align-items: center; | ||
| column-gap: var(--utrecht-link-column-gap, inherit); | ||
| display: inline-flex; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { createRef } from 'react'; | ||
| import { Link } from './Link'; | ||
| import '@testing-library/jest-dom'; | ||
|
|
||
| describe('Link', () => { | ||
| it('renders an link role element', () => { | ||
| render(<Link href="/">Home</Link>); | ||
|
|
||
| const link = screen.getByRole('link', { name: 'Home' }); | ||
|
|
||
| expect(link).toBeInTheDocument(); | ||
| expect(link).toBeVisible(); | ||
| }); | ||
|
|
||
| it('renders an HTML a element', () => { | ||
| const { container } = render(<Link>{'https://example.com/'}</Link>); | ||
|
|
||
| const link = container.querySelector('a:only-child'); | ||
|
|
||
| expect(link).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders a design system BEM class name', () => { | ||
| const { container } = render(<Link />); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| expect(link).toHaveClass('utrecht-link'); | ||
| }); | ||
|
|
||
| it('renders rich text content', () => { | ||
| const { container } = render( | ||
| <Link href="https://example.com/"> | ||
| <strong>https:</strong> | ||
| {'//example.com/'} | ||
| </Link>, | ||
| ); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| const richText = link?.querySelector('strong'); | ||
|
|
||
| expect(richText).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('can be hidden', () => { | ||
| const { container } = render(<Link hidden />); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| expect(link).not.toBeVisible(); | ||
| }); | ||
|
|
||
| it('can have a custom class name', () => { | ||
| const { container } = render(<Link className="visited">{'https://example.com/'}</Link>); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| expect(link).toHaveClass('visited'); | ||
| }); | ||
| it('can have a additional class name', () => { | ||
| const { container } = render(<Link className="large" />); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| expect(link).toHaveClass('large'); | ||
|
|
||
| expect(link).toHaveClass('utrecht-link'); | ||
| }); | ||
| it('supports ForwardRef in React', () => { | ||
| const ref = createRef<HTMLAnchorElement>(); | ||
|
|
||
| const { container } = render(<Link ref={ref}>{'https://example.com/'}</Link>); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| expect(ref.current).toBe(link); | ||
| }); | ||
|
|
||
| describe('variant for external links', () => { | ||
| it('renders a design system BEM class name', () => { | ||
| const { container } = render(<Link external />); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| expect(link).toHaveClass('utrecht-link--external'); | ||
| }); | ||
|
|
||
| it('prevents sharing referer information', () => { | ||
| const { container } = render(<Link external />); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| expect(link).toHaveAttribute('rel'); | ||
|
|
||
| expect(link?.getAttribute('rel')).toContain('noreferrer'); | ||
| }); | ||
|
|
||
| it('prevents access to window.opener', () => { | ||
| const { container } = render(<Link external />); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| expect(link).toHaveAttribute('rel'); | ||
|
|
||
| expect(link?.getAttribute('rel')).toContain('noopener'); | ||
| }); | ||
|
|
||
| it('provides semantic information that the link is external', () => { | ||
| const { container } = render(<Link external />); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| expect(link).toHaveAttribute('rel'); | ||
|
|
||
| expect(link?.getAttribute('rel')).toContain('external'); | ||
| }); | ||
| describe('External link icon', () => { | ||
| it('contains a visual icon that the link is external', () => { | ||
| const { container } = render(<Link external />); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| const icon = link?.querySelector('.utrecht-icon'); | ||
|
|
||
| expect(icon).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('contains a visual icon that has an aria-label that comes from a property', () => { | ||
| const { container } = render(<Link external externalLabel="some-external-label" />); | ||
|
|
||
| const link = container.querySelector(':only-child'); | ||
|
|
||
| const icon = link?.querySelector('.utrecht-icon'); | ||
|
|
||
| expect(icon).toBeInTheDocument(); | ||
|
|
||
| expect(icon).toHaveAttribute('aria-label'); | ||
|
|
||
| expect(icon?.getAttribute('aria-label')).toContain('some-external-label'); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { | ||
| Icon, | ||
| Link as UtrechtLink, | ||
| type LinkProps as UtrechtLinkProps, | ||
| } from '@utrecht/component-library-react/dist/css-module'; | ||
| import { ForwardedRef, forwardRef } from 'react'; | ||
| import '@rijkshuisstijl-community/components-css/index.scss'; | ||
|
|
||
| const IconExternalLink = () => ( | ||
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M12 2C11.4477 2 11 1.55228 11 1C11 0.447715 11.4477 0 12 0H17C17.5523 0 18 0.447715 18 1V6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6V3.41421L7.70711 11.7071C7.31658 12.0976 6.68342 12.0976 6.29289 11.7071C5.90237 11.3166 5.90237 10.6834 6.29289 10.2929L14.5858 2H12ZM0 6C0 4.34315 1.34315 3 3 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H3C2.44772 5 2 5.44772 2 6V15C2 15.5523 2.44772 16 3 16H12C12.5523 16 13 15.5523 13 15V10C13 9.44771 13.4477 9 14 9C14.5523 9 15 9.44771 15 10V15C15 16.6569 13.6569 18 12 18H3C1.34315 18 0 16.6569 0 15V6Z" | ||
| fill="#01689B" | ||
| /> | ||
| </svg> | ||
| ); | ||
|
|
||
| interface RhcLinkProps extends UtrechtLinkProps { | ||
| externalLabel?: string; | ||
| } | ||
|
|
||
| export const Link = forwardRef( | ||
| ({ children, externalLabel, ...restProps }: RhcLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => ( | ||
| <UtrechtLink {...restProps} ref={ref}> | ||
| {children} | ||
| {restProps.external && ( | ||
| <Icon role="img" aria-label={externalLabel}> | ||
| <IconExternalLink /> | ||
| </Icon> | ||
| )} | ||
| </UtrechtLink> | ||
| ), | ||
| ); | ||
|
|
||
| Link.displayName = 'Link'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.