@highlight-ui/link

Links are used for navigation, and usually appear standalone or at the end of a sentence.

Features

• Link

  • standalone (depending on the provided href value the component will determine if the link should be external or internal and therefore either show or hide the icon)
  • inline

• external-link icon is part of the <Link variant="standalone" /> and should be automatically shown depending on the href provided

Installation

Using npm:

npm install @highlight-ui/link

Using yarn:

yarn add @highlight-ui/link

Using pnpm:

pnpm install @highlight-ui/link

In your (S)CSS file:

@import url('@highlight-ui/link');

Once the package is installed, you can import the library:

import { Link } from '@highlight-ui/link';

Usage

standalone internal Link

import React, { useState } from 'react';
import { Link } from '@highlight-ui/link';

export default function LinkExample() {
  return <Link href="/settings">Settings</Link>;
}

standalone external Link

import React, { useState } from 'react';
import { Link } from '@highlight-ui/link';

export default function LinkExample() {
  return <Link href="http://personio.de">Personio</Link>;
}

inline Link

import React, { useState } from 'react';
import { Link } from '@highlight-ui/link';

export default function LinkExample() {
  return (
    <div>
      This is some inline text{' '}
      <Link href="/settings" variant="inline">
        this is the link
      </Link>{' '}
      this is text after the inline link
    </div>
  );
}

Props 📜

Link

All HTMLAnchorElement and [PropsWithMetadata(https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/utils/commons/src/types.ts#L24)] props are accepted with this component. In addition to these, this component has the following props

| Prop | Type | Required | Default | Description | | :-------- | :------------------------- | :------- | :----------- | :---------------------------------------------- | | variant | 'inline', 'standalone' | No | standalone | variant of the link depending on how it is used |

Accessibility ♿️

The Link component follows best practices for accessibility:

• Uses a native <a> element to ensure proper keyboard navigation and focus handling

Testing

There are a number of unit tests covering the Link component, the snippets below can serve as a base to expand future testing if new behaviours are added.

The relevant render methods provide the option to add or override prop values.

Link

import React from 'react';
import { render } from '@testing-library/react';

import { Link, LinkProps } from '@highlight-ui/link';

describe('LinkTest', () => {
  const renderLink = (props: LinkProps) => {
    return render(<Link {...props} />);
  };

  it('test description', () => {
    renderLink({ href: '/test' });
    // write your expect here
  });
});

Place in design system 💻

The link component is an element of the design system and can be used across various services and contexts. It provides a consistent look and feel for user navigation.

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.