import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Link from '../Link';

<Meta
  title="Components/Link"
  component={Link}
  argTypes={{
    variant: {
      name: 'variant',
      description: 'The variant color.',
      table: {
        type: {
          summary: '"primary" | "inverse" | "neutral"',
        },
        defaultValue: { summary: 'primary' },
      },
      control: {
        type: null,
      },
    },
    size: {
      name: 'size',
      description: 'The size of the link.',
      table: {
        type: {
          summary: '"sm" | "md"',
        },
        defaultValue: { summary: 'md' },
      },
      control: { type: null },
    },
    icon: {
      name: 'icon',
      description: 'A optional link icon.',
      table: {
        type: {
          summary: '"linkChevron", "externalLink", ""',
        },
        defaultValue: { summary: '' },
      },
      control: { type: null },
    },
  }}
/>

# Link API

The API documentation of the Link React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Link } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <Link>Link text</Link>
  </Story>
</Canvas>

## Props

<ArgsTable story="Usage" of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class         | Description                             |
| -------------------- | --------------------------------------- |
| .ods-link            | Styles applied to the root element.     |
| .ods-link\_\_content | Styles applied to the children element. |
| .ods-link\_\_icon    | Styles applied to the icon.             |
| .ods-link--with-icon | Styles applied when it has an icon.     |
| .ods-link--primary   | Sets styles of the link.                |
| .ods-link--inverse   | Sets styles of the inverse link.        |
| .ods-link--neutral   | Sets styles of the neutral link.        |
| .ods-link--[sm,md]   | Specifies the font size of the link.    |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Link/Link.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      children: 'My Link',
      size: 'md',
    }}
    argTypes={{
      children: {
        name: 'children',
        control: 'text',
      },
      variant: {
        name: 'variant',
        options: ['primary', 'inverse', 'neutral'],
        control: { type: 'select' },
      },
      size: {
        name: 'size',
        options: ['sm', 'md', 'tiny'],
        control: { type: 'select' },
      },
      icon: {
        name: 'icon',
        options: [' ', 'linkChevron', 'externalLink'],
        control: { type: 'select' },
      },
    }}
  >
    {(props) => <Link href="https://www.google.com.br/?hl=pt-BR" {...props} />}
  </Story>
</Canvas>
