import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { Link } from "./Link";
import { Box } from "../Box";
import { STATUS_VARIANT } from "../../types";
import { EnumTable } from "../../storybook-components/EnumTable";
import { StatusContext } from "../../contexts/status";

<Meta title="Components/Navigation/Link" component={Link} />

# Link

`Link`, by default, renders a styled `<a>` element that goes to the url provided to the `href` prop. It can also render other elements including (but not limited to) `<button>` or a React Router's `Link` component by passing it to the `as` prop.

To render a `Link` without any of its included styles, use the `noStyles` prop.

`Link` also comes with a `statusVariant` prop that can be used when within another component that is displaying status (e.g. `Banner`).

[See examples](#demos)

```jsx
import { Icon } from "@aptible/arrow-ds";
import { StatusIcon } from "@aptible/arrow-ds";
```

export const variants = Object.values(STATUS_VARIANT);

<Preview>
  <Story name="Link">
    <Link href="/link" className="inline-block mb-2">
      This is a Link
    </Link>
  </Story>
</Preview>

## Props

These are all of the props for `Link`.

<Props of={Link} />

<EnumTable enums={{ STATUS_VARIANT }} />

## Demos

### Disabled

<Preview>
  <Story name="Disabled Link">
    <Link href="/" disabled>
      This is a disabled Link
    </Link>
  </Story>
</Preview>

### Link as button

<Preview>
  <Story name="Link as Button">
    <Box>
      <Link href="/" as="button" className="mb-2">
        This is a Link-styled button
      </Link>
      <br />
      <Link as="button" disabled>
        This is a disabled Link-styled button
      </Link>
    </Box>
  </Story>
</Preview>

### No Styles

<Preview>
  <Story name="Link Without Styles">
    <Link href="/" noStyles>
      This is a Link without styles
    </Link>
  </Story>
</Preview>

### Status Variants

These status variants are meant to be used inside components that are displaying status, such as `Banner`.

<Preview>
  <Story name="Link Status Variants">
    {() =>
      variants.map((variant) => (
        <Box className="mb-2" key={variant}>
          <Link href="/" statusVariant={STATUS_VARIANT[variant.toUpperCase()]}>
            {variant}
          </Link>
        </Box>
      ))
    }
  </Story>
</Preview>

### Status Variant Context

If a `Link` is within a `StatusContext.Provider`, it will automatically use that as its `statusVariant`. To override this, provide a value to the `Link`'s `statusVariant` prop.

<Preview>
  <Story name="Link Status Variant Context">
    <StatusContext.Provider value={STATUS_VARIANT.DANGER}>
      <Link href="/">This Link is using StatusContext</Link>
    </StatusContext.Provider>
  </Story>
</Preview>

### Target

If a `Link` receives the `target='_blank'` prop to open the link in a new window, it will automatically apply secure `rel` options.

<Preview>
  <Story name="New Window Link">
    <Link target="_blank" href="http://www.google.com">
      This Link will open in a new window
    </Link>
  </Story>
</Preview>