import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { Link } from "./Link";
import * as LinkStories from "./Link.stories";

<Meta of={LinkStories} />

# Link

Link component is a wrapper around the `a` HTML element.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Link } from "@simplybusiness/mobius";
```

## Usage with `react-router-dom`

To use with react-router-dom, you need to pass the `to` prop and the elementType prop as the `Link` component.

{/* prettier-ignore */}
```js
import { Link as RouterLink } from "react-router-dom";
import { Link } from "@simplybusiness/mobius";

<Link elementType={RouterLink} to="/">
  Home
</Link>
```

## Usage with `NextJS`

NextJS has it's own type of link element supplied in the `next/link` package. This element uses the `href` prop, but cannot be consumed in an `elementType` prop like `react-router` (above).

NextJS has some peccadillos about how `next/link` should be used, notably:

- It should generally wrap other content (rather than be wrapped); and
- It cannot support `onClick`; if you need that you should nest an anchor tag inside and set the prop on that.

Taking these into account, the correct "Next Way" is to wrap our Mobius Link like so:

{/* prettier-ignore */}
```js
import NextLink from "next/link";
import { Link } from "@simplybusiness/mobius";

...

<NextLink href={url}>
   <Link href={url}>{value}</Link> // onClick would also go here if needed
</NextLink>
```

### `NextJS` v13

NextJS v13 updated the `next/link` component to no longer require passing a link as a child to the component. This means that the above example can be simplified to:

{/* prettier-ignore */}
```js
import NextLink from "next/link";
import { Link } from "@simplybusiness/mobius";

...

<Link href={url} elementType={NextLink}>{value}</Link>
```

## Examples

### Default

<Canvas of={LinkStories.Default} />

### Disabled

<Canvas of={LinkStories.Disabled} />

## Props

<ArgTypes of={Link} />

## Component HTML Structure and Class names

The following HTML is rendered for a Link:

```html
<a class="mobius-link" href="path/to/page">{link text}</a>
```
