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

<Meta title="Atoms/Link" component={Link} />

# Link
<br />

### `Links` are hyperlink and used to link from one page to another
<br />

### Default
<Canvas>
    <Story of={LinkStories.Default} />
</Canvas>

### With icon
<Canvas>
    <Story of={LinkStories.WithIcon} />
</Canvas>

### Icon alignment
<Canvas>
    <Story of={LinkStories.WithIconAlignment} />
</Canvas>

### Icon only
<Canvas>
    <Story of={LinkStories.IconOnly} />
</Canvas>

### Sizes
<Canvas>
    <Story of={LinkStories.Sizes} />
</Canvas>

### External link
<Canvas>
    <Story of={LinkStories.ExternalLink} />
</Canvas>

### Custom icon
<Canvas>
    <Story of={LinkStories.CustomIcon} />
</Canvas>

### Mailto
<Canvas>
    <Story of={LinkStories.Mailto} />
</Canvas>

### Telephone
<Canvas>
    <Story of={LinkStories.Telephone} />
</Canvas>

### Anchor
<Canvas>
    <Story of={LinkStories.Anchor} />
</Canvas>

### Theme Links
<Canvas>
    <Story of={LinkStories.ThemeLinks} />
</Canvas>

### With extra icon content
<Canvas>
    <Story of={LinkStories.WithExtraIconContent} />
</Canvas>


## Usage Example
```jsx
import Link from '@appdirect/sfb-theme-components/src/atoms/link/Link';

<Link href="https://www.google.ca/">Google</Link>
```

## Props
<ArgsTable of={Link} /> 
