import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { Link } from './link.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="Actions\Link" component={Link} />

# Link

A link component that accepts an `href` or an `onClick`. Renders with the primary branded color variant.

## Accessibility notes

This component will render a `button` or an `a` tag depending on whether it is provided with an `href` or an `onClick`.

## Variations

### Defaults

<Canvas>
  <Story id="components-actions-link--default-href" />
  <Story id="components-actions-link--default-on-click" />
</Canvas>

### Size

<Canvas>
  <Story id="components-actions-link--size" />
</Canvas>

### Color

<Canvas>
  <Story id="components-actions-link--color" />
</Canvas>

### Span Styling

<Canvas>
  <Story id="components-actions-link--span-styling" />
</Canvas>

## Props

<FlowPropsTable ofComponent={Link} />

## External Reference

<ExternalReferenceLink src="" type="figma" />
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/typography/link"
  type="github"
/>