import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as LinkStories from "./Link.stories";

<Meta of={LinkStories} />

# Link

The purpose of the Link component is to enable seamless navigation by connecting users to other pages, sections, or resources. It provides a consistent, accessible, and visually recognizable way to interact with content, ensuring clarity and usability while maintaining the design system's cohesion.

## Usage

<Canvas of={LinkStories.Documentation} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const LinkExample = () => {
return (

<div>
  <p>
    This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
  </p>
  <p>
    <Link to="/settings" variant="secondary" size="lg">
      This is a large secondary link
    </Link>
  </p>
  <p>
    <Link to="/help" underline={true}>
      This link is underlined by default
    </Link>
  </p>
</div>
); };

export default LinkExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Link/Link.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={LinkStories.Documentation} />

```tsx
import React from "react";
import { Link } from "@webiny/admin-ui";

const LinkExample = () => {
  return (
    <div>
      <p>
        This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
      </p>
      <p>
        <Link to="/settings" variant="secondary" size="lg">
          This is a large secondary link
        </Link>
      </p>
      <p>
        <Link to="/help" underline={true}>
          This link is underlined by default
        </Link>
      </p>
    </div>
  );
};

export default LinkExample;
```

## Examples

### Default

<Canvas of={LinkStories.Default} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const DefaultLinkExample = () => {
return (

<Link to="#">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
  rhoncus.
</Link>
); };

export default DefaultLinkExample;
` } } />

### Size Variants

#### Extra Large (XL)

<Canvas of={LinkStories.LinkXl} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const XlLinkExample = () => {
return (

<Link to="#" size="xl">
  Extra large link
</Link>
); };

export default XlLinkExample;
` } } />

#### Large (LG)

<Canvas of={LinkStories.LinkLg} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const LgLinkExample = () => {
return (

<Link to="#" size="lg">
  Large link
</Link>
); };

export default LgLinkExample;
` } } />

#### Medium (MD)

<Canvas of={LinkStories.LinkMd} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const MdLinkExample = () => {
return (

<Link to="#" size="md">
  Medium link
</Link>
); };

export default MdLinkExample;
` } } />

#### Small (SM)

<Canvas of={LinkStories.LinkSm} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const SmLinkExample = () => {
return (

<Link to="#" size="sm">
  Small link
</Link>
); };

export default SmLinkExample;
` } } />

### Inherited Size

<Canvas of={LinkStories.InheritedSize} source={ { code: `
import React from "react";
import { Link, Text } from "@webiny/admin-ui";

const InheritedSizeLinkExample = () => {
return (

<Text>
  <Text size="lg">
    Size of this text is set to large, so,&nbsp;
    <Link to="#">this link's</Link> size is also automatically set to large.
  </Text>
</Text>
); };

export default InheritedSizeLinkExample;
` } } />

### With Underline

<Canvas of={LinkStories.WithUnderline} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const UnderlinedLinkExample = () => {
return (

<Link to="#" underline={true}>
  This link is underlined by default
</Link>
); };

export default UnderlinedLinkExample;
` } } />

### Primary Negative

<Canvas of={LinkStories.PrimaryNegative} source={ { code: `
import React from "react";
import { Link, Text } from "@webiny/admin-ui";

const PrimaryNegativeLinkExample = () => {
return (

<div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
  <Text>
    Lorem{" "}
    <Link to="#" variant="primary-negative">
      ipsum dolor sit amet
    </Link>
    , consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
  </Text>
</div>
); };

export default PrimaryNegativeLinkExample;
` } } />

### Secondary Negative

<Canvas of={LinkStories.SecondaryNegative} source={ { code: `
import React from "react";
import { Link, Text } from "@webiny/admin-ui";

const SecondaryNegativeLinkExample = () => {
return (

<div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
  <Text>
    Lorem{" "}
    <Link to="#" variant="secondary-negative">
      ipsum dolor sit amet
    </Link>
    , consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
  </Text>
</div>
); };

export default SecondaryNegativeLinkExample;
` } } />

## Anatomy

### Primary

<img src="/images/storybook/link/primary.png" alt="Primary" />

### Secondary

<img src="/images/storybook/link/secondary.png" alt="Secondary" />

### Sizing

Links inherit font styles of surrounding text.

<img src="/images/storybook/link/sizing.png" alt="Sizing" />

### State

<img src="/images/storybook/link/states.png" alt="State" />

## Usage

<img src="/images/storybook/link/usage.png" alt="Usage" />