npm package: @highlight-ui/link
Description: Link component for Highlight UI
Author: Personio GmbH & Co. KG
Latest version: 3.1.8

[![npm](https://img.shields.io/npm/v/@highlight-ui/link)](https://www.npmjs.com/package/@highlight-ui/link)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/525fe1-link)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/navigation-link--standalone)

# @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 <b>show or hide the icon</b>)
  - inline

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

## Installation

Using npm:

```bash
npm install @highlight-ui/link
```

Using yarn:

```bash
yarn add @highlight-ui/link
```

Using pnpm:

```bash
pnpm install @highlight-ui/link
```

In your (S)CSS file:

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

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

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

## Usage

### standalone internal Link

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

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

### standalone external Link

```tsx
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

```tsx
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

```tsx
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](https://www.personio.design/40d648a47/v/0/p/525fe1-link/b/68c7d2) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).